.elementor .hkblog-loop{margin-block-start:90px;}.elementor .hkblog-loop{/*
 * HONGKAI Blog Knowledge Center — page 9941 aggregate / Loop Grid
 * Unified, page-scoped CSS draft (2026-08-12)
 *
 * Paste this complete file at the END of the Custom CSS field on the selected
 * Section 05 outer Flexbox (`hkblog-loop`). Do not paste it into template 9940.
 *
 * Verified current production DOM:
 *   page body          body.elementor-page-9941
 *   page wrapper       .elementor-9941
 *   section container  .hkblog-loop
 *   Loop Grid widget   direct child .elementor-widget-loop-grid
 *   optional class     .hk-artgrid (not required by this file)
 *   Loop Item template 15713
 *   card               .hkblog-loop__card
 *   image / body       .hk-artcard__img / .hkblog-loop__body
 *   kind / title / excerpt / author
 *                      .hk-artcard__kind / .hk-artcard__title /
 *                      .hk-artcard__blurb / .hk-artcard__author
 *
 * All selectors require page 9941 + its Elementor wrapper + Section 05, so
 * none of these rules can change Single Post template 9940 or another grid.
 */

/* ---------- Section shell and 1280px content rail ---------- */

body.elementor-page-9941 .elementor-9941 .hkblog-loop {
--hk-archive-max: 1280px;
--hk-archive-ink: #172033;
--hk-archive-copy: #344054;
--hk-archive-muted: #667085;
--hk-archive-blue: #1677c8;
--hk-archive-blue-dark: #0f5d9e;
--hk-archive-line: #dce3ea;
--hk-archive-surface: #ffffff;
--hk-archive-bg: #f5f7fa;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 82px 32px 96px !important;
color: var(--hk-archive-copy) !important;
background: var(--hk-archive-bg) !important;
border-top: 1px solid var(--hk-archive-line) !important;
font-family: "Roboto", Arial, sans-serif !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop,
body.elementor-page-9941 .elementor-9941 .hkblog-loop * {
box-sizing: border-box;
}

/* The current title HTML widget and Loop Grid are direct children. */
body.elementor-page-9941 .elementor-9941 .hkblog-loop > .elementor-element {
width: min(100%, var(--hk-archive-max)) !important;
max-width: var(--hk-archive-max) !important;
min-width: 0 !important;
margin-inline: auto !important;
}

/* ---------- Heading: isolate it from article-body `.hk-guide h2` rules ---------- */

body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: var(--hk-archive-copy) !important;
background: transparent !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec__eyebrow {
display: block !important;
margin: 0 0 14px !important;
padding: 0 !important;
color: var(--hk-archive-blue) !important;
font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec__title,
body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec h2.hk-sec__title {
width: auto !important;
max-width: 760px !important;
margin: 0 0 12px !important;
padding: 0 !important;
color: var(--hk-archive-ink) !important;
background: transparent !important;
border: 0 !important;
font-family: "Roboto", Arial, sans-serif !important;
font-size: clamp(32px, 3.15vw, 48px) !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -0.035em !important;
text-transform: none !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec__title::before,
body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec__title::after {
content: none !important;
display: none !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec__desc {
max-width: 720px !important;
margin: 0 !important;
padding: 0 !important;
color: var(--hk-archive-muted) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec__note {
margin: 16px 0 28px !important;
padding: 0 !important;
color: var(--hk-archive-muted) !important;
font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0.05em !important;
}

/* ---------- Current Loop Grid widget (works with or without `hk-artgrid`) ---------- */

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
> .elementor-widget-container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.elementor-loop-container,
body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.elementor-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-auto-rows: auto !important;
align-items: stretch !important;
gap: 28px 24px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}

/*
 * Safer than styling every `.e-loop-item`: templates can emit the Loop Item
 * wrapper as `.elementor.elementor-15713`, whose Elementor root CSS may reset
 * background/border. The real card container is stable and stays inside the
 * Loop Grid, so it owns the visible shell.
 */

/* Neutralize Astra's archive-column width and make every Loop item stretch. */
body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
:is(.e-loop-item, .elementor-loop-item) {
box-sizing: border-box !important;
display: flex !important;
float: none !important;
clear: none !important;
flex-direction: column !important;
align-self: stretch !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}

/* The stable inner Loop Item container is the only visible card shell. */
body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hkblog-loop__card {
box-sizing: border-box !important;
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--hk-archive-surface) !important;
border: 1px solid var(--hk-archive-line) !important;
border-radius: 12px !important;
box-shadow: 0 1px 2px rgba(16, 42, 67, 0.03) !important;
transition: border-color 180ms ease, box-shadow 180ms ease,
  transform 180ms ease;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hkblog-loop__card:hover {
border-color: #99b8d0 !important;
box-shadow: 0 14px 32px rgba(16, 42, 67, 0.09) !important;
transform: translateY(-2px);
}

/* ---------- Featured image: stable 16:9 media row ---------- */

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__img {
flex: 0 0 auto !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
aspect-ratio: 16 / 9 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #eef2f6 !important;
border-bottom: 1px solid var(--hk-archive-line) !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__img :is(.elementor-widget-container, a, figure) {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__img img {
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center !important;
border: 0 !important;
border-radius: 0 !important;
}

/* ---------- Copy column and typography ---------- */

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hkblog-loop__body {
box-sizing: border-box !important;
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 24px !important;
background: var(--hk-archive-surface) !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hkblog-loop__body > .elementor-element,
body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
:is(
  .hk-artcard__kind,
  .hk-artcard__title,
  .hk-artcard__blurb,
  .hk-artcard__author
) {
box-sizing: border-box !important;
flex: 0 0 auto !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}

/* Prevent the former narrow-column/letter-by-letter rendering. */
body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
:is(
  .hk-artcard__kind,
  .hk-artcard__title,
  .hk-artcard__blurb,
  .hk-artcard__author
),
body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
:is(
  .hk-artcard__kind,
  .hk-artcard__title,
  .hk-artcard__blurb,
  .hk-artcard__author
) * {
writing-mode: horizontal-tb !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__kind {
margin: 0 0 10px !important;
color: var(--hk-archive-blue) !important;
font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.45 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__kind a {
color: inherit !important;
text-decoration: none !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__title {
margin: 0 0 10px !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__title :is(h2, h3, .elementor-heading-title) {
margin: 0 !important;
padding: 0 !important;
color: var(--hk-archive-ink) !important;
font-family: "Roboto", Arial, sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__title a {
color: inherit !important;
text-decoration: none !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__title a:hover {
color: var(--hk-archive-blue) !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__blurb {
margin: 0 0 18px !important;
color: var(--hk-archive-muted) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.62 !important;
}

/* Auto margin pins author info to the bottom of every equal-height card. */
body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__author {
margin: auto 0 0 !important;
padding: 0 !important;
color: var(--hk-archive-muted) !important;
font-size: 12px !important;
line-height: 1.4 !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__author :is(ul, li, a) {
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__author .elementor-icon-list-icon {
width: 16px !important;
margin-right: 6px !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.hk-artcard__author :is(i, svg) {
width: 14px !important;
height: 14px !important;
color: var(--hk-archive-muted) !important;
fill: currentColor !important;
}

/* ---------- Elementor numeric pagination ---------- */

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.elementor-pagination {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
margin: 36px 0 0 !important;
padding: 0 !important;
border: 0 !important;
font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace !important;
font-size: 13px !important;
line-height: 1 !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.elementor-pagination .page-numbers {
display: inline-flex !important;
min-width: 42px !important;
height: 42px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 12px !important;
color: var(--hk-archive-ink) !important;
background: var(--hk-archive-surface) !important;
border: 1px solid var(--hk-archive-line) !important;
border-radius: 8px !important;
box-shadow: none !important;
line-height: 1 !important;
text-decoration: none !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.elementor-pagination .page-numbers.current {
color: #ffffff !important;
background: var(--hk-archive-blue) !important;
border-color: var(--hk-archive-blue) !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
.elementor-pagination a.page-numbers:hover {
color: var(--hk-archive-blue-dark) !important;
border-color: #99b8d0 !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
> :is(.hk-artgrid, .elementor-widget-loop-grid)
:is(a, .page-numbers):focus-visible {
outline: 3px solid rgba(22, 119, 200, 0.32) !important;
outline-offset: 3px !important;
}

/* ---------- Responsive 3 / 2 / 1 grid ---------- */

@media (max-width: 1024px) {
body.elementor-page-9941 .elementor-9941 .hkblog-loop {
  padding-inline: 24px !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
  > :is(.hk-artgrid, .elementor-widget-loop-grid)
  :is(.elementor-loop-container, .elementor-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (max-width: 767px) {
body.elementor-page-9941 .elementor-9941 .hkblog-loop {
  padding: 64px 16px 72px !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec__title,
body.elementor-page-9941 .elementor-9941 .hkblog-loop .hk-sec h2.hk-sec__title {
  font-size: clamp(30px, 9vw, 38px) !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
  > :is(.hk-artgrid, .elementor-widget-loop-grid)
  :is(.elementor-loop-container, .elementor-grid) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
  > :is(.hk-artgrid, .elementor-widget-loop-grid)
  .hkblog-loop__body {
  padding: 20px !important;
}

body.elementor-page-9941 .elementor-9941 .hkblog-loop
  > :is(.hk-artgrid, .elementor-widget-loop-grid)
  .elementor-pagination {
  margin-top: 28px !important;
}
}

@media (prefers-reduced-motion: reduce) {
body.elementor-page-9941 .elementor-9941 .hkblog-loop
  > :is(.hk-artgrid, .elementor-widget-loop-grid)
  :is(.e-loop-item, .elementor-loop-item),
body.elementor-page-9941 .elementor-9941 .hkblog-loop
  > :is(.hk-artgrid, .elementor-widget-loop-grid)
  .hkblog-loop__card {
  transition-duration: 0.01ms !important;
}
}
/* HONGKAI 9941 — Pagination */
body.elementor-page-9941 .elementor-9941
.elementor-element-01dbae0 .elementor-pagination {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
margin: 40px 0 0 !important;
padding: 0 !important;
font-family: "Roboto Mono", monospace !important;
font-size: 13px !important;
line-height: 1 !important;
}

body.elementor-page-9941 .elementor-9941
.elementor-element-01dbae0 .elementor-pagination .page-numbers {
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
color: #172033 !important;
background: #ffffff !important;
border: 1px solid #dce3ea !important;
border-radius: 10px !important;
box-shadow: none !important;
text-decoration: none !important;
}

body.elementor-page-9941 .elementor-9941
.elementor-element-01dbae0 .elementor-pagination .current {
color: #ffffff !important;
background: #1677c8 !important;
border-color: #1677c8 !important;
font-weight: 700 !important;
}

body.elementor-page-9941 .elementor-9941
.elementor-element-01dbae0 .elementor-pagination a.page-numbers:hover {
color: #0f5d9e !important;
background: #eef6fc !important;
border-color: #99b8d0 !important;
}

body.elementor-page-9941 .elementor-9941
.elementor-element-01dbae0 .elementor-pagination a.page-numbers:focus-visible {
outline: 3px solid rgba(22, 119, 200, 0.32) !important;
outline-offset: 3px !important;
}

@media (max-width: 480px) {
body.elementor-page-9941 .elementor-9941
.elementor-element-01dbae0 .elementor-pagination {
  gap: 6px !important;
  margin-top: 32px !important;
}
}\n}.elementor .hkblog-loop__body{flex-direction:column;}