/**
 * Storeys ↔ leifeng pixel-style match
 * Source of truth: C:\Users\Administrator\Desktop\leifeng\assets\style.css
 * Fonts / colors / sizes copied from leifeng public frontend.
 */

:root {
  --wb-theme-color: #ff4d5a;
  --wb-theme-hover-color: #e63946;
  --brand: #ff4d5a;
  --brand-dark: #e63946;
  --brand-soft: #fff0f1;
  --brand-grad: linear-gradient(135deg, #ff6a5f 0%, #ff4d7d 100%);
  --gold-grad: linear-gradient(135deg, #ffd45e 0%, #f7a325 100%);
  --ink: #1f2430;
  --ink-2: #5a6172;
  --ink-3: #9aa1b0;
  --line: #eceef2;
  --bg: #f5f6f8;
  --card: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(23, 28, 45, 0.06), 0 1px 2px rgba(23, 28, 45, 0.04);
  --shadow-md: 0 6px 20px rgba(23, 28, 45, 0.08);
  --shadow-lg: 0 14px 40px rgba(23, 28, 45, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

/* ========== Base ========== */
body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

::selection {
  background: rgba(255, 77, 90, 0.18);
}

/* ========== Header / topbar — fixed at top while scrolling ========== */
.header {
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  transform: none !important;
}

.header,
.header .inner {
  height: 64px !important;
}

/* Header spacer is handled by body{padding-top} in header.php critical CSS.
   Avoid double gap from body::before. */
body::before{content:none!important;display:none!important;height:0!important;}

.header .inner.pw,
.header .inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

body.home .header.header-b,
body .header.header-b {
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
}

/* Brand logo — leifeng assets/logo.svg (same as source topbar) */
.header .logo,
.header .logo.logo-brand {
  margin: 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.header .logo a {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}

.header .logo img,
.header .logo .brand-logo {
  width: 176px !important;
  height: 38px !important;
  max-height: 38px !important;
  max-width: 176px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Hide residual PHP text logo if any */
.header .logo strong {
  display: none !important;
}

/* Nav links = leifeng .main-nav a : 15px / ink-2 */
.nav-top .nav > li > a,
body.home .header.header-b .nav-top .nav > li > a {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

.nav-top .nav > li > a:hover,
.nav-top .nav > li.current-menu-item > a,
body.home .header.header-b .nav-top .nav > li:hover > a {
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
}

body.home .header.header-b .top-links .link,
body.home .header.header-b .user-name {
  color: var(--ink-2) !important;
}

body.home .header.header-b .top-links .link-search svg {
  fill: var(--ink-2) !important;
}

/* Hide leftover top-right search / login / register (hero has search) */
.header .top-links,
.header .search-top-bar,
.header .link-search,
.header .link-login,
.header .link-reg,
.header .user-cover,
.header .user-name,
.btn-search-m,
a#J_topSearchBtn,
a#J_btnSearchMb,
#J_topSearchBar {
  display: none !important;
}

/* ========== Hero (leifeng .hero) full-bleed ========== */
/* Header is fixed; body::before already reserves 64px. Keep container flush. */
.container-index,
body.home .container-index,
body .container.container-index {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin-top: 0 !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}

body.home .container,
body .container.container-index {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.container-index .banner-panel {
  display: block !important;
  height: auto !important;
  min-height: 340px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  position: relative !important;
  left: auto !important;
  transform: none !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.container-index .banner-panel .swiper-wrapper {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
}

.container-index .banner-panel .item,
.container-index .banner-panel .item.search-box {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  min-height: 340px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 60px 20px !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(135deg, rgba(255, 77, 90, 0.12) 0%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 212, 94, 0.18) 100%),
    #fff8f9 !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid #f3e7ea !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.container-index .banner-panel .item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(90deg, rgba(255, 77, 90, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 77, 90, 0.045) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
  opacity: 0.62 !important;
  z-index: 0 !important;
}

.container-index .with-mask .item:after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.55)) !important;
  z-index: 0 !important;
}

.container-index .banner-panel .item .inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 720px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
}

.container-index .banner-panel .inner:after {
  display: none !important;
}

/* Hero title 46px / 900 / ink — leifeng .hero-title */
.container-index .banner-panel .zx-banner-text h1,
.container-index .banner-panel .bn-title {
  font-size: 46px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  letter-spacing: 2px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* Hero slogan 16px / ink-2 */
.container-index .banner-panel .zx-banner-text p,
.container-index .banner-panel .bn-dec {
  margin: 14px 0 0 !important;
  font-size: 16px !important;
  color: var(--ink-2) !important;
  text-shadow: none !important;
  line-height: 1.5 !important;
}

/* ========== Search form (leifeng .hero-search) ========== */
.container-index .search-box .search-form,
.container-index .search-box .hero-search-form,
body .container-index .banner-panel .search-form {
  margin: 30px auto 0 !important;
  width: 100% !important;
  max-width: min(560px, calc(100vw - 36px)) !important;
  height: 56px !important;
  position: relative !important;
  background: #fff !important;
  border-radius: 999px !important;
  padding: 6px !important;
  border: 1px solid rgba(255, 77, 90, 0.1) !important;
  box-shadow: 0 14px 34px rgba(255, 77, 90, 0.16), 0 8px 20px rgba(31, 36, 48, 0.08) !important;
  overflow: visible !important;
  display: block !important;
  box-sizing: border-box !important;
}

.container-index .search-box .form-control,
.container-index .banner-panel .search-form .form-control {
  width: 100% !important;
  height: 100% !important;
  min-height: 44px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 0 104px 0 18px !important;
  text-indent: 0 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  line-height: normal !important;
}

.container-index .search-box .form-control::placeholder,
.container-index .banner-panel .search-form .form-control::placeholder {
  color: var(--ink-3) !important;
  font-size: 15px !important;
  opacity: 1 !important;
}

.container-index .search-box .btn-search,
.container-index .banner-panel .search-form .btn-search,
body .container-index .search-box .btn-search {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  left: auto !important;
  width: 96px !important;
  min-width: 96px !important;
  height: auto !important;
  border: none !important;
  background: linear-gradient(135deg, #ff6a5f 0%, #ff4d7d 100%) !important;
  background-color: #ff4d5a !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(255, 77, 90, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transform: none !important;
  z-index: 5 !important;
}

.container-index .search-box .btn-search:hover {
  background: linear-gradient(135deg, #ff7a70 0%, #ff5a88 100%) !important;
  box-shadow: 0 8px 22px rgba(255, 77, 90, 0.45) !important;
  color: #fff !important;
}

.container-index .search-box .btn-search svg,
.container-index .search-box .btn-search::before,
.container-index .search-box .btn-search::after {
  display: none !important;
  content: none !important;
}

/* Hide storeys tab nav */
.container-index .tab-navs {
  display: none !important;
}

/* ========== Category chips (leifeng .category-nav) ========== */
.lf-category-nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.lf-category-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lf-category-nav a {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 15px !important;
  background: #f1f2f5 !important;
  border-radius: 999px !important;
  color: var(--ink-2) !important;
  border: 1px solid transparent !important;
  transition: all 0.18s;
  line-height: 1.2 !important;
  display: inline-block;
}

.lf-category-nav a:hover {
  color: var(--brand-dark) !important;
  background: var(--brand-soft) !important;
}

.lf-category-nav a.active {
  background: var(--brand-grad) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 77, 90, 0.35) !important;
}

/* ========== Content area ========== */
.container-index .index-main.pw,
.container-index .pw {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 28px 20px 48px !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* Section head — leifeng .section-head */
.zx-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  position: relative !important;
  margin: 8px 0 26px !important;
  text-align: center !important;
}

.zx-section-title h2 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding-bottom: 10px !important;
  position: relative !important;
  line-height: 1.2 !important;
}

.zx-section-title h2::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: var(--brand-grad) !important;
  margin: 0 !important;
}

.zx-section-title .zx-pill {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #fff !important;
  background: var(--brand-grad) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  vertical-align: middle !important;
  transform: translateY(-6px) !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}

.title-floor {
  padding: 28px 0 18px !important;
  text-align: center !important;
}

.title-floor h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  line-height: 1 !important;
}

.title-floor h3::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-grad);
  margin: 10px auto 0;
}

