/*
 * contact-pages.css —— 联系我们四页新版 ?new=1 测试页（销售 / 申请样品 / 技术支持 / 其他联系方式，正文由 app\service\ContactPages 输出）
 * 按 Claude Design「VOOHU 英文站联系我们」逐值还原：桌面 ≥1100、平板 700–1099、手机 <700 三档（设计稿自带的三档）。
 * 全部规则收在 #vh-ct 下（id 前缀压过站点通用样式），不影响页头页脚。
 * 内容宽度按全站约定（vh-layout.css）：<1440 为 1200 居中（两侧 24），≥1440 跟随内容列 --vh-page；不写 vw（≥2048 有 zoom）。
 * 字体：英文站用应用领域页同一套自托管 "VHAP Poppins"；国内站用全站的 Noto Sans SC（不加载 Poppins）。
 * 两张表单沿用现有表单的结构与脚本（申请样品 .sr-*，技术支持 .nctds_*），这里只给外观；技术支持表单不在 .nctds .nctds_box 里，
 * 站点 nc.css 的旧外观不套用。
 */

/* 站点外层 #page.dbox 的 overflow:hidden 会让吸顶标签栏失效，同核心能力页的做法 */
#page.dbox:has(#vh-ct) { overflow: clip; }
@keyframes l1spin { to { transform: rotate(360deg); } }

#vh-ct {
    --ct-red: #C30D23;
    --ct-red-hover: #8A0A18;
    --ct-red-hot: #E0213A;
    --ct-ink: #1A1A1A;
    --ct-muted: #565B63;
    --ct-rule: #E4E4E4;
    --ct-line: #C9C9C9;
    --ct-soft: #F4F4F4;
    --ct-pink: #FBE9EB;
    --ct-blush: #FFF5F6;
    --ct-cp: 28px;
    --ct-fp: 40px;
    position: relative;
    overflow-x: clip;
    background: #FFFFFF;
    color: var(--ct-ink);
    font-family: "VHAP Poppins", "Poppins", "Poppins Fallback", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}
html[lang|="zh"] #vh-ct { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
#vh-ct * { font-family: inherit; box-sizing: border-box; }
#vh-ct h1, #vh-ct h2, #vh-ct h3, #vh-ct p, #vh-ct ul, #vh-ct ol { margin: 0; padding: 0; }
#vh-ct ul, #vh-ct ol { list-style: none; }
#vh-ct a { color: var(--ct-red); text-decoration: none; }
#vh-ct a:hover { color: var(--ct-red-hover); }
#vh-ct img { display: block; max-width: none; }
#vh-ct b { font-weight: 600; }
#vh-ct svg { flex: none; }
#vh-ct button { font: inherit; }
#vh-ct :focus-visible { outline: 2px solid var(--ct-red); outline-offset: 3px; }
#vh-ct [data-tone="dark"] :focus-visible { outline-color: #FFFFFF; }
#vh-ct .ct-acc { color: var(--ct-red); }
/* 线框 3D 的引线标签：文字放在 data-ct-t 里由 CSS 显示（装饰，不进正文文字） */
#vh-ct [data-ct-t]::after { content: attr(data-ct-t); }

#vh-ct .ct-wrap { position: relative; max-width: 1248px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1440px) {
    html #vh-ct .ct-wrap { max-width: calc(var(--vh-page, 1240px) + 48px); }
}

/* ---------------------------------------------------------------- 按钮、眉题、标题 */
#vh-ct .ct-btns { display: flex; flex-wrap: wrap; gap: 12px; }
#vh-ct .ct-btn { height: 48px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; background: none; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
#vh-ct .ct-btn--lg { height: 52px; padding: 0 28px; }
#vh-ct .ct-btn--sm { height: 44px; }
#vh-ct .ct-btn--block { width: 100%; }
#vh-ct .ct-btn--red { background: var(--ct-red); color: #FFFFFF; }
#vh-ct .ct-btn--red:hover { background: var(--ct-red-hover); color: #FFFFFF; }
#vh-ct .ct-btn--line { border-color: var(--ct-red); background: #FFFFFF; color: var(--ct-red); }
#vh-ct .ct-btn--line:hover { background: var(--ct-red); color: #FFFFFF; }
#vh-ct .ct-btn--ghost { border-color: rgba(255, 255, 255, .5); background: transparent; color: #FFFFFF; }
#vh-ct .ct-btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); color: #FFFFFF; }
#vh-ct .ct-btn--white { background: #FFFFFF; color: var(--ct-red); }
#vh-ct .ct-btn--white:hover { background: var(--ct-pink); color: var(--ct-red-hover); }
#vh-ct .ct-btn--gray { border-color: var(--ct-line); background: #FFFFFF; color: var(--ct-ink); }
#vh-ct .ct-btn--gray svg { color: var(--ct-red); }
#vh-ct .ct-btn--gray:hover { border-color: var(--ct-red); color: var(--ct-red); }
#vh-ct .ct-arr { flex: none; transition: transform .25s ease; }
#vh-ct .ct-btn:hover .ct-arr { transform: translateX(4px); }
/* 提交类按钮：箭头由样式画（提交中脚本会改按钮文字，内联的箭头会丢） */
#vh-ct .ct-btn--arrow::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s ease; }
#vh-ct .ct-btn--arrow:hover::after { transform: translateX(4px); }

