/* FXToPro Article Premium Theme (Blue/White) */
:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#55627a;
  --accent:#2563eb;   /* blue-600 */
  --accent2:#06b6d4;  /* cyan-500 */
  --border:rgba(2,6,23,.08);
  --radius:20px;
  --shadow:0 10px 30px rgba(2,6,23,.06);
}

body.fx-article-theme{
  background:
    radial-gradient(800px 300px at 10% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(700px 280px at 90% 0%, rgba(6,182,212,.06), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg));
  font-family: 'Prompt', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", sans-serif;
  color: var(--text);
}

/* Wrapper */
.fx-article-wrap{
  max-width: 920px;
  margin: clamp(24px, 5vw, 48px) auto;
  padding: 0 18px;
}

/* Hero */
.fx-article-hero{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.98));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 4vw, 28px);
  margin-bottom: 18px;
}
.fx-article-breadcrumb{font-size:14px; color:var(--muted); margin-bottom:8px}
.fx-article-title{
  font-weight:700; line-height:1.15;
  font-size: clamp(26px, 4.2vw, 40px);
  margin: 6px 0 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fx-article-meta{color:var(--muted); font-size:13px}

/* Content card */
.fx-article-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 4vw, 28px);
}
.fx-featured{
  width:100%; border-radius: 16px; aspect-ratio: 16/9; object-fit: cover;
  margin-bottom: 16px; background: #eef3ff;
}

/* Gutenberg */
.fx-content{
  font-size: 17px; line-height: 1.8; color: var(--text);
}
.fx-content h2{ font-size: clamp(22px, 3.2vw, 28px); margin: 20px 0 10px }
.fx-content h3{ font-size: clamp(18px, 2.6vw, 22px); margin: 18px 0 8px }
.fx-content p{ margin: 10px 0 }
.fx-content a{ color: var(--accent); text-decoration: none }
.fx-content a:hover{ text-decoration: underline }
.fx-content ul, .fx-content ol{ padding-left: 1.2rem }
.fx-content blockquote{
  border-left: 4px solid var(--accent);
  background: linear-gradient(90deg, rgba(37,99,235,.08), rgba(6,182,212,.08));
  padding: 10px 14px; border-radius: 12px; margin: 14px 0; color: #22324d;
}

/* CTA */
.fx-cta{
  margin-top: 22px;
  background: linear-gradient(120deg, rgba(37,99,235,.10), rgba(6,182,212,.10));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.fx-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px; border-radius:999px; color:#fff; text-decoration:none; font-weight:700;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Breadcrumb links */
.fx-article-breadcrumb a{ color: var(--muted); text-decoration: none }
.fx-article-breadcrumb a:hover{ color: var(--accent) }

@media (max-width: 640px){
  .fx-content{ font-size: 16px }
}