/* ============================================================
   SX Media: 视频展示模块 + 客户询盘表单
   静态包通用样式（8 语共用，RTL 自动镜像）
   ============================================================ */

/* ---------- 视频展示模块 ---------- */
.sx-videos{background:#f5f8fb;padding:56px 0}
.sx-videos .sx-sec-head{text-align:center;margin-bottom:34px}
.sx-videos .sx-sec-head h2{font-size:30px;line-height:1.3;color:#0b2e4f;margin:0 0 10px;font-weight:700}
.sx-videos .sx-sec-head p{font-size:15px;color:#5a6b7b;margin:0;max-width:760px;margin-inline:auto}
.sx-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1200px;margin:0 auto;padding:0 20px}
.sx-vcard{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(11,46,79,.09);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.sx-vcard:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(11,46,79,.16)}
.sx-vthumb{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#0b2e4f;overflow:hidden}
.sx-vthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.sx-vcard:hover .sx-vthumb img{transform:scale(1.05)}
.sx-vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,46,79,.22);transition:background .25s}
.sx-vcard:hover .sx-vplay{background:rgba(11,46,79,.1)}
.sx-vplay span{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .25s}
.sx-vcard:hover .sx-vplay span{transform:scale(1.08)}
.sx-vplay span::before{content:"";width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #0b2e4f;margin-inline-start:4px}
.sx-vbody{padding:16px 18px 20px}
.sx-vbody h3{font-size:16px;line-height:1.45;color:#0b2e4f;margin:0 0 6px;font-weight:600}
.sx-vbody p{font-size:13px;line-height:1.6;color:#6b7a89;margin:0}

/* 视频弹层 */
.sx-vlightbox{position:fixed;inset:0;background:rgba(4,14,26,.9);z-index:999999;display:none;align-items:center;justify-content:center;padding:24px}
.sx-vlightbox.sx-open{display:flex}
.sx-vlightbox > div{width:min(1000px,100%)}
.sx-vlightbox .sx-vl-inner{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.sx-vlightbox iframe{width:100%;height:100%;display:block;border:0}
.sx-vlightbox .sx-vl-close{position:absolute;top:-46px;inset-inline-end:0;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sx-vlightbox .sx-vl-close:hover{background:rgba(255,255,255,.26)}
.sx-vlightbox .sx-vl-cap{margin-top:14px;color:#dfe8f2;font-size:14px;text-align:center}

/* ---------- 客户询盘表单 ---------- */
/* 外层：极淡蓝到白的柔和渐变，避免出现生硬的灰色方块 */
.sx-inquiry{background:linear-gradient(180deg,#eef4fa 0%,#f8fbfd 55%,#ffffff 100%);padding:56px 0}
/* 内层：白色悬浮卡片，靠阴影与描边区分层次，不用灰色填充 */
.sx-inq-card{max-width:1200px;margin:0 auto;background:#fff;border:1px solid #e3ebf3;border-radius:20px;
  box-shadow:0 14px 44px rgba(11,46,79,.09);padding:40px 46px 44px;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.sx-inq-left h2{font-size:34px;line-height:1.28;color:#16324f;margin:0 0 20px;font-weight:700}
.sx-inq-left .sx-inq-sub{font-size:19px;line-height:1.45;color:#e0274b;font-weight:700;margin:0 0 8px}
.sx-inq-left .sx-inq-note{font-size:14px;line-height:1.7;color:#4c5a68;margin:0}
.sx-inq-left ul{margin:18px 0 0;padding-inline-start:20px}
.sx-inq-left li{font-size:14px;line-height:1.85;color:#4c5a68}
.sx-inq-form{display:flex;flex-direction:column;gap:16px}
.sx-inq-form label{display:block;font-size:13px;font-weight:600;color:#2b3b4c;margin-bottom:6px}
.sx-inq-form input[type=text],.sx-inq-form input[type=tel],.sx-inq-form input[type=email],.sx-inq-form textarea{
  width:100%;border:1px solid #dbe4ee;background:#fff;border-radius:10px;padding:14px 16px;font-size:15px;color:#1e2b38;
  font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.sx-inq-form input::placeholder,.sx-inq-form textarea::placeholder{color:#9aa8b6}
.sx-inq-form input:focus,.sx-inq-form textarea:focus{border-color:#1e88e5;box-shadow:0 0 0 3px rgba(30,136,229,.14)}
.sx-inq-form textarea{min-height:104px;resize:vertical}
.sx-inq-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sx-inq-actions{display:flex;justify-content:flex-end;margin-top:4px}
.sx-inq-send{background:#29c3e6;border:0;border-radius:999px;color:#fff;font-size:16px;font-weight:600;padding:13px 34px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:background .2s,transform .15s}
.sx-inq-send:hover{background:#1aa8c9;transform:translateY(-1px)}
.sx-inq-send .sx-arrow{font-size:18px;line-height:1}
.sx-inq-send[disabled]{opacity:.6;cursor:not-allowed;transform:none}
/* 蜜罐字段：用 clip 隐藏，避免 left:-9999px 在 RTL 下撑出横向滚动条 */
.sx-inq-hp{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.sx-inq-msg{display:none;font-size:14px;padding:11px 14px;border-radius:9px;line-height:1.6}
.sx-inq-msg.sx-ok{display:block;background:#e3f6ec;color:#12694a;border:1px solid #b6e5cf}
.sx-inq-msg.sx-err{display:block;background:#fdeaea;color:#a3251f;border:1px solid #f3c2c0}
.sx-inq-msg.sx-busy{display:block;background:#e8f1fc;color:#1b5aa3;border:1px solid #c3ddfa}

@media (max-width:1024px){
  .sx-vgrid{grid-template-columns:repeat(2,1fr)}
  .sx-inq-card{grid-template-columns:1fr;gap:28px;padding:32px 30px 36px}
  .sx-inq-left h2{font-size:28px}
}
@media (max-width:600px){
  .sx-videos{padding:40px 0}
  .sx-videos .sx-sec-head h2{font-size:23px}
  .sx-vgrid{grid-template-columns:1fr;gap:18px;padding:0 14px}
  .sx-inquiry{padding:34px 0}
  .sx-inq-card{padding:24px 18px 28px;border-radius:14px;gap:22px}
  .sx-inq-left h2{font-size:22px;line-height:1.34}
  .sx-inq-left .sx-inq-sub{font-size:16px}
  .sx-inq-row{grid-template-columns:1fr}
  .sx-inq-send{width:100%;justify-content:center}
}

/* ---------- RTL 修正：子菜单隐藏方式在 RTL 下会撑出横向滚动条 ---------- */
/* Astra 主CSS 用 left:-999em / right:auto 隐藏子菜单，RTL 下 right 未被重置，
   导致子菜单停在页面外侧并撑出横向滚动条。此处用 clip 隐藏，展开时恢复。 */
[dir="rtl"] .main-header-menu .sub-menu{left:auto;right:auto;clip-path:inset(50%)}
[dir="rtl"] .main-header-menu .menu-item.focus>.sub-menu,
[dir="rtl"] .main-header-menu .menu-item:hover>.sub-menu,
[dir="rtl"] .main-header-menu .menu-item>.sub-menu.toggled-on{left:0;right:0;clip-path:none}
[dir="rtl"] .main-header-menu .menu-item.focus>.sub-menu .sub-menu.toggled-on,
[dir="rtl"] .main-header-menu .menu-item:hover>.sub-menu .sub-menu.toggled-on,
[dir="rtl"] .main-header-menu .menu-item>.sub-menu.toggled-on .sub-menu.toggled-on{left:100%;right:auto;clip-path:inset(50%)}
[dir="rtl"] .main-header-menu .ast-left-align-sub-menu.focus>.sub-menu,
[dir="rtl"] .main-header-menu .ast-left-align-sub-menu:hover>.sub-menu{left:auto;right:0;clip-path:none}
[dir="rtl"] .main-header-menu .ast-sub-menu-goes-outside.focus>.sub-menu,
[dir="rtl"] .main-header-menu .ast-sub-menu-goes-outside:hover>.sub-menu{left:auto;right:-100%;clip-path:none}

/* ---------- 电脑版：去掉导航与首图之间的白色空隙 ---------- */
/* Astra 的 .ast-plain-container.ast-no-sidebar #primary 给正文区加了 60px 上下外边距，
   导致桌面端页头与首图之间出现一条白色空隙。首页有通栏首图，去掉上边距即可贴合。 */
@media (min-width:922px){
  body.home.ast-plain-container.ast-no-sidebar #primary{margin-top:0}
  /* RTL 语言的 article 额外带 32px 上边距，同样会顶出白条 */
  body.home.ast-plain-container.ast-no-sidebar #primary > main.site-main > article{margin-top:0}
}