/**
 * 首页 vtwo 壳层（页头 / Menu / 页脚 / 右侧悬浮）
 * 仅 body.vtwo-page 生效；容器对齐全站 --yw-container-max（默认 1920）。
 */

body.vtwo-page {
  --vtwo-container-max: var(--yw-container-max, 1920px);
  /* 用单位长度相除，避免火狐对嵌套 var 解析异常 */
  --vtwo-ui-scale: clamp(0.85, 100vw / 1920px, 1);
  --vtwo-header-pad-x: 48px;
  --vtwo-header-gap: clamp(8px, 1.4vw, 20px);
  --vtwo-logo-max: calc(360px * var(--vtwo-ui-scale));
  --vtwo-search-max: calc(720px * var(--vtwo-ui-scale));
  --vtwo-nav-font: max(14px, calc(16px * var(--vtwo-ui-scale)));
  --vtwo-nav-h: max(42px, calc(47px * var(--vtwo-ui-scale)));
  --vtwo-sidebar-w: 82px;
  --vtwo-sidebar-gap: 12px;
  --vtwo-ink: #111111;
  --vtwo-line: #e5e5e5;
  --vtwo-muted: #666666;
  --bg-topbar: #111111;
  --bg-topbar-hover: #222222;
  --text-topbar: #ffffff;
  --text-topbar-hover: #ffffff;
  --border-topbar-divider: rgba(255, 255, 255, 0.28);
  /* 首页顶洗：浅灰→白，灰色约 30% 不透明度 */
  --bg-page: #ffffff;
  --bg-page-top-wash: linear-gradient(
    to bottom,
    rgba(232, 232, 232, 0.3) 0%,
    rgba(239, 239, 239, 0.22) 16%,
    rgba(245, 245, 245, 0.12) 42%,
    rgba(255, 255, 255, 0) 68%,
    rgba(255, 255, 255, 0) 100%
  );
  background-color: var(--bg-page, #ffffff) !important;
  background-image: var(--bg-page-top-wash) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 360px !important;
  background-position: top center !important;
}

/* .appcontainer 同步浅灰→白渐变（覆盖 .vtwo 实色底） */
body.vtwo-page .appcontainer,
body.vtwo-page .appcontainer.vtwo {
  background-color: var(--bg-page, #ffffff) !important;
  background-image: var(--bg-page-top-wash) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 360px !important;
  background-position: top center !important;
}

/* 页头/导航黑白主色（仅 vtwo-page，不改旧站）
 * 首页原 .nav 无 bg-solid、链接色为白（叠在 Banner 上）；vtwo 已去掉 Banner，必须强制白底黑字。 */
body.vtwo-page .topbar,
body.vtwo-page .topbar .container,
body.vtwo-page .topbar .center,
body.vtwo-page .topbar .topbar-left,
body.vtwo-page .topbar .topbar-right {
  background: #111 !important;
  background-color: #111 !important;
  background-image: none !important;
  color: #fff !important;
}

body.vtwo-page .header {
  background: #fff !important;
  border-bottom: 1px solid var(--vtwo-line);
  overflow: visible !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  min-height: 0 !important;
  height: auto !important;
}

body.vtwo-page .nav,
body.vtwo-page .nav.bg-solid {
  background: #fff !important;
  background-image: none !important;
  border-top: 1px solid #eee;
  color: var(--vtwo-ink) !important;
}

/* 覆盖 --text-nav-hover/#fff：否则只见 Hot/New 标签、菜单文字不可见 */
body.vtwo-page .nav .nav-item > li > a,
body.vtwo-page .nav .nav-item > li .el-dropdown > a,
body.vtwo-page .nav .nav-item > li .el-dropdown .el-dropdown-selfdefine {
  color: #111 !important;
}

body.vtwo-page .nav .nav-item > li.now > a,
body.vtwo-page .nav .nav-item > li.active > a,
body.vtwo-page .nav .nav-item > li:hover > a,
body.vtwo-page .nav .nav-item > li:hover .el-dropdown > a,
body.vtwo-page .nav .nav-item > li.chose > a {
  color: #000 !important;
}

body.vtwo-page .nav .nav-item > li:hover,
body.vtwo-page .nav .nav-item > li.chose {
  background: #f5f5f5 !important;
}

body.vtwo-page .nav .nav-item > li > a:before {
  background-color: #111 !important;
}

body.vtwo-page .footer {
  background: #fff;
  border-top: 1px solid var(--vtwo-line);
  color: var(--vtwo-muted);
}

/* ========== Topbar ========== */
body.vtwo-page .topbar {
  width: 100%;
  box-sizing: border-box;
}

body.vtwo-page .topbar .container,
body.vtwo-page .topbar .center {
  width: 100%;
  max-width: var(--vtwo-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vtwo-header-pad-x);
  padding-right: var(--vtwo-header-pad-x);
  box-sizing: border-box;
}

/* ========== Header 搜索条 ========== */
body.vtwo-page .header {
  width: 100%;
  box-sizing: border-box;
}

body.vtwo-page .header-search-wrap,
body.vtwo-page .header .common-header,
body.vtwo-page .header .clearfix-menu,
body.vtwo-page header-search-bar.clearfix-menu,
body.vtwo-page header-search-bar.container,
body.vtwo-page .header .container {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px var(--vtwo-header-gap);
  width: 100%;
  max-width: var(--vtwo-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--vtwo-header-pad-x);
  padding-right: var(--vtwo-header-pad-x);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

body.vtwo-page .header-search-wrap .logo,
body.vtwo-page .header .common-header .logo,
body.vtwo-page .header .logo {
  flex: 0 1 auto;
  max-width: var(--vtwo-logo-max);
  min-width: 0;
}

/* vtwo 页头不再保留搜索框（主体 Hero 已有查询） */
body.vtwo-page .header-search-wrap .search,
body.vtwo-page .header .common-header .search,
body.vtwo-page .header .search,
body.vtwo-page .header .search-tabs,
body.vtwo-page .header .search-box,
body.vtwo-page .mini-header .search {
  display: none !important;
}

body.vtwo-page .header-search-wrap > .portal-entry,
body.vtwo-page .header .portal-entry {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
}

body.vtwo-page .header-search-wrap .contact,
body.vtwo-page .header .contact,
body.vtwo-page .header-search-wrap .sale-btn,
body.vtwo-page .header .sale-btn {
  align-self: center;
}

body.vtwo-page .header .mini-header .container,
body.vtwo-page .header .mini-header .clearfix-menu {
  max-width: var(--vtwo-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ========== Menu / 主导航：背景全宽，文字区 1920 居中 ========== */
body.vtwo-page .nav {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-height: var(--vtwo-nav-h);
  line-height: var(--vtwo-nav-h);
  font-size: var(--vtwo-nav-font);
  box-sizing: border-box;
}

body.vtwo-page .nav .menu-down {
  width: 100%;
  max-width: var(--vtwo-container-max) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vtwo-header-pad-x);
  padding-right: var(--vtwo-header-pad-x);
  box-sizing: border-box;
}

body.vtwo-page .nav .nav-item.center,
body.vtwo-page .nav .nav-item {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

body.vtwo-page .nav .menu-hd-child .menu-down-cont,
body.vtwo-page .nav .menu-dropdown {
  max-width: var(--vtwo-container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ========== Footer ========== */
body.vtwo-page .footer {
  width: 100%;
  box-sizing: border-box;
}

body.vtwo-page .footer .link,
body.vtwo-page .footer .friendly-link,
body.vtwo-page .footer .infomation,
body.vtwo-page .footer .center,
body.vtwo-page .footer .container,
body.vtwo-page .footer .no-login-prompt {
  width: 100%;
  max-width: var(--vtwo-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--vtwo-header-pad-x);
  padding-right: var(--vtwo-header-pad-x);
  box-sizing: border-box;
}

/* ========== 右侧 / 底部悬浮：有空间则落在 1920 容器外侧 ========== */
body.vtwo-page .right-sidebar {
  position: fixed;
  left: auto !important;
  /* 宽屏：贴 1920 右缘外侧；空间不足时退回视口右侧 12px（允许覆盖） */
  right: max(
    12px,
    calc(
      (100vw - var(--vtwo-container-max)) / 2
      - var(--vtwo-sidebar-w)
      - var(--vtwo-sidebar-gap)
    )
  ) !important;
  top: 50%;
  margin: 0;
  z-index: 99;
  pointer-events: none;
  transform: translateY(-50%);
  transition: right 0.3s ease, transform 0.3s ease;
}

body.vtwo-page .right-sidebar ul,
body.vtwo-page .right-sidebar li {
  pointer-events: auto;
}

/* 覆盖旧站 ≤1620 强制贴边规则：vtwo 始终按 1920 公式计算 */
@media (max-width: 1620px) {
  body.vtwo-page .right-sidebar {
    right: max(
      12px,
      calc(
        (100vw - var(--vtwo-container-max)) / 2
        - var(--vtwo-sidebar-w)
        - var(--vtwo-sidebar-gap)
      )
    ) !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 1199px) {
  body.vtwo-page {
    --vtwo-header-pad-x: 32px;
  }
}

@media (max-width: 991px) {
  body.vtwo-page {
    --vtwo-header-pad-x: 24px;
  }
}

@media (max-width: 767px) {
  body.vtwo-page {
    --vtwo-header-pad-x: 16px;
  }

  body.vtwo-page .right-sidebar {
    right: 8px !important;
  }
}

/* ========== 暗黑模式：壳层跟随 html.dark（覆盖浅色 !important） ========== */
html.dark body.vtwo-page {
  --vtwo-ink: var(--text-primary, #e0e0e0);
  --vtwo-line: var(--border-default, rgba(255, 255, 255, 0.15));
  --vtwo-muted: var(--text-secondary, #b0b0b0);
  --bg-topbar: #1a1a1a;
  --bg-topbar-hover: #2d2d2d;
  --text-topbar: #e0e0e0;
  --text-topbar-hover: #ffffff;
  --border-topbar-divider: rgba(255, 255, 255, 0.2);
  --bg-page: #121212;
  --bg-page-top-wash: none;
  background-color: var(--bg-page, #121212) !important;
  background-image: none !important;
  color: var(--text-primary, #e0e0e0);
}

html.dark body.vtwo-page .appcontainer,
html.dark body.vtwo-page .appcontainer.vtwo {
  background-color: var(--bg-page, #121212) !important;
  background-image: none !important;
}

html.dark body.vtwo-page .topbar,
html.dark body.vtwo-page .topbar .container,
html.dark body.vtwo-page .topbar .center,
html.dark body.vtwo-page .topbar .topbar-left,
html.dark body.vtwo-page .topbar .topbar-right {
  background: var(--bg-topbar, #1a1a1a) !important;
  background-color: var(--bg-topbar, #1a1a1a) !important;
  color: var(--text-topbar, #e0e0e0) !important;
}

html.dark body.vtwo-page .header {
  background: var(--bg-header, #1a1a1a) !important;
  border-bottom-color: var(--border-default, rgba(255, 255, 255, 0.15)) !important;
}

html.dark body.vtwo-page .nav,
html.dark body.vtwo-page .nav.bg-solid {
  background: var(--bg-nav-solid, #1f1f23) !important;
  border-top-color: var(--border-nav-top, rgba(255, 255, 255, 0.12)) !important;
  color: var(--text-nav, #e0e0e0) !important;
}

html.dark body.vtwo-page .nav .nav-item > li > a,
html.dark body.vtwo-page .nav .nav-item > li .el-dropdown > a,
html.dark body.vtwo-page .nav .nav-item > li .el-dropdown .el-dropdown-selfdefine {
  color: #e6e6e6 !important;
}

html.dark body.vtwo-page .nav .nav-item > li.now > a,
html.dark body.vtwo-page .nav .nav-item > li.active > a,
html.dark body.vtwo-page .nav .nav-item > li:hover > a,
html.dark body.vtwo-page .nav .nav-item > li:hover .el-dropdown > a,
html.dark body.vtwo-page .nav .nav-item > li.chose > a {
  color: #fff !important;
}

html.dark body.vtwo-page .nav .nav-item > li:hover,
html.dark body.vtwo-page .nav .nav-item > li.chose {
  background: #2a2a2a !important;
}

html.dark body.vtwo-page .nav .nav-item > li > a:before {
  background-color: #fff !important;
}

/* 新站点入口（体验新版）：黑白 */
body.vtwo-page .header .portal-entry,
body.vtwo-page .header-search-wrap > .portal-entry {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

body.vtwo-page .header .portal-entry:hover,
body.vtwo-page .header-search-wrap > .portal-entry:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

html.dark body.vtwo-page .header .portal-entry,
html.dark body.vtwo-page .header-search-wrap > .portal-entry {
  background: #f2f2f2 !important;
  border-color: #f2f2f2 !important;
  color: #111 !important;
}

html.dark body.vtwo-page .header .portal-entry:hover,
html.dark body.vtwo-page .header-search-wrap > .portal-entry:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}

html.dark body.vtwo-page .header .portal-entry:focus,
html.dark body.vtwo-page .header .portal-entry:focus-visible,
html.dark body.vtwo-page .header-search-wrap > .portal-entry:focus,
html.dark body.vtwo-page .header-search-wrap > .portal-entry:focus-visible {
  outline: 2px solid #f2f2f2 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(242, 242, 242, 0.35);
}

html.dark body.vtwo-page .header .contact .infos .number,
html.dark body.vtwo-page .header .contact .infos .number strong,
html.dark body.vtwo-page .header .contact.blue,
html.dark body.vtwo-page .header .contact .blue,
html.dark body.vtwo-page .header .contact a.blue {
  color: #e8e8e8 !important;
}

html.dark body.vtwo-page .header .contact .infos .time {
  color: #a0a0a0 !important;
}

html.dark body.vtwo-page .header .contact .icons .iconfont {
  color: #9ec5f8 !important;
}

html.dark body.vtwo-page .nav .menu-hd-child .menu-down-cont,
html.dark body.vtwo-page .nav .menu-hd-child .menu-dropdown,
html.dark body.vtwo-page .nav-single-sub-items.el-dropdown-menu,
html.dark body.vtwo-page .nav-single-sub-items {
  background: #1a1a1a !important;
  border-color: #333 !important;
  color: #e6e6e6 !important;
}

html.dark body.vtwo-page .nav .menu-hd-child .menu-dropdown li a,
html.dark body.vtwo-page .nav-single-sub-items .el-dropdown-menu__item,
html.dark body.vtwo-page .nav-single-sub-item {
  color: #e6e6e6 !important;
}

html.dark body.vtwo-page .nav .menu-hd-child .menu-dropdown li a:hover,
html.dark body.vtwo-page .nav-single-sub-items .el-dropdown-menu__item:hover,
html.dark body.vtwo-page .nav-single-sub-item:hover {
  background: #2a2a2a !important;
  color: #fff !important;
}

html.dark body.vtwo-page .footer {
  background: #0d0d0d !important;
  border-top-color: #2a2a2a !important;
  color: #a0a0a0 !important;
}

html.dark body.vtwo-page .footer a {
  color: #c8c8c8;
}

html.dark body.vtwo-page .footer a:hover {
  color: #fff;
}

html.dark body.vtwo-page .right-sidebar li {
  background: #1a1a1a !important;
  border-color: #333 !important;
  color: #ddd !important;
}

/* 右侧「新版」入口：黑白，覆盖暗色 li */
body.vtwo-page .right-sidebar li.portal-float-li {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

html.dark body.vtwo-page .right-sidebar li.portal-float-li {
  background: #f2f2f2 !important;
  border-color: #f2f2f2 !important;
  color: #111 !important;
}

html.dark body.vtwo-page .right-sidebar li.portal-float-li .icons,
html.dark body.vtwo-page .right-sidebar li.portal-float-li .tit,
html.dark body.vtwo-page .right-sidebar li.portal-float-li .icon,
html.dark body.vtwo-page .right-sidebar li.portal-float-li .iconfont {
  color: #111 !important;
  fill: #111 !important;
}