/* Shared styles for Daisenko blog / article pages */
:root{
  --art-ink:#0f2233; --art-muted:#51657a; --art-line:#e4ebf2;
  --art-accent:#0e7490; --art-accent2:#0891b2; --art-soft:#ecf7fb; --art-bg:#f6f9fb;
}
.art-wrap{ max-width:820px; margin:0 auto; padding:0 20px;
  font-family:"Noto Sans Thai","Kanit",Inter,system-ui,sans-serif; color:var(--art-ink); }

.art-hero{ background:linear-gradient(135deg,#0e7490,#0891b2 70%,#22b8cf); color:#fff; padding:48px 20px; }
.art-hero .in{ max-width:820px; margin:0 auto; }
.art-hero .crumb{ font-size:13px; opacity:.85; margin-bottom:10px; }
.art-hero .crumb a{ color:#fff; text-decoration:underline; }
.art-hero h1{ font-size:clamp(23px,4.5vw,34px); line-height:1.28; margin:0 0 12px; font-weight:700; }
.art-hero p{ margin:0; font-size:clamp(15px,2.2vw,17px); opacity:.95; line-height:1.6; max-width:62ch; }

.art-body{ padding:32px 0 10px; }
.art-body h2{ font-size:21px; margin:32px 0 12px; font-weight:700; line-height:1.3;
  border-left:4px solid var(--art-accent); padding-left:12px; }
.art-body h3{ font-size:17px; margin:20px 0 8px; font-weight:600; }
.art-body p{ margin:0 0 14px; line-height:1.8; color:var(--art-ink); }
.art-body a{ color:var(--art-accent); }
.art-body ul,.art-body ol{ margin:0 0 16px; padding-left:22px; line-height:1.85; }
.art-body li{ margin-bottom:6px; }

.lead-box{ background:var(--art-soft); border:1px solid #cfeaf2; border-left:4px solid var(--art-accent);
  border-radius:12px; padding:16px 18px; margin:0 0 8px; }
.lead-box .lab{ font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--art-accent);
  text-transform:uppercase; margin-bottom:6px; }
.lead-box p{ margin:0; line-height:1.75; }

.tbl-wrap{ overflow-x:auto; margin:8px 0 20px; }
table.art{ width:100%; border-collapse:collapse; font-size:14.5px; background:#fff;
  border:1px solid var(--art-line); border-radius:12px; overflow:hidden; }
table.art th,table.art td{ text-align:left; padding:11px 13px; border-bottom:1px solid var(--art-line); vertical-align:top; }
table.art thead th{ background:#0f2233; color:#fff; font-weight:600; }
table.art tbody tr:nth-child(even){ background:#f9fcfd; }
table.art caption{ caption-side:bottom; text-align:left; font-size:12.5px; color:var(--art-muted); padding:8px 2px; }

.faq details{ border:1px solid var(--art-line); border-radius:12px; padding:2px 16px; margin-bottom:10px; background:#fff; }
.faq summary{ cursor:pointer; font-weight:600; padding:12px 0; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"\FF0B"; color:var(--art-accent); font-weight:700; margin-right:8px; }
.faq details[open] summary::before{ content:"\FF0D"; }
.faq details div{ padding:0 0 14px; color:var(--art-muted); line-height:1.75; }

.art-cta{ background:#0f2233; color:#fff; border-radius:16px; padding:26px 22px; margin:30px 0; text-align:center; }
.art-cta h2{ border:none; padding:0; margin:0 0 6px; color:#fff; }
.art-cta p{ margin:0 0 16px; opacity:.85; }
.art-cta .btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.art-cta a{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:10px;
  font-weight:600; text-decoration:none; }
.art-cta a.line{ background:#22b8cf; color:#042a33; }
.art-cta a.ghost{ border:1px solid rgba(255,255,255,.4); color:#fff; }

.disc{ font-size:12.5px; color:var(--art-muted); margin-top:24px; padding-top:12px; border-top:1px solid var(--art-line); }

/* Blog index */
.blog-grid{ max-width:980px; margin:0 auto; padding:34px 20px 20px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;
  font-family:"Noto Sans Thai","Kanit",Inter,system-ui,sans-serif; }
.blog-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--art-line);
  border-radius:16px; overflow:hidden; text-decoration:none; color:var(--art-ink);
  transition:transform .15s ease, box-shadow .15s ease; }
.blog-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(14,116,144,.5); }
.blog-card .tag{ display:inline-block; align-self:flex-start; margin:16px 16px 0; font-size:12px;
  font-weight:700; color:var(--art-accent); background:var(--art-soft); padding:4px 10px; border-radius:999px; }
.blog-card h3{ margin:10px 16px 6px; font-size:17px; line-height:1.4; font-weight:700; }
.blog-card p{ margin:0 16px 16px; font-size:14px; color:var(--art-muted); line-height:1.6; flex:1; }
.blog-card .more{ margin:0 16px 16px; font-size:13.5px; font-weight:700; color:var(--art-accent); }