#vh-ct .ct-eyebrow { height: 16px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 3px; color: var(--ct-red); }
#vh-ct .ct-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#vh-ct .ct-sec { position: relative; padding: 72px 0; background: #FFFFFF; }
#vh-ct .ct-sec--soft { background: var(--ct-soft); }
#vh-ct .ct-h2 { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.01em; color: var(--ct-ink); text-wrap: balance; }
#vh-ct .ct-h2s { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; color: var(--ct-ink); text-wrap: balance; }
#vh-ct .ct-h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ct-ink); text-wrap: balance; }
#vh-ct .ct-head { display: flex; flex-direction: column; gap: 16px; }
#vh-ct .ct-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }

/* ---------------------------------------------------------------- S1 首屏 */
#vh-ct .ct-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 110% at 78% 50%, #2A1016 0%, #170A0E 45%, #0C0B0F 100%); color: #FFFFFF; }
#vh-ct .ct-hero-art { position: absolute; inset: 0; pointer-events: none; }
#vh-ct .ct-hero-in { z-index: 1; padding-top: 32px; padding-bottom: 72px; }
#vh-ct .ct-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .6); }
#vh-ct .ct-crumb li { display: flex; align-items: center; gap: 8px; }
#vh-ct .ct-crumb a { color: rgba(255, 255, 255, .6); }
#vh-ct .ct-crumb a:hover { color: #FFFFFF; }
#vh-ct .ct-crumb [aria-current] { font-weight: 500; color: #FFFFFF; }
#vh-ct .ct-hero-txt { margin-top: 48px; width: calc((100% - 264px) / 2 + 120px); min-width: 0; }
#vh-ct .ct-eyebrow--hero { height: auto; gap: 10px; font-weight: 700; color: #FFFFFF; }
#vh-ct .ct-eyebrow--hero .ct-dot { background: var(--ct-red-hot); }
#vh-ct .ct-h1 { margin-top: 20px; font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -.02em; color: #FFFFFF; text-wrap: balance; }
#vh-ct .ct-h1 .ct-acc { color: var(--ct-red-hot); }
@media (min-width: 1280px) { #vh-ct .ct-h1 { font-size: 48px; line-height: 56px; } }
@media (min-width: 1440px) { #vh-ct .ct-h1 { font-size: 52px; line-height: 60px; } }
@media (min-width: 1560px) { #vh-ct .ct-h1 { font-size: 56px; line-height: 64px; } }
#vh-ct .ct-lead { margin-top: 24px; max-width: 660px; font-size: 17px; line-height: 28px; color: rgba(255, 255, 255, .78); text-wrap: pretty; }
#vh-ct .ct-hero .ct-btns { margin-top: 32px; }
#vh-ct .ct-hero .ct-btn { height: 52px; padding: 0 28px; }

/* ---------------------------------------------------------------- S2 标签栏（四项各自是独立网址；吸顶，top = 站点固定页头下沿，由 JS 写进 --ct-top） */
#vh-ct .ct-tabs { position: sticky; top: var(--ct-top, 0px); z-index: 40; background: #FFFFFF; border-bottom: 1px solid var(--ct-rule); transition: box-shadow .25s ease; }
#vh-ct .ct-tabs.is-stuck { box-shadow: 0 8px 20px rgba(26, 26, 26, .08); }
#vh-ct .ct-tabs-scroll { overflow-x: auto; scrollbar-width: none; }
#vh-ct .ct-tabs-scroll::-webkit-scrollbar { display: none; }
#vh-ct .ct-tabs-row { position: relative; height: 72px; display: flex; align-items: stretch; }
#vh-ct .ct-tabs-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ct-ink); }
#vh-ct .ct-tab { position: relative; flex: 1 1 0; min-width: max-content; padding: 2px 20px 0 20px; display: flex; align-items: center; gap: 12px; color: var(--ct-ink); white-space: nowrap; transition: color .15s ease; }
#vh-ct .ct-tab:first-child { padding-left: 0; }
/* 当前项红条撑满整格（左右都到分隔竖线）；分隔竖线从顶线下面开始，不穿过顶线（2026-10-22 站长反馈） */
#vh-ct .ct-tab::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background .25s ease; }
#vh-ct .ct-tab + .ct-tab::after { content: ""; position: absolute; top: 2px; bottom: 0; left: 0; width: 1px; background: var(--ct-rule); }
#vh-ct .ct-tab:hover { color: var(--ct-red); }
#vh-ct .ct-tab-ico { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ct-soft); color: var(--ct-muted); transition: background .25s ease, color .25s ease; }
#vh-ct .ct-tab-tx { display: flex; flex-direction: column; gap: 2px; }
#vh-ct .ct-tab-no { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1px; color: var(--ct-muted); }
#vh-ct .ct-tab-t { font-size: 15px; line-height: 20px; font-weight: 500; }
#vh-ct .ct-tab.is-on { color: var(--ct-red); }
#vh-ct .ct-tab.is-on::before { background: var(--ct-red); }
#vh-ct .ct-tab.is-on .ct-tab-ico { background: var(--ct-red); color: #FFFFFF; }
#vh-ct .ct-tab.is-on .ct-tab-no { color: var(--ct-red); }
#vh-ct .ct-tab.is-on .ct-tab-t { font-weight: 600; }

/* ---------------------------------------------------------------- 联系卡（销售 / 技术支持 / 其他联系方式） */
#vh-ct .ct-split { margin-top: 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
#vh-ct .ct-split > .ct-cards { grid-column: 1 / 9; }
#vh-ct .ct-split > .ct-side { grid-column: 9 / 13; }
#vh-ct .ct-cards { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#vh-ct .ct-cards--grid { margin-top: 40px; }
#vh-ct .ct-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--ct-rule); border-radius: 10px; overflow: hidden; background: #FFFFFF; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
#vh-ct .ct-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26, 26, 26, .1); border-color: var(--ct-red); }
#vh-ct .ct-card-top { padding: var(--ct-cp) var(--ct-cp) 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#vh-ct .ct-card-id { min-width: 0; }
#vh-ct .ct-card-role { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ct-red); }
#vh-ct .ct-card-name { margin-top: 8px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ct-ink); text-wrap: balance; }
#vh-ct .ct-card-ico { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ct-pink); color: var(--ct-red); }
#vh-ct .ct-card-addr { margin: 16px var(--ct-cp) 0; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 22px; color: var(--ct-muted); text-wrap: pretty; }
#vh-ct .ct-card-addr svg { margin-top: 3px; color: var(--ct-red); }
#vh-ct .ct-card-addr b { color: var(--ct-ink); }
#vh-ct .ct-acts { margin-top: auto; padding: 24px var(--ct-cp) var(--ct-cp); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#vh-ct .ct-act { min-width: 0; min-height: 56px; padding: 8px 16px 8px 8px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--ct-rule); border-radius: 10px; background: #FFFFFF; color: var(--ct-ink); transition: border-color .2s ease, background .2s ease; }
#vh-ct .ct-act:hover { border-color: var(--ct-red); background: var(--ct-blush); color: var(--ct-ink); }
#vh-ct .ct-act-ico { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ct-ink); color: #FFFFFF; }
#vh-ct .ct-act-ico--red { background: var(--ct-red); }
#vh-ct .ct-act-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#vh-ct .ct-act-l { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ct-muted); }
#vh-ct .ct-act-v { font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
#vh-ct .ct-act-v--tel { white-space: nowrap; }
#vh-ct .ct-act .ct-arr { color: var(--ct-red); }
#vh-ct .ct-act:hover .ct-arr { transform: translateX(4px); }

/* 红底清单（联系销售时请附上 / FAE 可以帮你做什么） */
#vh-ct .ct-side { position: relative; overflow: hidden; min-width: 0; padding: var(--ct-cp); display: flex; flex-direction: column; border-radius: 10px; background: var(--ct-red); color: #FFFFFF; }
#vh-ct .ct-side-h { position: relative; font-size: 22px; line-height: 30px; font-weight: 600; color: #FFFFFF; text-wrap: balance; }
#vh-ct .ct-side-list { position: relative; margin-top: 20px; }
#vh-ct .ct-side-list li { padding: 14px 0; display: flex; align-items: flex-start; gap: 14px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: 15px; line-height: 24px; color: #FFFFFF; text-wrap: pretty; }
#vh-ct .ct-side-ico { flex: none; width: 28px; height: 28px; margin-top: -2px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFFFFF; color: var(--ct-red); }
#vh-ct .ct-side-btn { position: relative; margin-top: auto; padding-top: 24px; display: flex; }
#vh-ct .ct-side-btn .ct-btn { flex: 1; }

/* 国内站销售：区域筛选 + 三列紧凑卡 + 授权经销商通栏卡 + 横向红色清单 */
#vh-ct .ct-rhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
#vh-ct .ct-rhead > .ct-head { grid-column: 1 / 6; min-width: 0; }
#vh-ct .ct-chips { grid-column: 6 / 13; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#vh-ct .ct-chip { height: 40px; padding: 0 8px 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ct-rule); border-radius: 10px; background: #FFFFFF; color: var(--ct-ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
#vh-ct .ct-chip:hover { border-color: var(--ct-red); }
#vh-ct .ct-chip-n { min-width: 24px; height: 24px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ct-soft); color: var(--ct-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#vh-ct .ct-chip.is-on { border-color: var(--ct-red); background: var(--ct-red); color: #FFFFFF; }
#vh-ct .ct-chip.is-on .ct-chip-n { background: #FFFFFF; color: var(--ct-red); }
#vh-ct .ct-mini-list { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#vh-ct .ct-mini-list[hidden], #vh-ct .ct-mini-li[hidden], #vh-ct .ct-dist[hidden] { display: none; }
#vh-ct .ct-mini-li { min-width: 0; display: flex; }
#vh-ct .ct-card--mini { flex: 1; }
#vh-ct .ct-card--mini .ct-card-top { padding: 24px 24px 0; }
#vh-ct .ct-reg { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 10px; background: var(--ct-pink); font-size: 13px; font-weight: 600; color: var(--ct-red); }
#vh-ct .ct-card--mini .ct-card-name { margin-top: 12px; font-size: 18px; line-height: 26px; }
#vh-ct .ct-card-sub { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--ct-muted); }
#vh-ct .ct-card-ico--round { width: 44px; height: 44px; border-radius: 50%; background: var(--ct-soft); color: var(--ct-ink); }
#vh-ct .ct-card--mini .ct-acts { padding: 20px 24px 24px; gap: 10px; }
#vh-ct .ct-card--mini .ct-act, #vh-ct .ct-dist .ct-act { min-height: 52px; padding: 6px 14px 6px 6px; }
#vh-ct .ct-card--mini .ct-act-ico, #vh-ct .ct-dist .ct-act-ico { width: 38px; height: 38px; }
#vh-ct .ct-dist { margin-top: 24px; padding: var(--ct-cp); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: center; border: 1px solid #F2D5DA; border-radius: 10px; background: var(--ct-blush); }
#vh-ct .ct-dist-l { grid-column: 1 / 7; min-width: 0; display: flex; align-items: flex-start; gap: 16px; }
#vh-ct .ct-dist-ico { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ct-red); color: #FFFFFF; }
#vh-ct .ct-dist-id { min-width: 0; }
#vh-ct .ct-dist .ct-card-role { letter-spacing: 1px; }
#vh-ct .ct-dist .ct-card-name { margin-top: 6px; }
#vh-ct .ct-dist-addr { margin: 8px 0 0; gap: 8px; }
#vh-ct .ct-acts--2 { grid-column: 7 / 13; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#vh-ct .ct-strip { position: relative; overflow: hidden; margin-top: 40px; padding: var(--ct-cp); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; border-radius: 10px; background: var(--ct-red); color: #FFFFFF; }
#vh-ct .ct-strip-h { position: relative; flex: 0 0 auto; font-size: 20px; line-height: 28px; font-weight: 600; color: #FFFFFF; }
#vh-ct .ct-strip-list { position: relative; flex: 1 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; }
#vh-ct .ct-strip-list li { min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; color: #FFFFFF; }
#vh-ct .ct-strip-no { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFFFFF; color: var(--ct-red); font-size: 12px; font-weight: 700; }
#vh-ct .ct-strip-btn { position: relative; flex: none; }

/* ---------------------------------------------------------------- 表单通用（申请样品 / 技术支持） */
#vh-ct .ct-panel { min-width: 0; padding: var(--ct-fp); border: 1px solid var(--ct-rule); border-radius: 10px; background: #FFFFFF; box-shadow: 0 20px 48px rgba(26, 26, 26, .06); }
#vh-ct .ct-f { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#vh-ct .ct-f--wide { grid-column: 1 / -1; }
#vh-ct .ct-f label, #vh-ct .ct-f .nctds_ctitle { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ct-ink); }
#vh-ct .ct-req { margin-left: 2px; color: var(--ct-red); }
#vh-ct .ct-f input:not([type="checkbox"]):not([type="hidden"]), #vh-ct .ct-f textarea, #vh-ct .ct-f select { width: 100%; height: 48px; margin: 0; padding: 0 16px; border: 1px solid var(--ct-line); border-radius: 10px; background: #FFFFFF; font-size: 15px; line-height: 22px; color: var(--ct-ink); outline: none; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease; }
#vh-ct .ct-f textarea { height: auto; min-height: 112px; padding: 12px 16px; line-height: 24px; resize: vertical; }
#vh-ct .ct-f input::placeholder, #vh-ct .ct-f textarea::placeholder { color: #8C8C8C; opacity: 1; }
#vh-ct .ct-f input:focus, #vh-ct .ct-f textarea:focus, #vh-ct .ct-f select:focus { border-color: var(--ct-red); box-shadow: 0 0 0 3px rgba(195, 13, 35, .12); }
#vh-ct .ct-f [aria-invalid="true"] { border-color: var(--ct-red); }
#vh-ct .ct-code-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
#vh-ct .ct-f .ct-code-row input:not([type="hidden"]) { flex: 1 1 160px; width: auto; max-width: 260px; }
#vh-ct .ct-code-row .code_img { flex: none; width: 120px; height: 48px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--ct-rule); border-radius: 10px; background: var(--ct-soft); cursor: pointer; }
#vh-ct .ct-code-row .code_img img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------- 申请样品：表单卡 + 右栏（附件、提交之后） */
#vh-ct .ct-sr-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: start; }
#vh-ct .ct-sr-grid > .ct-formcard { grid-column: 1 / 9; }
#vh-ct .ct-aside { grid-column: 9 / 13; position: sticky; top: calc(var(--ct-top, 0px) + 96px); min-width: 0; display: flex; flex-direction: column; gap: 24px; }
#vh-ct .ct-srform .ct-h2s { margin-top: 16px; }
#vh-ct .ct-srform[hidden], #vh-ct .ct-success[hidden], #vh-ct .ct-srform .sr-grid[hidden], #vh-ct .ct-status[hidden] { display: none; }
#vh-ct .ct-rt { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#vh-ct .ct-rt-btn { position: relative; min-width: 0; padding: 20px 20px 20px 56px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--ct-rule); border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 0 rgba(195, 13, 35, 0); color: var(--ct-ink); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
#vh-ct .ct-rt-btn:hover { border-color: var(--ct-red); }
#vh-ct .ct-rt-dot { position: absolute; left: 20px; top: 22px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ct-line); border-radius: 50%; }
#vh-ct .ct-rt-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ct-red); opacity: 0; transition: opacity .2s ease; }
#vh-ct .ct-rt-t { font-size: 17px; line-height: 24px; font-weight: 600; }
#vh-ct .ct-rt-d { font-size: 14px; line-height: 22px; color: var(--ct-muted); text-wrap: pretty; }
#vh-ct .ct-rt-btn[aria-selected="true"] { border-color: var(--ct-red); background: var(--ct-blush); box-shadow: 0 0 0 3px rgba(195, 13, 35, .1); }
#vh-ct .ct-rt-btn[aria-selected="true"] .ct-rt-dot { border-color: var(--ct-red); }
#vh-ct .ct-rt-btn[aria-selected="true"] .ct-rt-dot::after { opacity: 1; }
#vh-ct .ct-fgrid { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
#vh-ct .ct-fgrid--who { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--ct-rule); }
#vh-ct .ct-status { margin-top: 24px; padding: 12px 16px; border-radius: 10px; background: var(--ct-blush); font-size: 14px; line-height: 22px; color: var(--ct-red); }
#vh-ct .ct-srform .sr-submit { margin-top: 32px; }
#vh-ct .ct-srform .sr-submit:disabled { cursor: progress; opacity: .75; }
#vh-ct .ct-privacy { margin-top: 24px; padding: 20px; border-radius: 10px; background: var(--ct-soft); }
#vh-ct .ct-privacy p { font-size: 14px; line-height: 22px; color: var(--ct-muted); text-wrap: pretty; }
#vh-ct .ct-privacy p a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#vh-ct .ct-privacy .ct-btns { margin-top: 16px; }
#vh-ct .ct-success { padding: 16px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; outline: none; }
#vh-ct .ct-success-mark { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ct-red); color: #FFFFFF; box-shadow: 0 0 0 8px var(--ct-pink); }
#vh-ct .ct-success .ct-h2s { margin-top: 8px; }
#vh-ct .ct-success p { font-size: 16px; line-height: 26px; color: var(--ct-muted); }
#vh-ct .ct-success .ct-btn { margin-top: 8px; }
#vh-ct .ct-attach { padding: var(--ct-cp); border-radius: 10px; background: var(--ct-soft); }
#vh-ct .ct-attach-ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #FFFFFF; color: var(--ct-red); }
#vh-ct .ct-attach .ct-h3 { margin-top: 20px; }
#vh-ct .ct-attach-p { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--ct-muted); text-wrap: pretty; overflow-wrap: anywhere; }
#vh-ct .ct-attach .ct-btn { margin-top: 20px; }
#vh-ct .ct-attach .ct-btn span { overflow: hidden; text-overflow: ellipsis; }
#vh-ct .ct-next { padding: var(--ct-cp); border: 1px solid var(--ct-rule); border-radius: 10px; background: #FFFFFF; }
#vh-ct .ct-steps { margin-top: 24px; }
#vh-ct .ct-steps li { position: relative; padding: 0 0 24px 48px; }
#vh-ct .ct-steps li:last-child { padding-bottom: 0; }
#vh-ct .ct-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: #F2D5DA; }
#vh-ct .ct-step-no { position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ct-red); color: #FFFFFF; font-size: 13px; font-weight: 700; }
#vh-ct .ct-step-t { margin-top: 4px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ct-ink); }
#vh-ct .ct-step-d { margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--ct-muted); text-wrap: pretty; }

/* ---------------------------------------------------------------- 技术支持：提交技术问题（现有联系表单，左栏吸顶说明 + 右栏白卡） */
#vh-ct .ct-tf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start; }
#vh-ct .ct-tf-side { grid-column: 1 / 6; position: sticky; top: calc(var(--ct-top, 0px) + 96px); min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#vh-ct .ct-tf-p { font-size: 16px; line-height: 26px; color: var(--ct-muted); text-wrap: pretty; }
#vh-ct .ct-tf-card { grid-column: 7 / 13; }
#vh-ct .ct-tform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
#vh-ct .ct-tform .nctds_clist { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#vh-ct .ct-tform .nc_select_ul, #vh-ct .ct-tform .nctds_clist > .fa { display: none; }
#vh-ct .ct-tform select.cf-select { padding-right: 44px; -webkit-appearance: none; appearance: none; cursor: pointer; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C30D23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 16px no-repeat; }
#vh-ct .ct-tform .nctds_cookbox { display: flex; align-items: flex-start; gap: 10px; }
#vh-ct .ct-tform .nctds_cookbox input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ct-red); cursor: pointer; }
#vh-ct .ct-tform .h_check { display: none; }
#vh-ct .ct-tform .nctds_cook { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ct-muted); cursor: pointer; }
#vh-ct .ct-tform .nctds_cook a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#vh-ct .ct-tform .nctds_submit { flex-direction: row; margin-top: 8px; }
#vh-ct .ct-tform button[type="submit"][aria-disabled="true"] { cursor: progress; opacity: .75; }
/* contact-form.js 的行内错误与状态区（contact-form.css 给了基础样式，这里对齐本版式） */
#vh-ct .ct-tform .cf-error { margin: 0; padding: 0; font-size: 13px; line-height: 20px; color: var(--ct-red); text-align: left; }
#vh-ct .ct-tform .cf-invalid input:not([type="checkbox"]), #vh-ct .ct-tform .cf-invalid select, #vh-ct .ct-tform .cf-invalid textarea { border-color: var(--ct-red); }
#vh-ct .ct-tform .cf-invalid input[type="checkbox"] { outline: 2px solid var(--ct-red); outline-offset: 2px; }
#vh-ct .ct-tform > .cf-status { grid-column: 1 / -1; margin: 0; text-align: left; }

/* ---------------------------------------------------------------- 问答（左栏吸顶，右栏细线列表） */
#vh-ct .ct-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start; }
#vh-ct .ct-faq-side { grid-column: 1 / 6; position: sticky; top: calc(var(--ct-top, 0px) + 96px); min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#vh-ct .ct-faq-side .ct-btns { margin-top: 16px; }
#vh-ct .ct-faq-list { grid-column: 7 / 13; min-width: 0; border-top: 2px solid var(--ct-ink); }
#vh-ct .ct-q { border-bottom: 1px solid #DADDE1; }
#vh-ct .ct-q-h { font-size: 18px; line-height: 26px; font-weight: 600; }
#vh-ct .ct-q-btn { width: 100%; min-height: 72px; padding: 20px 0; display: flex; align-items: center; gap: 24px; border: 0; background: none; font-size: inherit; line-height: inherit; font-weight: inherit; color: var(--ct-ink); text-align: left; cursor: pointer; transition: color .15s ease; }
#vh-ct .ct-q-btn:hover, #vh-ct .ct-q.is-open .ct-q-btn { color: var(--ct-red); }
#vh-ct .ct-q-t { flex: 1; min-width: 0; text-wrap: pretty; }
#vh-ct .ct-q-ico { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--ct-line); border-radius: 10px; background: #FFFFFF; transition: border-color .2s ease, background .2s ease; }
#vh-ct .ct-q-ico::before, #vh-ct .ct-q-ico::after { content: ""; position: absolute; background: var(--ct-ink); }
#vh-ct .ct-q-ico::before { left: 9px; right: 9px; top: 14px; height: 2px; }
#vh-ct .ct-q-ico::after { top: 9px; bottom: 9px; left: 14px; width: 2px; }
#vh-ct .ct-q.is-open .ct-q-ico { border-color: var(--ct-red); background: var(--ct-red); }
#vh-ct .ct-q.is-open .ct-q-ico::before { background: #FFFFFF; }
#vh-ct .ct-q.is-open .ct-q-ico::after { display: none; }
#vh-ct .ct-a { padding: 0 56px 24px 0; font-size: 15px; line-height: 26px; color: var(--ct-muted); text-wrap: pretty; }
#vh-ct .ct-a[hidden] { display: none; }

/* ---------------------------------------------------------------- 技术支持：提问之前（整卡链接） */
#vh-ct .ct-self { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#vh-ct .ct-self li { min-width: 0; display: flex; }
#vh-ct .ct-selfcard { flex: 1; min-width: 0; padding: var(--ct-cp); display: flex; flex-direction: column; gap: 24px; border: 1px solid var(--ct-rule); border-radius: 10px; background: #FFFFFF; color: var(--ct-ink); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
#vh-ct .ct-selfcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26, 26, 26, .1); border-color: var(--ct-red); color: var(--ct-ink); }
#vh-ct .ct-selfcard-ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ct-pink); color: var(--ct-red); }
#vh-ct .ct-selfcard-t { flex: 1; font-size: 18px; line-height: 27px; font-weight: 600; text-wrap: pretty; }
#vh-ct .ct-selfcard-go { align-self: flex-start; width: 48px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ct-red); border-radius: 10px; background: #FFFFFF; color: var(--ct-red); transition: background .2s ease, color .2s ease; }
#vh-ct .ct-selfcard:hover .ct-selfcard-go { background: var(--ct-red); color: #FFFFFF; }
#vh-ct .ct-selfcard:hover .ct-arr { transform: translateX(4px); }

/* ---------------------------------------------------------------- 询盘条（销售） */
#vh-ct .ct-cta-sec { padding: 64px 0; }
#vh-ct .ct-cta { padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; border: 1px solid var(--ct-rule); border-radius: 10px; background: #FFFFFF; }
#vh-ct .ct-cta-l { flex: 1 1 480px; min-width: 0; display: flex; align-items: flex-start; gap: 20px; }
#vh-ct .ct-cta-ico { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ct-pink); color: var(--ct-red); }
#vh-ct .ct-cta-tx { min-width: 0; }
#vh-ct .ct-cta-h { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; color: var(--ct-ink); text-wrap: balance; }
#vh-ct .ct-cta-tx p { margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--ct-muted); text-wrap: pretty; }
#vh-ct .ct-cta .ct-btns { flex: none; }
#vh-ct .ct-cta .ct-btn { height: 52px; padding: 0 28px; }

/* ---------------------------------------------------------------- 平板 700–1099 */
@media (max-width: 1099px) {
    #vh-ct { --ct-cp: 24px; --ct-fp: 32px; }
    #vh-ct .ct-hero-in { padding-top: 24px; padding-bottom: 48px; }
    #vh-ct .ct-hero-txt { margin-top: 24px; width: auto; }
    #vh-ct .ct-h1 { font-size: 40px; line-height: 48px; }
    #vh-ct .ct-lead { font-size: 16px; }
    #vh-ct .ct-tabs-row { height: 64px; }
    #vh-ct .ct-tab { flex: none; }
    #vh-ct .ct-sec { padding: 56px 0; }
    #vh-ct .ct-h2 { font-size: 32px; line-height: 40px; }
    #vh-ct .ct-h2s { font-size: 24px; line-height: 32px; }
    #vh-ct .ct-split, #vh-ct .ct-rhead, #vh-ct .ct-sr-grid, #vh-ct .ct-tf-grid, #vh-ct .ct-faq, #vh-ct .ct-dist { grid-template-columns: minmax(0, 1fr); }
    #vh-ct .ct-split > .ct-cards, #vh-ct .ct-split > .ct-side, #vh-ct .ct-rhead > .ct-head, #vh-ct .ct-chips,
    #vh-ct .ct-sr-grid > .ct-formcard, #vh-ct .ct-aside, #vh-ct .ct-tf-side, #vh-ct .ct-tf-card,
    #vh-ct .ct-faq-side, #vh-ct .ct-faq-list, #vh-ct .ct-dist-l, #vh-ct .ct-acts--2 { grid-column: auto; }
    #vh-ct .ct-chips { justify-content: flex-start; }
    #vh-ct .ct-aside, #vh-ct .ct-tf-side, #vh-ct .ct-faq-side { position: static; }
    #vh-ct .ct-mini-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #vh-ct .ct-strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #vh-ct .ct-self { grid-template-columns: minmax(0, 1fr); }
    #vh-ct .ct-cta-sec { padding: 48px 0; }
    #vh-ct .ct-cta { padding: 24px; }
    #vh-ct .ct-cta-h { font-size: 24px; line-height: 32px; }
}

/* ---------------------------------------------------------------- 手机 <700 */
@media (max-width: 699px) {
    #vh-ct { --ct-fp: 20px; }
    #vh-ct .ct-wrap { padding: 0 16px; }
    #vh-ct .ct-btn { padding: 0 20px; }
    #vh-ct .ct-hero-in { padding-top: 16px; padding-bottom: 36px; }
    #vh-ct .ct-h1 { font-size: 30px; line-height: 38px; }
    #vh-ct .ct-hero .ct-btn { padding: 0 20px; }
    /* 同一组按钮一行放不下时各自撑满整行，不留一长一短 */
    #vh-ct .ct-btns > .ct-btn { flex: 1 1 auto; }
    #vh-ct .ct-sec { padding: 48px 0; }
    #vh-ct .ct-h2 { font-size: 28px; line-height: 36px; }
    #vh-ct .ct-cards, #vh-ct .ct-mini-list, #vh-ct .ct-strip-list, #vh-ct .ct-rt, #vh-ct .ct-fgrid, #vh-ct .ct-tform, #vh-ct .ct-acts--2 { grid-template-columns: minmax(0, 1fr); }
    #vh-ct .ct-f--wide { grid-column: auto; }
    #vh-ct .ct-a { padding: 0 0 24px; }
    #vh-ct .ct-cta-l { flex-basis: 100%; }
    #vh-ct .ct-cta .ct-btns { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #vh-ct *, #vh-ct *::before, #vh-ct *::after { transition-duration: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 国内站中文版：中文标题不用英文的负字距 */
html[lang|="zh"] #vh-ct .ct-h1, html[lang|="zh"] #vh-ct .ct-h2 { letter-spacing: 0; }