/* ========== Cards (leifeng .card-grid / .card) ========== */
.articles-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* mobile default */
  gap: 14px !important;
  font-size: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 1200px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.articles-list .post {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  font-size: 12px !important;
  vertical-align: top !important;
}

.articles-list .inner {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 0 !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s !important;
}

.articles-list .inner:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.articles-list .media-pic {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: 62% !important;
  background: linear-gradient(135deg, #f3f4f7, #e9ebf0) !important;
  overflow: hidden !important;
  display: block !important;
}

.articles-list .media-pic img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.35s ease !important;
  display: block !important;
}

.articles-list .inner:hover .media-pic img {
  transform: scale(1.06) !important;
}

.articles-list .media-body {
  padding: 12px 13px 14px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Category label = leifeng soft pink pill */
.articles-list .media-body > .post-metas:first-of-type,
.articles-list .post-cate {
  order: 1;
  margin-bottom: 8px !important;
  height: auto !important;
  max-width: none !important;
}

.articles-list .post-cate .wbsico-circle,
.articles-list .post-cate svg {
  display: none !important;
}

.articles-list .post-cate .cate-tag {
  display: inline-block !important;
  font-size: 11px !important;
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  margin: 0 6px 0 0 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.articles-list .post-cate .cate-tag + .cate-tag::before {
  display: none !important;
}

/* Title 14px / 600 — leifeng .card-title */
.articles-list .post-title {
  order: 2;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: unset !important;
  min-height: 40px !important;
  margin: 0 0 0 !important;
}

.articles-list .post-title:hover {
  color: var(--brand) !important;
}

/* Meta row with top border like leifeng */
.articles-list .media-body > .post-metas:last-of-type {
  order: 3;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--line) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0 !important;
}

.articles-list .meta-date,
.articles-list .meta-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
}

