/* =====================================================================
   article.css — หน้าบทความเดี่ยว (blog-*.html)
   ===================================================================== */
.ar-wrap{ background:#f6f9fd; }
.ar-hero{
  position:relative; color:#fff; padding:56px 0 64px; overflow:hidden;
  background:radial-gradient(60% 120% at 100% 0%,rgba(56,189,248,.35),transparent 60%),linear-gradient(135deg,#0b2a4a,#0b4f9c 60%,#0e7ae6);
}
.ar-hero .ar-in{ max-width:860px; margin:0 auto; padding:0 20px; }
.ar-crumb{ font-size:14px; color:#bae6fd; margin-bottom:14px; }
.ar-crumb a{ color:#e0f2fe; text-decoration:none; }
.ar-crumb a:hover{ text-decoration:underline; }
.ar-tag{ display:inline-block; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.16); font-size:13px; font-weight:600; letter-spacing:.04em; }
.ar-hero h1{ margin:14px 0 12px; font-size:clamp(28px,4vw,42px); line-height:1.28; }
.ar-hero p{ margin:0; font-size:17px; line-height:1.75; color:#dbeafe; max-width:720px; }
.ar-meta{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; color:#bfdbfe; }
.ar-meta i{ margin-right:6px; }

.ar-body{ max-width:860px; margin:-34px auto 0; padding:0 20px 56px; position:relative; }
.ar-card{ background:#fff; border:1px solid #e2ebf5; border-radius:22px; box-shadow:0 18px 45px rgba(8,48,86,.08); padding:40px 44px; }
.ar-card > img.ar-cover{ width:100%; height:auto !important; max-height:440px; border-radius:16px; display:block; margin:0 0 28px; aspect-ratio:16/9 !important; object-fit:cover; }
.ar-card h2{ margin:38px 0 12px; font-size:25px; line-height:1.4; color:#0b1f33; }
.ar-card h2:first-of-type{ margin-top:6px; }
.ar-card h3{ margin:26px 0 8px; font-size:19px; color:#0b1f33; }
.ar-card p, .ar-card li{ font-size:16.5px; line-height:1.9; color:#334155; }
.ar-card > p{ margin:0 0 16px; }
.ar-card ul, .ar-card ol{ padding-left:22px; margin:8px 0 16px; }
.ar-card li{ margin:4px 0; }
.ar-card a{ color:#0759b0; }
.ar-toc{ background:#f1f7fe; border:1px solid #dbeafe; border-radius:16px; padding:18px 22px; margin:0 0 26px; }
.ar-toc strong{ display:block; margin-bottom:6px; color:#0b1f33; }
.ar-toc ol{ margin:0; }
.ar-toc a{ text-decoration:none; }
.ar-toc a:hover{ text-decoration:underline; }
.ar-check{ list-style:none; padding:0 !important; }
.ar-check li{ position:relative; padding-left:34px; }
.ar-check li::before{
  content:"✓"; font-weight:700; position:absolute; left:0; top:5px;
  width:22px; height:22px; border-radius:50%; background:#e0f2fe; color:#0e7ae6; font-size:13px; line-height:1; display:grid; place-items:center;
}
.ar-point{ display:grid; grid-template-columns:44px 1fr; gap:14px; margin:22px 0; }
.ar-point .n{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#38bdf8,#0e7ae6); box-shadow:0 8px 18px rgba(14,122,230,.25); }
.ar-point h3{ margin:4px 0 4px; }
.ar-point p{ margin:0; }
.ar-note{ border-left:4px solid #0e7ae6; background:#f8fbff; padding:14px 18px; border-radius:0 12px 12px 0; margin:20px 0; }
.ar-note p{ margin:0; }
.ar-video{ margin:22px 0; }
.ar-table{ width:100%; border-collapse:collapse; margin:14px 0 20px; font-size:15.5px; }
.ar-table th,.ar-table td{ border:1px solid #e2ebf5; padding:10px 12px; text-align:left; vertical-align:top; line-height:1.6; }
.ar-table th{ background:#f1f7fe; color:#0b1f33; }
.ar-faq details{ border:1px solid #e2ebf5; border-radius:14px; padding:14px 18px; margin:10px 0; background:#fff; }
.ar-faq summary{ cursor:pointer; font-weight:600; color:#0b1f33; font-size:16.5px; }
.ar-faq details p{ margin:10px 0 0; }
.ar-cta{
  margin-top:34px; border-radius:20px; padding:28px 30px; color:#fff; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:linear-gradient(135deg,#0b2a4a,#0b4f9c 55%,#0e7ae6);
}
.ar-cta h2{ margin:0 0 6px !important; color:#fff !important; font-size:22px !important; }
.ar-cta p{ margin:0; color:#dbeafe !important; font-size:15.5px !important; }
.ar-cta .btns{ display:flex; gap:10px; flex-wrap:wrap; }
.ar-cta .btns a{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px; font-weight:600; text-decoration:none; color:#fff; }
.ar-cta .b-line{ background:#06c755; }
.ar-cta .b-tel{ background:#fff; color:#0759b0 !important; }
.ar-card .bc-real{ margin-top:22px; }
@media (max-width:767px){
  .ar-hero{ padding:40px 0 54px; }
  .ar-card{ padding:26px 20px; border-radius:18px; }
  .ar-card h2{ font-size:22px; }
  .ar-card p,.ar-card li{ font-size:16px; }
  .ar-table{ font-size:14px; }
}