/* ===== BLOG GLOBAL ===== */
:root {
  --blog-primary: #6c5ce7;
  --blog-accent: #fd79a8;
  --blog-pdf: #ff6b6b;
  --blog-invoice: #a29bfe;
  --blog-pay: #00b894;
  --blog-url: #fdcb6e;
  --blog-alert: #74b9ff;
  --blog-text: #2d3436;
  --blog-muted: #636e72;
  --blog-border: #dfe6e9;
  --blog-bg: #f8f9ff;
  --blog-card-bg: #ffffff;
  --blog-radius: 16px;
  --blog-shadow: 0 4px 24px rgba(108,92,231,.08);
  --blog-shadow-hover: 0 8px 40px rgba(108,92,231,.18);
}
* { box-sizing: border-box; margin: 0; padding: 0 }
body { font-family: 'Sarabun', sans-serif; background: var(--blog-bg); color: var(--blog-text); line-height: 1.7 }
a { color: var(--blog-primary); text-decoration: none }
a:hover { text-decoration: underline }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem }

/* ===== NAVBAR ===== */
.blog-navbar { background: #fff; border-bottom: 1px solid var(--blog-border); padding: 1rem 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,.06) }
.blog-navbar .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem }
.blog-navbar .logo { font-size: 1.25rem; font-weight: 800; color: var(--blog-primary) }
.blog-navbar .nav-links { display: flex; gap: 1.5rem; align-items: center }
.blog-navbar .nav-links a { color: var(--blog-muted); font-weight: 500; font-size: .95rem; transition: color .2s }
.blog-navbar .nav-links a:hover { color: var(--blog-primary); text-decoration: none }