.articles-list .meta-date svg,
.articles-list .meta-views svg {
  display: none !important;
}

.articles-list .meta-date em,
.articles-list .meta-views em {
  color: var(--ink-3) !important;
  font-size: 11px !important;
  margin: 0 !important;
  font-style: normal !important;
}

.articles-list .meta-date::before {
  content: "🕒";
  font-size: 11px;
  opacity: 0.75;
}

.articles-list .meta-views em {
  background: #f4f5f8 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}

.articles-list .meta-views::before {
  content: "👁";
  font-size: 11px;
  opacity: 0.75;
}

/* Badge */
.articles-list .zx-badge,
.articles-list .vip-tag,
.articles-list .tag {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
  background: var(--gold-grad) !important;
  color: #7a4a00 !important;
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  box-shadow: 0 2px 8px rgba(247, 163, 37, 0.4) !important;
  opacity: 1 !important;
}

.articles-list .zx-badge i,
.articles-list .vip-tag i {
  font-style: normal !important;
  color: inherit !important;
}

.articles-list .zx-badge.is-new {
  background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
  color: #fff !important;
}

.articles-list .zx-badge.is-hot {
  background: linear-gradient(135deg, #f87171, #ef4444) !important;
  color: #fff !important;
}

.articles-list .zx-badge.is-free {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  color: #fff !important;
}

/* ========== Load more — centered pink pill (medium length) ========== */
/* Parent centering wrappers */
.container-index .index-main,
.container-index .articles-list + .btn-load-more,
.list-main,
.container-archive .list-main,
.container-allpost .list-main,
.container-search .list-main {
  text-align: center !important;
}

.btn-load-more,
a.btn-load-more,
.container-index .btn-load-more,
.container-index a.btn-load-more,
.list-main .btn-load-more,
.articles-list + .btn-load-more,
.articles-list ~ .btn-load-more {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 148px !important;
  min-width: 148px !important;
  max-width: 180px !important;
  height: 42px !important;
  margin: 48px auto 24px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--brand-grad) !important;
  background-color: #ff4d5a !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  box-shadow: 0 8px 18px rgba(255, 77, 90, 0.28) !important;
  overflow: hidden !important;
  text-align: center !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

.btn-load-more span,
a.btn-load-more span,
.container-index .btn-load-more span {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.btn-load-more i,
.btn-load-more::before,
.btn-load-more::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

.btn-load-more:hover,
.btn-load-more:active {
  color: #fff !important;
  background: linear-gradient(135deg, #ff7a70 0%, #ff5a88 100%) !important;
  box-shadow: 0 10px 22px rgba(255, 77, 90, 0.38) !important;
  transform: translateY(-1px);
}

/* Footer */
.footer,
.site-footer {
  text-align: center !important;
  padding: 28px 20px !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
  background: transparent !important;
}

/* ========== Responsive = leifeng H5 ========== */
@media (min-width: 600px) {
  .articles-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 900px) {
  .articles-list {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }
}

/*
 * Override original Storeys mobile hide:
 * .container-index .banner-panel{display:none}
 */
@media (max-width: 640px) {
  .header,
  .header .inner {
    height: 52px !important;
  }

  body::before{content:none!important;display:none!important;height:0!important;}

  .header .logo {
    margin-left: 12px !important;
  }

  .header .logo img,
  .header .logo .brand-logo {
    width: 150px !important;
    height: 34px !important;
    max-height: 34px !important;
    max-width: 150px !important;
  }

  .container-index,
  body.home .container-index,
  body .container.container-index,
  body.home .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .container-index .banner-panel,
  body.home .container-index .banner-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  .container-index .banner-panel .item,
  .container-index .banner-panel .item.search-box {
    display: flex !important;
    min-height: 260px !important;
    padding: 44px 18px !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  .container-index .banner-panel .item .inner {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .container-index .banner-panel .zx-banner-text h1 {
    font-size: 32px !important;
    letter-spacing: 1px !important;
  }

  .container-index .banner-panel .zx-banner-text p {
    font-size: 14px !important;
    margin-top: 12px !important;
  }

  .container-index .search-box .search-form,
  .container-index .banner-panel .search-form {
    display: block !important;
    visibility: visible !important;
    margin: 24px auto 0 !important;
    max-width: calc(100vw - 36px) !important;
    height: 52px !important;
    padding: 5px !important;
  }

  .container-index .search-box .form-control {
    font-size: 15px !important;
    padding: 0 92px 0 16px !important;
  }

  .container-index .search-box .form-control::placeholder {
    font-size: 15px !important;
  }

  .container-index .search-box .btn-search {
    top: 5px !important;
    right: 5px !important;
    bottom: 5px !important;
    width: 84px !important;
    min-width: 84px !important;
    font-size: 14px !important;
  }

  .lf-category-nav-inner {
    padding: 12px 14px !important;
    gap: 8px !important;
  }

  .lf-category-nav a {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  .container-index .index-main.pw,
  .container-index .pw {
    padding: 20px 14px 40px !important;
  }

  .zx-section-title h2 {
    font-size: 20px !important;
  }

  .articles-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .articles-list .post-title {
    font-size: 13px !important;
    min-height: 0 !important;
  }

  .articles-list .media-body {
    padding: 10px !important;
  }

  .btn-load-more,
  a.btn-load-more,
  .container-index .btn-load-more {
    display: flex !important;
    width: 136px !important;
    min-width: 136px !important;
    height: 40px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    line-height: 40px !important;
    margin: 42px auto 18px !important;
  }

  .btn-load-more span,
  a.btn-load-more span {
    font-size: 14px !important;
  }
}

@media (max-width: 360px) {
  .container-index .banner-panel .zx-banner-text h1 {
    font-size: 28px !important;
  }

  .container-index .search-box .search-form {
    max-width: calc(100vw - 24px) !important;
    height: 48px !important;
  }

  .container-index .search-box .btn-search {
    width: 76px !important;
    min-width: 76px !important;
    font-size: 13px !important;
  }
}

/* Fixed header sync — DO NOT set overflow on html/body (breaks fixed) */
.header.lf-fixed-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  transform: none !important;
  overflow: visible !important;
  background: #fff !important;
}
.header.lf-fixed-header .logo,
.header.lf-fixed-header .logo a {
  overflow: visible !important;
}
.header.lf-fixed-header .logo img,
.header.lf-fixed-header .brand-logo {
  width: auto !important;
  height: 38px !important;
  max-height: 38px !important;
  max-width: 220px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.container-index,
body.home .container-index,
body .container.container-index {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
@media (max-width: 640px) {
  /* Override original theme mobile sticky on .header */
  .header,
  .header.lf-fixed-header {
    position: fixed !important;
    top: 0 !important;
    height: 52px !important;
  }
}

/* ========== Mobile hamburger + 2-col category panel ========== */
.nav-toggle,
button.nav-toggle,
#J_btnNavMb {
  display: none !important;
}
.lf-mobile-drawer,
.nav-top-m.lf-mobile-drawer,
#J_navBarMb {
  display: none !important;
}
.lf-desktop-nav,
.nav-top.lf-desktop-nav {
  display: block !important;
  flex: 1 !important;
}

@media (max-width: 860px) {
  .lf-desktop-nav,
  .nav-top.lf-desktop-nav,
  .header .nav-top {
    display: none !important;
  }

  /* Hamburger 三 top-right */
  .nav-toggle,
  button.nav-toggle,
  #J_btnNavMb.nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin-left: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    position: relative !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    z-index: 5 !important;
  }
  .nav-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #1f2430 !important;
    border-radius: 2px !important;
  }
  .nav-toggle.btn-nav:before,
  .nav-toggle.btn-nav:after,
  .nav-toggle.btn-nav i,
  .nav-toggle.btn-nav i:before,
  .nav-toggle.btn-nav i:after {
    display: none !important;
    content: none !important;
  }

  .header .inner,
  .header.lf-fixed-header .inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /*
   * Category panel (replaces dark left drawer look)
   * Screenshot style: light panel, 2 columns, pill buttons
   */
  .nav-top-m.lf-cat-panel,
  #J_navBarMb.lf-cat-panel {
    display: none !important; /* hidden until open */
    position: fixed !important;
    top: 52px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    max-height: min(70vh, 520px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f3f4f6 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(23, 28, 45, 0.18) !important;
    transform: none !important;
    -webkit-transform: none !important;
    overflow: hidden !important;
    z-index: 100000 !important;
  }

  body.admin-bar .nav-top-m.lf-cat-panel {
    top: 98px !important; /* 52 header + 46 admin bar on mobile */
  }

  /* Open state: our JS adds lf-nav-open / is-open; theme may add display-nav-m */
  body.lf-nav-open .nav-top-m.lf-cat-panel,
  body.display-nav-m .nav-top-m.lf-cat-panel,
  body.nav-open .nav-top-m.lf-cat-panel,
  body.lf-nav-open #J_navBarMb.lf-cat-panel,
  body.display-nav-m #J_navBarMb.lf-cat-panel,
  #J_navBarMb.lf-cat-panel.is-open,
  .nav-top-m.lf-cat-panel.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Keep panel above content; mask under panel */
  .lf-nav-mask,
  #lf-nav-mask {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.35) !important;
    z-index: 99998 !important;
  }

  /* Disable theme body slide when using dropdown panel */
  body.display-nav-m,
  body.wb-is-mobile.display-nav-m {
    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
  }

  .lf-cat-panel-inner {
    padding: 12px 12px 16px !important;
    max-height: min(70vh, 520px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .lf-cat-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 4px 12px !important;
  }

  .lf-cat-panel-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1f2430 !important;
  }

.lf-cat-close,
  .lf-cat-panel .btn-close,
  #J_closeNav.lf-cat-close {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #5a6172 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .lf-cat-panel .btn-close:before,
  .lf-cat-panel .btn-close:after,
  .lf-cat-panel .btn-close svg {
    display: none !important;
    content: none !important;
  }
  /* Perfect-centered X via two lines */
  .lf-close-x {
    position: relative !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
  }
  .lf-close-x:before,
  .lf-close-x:after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 1.5px !important;
    background: #5a6172 !important;
    border-radius: 1px !important;
  }
  .lf-close-x:before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }
  .lf-close-x:after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  /* 2 columns grid — all categories */
  .lf-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .lf-cat-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 8px !important;
    background: #fff !important;
    border-radius: 10px !important;
    color: #1f2430 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    box-shadow: 0 1px 2px rgba(23, 28, 45, 0.04) !important;
    border: 1px solid rgba(23, 28, 45, 0.04) !important;
    word-break: break-all;
  }

  .lf-cat-item:hover,
  .lf-cat-item.active {
    background: #ff4d5a !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(255, 77, 90, 0.28) !important;
  }

  /* Hide leftover dark drawer list styles */
  .lf-cat-panel .nav-m,
  .lf-cat-panel ul {
    display: none !important;
  }
}

