/* =====================================================================
   FulfilPharma — สไตล์หน้าคอนเทนต์/บทความ (ใช้คู่กับ app.css)
   ===================================================================== */
.gtop{position:sticky;top:0;z-index:60;background:rgba(245,248,252,.9);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--bd)}
.gtop-in{display:flex;align-items:center;gap:14px;height:64px}
.lang-switch{display:inline-flex;gap:2px;background:var(--sky-100);border-radius:var(--r-pill);padding:3px}
.lang-switch a{font-family:var(--font-head);font-weight:600;font-size:.8rem;color:var(--ink-soft);padding:6px 11px;border-radius:var(--r-pill)}
.lang-switch a.on{background:#fff;color:var(--blue-700);box-shadow:var(--sh-sm)}

.breadcrumb{font-size:.84rem;color:var(--ink-faint);padding:18px 0 0}
.breadcrumb a{color:var(--blue-700)} .breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin:0 6px;color:var(--ink-faint)}

.article{max-width:780px;margin-inline:auto;padding-bottom:40px}
.art-head{padding:14px 0 8px}
.art-head h1{font-size:clamp(1.6rem,4.5vw,2.4rem);color:var(--navy);line-height:1.18;margin-top:8px}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;font-size:.86rem;color:var(--ink-soft)}
.art-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-faint)}
.pharma-badge{display:inline-flex;align-items:center;gap:8px;background:var(--teal-soft);color:#0c6b5b;font-weight:600;font-size:.82rem;padding:6px 12px;border-radius:var(--r-pill)}
.pharma-badge .ico{width:1.05em;height:1.05em}

.prose{font-size:1.07rem;line-height:1.78;color:#1d3349}
.prose h2{font-size:1.42rem;color:var(--navy);margin:1.9em 0 .5em;line-height:1.25}
.prose h3{font-size:1.12rem;color:var(--blue-700);margin:1.5em 0 .4em}
.prose p{margin:.9em 0}
.prose ul,.prose ol{margin:.8em 0;padding-left:1.4em}
.prose li{margin:.45em 0}
.prose a{color:var(--blue-700);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:#16293a}
.prose img{border-radius:var(--r);margin:1.2em 0}

.callout{background:var(--sky-100);border:1px solid var(--bd);border-left:4px solid var(--blue);border-radius:var(--r);padding:14px 18px;margin:1.4em 0;font-size:.98rem}
.callout.warn{background:var(--gold-soft);border-left-color:var(--gold);color:#5e4a14}
.callout.tip{background:var(--teal-soft);border-left-color:var(--teal);color:#0c5346}
.callout b{font-family:var(--font-head)}

.toc{background:var(--paper);border:1px solid var(--bd);border-radius:var(--r);padding:16px 20px;margin:18px 0 6px}
.toc b{font-family:var(--font-head);color:var(--navy);font-size:.92rem}
.toc ol{margin:8px 0 0;padding-left:1.2em;font-size:.95rem}
.toc a{color:var(--blue-700)}

/* FAQ */
.faq{margin-top:2.2em}
.faq h2{font-size:1.42rem;color:var(--navy);margin-bottom:.4em}
.faq details{background:var(--paper);border:1px solid var(--bd);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-family:var(--font-head);font-weight:500;color:var(--navy);font-size:1.02rem;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 18px 16px;color:var(--ink-soft);line-height:1.7}

/* CTA band */
.cta-band{background:radial-gradient(600px 300px at 15% 0%,rgba(194,145,47,.2),transparent 60%),linear-gradient(135deg,var(--blue),var(--navy-900));color:#fff;border-radius:var(--r-xl);padding:36px 30px;margin:2.4em 0 0;text-align:center;box-shadow:var(--sh-lg)}
.cta-band h2{color:#fff;font-size:clamp(1.4rem,3vw,1.9rem)}
.cta-band p{color:#cfe2f5;margin-top:10px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* related + hub cards */
.related{margin-top:2.6em}
.related h2{font-size:1.2rem;color:var(--navy);margin-bottom:14px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.acard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;transition:transform .16s,box-shadow .16s}
.acard:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.acard .ac-body{padding:20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.acard .tag{align-self:flex-start;font-family:var(--font-head);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gold)}
.acard h3{font-size:1.12rem;color:var(--navy);line-height:1.3}
.acard p{font-size:.92rem;color:var(--ink-soft);flex:1}
.acard .more{font-family:var(--font-head);font-weight:600;color:var(--blue-700);font-size:.9rem;display:inline-flex;align-items:center;gap:6px;margin-top:4px}

/* hub hero */
.hub-hero{text-align:center;padding:30px 0 26px;max-width:680px;margin-inline:auto}
.hub-hero h1{font-size:clamp(1.8rem,5vw,2.6rem);color:var(--navy)}
.hub-hero p{color:var(--ink-soft);margin-top:12px;font-size:1.08rem}

.gfoot{background:var(--navy-900);color:#bcd6ee;padding:34px 0;margin-top:50px;font-size:.9rem}
.gfoot a{color:#8fc0f0}
.gfoot .cols{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
.gfoot b{color:#fff;font-family:var(--font-head);display:block;margin-bottom:6px}