.elementor .hk-x-hero{max-width:1600px;flex-direction:row;justify-content:center;align-items:center;/* ============================================================================
 HONGKAI Hero 区 CSS · FINAL
 ----------------------------------------------------------------------------
 贴哪：Hero 最外层 Flexbox → 样式 → Custom CSS
       ⚠ 整段替换，把之前的 v2 + 压平补丁 + 修正补丁全部删掉
       ⚠ 只存在一个槽里（建议 hk-x-hero），别在 local 和 class 之间来回切

 本版相对上一版的变化：
   · 合并三层补丁，.hk-x-board / byline 不再重复定义、互相覆盖
   · 图片撑满右栏（之前卡片 880px、图片只有 695px）
   · 去掉 Hero 容器的边框（正文上方那条横线）
   · 版心 1400px、图片 16:9（沿用你的选择，见第 1、7 节的注释）

 Elementor 结构前提（已按真实 DOM 校对）：
   hk-x-hero + hk-x-hero-row     最外层 Flexbox
     ├ hk-x-hero-left            左栏 Flexbox
     │   └ 内层 Flexbox（无需 class）
     │       ├ hk-crumb          面包屑
     │       ├ HTML              .hk-eyebrow
     │       ├ hk-h1             文章标题
     │       ├ hk-dek            文章摘要
     │       ├ hk-x-byline       容器（boxed，内部自带 .e-con-inner）
     │       │   ├ hk-x-byline-who    ├ hk-x-avatar
     │       │   │                    └ hk-x-names ── hk-x-t1 / hk-x-t2
     │       │   └ hk-x-byline-meta   ├ 文章信息
     │       │                        └ HTML  
     │       └ HTML              .hk-hero-cta
     └ hk-x-hero-right           右栏 Flexbox
         └ hk-x-board            容器（boxed）── 特色图像

 不使用 :root / var()，颜色全部写死，不受作用域影响。
 ============================================================================ */


/* ==========================================================================
 1. 版心与两列
 Elementor V4 容器默认 width:100% / flex-direction:column / margin-inline:auto，
 所以下面几乎每条都要 !important。
 ⚙ 版心宽度旋钮：1400 → 想更窄改 1200
 ========================================================================== */
.hk-x-hero {
width: 100% !important;
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 40px 24px 96px !important;
border: 0 !important;              /* 正文上方那条横线的来源 */
}

.hk-x-hero-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 64px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border: 0 !important;
}

/* ⚙ 左右比例旋钮：58 : 42。想让配图更大就改成 54 : 46 */
.hk-x-hero-left {
flex: 58 1 0 !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
border: 0 !important;
}
.hk-x-hero-right {
flex: 42 1 0 !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
border: 0 !important;
align-self: flex-start !important;
}

/* 防溢出兜底 */
.hk-x-hero, .hk-x-hero * { min-width: 0; }
.hk-x-hero img { max-width: 100%; }


/* ==========================================================================
 2. 面包屑
 ========================================================================== */
