/* Shared editorial blog/category archive */
.unx-archive-insight {
  --archive-ink: var(--ink, var(--brand-ink, #0b1220));
  --archive-muted: var(--muted, var(--brand-muted, #5f6b7a));
  --archive-border: var(--border, var(--line, var(--brand-border, #e3e7ee)));
  --archive-paper: var(--paper, var(--brand-bg, #f7fbff));
  --archive-surface: var(--white, var(--surface, var(--brand-surface, #fff)));
  --archive-blue: var(--blue, var(--brand, var(--brand-primary, #2d5bff)));
  --archive-radius: var(--r-xl, var(--radius-xl, 30px));
  --archive-shadow: var(--shadow-soft, var(--shadow-sm, 0 18px 42px rgba(14,17,22,.07)));
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--archive-blue) 13%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--archive-surface) 88%, var(--archive-paper)) 0%, var(--archive-paper) 100%);
}

.insights-archive-hero {
  padding: 80px 0 24px;
}

.insights-hero-inner {
  max-width: 820px;
}

.insights-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--archive-blue);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.insights-hero-inner h1 {
  margin: 0;
  color: var(--archive-ink);
  font-family: var(--brand-font-display, "Inter Tight", "Inter", system-ui, sans-serif);
  font-size: clamp(44px, 6.2vw, 82px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.042em;
}

.insights-hero-description {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--archive-muted);
  font-size: clamp(16px, 1.24vw, 18px);
  font-weight: 650;
  line-height: 1.68;
}

.insights-hero-description p {
  margin: 0;
}

.insights-topic-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  margin-top: 30px;
  padding: 8px;
  border: 1px solid var(--archive-border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--archive-surface) 90%, transparent);
  box-shadow: 0 16px 42px rgba(14,17,22,.06);
  scrollbar-width: none;
}

.insights-topic-tabs::-webkit-scrollbar {
  display: none;
}

.insights-topic-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--archive-muted);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.insights-topic-tabs a:hover {
  transform: translateY(-1px);
  color: var(--archive-ink);
}

.insights-topic-tabs a.active {
  background: var(--archive-ink);
  color: #fff;
  box-shadow: 0 14px 28px rgba(14,17,22,.14);
}

.insights-archive-listing {
  padding: 38px 0 108px;
}

.insights-editorial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.insights-editorial-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--archive-border) 88%, #fff);
  border-radius: 26px;
  background: color-mix(in srgb, var(--archive-surface) 92%, transparent);
  box-shadow: var(--archive-shadow);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.insights-editorial-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--archive-blue) 24%, var(--archive-border));
  box-shadow: 0 28px 68px rgba(14,17,22,.12);
}

.insights-card-media {
  display: block;
  position: relative;
  aspect-ratio: 1.48 / 1;
  overflow: hidden;
  margin: 12px 12px 0;
  border-radius: 20px;
  background: color-mix(in srgb, var(--archive-blue) 8%, var(--archive-surface));
  color: var(--archive-blue);
  box-shadow: none;
}

.insights-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .34s ease, filter .34s ease;
}

.insights-editorial-card:hover .insights-card-media img {
  transform: scale(1.06);
  filter: saturate(1.06);
}

.insights-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--archive-blue);
  font-size: 34px;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--archive-blue) 18%, transparent), transparent 46%),
    color-mix(in srgb, var(--archive-blue) 8%, #fff);
}

.insights-card-body {
  padding: 18px 18px 22px;
}

.insights-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-height: 18px;
  color: var(--archive-muted);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .105em;
  line-height: 1.35;
  text-transform: uppercase;
}

.insights-card-tag {
  --tag-bg: color-mix(in srgb, var(--archive-blue) 10%, #fff);
  --tag-fg: var(--archive-blue);
  --tag-ring: color-mix(in srgb, var(--archive-blue) 18%, transparent);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 6px 9px;
  border: 1px solid var(--tag-ring);
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-fg);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(14,17,22,.045);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.insights-card-tag:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 12px 24px rgba(14,17,22,.07);
}

.insights-card-tag.term-ai-automation {
  --tag-bg: #eef3ff;
  --tag-fg: #2454f4;
  --tag-ring: rgba(36,84,244,.18);
}

.insights-card-tag.term-seo-geo {
  --tag-bg: #ecfdf5;
  --tag-fg: #047857;
  --tag-ring: rgba(4,120,87,.18);
}