/* ===== BLOG HERO ===== */
.blog-hero { background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); padding: 3rem 0 0; margin-bottom: 3rem }
.blog-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end }
.blog-hero-text { color: #fff; padding-bottom: 2.5rem }
.blog-hero-eyebrow { font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-bottom: .75rem }
.blog-hero-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.3; margin-bottom: 1rem }
.blog-hero-excerpt { font-size: 1rem; opacity: .85; margin-bottom: 1.5rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.blog-hero-meta { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem }
.blog-hero-img { border-radius: var(--blog-radius) var(--blog-radius) 0 0; overflow: hidden; height: 280px }
.blog-hero-img img { width: 100%; height: 100%; object-fit: cover }
.btn-hero { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--blog-primary); padding: .75rem 1.75rem; border-radius: 100px; font-weight: 700; font-size: .95rem; transition: all .2s }
.btn-hero:hover { background: var(--blog-primary); color: #fff; text-decoration: none; transform: translateY(-2px) }

/* ===== SERVICE BADGE ===== */
.svc-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: 100px; font-size: .78rem; font-weight: 700; letter-spacing: .02em }
.svc-badge.pdf    { background: rgba(255,107,107,.12); color: var(--blog-pdf) }
.svc-badge.invoice{ background: rgba(162,155,254,.15); color: #6c5ce7 }
.svc-badge.pay    { background: rgba(0,184,148,.12);   color: var(--blog-pay) }
.svc-badge.url    { background: rgba(253,203,110,.2);  color: #e17055 }
.svc-badge.alert  { background: rgba(116,185,255,.15); color: #0984e3 }
.svc-badge.general{ background: rgba(108,92,231,.1);   color: var(--blog-primary) }

/* ===== FILTER BAR ===== */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 2rem; background: #fff; padding: 1rem 1.5rem; border-radius: var(--blog-radius); box-shadow: var(--blog-shadow) }
.filter-btn { padding: .45rem 1.1rem; border-radius: 100px; border: 2px solid var(--blog-border); background: transparent; color: var(--blog-muted); font-family: 'Sarabun', sans-serif; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s }
.filter-btn:hover, .filter-btn.active { border-color: var(--blog-primary); background: var(--blog-primary); color: #fff }
.filter-search { margin-left: auto; padding: .45rem 1rem; border: 2px solid var(--blog-border); border-radius: 100px; font-family: 'Sarabun', sans-serif; font-size: .9rem; outline: none; transition: border-color .2s; min-width: 200px }
.filter-search:focus { border-color: var(--blog-primary) }

/* ===== BLOG GRID ===== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-bottom: 3rem }

/* ===== BLOG CARD ===== */
.blog-card { background: var(--blog-card-bg); border-radius: var(--blog-radius); overflow: hidden; box-shadow: var(--blog-shadow); transition: all .25s cubic-bezier(.25,.46,.45,.94); display: flex; flex-direction: column; border: 1px solid rgba(108,92,231,.06) }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--blog-shadow-hover); text-decoration: none }
.blog-card-img { position: relative; overflow: hidden; aspect-ratio: 16/9 }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease }
.blog-card:hover .blog-card-img img { transform: scale(1.06) }
.blog-card-img .svc-badge { position: absolute; top: .75rem; left: .75rem; backdrop-filter: blur(8px); background: rgba(255,255,255,.9) }
.blog-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .6rem }
.blog-card-title { font-size: 1rem; font-weight: 700; color: var(--blog-text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.blog-card-excerpt { font-size: .875rem; color: var(--blog-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1 }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; border-top: 1px solid var(--blog-border); margin-top: auto }
.blog-card-date { font-size: .8rem; color: var(--blog-muted) }
.blog-card-arrow { font-size: .8rem; color: var(--blog-primary); font-weight: 700; transition: transform .2s }
.blog-card:hover .blog-card-arrow { transform: translateX(4px) }

/* ===== EMPTY + LOAD MORE ===== */
.blog-empty { text-align: center; padding: 4rem 1rem; color: var(--blog-muted); grid-column: 1/-1 }
.blog-empty h3 { font-size: 1.25rem; margin-bottom: .5rem }
.load-more-wrap { text-align: center; margin-bottom: 3rem }
.btn-load-more { padding: .875rem 2.5rem; border-radius: 100px; border: 2px solid var(--blog-primary); background: transparent; color: var(--blog-primary); font-family: 'Sarabun', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all .2s }
.btn-load-more:hover { background: var(--blog-primary); color: #fff }

/* ===== ARTICLE PAGE ===== */
.article-hero { width: 100%; max-height: 420px; overflow: hidden }
.article-hero img { width: 100%; height: 420px; object-fit: cover }
.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem; align-items: start }
.article-body { min-width: 0 }
.article-meta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem }
.article-date { font-size: .875rem; color: var(--blog-muted) }
.article-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.35; color: var(--blog-text); margin-bottom: 1.5rem }
.article-description { font-size: 1.1rem; color: var(--blog-muted); line-height: 1.7; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 2px solid var(--blog-border) }
.article-content h2 { font-size: 1.35rem; font-weight: 700; color: var(--blog-text); margin: 2rem 0 .75rem; padding-top: 1rem }
.article-content h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem }
.article-content p { margin-bottom: 1rem; line-height: 1.8 }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1rem }
.article-content li { margin-bottom: .4rem; line-height: 1.7 }
.article-content a { color: var(--blog-primary); font-weight: 600 }
.article-content code { background: #f0ecff; color: var(--blog-primary); padding: .15rem .45rem; border-radius: 4px; font-size: .9em }
.article-content strong { font-weight: 700; color: var(--blog-text) }

/* CTA Box */
.article-cta { background: linear-gradient(135deg, #6c5ce7, #a29bfe); border-radius: var(--blog-radius); padding: 2rem; text-align: center; margin: 2.5rem 0; color: #fff }
.article-cta h3 { font-size: 1.25rem; margin-bottom: .5rem }
.article-cta p { opacity: .9; margin-bottom: 1.25rem; font-size: .95rem }
.btn-cta { display: inline-block; background: #fff; color: var(--blog-primary); padding: .75rem 2rem; border-radius: 100px; font-weight: 700; font-size: .95rem; transition: all .2s }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.15); text-decoration: none }

/* Sidebar */
.article-sidebar { position: sticky; top: 80px }
.toc-box { background: #fff; border-radius: var(--blog-radius); padding: 1.5rem; box-shadow: var(--blog-shadow); border: 1px solid var(--blog-border); margin-bottom: 1.5rem }
.toc-title { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blog-muted); margin-bottom: 1rem }
.toc-list { list-style: none; padding: 0 }
.toc-list li { margin-bottom: .5rem }
.toc-list a { font-size: .875rem; color: var(--blog-muted); transition: color .2s; display: block; padding: .2rem 0 }
.toc-list a:hover, .toc-list a.active { color: var(--blog-primary); text-decoration: none }

/* Related */
.related-section { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--blog-border) }
.related-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem }

/* Breadcrumb */
.breadcrumb { padding: 1rem 0; font-size: .85rem; color: var(--blog-muted); display: flex; gap: .5rem; align-items: center }
.breadcrumb a { color: var(--blog-muted) }
.breadcrumb a:hover { color: var(--blog-primary) }
.breadcrumb-sep { opacity: .4 }

/* Footer */
.blog-footer { background: #fff; border-top: 1px solid var(--blog-border); padding: 2rem 0; text-align: center; color: var(--blog-muted); font-size: .875rem; margin-top: 4rem }
.blog-footer a { color: var(--blog-primary); font-weight: 600 }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr) }
  .blog-hero-inner { grid-template-columns: 1fr }
  .blog-hero-img { display: none }
  .article-layout { grid-template-columns: 1fr }
  .article-sidebar { position: static }
  .related-grid { grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr }
  .filter-bar { flex-direction: column; align-items: stretch }
  .filter-search { margin-left: 0; min-width: unset }
  .related-grid { grid-template-columns: 1fr }
}