/* ========== Mobile no horizontal scroll + compact header ========== */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important; /* prevent swipe to reveal offscreen content */
}

/* Never use 100vw for width (includes scrollbar and causes side scroll on Android) */
.container-index,
.container-index .banner-panel,
.container-index .banner-panel .item,
.container-index .banner-panel .swiper-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 860px) {
  .header,
  .header.lf-fixed-header {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important; /* keep children inside header */
  }

  .header .inner,
  .header.lf-fixed-header .inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Compact logo so grid icon always fits on screen */
  .header .logo,
  .header .logo.logo-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 48px) !important;
    overflow: hidden !important;
  }
  .header .logo a {
    display: inline-flex !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .header .logo img,
  .header .brand-logo,
  .header.lf-fixed-header .brand-logo {
    width: auto !important;
    height: 28px !important;
    max-height: 28px !important;
    max-width: 150px !important; /* force fit small phones */
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* Grid icon always visible on right, no absolute, no offscreen */
  .header #J_btnNavMb,
  .header #J_btnNavMb.nav-toggle,
  .header #J_btnNavMb.lf-grid-toggle,
  .header button.nav-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Search form never exceeds viewport */
  .container-index .search-box .search-form,
  .container-index .banner-panel .search-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .container-index .banner-panel .item .inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Cards stay in viewport */
  .articles-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .index-main.pw,
  .container-index .pw {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ========== Equal-size cards HARD OVERRIDE ========== */
/* Leifeng adaptive columns: 2 / 3 / 4 max */
.articles-list,
.container-index .articles-list,
.list-main .articles-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  font-size: 0 !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.articles-list .post,
.container-index .articles-list .post {
  display: flex !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  height: 100% !important;
  vertical-align: top !important;
}

.articles-list .post > .inner,
.articles-list .inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Same cover ratio for every card */
.articles-list .media-pic {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: 62.5% !important; /* leifeng-like 16:10 */
  position: relative !important;
  overflow: hidden !important;
  background: #eef0f4 !important;
  margin: 0 !important;
}

.articles-list .media-pic img,
.articles-list .media-pic img.thumb,
.articles-list .media-pic > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}

.articles-list .media-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 120px !important;
  padding: 12px 13px 14px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.articles-list .media-body > .post-metas:first-of-type {
  flex: 0 0 auto !important;
  min-height: 22px !important;
  margin: 0 0 8px !important;
}

.articles-list .post-title {
  flex: 0 0 auto !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.45 !important;
  height: 2.9em !important;
  min-height: 2.9em !important;
  max-height: 2.9em !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.articles-list .media-body > .post-metas:last-of-type {
  margin-top: auto !important;
  flex: 0 0 auto !important;
  padding-top: 10px !important;
}

/* Tablet: 3 columns */
@media (min-width: 600px) {
  .articles-list,
  .container-index .articles-list,
  .list-main .articles-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

/* Desktop: max 4 columns like leifeng */
@media (min-width: 900px) {
  .articles-list,
  .container-index .articles-list,
  .list-main .articles-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
  .articles-list .media-body {
    min-height: 124px !important;
  }
}

/* Mobile keep 2 columns, never theme width:100% single column */
@media (max-width: 640px) {
  .articles-list,
  .container-index .articles-list,
  .list-main .articles-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .articles-list .post {
    display: flex !important;
    width: auto !important;
    margin: 0 !important;
  }
  .articles-list .post .inner,
  .articles-list .inner {
    width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
  }
  .articles-list .media-pic {
    padding-top: 62.5% !important;
    height: 0 !important;
  }
  .articles-list .media-body {
    min-height: 112px !important;
    padding: 10px !important;
  }
  .articles-list .post-title {
    font-size: 13px !important;
    height: 2.9em !important;
    min-height: 2.9em !important;
    max-height: 2.9em !important;
    margin: 0 !important;
  }
}


/* ========== Leifeng pagination (independent rounded buttons) ========== */
.lf-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 52px auto 28px !important;
  padding: 0 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lf-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: auto !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  background: #fff !important;
  border: 1px solid #eceef2 !important;
  color: #5a6172 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s !important;
  white-space: nowrap !important;
}

a.lf-page-btn:hover {
  border-color: #ff4d5a !important;
  color: #ff4d5a !important;
  background: #fff !important;
}

.lf-page-btn.current {
  background: linear-gradient(135deg, #ff6a5f 0%, #ff4d7d 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 77, 90, 0.28) !important;
}

.lf-page-btn.ellipsis {
  border-color: transparent !important;
  background: transparent !important;
  color: #9aa1b0 !important;
  cursor: default !important;
  min-width: 24px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  box-shadow: none !important;
}

.lf-page-btn.disabled {
  opacity: 0.4 !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Hide leftover load-more UI completely */
.btn-load-more,
a.btn-load-more,
.btn-load-more-ajax,
#J_loadMoreBtn {
  display: none !important;
}

/* Optional small archive desc (only when description exists) */
.lf-archive-desc {
  text-align: center;
  color: #9aa1b0;
  font-size: 13px;
  margin: -6px 0 16px;
  padding: 0 16px;
}

@media (max-width: 640px) {
  .lf-pagination {
    gap: 6px !important;
    margin-top: 44px !important;
  }
  .lf-page-btn {
    min-width: 34px !important;
    padding: 7px 11px !important;
    font-size: 13px !important;
  }
}



/* ========== Pagination spacing for ALL list pages ========== */
/* Home / category / search / latest — keep away from cards */
.lf-pagination,
.container-index .lf-pagination,
.container-archive-home .lf-pagination,
.index-main .lf-pagination,
.list-main .lf-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 52px auto 32px !important;
  margin-top: 52px !important;
  margin-bottom: 32px !important;
  padding: 0 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 640px) {
  .lf-pagination,
  .container-index .lf-pagination,
  .container-archive-home .lf-pagination,
  .index-main .lf-pagination,
  .list-main .lf-pagination {
    margin: 44px auto 28px !important;
    margin-top: 44px !important;
    margin-bottom: 28px !important;
    gap: 6px !important;
  }
}


/* ========== Compact category tiles for ~30 items ========== */
@media (max-width: 860px) {
  .nav-top-m.lf-cat-panel,
  #J_navBarMb.lf-cat-panel {
    max-height: min(72vh, 560px) !important;
  }
  .lf-cat-panel-inner {
    max-height: min(72vh, 560px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 10px 12px !important;
  }
  .lf-cat-panel-head {
    padding: 2px 2px 8px !important;
    position: sticky !important;
    top: 0 !important;
    background: #f3f4f6 !important;
    z-index: 2 !important;
  }
  .lf-cat-panel-title {
    font-size: 13px !important;
  }
  .lf-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 3 per row */
    gap: 8px !important;
  }
  .lf-cat-item {
    min-height: 34px !important;
    padding: 7px 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }
}

/* Very small phones: still 3 columns, slightly tighter */
@media (max-width: 360px) {
  .lf-cat-grid {
    gap: 6px !important;
  }
  .lf-cat-item {
    min-height: 32px !important;
    font-size: 11px !important;
    padding: 6px 3px !important;
  }
}



/* ========== Footer: clean, no white panel, no overlap ========== */
.footer {
  margin-top: 24px !important;
  padding: 0 0 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Kill white background panels from theme */
.footer,
.footer .ft-inner,
.footer .ft-links,
.footer .copyright,
.footer .pwb,
.footer .primary,
.footer .primary.pwb {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.footer .ft-links {
  padding: 0 16px 6px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.footer .ft-links .ftl-hd,
.footer .ft-links .links-items,
.footer .ft-links .links-items a,
.footer .ft-links .links-items span {
  color: #9aa1b0 !important;
  font-size: 12px !important;
  background: transparent !important;
}

.footer .ft-inner {
  display: block !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px 8px !important;
  text-align: center !important;
  background: transparent !important;
}

.footer .copyright,
.footer .copyright .ib,
.footer .copyright a,
.footer .pwb,
.footer .pwb a,
.footer .primary.pwb {
  display: inline !important;
  float: none !important;
  color: #9aa1b0 !important;
  background: transparent !important;
  line-height: 1.8 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  box-shadow: none !important;
}

.footer .pwb,
.footer .primary.pwb {
  display: block !important;
  margin-top: 2px !important;
}

/* Content area bottom space before footer */
.container,
.container-index,
.container-archive-home {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
}

.index-main.pw,
.container-index .index-main.pw {
  padding-bottom: 8px !important;
}

/* Pagination stays clearly above footer */
.lf-pagination,
.container-index .lf-pagination,
.container-archive-home .lf-pagination,
.index-main .lf-pagination {
  margin: 40px auto 28px !important;
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 640px) {
  .footer {
    margin-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .lf-pagination,
  .container-index .lf-pagination,
  .container-archive-home .lf-pagination,
  .index-main .lf-pagination {
    margin: 32px auto 20px !important;
  }
}


/* Hide Design by 闪电博 / WBolt footer credit everywhere */
.footer .pwb,
.footer .pwb.primary,
.footer .ib.pwb,
.footer [data-theme-code],
.footer a[href*="wbolt.com"] {
  display: none !important;
}


/* ========== copyright center force ========== */
.footer,
.footer .ft-inner,
.footer .ft-links,
.footer .copyright {
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.footer .ft-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.footer .copyright {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  float: none !important;
}

.footer .copyright .ib,
.footer .copyright span,
.footer .copyright a,
.footer .copyright div {
  display: inline !important;
  float: none !important;
  text-align: center !important;
  margin: 0 .2em !important;
}

/* Theme original may set .primary to text-align:right; kill it */
.footer .primary,
.footer .primary.pwb {
  text-align: center !important;
  float: none !important;
  display: none !important; /* credit already removed */
}


/* ========== Single post (zx-cc layout + pink theme) ========== */
.container-single.lf-single {
  padding-top: 0 !important;
  padding-bottom: 24px !important;
  background: #f5f6f8 !important;
  min-height: auto !important;
}

.lf-single-wrap {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 20px 16px 0 !important;
  box-sizing: border-box !important;
}

.lf-single-main {
  width: 100% !important;
}

/* White content card like resource-site detail */
.lf-article {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid rgba(15, 23, 42, 0.04) !important;
  padding: 28px 28px 32px !important;
  box-sizing: border-box !important;
}

.lf-breadcrumb {
  font-size: 13px !important;
  color: #9aa1b0 !important;
  margin-bottom: 14px !important;
  line-height: 1.6 !important;
}
.lf-breadcrumb a {
  color: #5a6172 !important;
  text-decoration: none !important;
}
.lf-breadcrumb a:hover {
  color: #ff4d5a !important;
}
.lf-breadcrumb .sep {
  margin: 0 6px !important;
  color: #c4c9d4 !important;
}
.lf-breadcrumb .current {
  color: #9aa1b0 !important;
}

.lf-article-title,
.lf-article h1.lf-article-title {
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #1f2430 !important;
  letter-spacing: 0.2px !important;
}

.lf-article-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 16px !important;
  align-items: center !important;
  padding-bottom: 18px !important;
  margin-bottom: 22px !important;
  border-bottom: 1px solid #eceef2 !important;
  color: #9aa1b0 !important;
  font-size: 13px !important;
}
.lf-article-meta .item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.lf-article-meta .item-cat a {
  color: #ff4d5a !important;
  background: #fff0f1 !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.lf-article-meta .item-cat a:hover {
  background: #ff4d5a !important;
  color: #fff !important;
}

/* Content typography */
.lf-article-content {
  color: #1f2430 !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  word-break: break-word !important;
}
.lf-article-content p {
  margin: 0 0 1.1em !important;
}
.lf-article-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 16px auto !important;
  border-radius: 10px !important;
}
.lf-article-content h2,
.lf-article-content h3,
.lf-article-content h4 {
  color: #1f2430 !important;
  font-weight: 800 !important;
  margin: 1.4em 0 0.7em !important;
  line-height: 1.35 !important;
}
.lf-article-content h2 {
  font-size: 22px !important;
  padding-left: 10px !important;
  border-left: 4px solid #ff4d5a !important;
}
.lf-article-content h3 {
  font-size: 18px !important;
}
.lf-article-content a {
  color: #ff4d5a !important;
  text-decoration: none !important;
}
.lf-article-content a:hover {
  text-decoration: underline !important;
}
.lf-article-content blockquote {
  margin: 1.2em 0 !important;
  padding: 14px 18px !important;
  background: #fff6f7 !important;
  border-left: 4px solid #ff4d5a !important;
  color: #5a6172 !important;
  border-radius: 0 10px 10px 0 !important;
}
.lf-article-content ul,
.lf-article-content ol {
  margin: 0 0 1.1em 1.2em !important;
  padding: 0 !important;
}
.lf-article-content li {
  margin: 0.35em 0 !important;
}
.lf-article-content pre,
.lf-article-content code {
  background: #f5f6f8 !important;
  border-radius: 8px !important;
}
.lf-article-content pre {
  padding: 14px !important;
  overflow: auto !important;
}
.lf-article-content code {
  padding: 1px 5px !important;
  font-size: 0.92em !important;
}

/* Tags */
.lf-article-tags {
  margin-top: 22px !important;
  padding-top: 16px !important;
  border-top: 1px solid #eceef2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.lf-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: #fff0f1 !important;
  color: #ff4d5a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.lf-tag:hover {
  background: #ff4d5a !important;
  color: #fff !important;
}

/* Related */
.lf-related {
  margin-top: 28px !important;
}
.lf-related-head h3 {
  margin: 0 0 14px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1f2430 !important;
  text-align: left !important;
}
.lf-related-list.articles-list {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
@media (min-width: 900px) {
  .lf-related-list.articles-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Hide old single layout leftovers if any */
.container-single.lf-single .bread-crumbs,
.container-single.lf-single .title-list,
.container-single.lf-single .post-single,
.container-single.lf-single .sidebar,
.container-single.lf-single .related-box {
  /* not used in new template */
}

/* Comments area soft card */
.lf-single .comments-area,
.lf-single #comments,
.lf-single .sc-comments {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid rgba(15, 23, 42, 0.04) !important;
  padding: 20px !important;
  margin-top: 20px !important;
}

@media (max-width: 640px) {
  .lf-single-wrap {
    padding: 12px 12px 0 !important;
  }
  .lf-article {
    padding: 18px 16px 22px !important;
    border-radius: 14px !important;
  }
  .lf-article-title,
  .lf-article h1.lf-article-title {
    font-size: 22px !important;
  }
  .lf-article-content {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  .lf-related-list.articles-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}


/* Hide comments on single pages completely */
.lf-single #comments,
.lf-single .comments-area,
.lf-single .sc-comments,
.lf-single .comment-respond,
.lf-single .comment-form,
.lf-single .list-comments,
.container-single #comments,
.container-single .comments-area,
.container-single .comment-respond {
  display: none !important;
}