.insights-card-tag.term-e-commerce {
  --tag-bg: #eef6ff;
  --tag-fg: #c2410c;
  --tag-ring: rgba(194,65,12,.18);
}

.insights-card-tag.term-tai-chinh {
  --tag-bg: #f3f8ff;
  --tag-fg: #6d28d9;
  --tag-ring: rgba(109,40,217,.18);
}

.insights-card-tag.term-bat-dong-san {
  --tag-bg: #f0fdfa;
  --tag-fg: #0f766e;
  --tag-ring: rgba(15,118,110,.18);
}

.insights-card-tag.term-uncategorized {
  --tag-bg: #f3f4f6;
  --tag-fg: #374151;
  --tag-ring: rgba(55,65,81,.14);
}

.insights-card-body h2 {
  margin: 12px 0 9px;
  color: var(--archive-ink);
  font-family: var(--brand-font-display, "Inter Tight", "Inter", system-ui, sans-serif);
  font-size: clamp(14.2px, .82vw, 15.8px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: wrap !important;
  hyphens: none !important;
}

.insights-card-body h2 a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--archive-blue), var(--archive-blue));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: background-size .24s ease, color .24s ease;
}

.insights-editorial-card:hover h2 a {
  color: var(--archive-blue);
  background-size: 100% 2px;
}

.insights-card-body p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--archive-muted);
  font-size: 13.8px;
  font-weight: 600;
  line-height: 1.58;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.insights-pagination {
  margin-top: 54px;
}

.insights-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.insights-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--archive-border);
  background: var(--archive-surface);
  color: var(--archive-ink);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(14,17,22,.06);
}

.insights-pagination .page-numbers.current,
.insights-pagination .page-numbers:hover {
  border-color: var(--archive-ink);
  background: var(--archive-ink);
  color: #fff;
}

.insights-empty-state {
  max-width: 720px;
  margin: 0 auto;
  padding: 54px;
  border-radius: var(--archive-radius);
  background: var(--archive-surface);
  border: 1px solid var(--archive-border);
  text-align: center;
  box-shadow: var(--archive-shadow);
}

.insights-empty-state span {
  color: var(--archive-blue);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.insights-empty-state h2 {
  margin: 16px 0 10px;
  color: var(--archive-ink);
  font-family: var(--brand-font-display, "Inter Tight", "Inter", system-ui, sans-serif);
  font-size: clamp(32px, 4vw, 56px);
  line-height: .98;
  letter-spacing: -.045em;
}

.insights-empty-state p {
  margin: 0 auto 24px;
  max-width: 520px;
  color: var(--archive-muted);
  font-weight: 650;
  line-height: 1.7;
}

@media (max-width: 1120px) {
  .insights-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .insights-archive-hero {
    padding: 74px 0 18px;
  }

  .insights-hero-inner h1 {
    font-size: clamp(36px, 12vw, 52px);
    line-height: 1;
  }

  .insights-hero-description {
    font-size: 16px;
  }

  .insights-topic-tabs {
    border-radius: 20px;
    padding: 8px;
  }

  .insights-topic-tabs a {
    min-height: 38px;
    padding: 9px 14px;
    font-size: 13px;
  }

  .insights-archive-listing {
    padding: 30px 0 78px;
  }

  .insights-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .insights-editorial-card {
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(14,17,22,.06);
  }

  .insights-card-media {
    aspect-ratio: 1.16 / 1;
    margin: 8px 8px 0;
    border-radius: 14px;
  }

  .insights-card-body {
    padding: 10px 10px 12px;
  }

  .insights-card-meta {
    gap: 4px 6px;
    min-height: 0;
    font-size: 7.5px;
    letter-spacing: .065em;
    line-height: 1.25;
  }

  .insights-card-tag {
    min-height: 20px;
    padding: 5px 7px;
    font-size: 7.5px;
    letter-spacing: .055em;
    box-shadow: 0 6px 14px rgba(14,17,22,.04);
  }

  .insights-card-body h2 {
    display: -webkit-box;
    overflow: hidden;
    margin: 8px 0 0;
    font-size: 10.5px !important;
    line-height: 1.32 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: wrap !important;
    hyphens: none !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .insights-card-body p {
    display: none;
  }

  .insights-empty-state {
    padding: 34px 22px;
    border-radius: 28px;
  }
}