:root {
  --bg: #f5f7f2;
  --card: #ffffff;
  --text: #16302b;
  --muted: #5b6d68;
  --green: #285e52;
  --green-dark: #1d4b42;
  --line: #d7e2dc;
  --red: #d83a3a;
  --orange: #f7a64a;
  --shadow: 0 10px 30px rgba(22, 48, 43, 0.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(180deg, #f3f6f2 0%, #f9fbf9 100%);
  color: var(--text);
}
a { color: var(--green); text-decoration: none; }
.container { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.narrow-wrap { width: min(760px, calc(100% - 32px)); margin: 0 auto 48px; }
.site-wrap { min-height: 100vh; }
.hero {
  padding: 48px 0 28px;
  background: radial-gradient(circle at top right, rgba(40,94,82,0.12), transparent 30%), linear-gradient(180deg, #eef6f1, #f7faf8);
  border-bottom: 1px solid var(--line);
}
.small-hero,.mini-hero { padding: 32px 0 20px; }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; }
.eyebrow { margin: 0 0 10px; color: var(--green); font-weight: 700; font-size: 14px; letter-spacing: .08em; }
h1 { margin: 0 0 16px; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; }
h2 { margin: 0 0 16px; font-size: 24px; }
h3 { margin: 0 0 12px; font-size: 18px; }
.hero-text, .lead, .field-help, .feature-item span, .knowledge-card p, p, li { color: var(--muted); font-size: 15px; line-height: 1.8; }
.hero-card, .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.hero-card { padding: 18px; display: grid; gap: 12px; }
.feature-item { padding: 14px; border-radius: 16px; background: #f7fbf9; }
.feature-item strong { display: block; margin-bottom: 4px; }
.hero-actions, .button-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 18px; border-radius: 14px; border: 1px solid transparent; font-weight: 700; cursor: pointer;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-secondary { background: #fff; color: var(--green); border-color: var(--line); }
.inline-btn { min-height: 42px; padding: 0 14px; margin-top: 8px; }
.page-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 24px; margin: 30px auto 48px; }
.form-card, .info-card, .confirm-card, .pay-card, .section-card, .article-card { padding: 24px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 8px; font-weight: 700; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"] {
  width: 100%; min-height: 48px; border: 1px solid #cdd8d2; border-radius: 12px; padding: 12px 14px; font-size: 15px;
}
.ticket-grid { display: grid; gap: 12px; }
.ticket-row {
  display: grid; grid-template-columns: 1fr auto 92px; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.ticket-row span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.price-tag { color: var(--green-dark); font-weight: 700; white-space: nowrap; }
.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; }
.alert.error, .mail-status.error { background: #fff1f1; color: #b42318; }
.alert.success, .mail-status.success { background: #edf9f1; color: #1b7f46; }
.info-list { margin: 0; padding-left: 18px; }
.faq-links { display: grid; gap: 10px; }
.faq-links a { padding: 12px; border-radius: 12px; background: #f7fbf9; }
.summary-item, .price-table > div {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.total-row { border-bottom: none; }
.price-red, .pay-amount, .red-note { color: var(--red); font-weight: 700; }
.pay-amount { font-size: 24px; text-align: center; margin: 18px 0; }
.status-title { margin-bottom: 10px; font-weight: 700; }
.mail-status { padding: 12px 14px; border-radius: 12px; margin-bottom: 18px; }
.order-box, .note-box { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fafcfb; }
.qr-wrap { text-align: center; margin: 18px 0; }
.qr-image { width: min(280px, 78vw); border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 30px auto 48px; }
.knowledge-card { display: block; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.article-wrap { margin: 30px auto 48px; }
.article-card h1 { font-size: 32px; margin-bottom: 12px; }
.article-card h2 { margin-top: 22px; }
.section-card { margin-top: 30px; }
code { background: #f3f4f6; padding: 2px 6px; border-radius: 8px; }
.admin-range { margin-bottom: 12px; }
@media (max-width: 860px) {
  .hero-grid, .page-grid, .knowledge-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ticket-row { grid-template-columns: 1fr; }
  .button-row { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; }
  h1 { font-size: 30px; }
  .container, .narrow-wrap { width: min(100% - 24px, 1100px); }
}


.field-error { margin: 8px 0 0; color: var(--red); font-size: 14px; font-weight: 700; }
.confirm-meta-wrap { border: 1px solid var(--line); border-radius: 14px; background: #fafcfb; padding: 16px 18px; margin-bottom: 18px; }
.confirm-line { margin: 0 0 8px; color: var(--text); }
.confirm-line:last-child { margin-bottom: 0; }
.table-scroll { overflow-x: auto; }
.order-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.order-table th, .order-table td { border-bottom: 1px solid var(--line); padding: 14px 12px; text-align: left; vertical-align: top; font-size: 14px; }
.order-table th { background: #f7fbf9; color: var(--text); }
.order-table tbody tr:last-child td { border-bottom: none; }
.ticket-name-cn { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ticket-name-en { color: var(--muted); line-height: 1.6; }
.confirm-total { margin: 18px 0; color: var(--red); font-size: 22px; font-weight: 800; text-align: right; }
.order-note-list p { margin: 0 0 10px; }
.order-note-list p:last-child { margin-bottom: 0; }

.top-banner { width: 100%; background: #eef6f1; }
.top-banner img { display: block; width: 100%; max-width: 1280px; height: auto; margin: 0 auto; }


textarea, select {
  width: 100%; min-height: 48px; border: 1px solid #cdd8d2; border-radius: 12px; padding: 12px 14px; font-size: 15px; font-family: inherit; background:#fff;
}
textarea.cms-editor { min-height: 320px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height:1.7; }
.admin-nav { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.admin-nav a { background:#f7fbf9; border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.cms-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:24px; margin:30px auto 48px; }
.cms-list { display:grid; gap:12px; }
.cms-list-item { border:1px solid var(--line); border-radius:14px; padding:14px; background:#fafcfb; }
.cms-list-item p { margin:4px 0 0; }
.cms-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.mode-switch { display:flex; gap:18px; flex-wrap:wrap; }
.cms-preview-box { margin-top:24px; border-top:1px solid var(--line); padding-top:24px; }
.two-col-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.article-home-grid, .article-list-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.article-home-card, .article-list-card { border:1px solid var(--line); border-radius:18px; padding:18px; background:#fff; box-shadow:var(--shadow); }
.article-list-date, .article-meta { color:var(--muted); font-size:13px; }
.section-head-flex { display:flex; justify-content:space-between; gap:12px; align-items:flex-end; margin-bottom:14px; }
.two-col-layout { display:grid; grid-template-columns:1.3fr .7fr; gap:24px; }
.article-side { padding:24px; align-self:start; }
.article-question-box { border-left:4px solid var(--green); padding:12px 14px; background:#f7fbf9; border-radius:12px; margin-bottom:16px; }
.article-excerpt { margin-bottom:18px; }
.article-body img { max-width:100%; height:auto; border-radius:12px; }
.article-body h2, .article-body h3 { color:var(--text); }
.article-tags { margin-top:24px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tag-chip { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#f0f6f3; border:1px solid var(--line); font-size:13px; color:var(--green-dark); }
.related-list { display:grid; gap:10px; margin-bottom:18px; }
.related-item { display:block; padding:14px; border-radius:14px; background:#f7fbf9; border:1px solid var(--line); }
.related-item strong { display:block; margin-bottom:6px; color:var(--text); }
.related-item span { color:var(--muted); font-size:14px; line-height:1.7; }
.full-btn { width:100%; margin-bottom:10px; }
.banner-slot-section { margin-top:24px; }
.banner-slot-card { padding:24px; }
.banner-slot-image { width:100%; border-radius:16px; display:block; }
@media (max-width: 900px) {
  .cms-grid, .two-col-layout, .article-home-grid, .article-list-grid, .two-col-fields { grid-template-columns:1fr; }
}


.site-nav-wrap{background:#fff;border-bottom:1px solid #e9ecef;position:sticky;top:0;z-index:20}.site-nav{display:flex;gap:24px;overflow:auto;white-space:nowrap;padding:12px 0}.site-nav a{color:#1f2937;text-decoration:none;font-weight:600;font-size:15px}.site-nav a:hover{color:#0f766e}.page-back-wrap{padding:18px 20px 28px}.back-booking-btn{display:inline-block}.top-banner img{display:block;width:100%;height:auto}.article-actions,.hero-actions{display:flex;gap:12px;flex-wrap:wrap}@media (max-width:768px){.site-nav{gap:16px;padding:10px 0}.site-nav a{font-size:14px}}


/* Navigation, buttons, spacing refinements */
.top-banner { background:#ffffff; }
.top-banner img { display:block; width:100%; max-height:420px; object-fit:cover; }
.site-nav-wrap { background:rgba(255,255,255,0.96); border-bottom:1px solid var(--line); box-shadow:0 4px 18px rgba(22,48,43,0.04); }
.site-nav { display:flex; flex-wrap:wrap; gap:12px; padding:14px 0; justify-content:center; }
.site-nav a {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:#fff;
  color:var(--green); font-weight:700; text-align:center; transition:all .2s ease;
}
.site-nav a:hover { background:#f2f8f5; border-color:#b8cbc3; }
.site-nav a.is-active, .site-nav a[aria-current="page"] {
  background:var(--green); color:#fff; border-color:var(--green); box-shadow:0 8px 20px rgba(40,94,82,0.18);
}
.hero.small-hero, .hero.mini-hero { padding-top:28px; padding-bottom:22px; }
.page-grid, .narrow-wrap, .article-list-grid, .cms-grid { margin-top:32px; margin-bottom:56px; }
.form-card, .info-card, .confirm-card, .pay-card, .section-card, .article-card { padding:28px; }
.ticket-row, .info-list li, .faq-links a, .cms-list-item { align-items:center; }
.btn-primary, .btn-secondary, button.btn-primary, button.btn-secondary {
  text-align:center; justify-content:center; align-items:center; white-space:nowrap; line-height:1.2;
  padding:0 22px; min-height:50px; border-radius:14px;
}
.button-row { gap:14px; align-items:center; justify-content:center; margin-top:24px; }
.button-row form { margin:0; }
.inline-btn, .back-booking-btn { min-width:160px; }
.page-back-wrap { margin:8px auto 56px; text-align:center; }
.back-booking-btn { display:inline-flex; }
.order-box p, .confirm-line, .status-title, .mail-status { margin:0 0 10px; }
.note-box, .order-note-list { margin-top:22px; padding:18px 20px; }
.table-scroll { margin-top:18px; }
.order-table th, .order-table td { vertical-align:middle; }
.article-list-card, .knowledge-card, .article-card { padding:26px; }
.article-list-card h2 { margin-top:6px; }
@media (max-width: 768px) {
  .container, .narrow-wrap { width:min(100% - 24px, 1100px); }
  .site-nav { justify-content:flex-start; gap:10px; padding:12px 0; }
  .site-nav a { flex:1 1 calc(50% - 10px); min-width:140px; }
  .page-grid, .hero-grid, .cms-grid { grid-template-columns:1fr; gap:18px; }
  .form-card, .info-card, .confirm-card, .pay-card, .section-card, .article-card { padding:22px; }
  .button-row { flex-direction:column; }
  .button-row > * { width:100%; }
  .button-row .btn-primary, .button-row .btn-secondary, .button-row form button { width:100%; }
}

/* Article hub portal upgrade */
.article-hub-hero {
  background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 100%);
}
.article-hub-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}
.article-hub-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.article-hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 24px;
  margin-top: 32px;
  margin-bottom: 56px;
}
.featured-article-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #f5fbf7 100%);
  box-shadow: var(--shadow);
}
.featured-article-meta,
.portal-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.featured-badge,
.portal-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e8f5ef;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
}
.featured-article-card h2 {
  margin: 14px 0 12px;
  font-size: 32px;
  line-height: 1.25;
}
.featured-excerpt {
  font-size: 16px;
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: 18px;
}
.featured-actions,
.portal-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.article-latest-strip,
.article-archive-section {
  margin-top: 28px;
}
.article-home-grid-portal {
  margin-top: 14px;
}
.portal-mini-card {
  padding: 22px;
}
.portal-mini-card h3 {
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.45;
}
.portal-article-grid {
  margin-top: 14px;
}
.portal-article-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.portal-article-card h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
}
.portal-summary {
  color: var(--muted);
  line-height: 1.85;
  margin: 0 0 4px;
}
.article-hub-side {
  display: grid;
  gap: 18px;
  align-content: start;
}
.portal-side-card {
  padding: 22px;
  border-radius: 18px;
}
.popular-question-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.popular-question-item {
  display: block;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fcfa;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.popular-question-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(22,48,43,0.06);
  border-color: #bfd1c9;
}
.popular-question-item strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  line-height: 1.7;
}
.popular-question-item span {
  color: var(--muted);
  font-size: 13px;
}
.portal-booking-box p {
  line-height: 1.85;
}
.text-link {
  color: var(--green-dark);
  font-weight: 700;
}
@media (max-width: 960px) {
  .article-hub-head,
  .article-hub-layout {
    grid-template-columns: 1fr;
    display: grid;
  }
  .article-hub-cta {
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .featured-article-card,
  .portal-side-card,
  .portal-mini-card,
  .portal-article-card {
    padding: 20px;
  }
  .featured-article-card h2 {
    font-size: 26px;
  }
  .portal-article-card h2,
  .portal-mini-card h3 {
    font-size: 20px;
  }
  .featured-actions,
  .portal-card-actions,
  .article-hub-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .featured-actions .btn-primary,
  .featured-actions .btn-secondary,
  .portal-card-actions .btn-secondary,
  .article-hub-cta .btn-primary,
  .article-hub-cta .btn-secondary {
    width: 100%;
  }
}


.checkbox-field label{display:flex;align-items:center;gap:10px;font-weight:600}
.checkbox-field input[type='checkbox']{width:18px;height:18px}
.template-help{margin-top:8px;word-break:break-all;line-height:1.8}
.admin-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.admin-nav a{display:inline-flex;align-items:center;justify-content:center;text-align:center}


.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:20px}
.admin-link-card{text-decoration:none;color:inherit;padding:20px}
.admin-link-card h3{margin:0 0 8px 0}
.admin-link-card p{margin:0;color:#666;line-height:1.7}
.button-row{display:flex;flex-wrap:wrap;gap:10px}
.inline-btn{display:inline-flex;align-items:center;justify-content:center}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th,.table td{padding:12px 10px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.table th{background:#fafafa}
.muted-row{font-size:13px;color:#666;background:#fcfcfc}
.text-link{color:#1677ff;text-decoration:none}
.danger-link{color:#cf1322}
.empty-state{padding:18px;border:1px dashed #d9d9d9;border-radius:10px;background:#fafafa;color:#666}

.checkbox-label{display:flex;align-items:center;gap:8px;font-weight:600;}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;}


.admin-notice.success{background:#f6ffed;border:1px solid #b7eb8f;color:#389e0d;padding:12px 14px;border-radius:8px;margin:0 0 16px 0}
.articles-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.article-sort-form{display:flex;align-items:center;gap:10px}
.article-sort-form select{min-width:160px}
.bulk-actions-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px 0;flex-wrap:wrap}
.select-all-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#333}
.bulk-delete-btn{padding:8px 14px}
.articles-admin-table .cms-actions{display:flex;gap:8px;flex-wrap:wrap}

.tag-chip{ text-decoration:none; }
.tag-chip.small{ padding:4px 8px; font-size:12px; }
.article-card-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.tag-cloud{ margin-top:8px; }
.portal-tag-cloud .tag-chip{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.article-lead{ padding:16px 18px; border-radius:14px; background:#f8fafc; border:1px solid #e2e8f0; margin:18px 0; }
.article-note{ padding:14px 16px; border-radius:14px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; margin:18px 0; line-height:1.8; }
.penanghill-service-box{ padding:18px; border-radius:18px; background:linear-gradient(180deg,#ecfeff,#f0fdf4); border:1px solid #bae6fd; margin:22px 0; }
.penanghill-service-box h2{ margin:0 0 8px 0; font-size:22px; }
.penanghill-service-box p{ margin:0 0 14px 0; }
.article-cta{ display:inline-flex; padding:10px 16px; border-radius:999px; background:#0f766e; color:#fff; text-decoration:none; font-weight:600; }
.portal-article-card .article-card-tags,.portal-mini-card .article-card-tags{ min-height:28px; }

.article-tag-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.related-tags-card{margin-top:22px}
.portal-side-text{color:#52606d;line-height:1.7;font-size:14px}
.tag-chip-count{display:inline-block;margin-left:4px;opacity:.75;font-size:12px}


/* article hub text overflow fixes */
.related-tags-card h2,
.portal-side-card h3,
.article-hub-section-head h2,
.article-card-tags .tag-chip,
.tag-cloud .tag-chip {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.related-tags-card,
.portal-side-card {
  overflow: hidden;
}
.related-tags-card .article-card-tags,
.portal-side-card .article-card-tags {
  align-items: flex-start;
}
.related-tags-card .tag-chip,
.portal-side-card .tag-chip {
  max-width: 100%;
  white-space: normal;
  line-height: 1.45;
}


/* article hub spacing refinements */
.related-tags-card,
.portal-side-card,
.portal-tag-cloud {
  padding: 24px 28px;
}
.related-tags-card .section-head-flex,
.related-tags-card .article-card-tags,
.portal-side-card .article-card-tags,
.portal-tag-cloud .article-card-tags {
  margin-left: 2px;
}
.related-tags-card .eyebrow,
.related-tags-card h2,
.portal-side-card .eyebrow,
.portal-side-card h3 {
  padding-left: 2px;
}
.related-tags-card .article-card-tags,
.portal-side-card .article-card-tags,
.portal-tag-cloud .article-card-tags {
  margin-top: 18px;
}
.tag-result-grid {
  grid-template-columns: 1fr;
}
.tag-result-card {
  padding: 22px 24px;
}
.tag-result-card h2 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.35;
}
.tag-result-card .portal-summary {
  margin: 0;
}
@media (max-width: 640px) {
  .related-tags-card,
  .portal-side-card,
  .portal-tag-cloud {
    padding: 20px 18px;
  }
}


/* tag layout breathing room fix */
.article-home-grid-portal + .related-tags-card {
  margin-top: 40px;
}
.related-tags-card {
  padding: 30px 34px;
}
.related-tags-card .section-head-flex {
  margin-bottom: 8px;
}
.related-tags-card .eyebrow,
.related-tags-card h2,
.related-tags-card .article-card-tags {
  padding-left: 8px;
  padding-right: 8px;
}
.related-tags-card .eyebrow {
  margin-bottom: 10px;
}
.related-tags-card h2 {
  margin-bottom: 18px;
  line-height: 1.25;
}
.related-tags-card .article-card-tags {
  margin-top: 22px;
  gap: 12px;
}
.portal-tag-cloud .article-card-tags,
.related-tags-card .article-card-tags {
  padding-bottom: 6px;
}
@media (max-width: 640px) {
  .article-home-grid-portal + .related-tags-card {
    margin-top: 28px;
  }
  .related-tags-card {
    padding: 24px 20px;
  }
  .related-tags-card .eyebrow,
  .related-tags-card h2,
  .related-tags-card .article-card-tags {
    padding-left: 6px;
    padding-right: 6px;
  }
}