.hk-crumb,
.hk-crumb * {
font-family: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace !important;
font-size: 12px !important;
letter-spacing: .08em !important;
color: #7B8493 !important;
text-transform: uppercase;
line-height: 1.6 !important;
}
.hk-crumb a { color: #7B8493 !important; text-decoration: none !important; }
.hk-crumb a:hover { color: #1677C8 !important; }
.hk-crumb .last,
.hk-crumb .breadcrumb_last { color: #1677C8 !important; }


/* ==========================================================================
 3. 眉标
 ========================================================================== */
.hk-eyebrow {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 18px 0 22px;
}
.hk-eyebrow__tag {
font-family: 'Roboto Mono', ui-monospace, Menlo, monospace;
font-size: 12px;
font-weight: 700;
background: #122D6C;
color: #fff;
padding: 5px 9px;
border-radius: 4px;
line-height: 1;
}
.hk-eyebrow__text {
font-family: 'Roboto Mono', ui-monospace, Menlo, monospace;
font-size: 12px;
letter-spacing: .14em;
color: #1677C8;
text-transform: uppercase;
}


/* ==========================================================================
 4. H1 与摘要
 ========================================================================== */
.hk-h1,
.hk-h1 h1 {
max-width: 900px;
text-wrap: balance;
margin: 0 !important;
}
.hk-dek,
.hk-dek p {
font-size: 19px !important;
line-height: 1.62 !important;
color: #4B5565 !important;
max-width: 620px;
margin: 22px 0 0 !important;
text-wrap: pretty;
}


/* ==========================================================================
 5. byline
 hk-x-byline 是 boxed 容器，内部自带一层 .e-con-inner，
 who / meta 是那一层的子级 —— 所以排布规则必须写到 .e-con-inner 上。
 ========================================================================== */
.hk-x-byline {
display: flex !important;
flex-direction: row !important;
width: 100% !important;
max-width: 100% !important;
padding: 16px 0 !important;
margin: 28px 0 0 !important;
border-top: 1px solid #DCE3EA !important;
border-bottom: 1px solid #DCE3EA !important;
border-left: 0 !important;
border-right: 0 !important;
}

.hk-x-byline > .e-con-inner {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 18px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.hk-x-byline > .e-con-inner > * {
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 1 auto !important;
margin: 0 !important;
padding: 0 !important;
}

/* --- 左侧：头像 + 两行文字 --- */
.hk-x-byline-who {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 11px !important;
}
.hk-x-byline-who > * { width: auto !important; margin: 0 !important; padding: 0 !important; }

.hk-x-names {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
width: auto !important;
}

.hk-x-avatar img {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
object-fit: cover;
border: 1px solid #DCE3EA;
display: block;
}
/* 若改用「作者框」小工具，压掉它自带的姓名 / 简介 / 按钮 */
.hk-x-avatar .elementor-author-box__name,
.hk-x-avatar .elementor-author-box__bio,
.hk-x-avatar .elementor-author-box__button { display: none !important; }
.hk-x-avatar .elementor-author-box { gap: 0 !important; }
.hk-x-avatar .elementor-author-box__avatar { margin: 0 !important; }

.hk-x-t1, .hk-x-t1 p {
font-size: 14.5px !important;
line-height: 1.35 !important;
color: #172033 !important;
font-weight: 700 !important;
margin: 0 !important;
}
.hk-x-t1 a { color: #1677C8 !important; text-decoration: none !important; border: 0 !important; }
.hk-x-t1 a:hover { color: #122D6C !important; }

.hk-x-t2, .hk-x-t2 p {
font-size: 12.5px !important;
line-height: 1.35 !important;
color: #7B8493 !important;
margin: 0 !important;
}

/* --- 右侧元信息：推到最右，UPDATED 与 MIN READ 并排 --- */
.hk-x-byline > .e-con-inner > .hk-x-byline-meta {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 16px !important;
margin-left: auto !important;
margin-right: 0 !important;
flex: 0 0 auto !important;
white-space: nowrap;
}
.hk-x-byline > .e-con-inner > .hk-x-byline-meta > * {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
}
/* 元信息区内所有文字统一 Mono 小字（含没加 class 的 readtime span） */
.hk-x-byline-meta,
.hk-x-byline-meta * {
font-family: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace !important;
font-size: 11.5px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: #7B8493 !important;
}
.hk-x-byline-meta ul,
.hk-x-byline-meta li {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
list-style: none !important;
background: none !important;
}
.hk-x-byline-meta li::after { display: none !important; content: none !important; }
.hk-x-byline-meta a { text-decoration: none !important; border: 0 !important; }
.hk-x-byline-meta .elementor-icon-list-icon { display: none !important; }


/* ==========================================================================
 6. 两个 CTA
 ========================================================================== */
.hk-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 28px;
}
.hk-hero-cta a {
display: inline-block;
text-decoration: none;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
transition: filter .15s, background .15s, color .15s;
}
.hk-hero-cta__primary { background: #E16A47; color: #fff; padding: 15px 24px; }
.hk-hero-cta__primary:hover { filter: brightness(1.08); color: #fff; }
.hk-hero-cta__ghost { border: 1px solid #122D6C; color: #122D6C; padding: 14px 24px; }
.hk-hero-cta__ghost:hover { background: #122D6C; color: #fff; }


/* ==========================================================================
 7. 右栏卡片
 hk-x-board 也是 boxed 容器，同样要处理 .e-con-inner，
 否则会出现"卡片外一层、图片内一层"的双层框。
 ⚙ 图片比例旋钮：16/9。改 4/3 更接近设计稿（需换 4:3 的图），
   改 5/4 或 1/1 卡片更大，改 auto 则完整显示原图不裁切。
 ========================================================================== */
.hk-x-board {
border: 1px solid #DCE3EA !important;
border-radius: 16px !important;
overflow: hidden !important;
background: #fff !important;
box-shadow: 0 14px 36px rgba(16, 42, 67, .08) !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: none !important;
align-self: flex-start !important;
}
/* 内部所有包装层一律压平并撑满 */
.hk-x-board > .e-con-inner,
.hk-x-board .elementor-widget,
.hk-x-board .elementor-widget-container {
display: block !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: none !important;
line-height: 0;
}
.hk-x-board img {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover;
display: block !important;
border-radius: 0 !important;
box-shadow: none !important;
}

/* --- 速览板（可选，不用可忽略） --- */
.hk-x-board-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: #122D6C;
color: #fff;
line-height: 1.4;
}
.hk-x-board-head b { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.hk-x-board-head i {
font-family: 'Roboto Mono', ui-monospace, Menlo, monospace;
font-style: normal;
font-size: 10.5px;
color: #8FC9F5;
letter-spacing: .1em;
white-space: nowrap;
}
.hk-x-board-list { display: grid; grid-template-columns: 1fr 1fr; }
.hk-x-board-list > div {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.4;
color: #344054;
border-top: 1px solid #DCE3EA;
}
.hk-x-board-list > div:nth-child(odd) { border-right: 1px solid #DCE3EA; }
.hk-x-board-list em {
font-family: 'Roboto Mono', ui-monospace, Menlo, monospace;
font-style: normal;
font-size: 10.5px;
font-weight: 700;
color: #1677C8;
background: #EAF3FC;
border-radius: 4px;
padding: 2px 5px;
flex: 0 0 auto;
}
.hk-x-board-cap,
.hk-x-board-cap p {
font-size: 13px !important;
line-height: 1.5 !important;
color: #7B8493 !important;
margin: 10px 0 0 !important;
}
.hk-x-board-cap strong { color: #172033; font-weight: 600; }


/* ==========================================================================
 8. 平板  ≤1024px  —— 两列变单列，配图落到文字下方
 ========================================================================== */
@media (max-width: 1024px) {
.hk-x-hero { padding: 32px 24px 72px !important; }
.hk-x-hero-row { flex-direction: column !important; gap: 40px !important; }
.hk-x-hero-left,
.hk-x-hero-right {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
.hk-x-board { max-width: 720px !important; }
}


/* ==========================================================================
 9. 手机  ≤767px
 顺序：面包屑 → 眉标 → H1 → 摘要 → byline → CTA → 配图
 ========================================================================== */
@media (max-width: 767px) {
.hk-x-hero { padding: 24px 16px 56px !important; }
.hk-x-hero-row { gap: 32px !important; }

.hk-crumb, .hk-crumb * { font-size: 11px !important; }
.hk-eyebrow { padding: 14px 0 18px; gap: 10px; }
.hk-eyebrow__tag,
.hk-eyebrow__text { font-size: 11px; letter-spacing: .12em; }
.hk-dek, .hk-dek p { font-size: 17px !important; margin-top: 18px !important; }

/* byline 竖排两行：上面头像+作者，下面元信息 */
.hk-x-byline { margin-top: 24px !important; }
.hk-x-byline > .e-con-inner {
  flex-direction: column !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.hk-x-byline > .e-con-inner > .hk-x-byline-meta {
  margin-left: 0 !important;
  flex-wrap: wrap !important;
  gap: 4px 14px !important;
  white-space: normal;
}
.hk-x-byline-meta,
.hk-x-byline-meta * { font-size: 11px !important; }

/* CTA 全宽，点击区域 ≥48px */
.hk-hero-cta { flex-direction: column; gap: 10px; padding-top: 24px; }
.hk-hero-cta a {
  width: 100%;
  text-align: center;
  padding: 15px 20px !important;
  min-height: 48px;
  line-height: 1.2;
}

.hk-x-board { max-width: 100% !important; border-radius: 12px !important; }
.hk-x-board-cap,
.hk-x-board-cap p { font-size: 12.5px !important; }
}


/* ==========================================================================
 10. 小屏  ≤479px
 ========================================================================== */
@media (max-width: 479px) {
.hk-x-hero { padding-left: 14px !important; padding-right: 14px !important; }
.hk-x-avatar img { width: 34px !important; height: 34px !important; }
.hk-x-board-list { grid-template-columns: 1fr; }
.hk-x-board-list > div:nth-child(odd) { border-right: 0; }
}


/* ============================================================================
 这段不包含的部分
 ----------------------------------------------------------------------------
 正文的问题卡片、五种方框、表格、目录、进度条都在 Hero 元素之外，
 要放在正文容器的 Custom CSS 或 Elementor → 网站设置 → 自定义 CSS。
 对应 hk-styles-only.css 里的 [1] [2] 两段。
 ============================================================================ */\n}.elementor .hk-x-exec{/* ==========================================================================
 Technical Review 条  ——  Hero 与正文之间，全站文章通用
 ========================================================================== */
.hk-x-review {
width: 100% !important;
max-width: 100% !important;
background: #F5F7FA;
border-top: 1px solid #DCE3EA;
border-bottom: 1px solid #DCE3EA;
padding: 0 !important;
margin: 0 !important;
}

/* 压掉 Section 内部所有包装层：容器 / e-con-inner / widget 都算 */
.hk-x-review .e-con,
.hk-x-review .e-con-inner,
.hk-x-review .elementor-element,
.hk-x-review .elementor-widget,
.hk-x-review .elementor-widget-container {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: none !important;
}

/* 版心：与 Hero 完全同一套算法 */
.hk-x-review-inner {
display: flex !important;
flex-direction: row !important;
align-items: flex-start;
gap: 56px;
width: 100% !important;
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 28px 24px !important;
}

/* --- 左：眉标 + 说明 --- */
.hk-x-review-main { flex: 1 1 auto; min-width: 0; }

.hk-x-review-lab {
display: block;
font-family: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #122D6C;
margin-bottom: 10px;
}
.hk-x-review-main p {
font-size: 15px;
line-height: 1.65;
color: #4B5565;
margin: 0;
max-width: 760px;
}

/* --- 右：三个核查项 --- */
.hk-x-review-items {
flex: 0 0 auto;
list-style: none;
margin: 0 !important;
padding: 2px 0 0 !important;
display: flex;
flex-direction: column;
gap: 9px;
}
.hk-x-review-items li {
position: relative;
padding-left: 24px;
margin: 0;
font-family: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: .09em;
text-transform: uppercase;
color: #4B5565;
line-height: 1.5;
white-space: nowrap;
}
/* 用边框画勾，不依赖字体里的 ✓ */
.hk-x-review-items li::before {
content: "";
position: absolute;
left: 2px;
top: 3px;
width: 5px;
height: 9px;
border: solid #1677C8;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

/* --- 平板 ≤1024 --- */
@media (max-width: 1024px) {
.hk-x-review-inner {
  flex-direction: column !important;
  gap: 20px;
  padding: 24px !important;
}
.hk-x-review-items {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 0 !important;
}
}

/* --- 手机 ≤767 --- */
@media (max-width: 767px) {
.hk-x-review-inner { padding: 22px 16px !important; gap: 16px; }
.hk-x-review-main p { font-size: 14.5px; }
.hk-x-review-items { flex-direction: column; gap: 8px; }
.hk-x-review-items li { font-size: 10.5px; white-space: normal; }
}\n}