/* ============================================================
   DESIGN TOKENS — AIBiz Thailand
   Option A: Tech Professional (Navy + Gold)
   Single source of truth — อย่าแก้สีที่อื่น ให้แก้ที่นี่เท่านั้น
   ============================================================ */

:root {
  /* Brand Palette */
  --brand-navy:      #1a2744;   /* Primary — bg, heading (light mode) */
  --brand-blue:      #2563eb;   /* Secondary blue — ยังใช้งานได้ */
  --brand-blue-d:    #1d4ed8;   /* Blue hover */
  --brand-gold:      #c9a96e;   /* Primary — btn-primary, links, interactive */
  --brand-gold-d:    #b8924f;   /* Gold hover */
  --brand-green:     #10b981;   /* Success */
  --brand-dark:      #0f172a;   /* Dark background */
  --brand-card:      #111827;   /* Card bg (dark mode) */
  --brand-border:    #1e2d4a;   /* Border (dark mode) */
  --brand-muted:     #94a3b8;   /* Muted text, placeholder */
  --brand-blue-light:#93c5fd;   /* Light blue: link hover, h4, highlight */
  --brand-amber:     #fbbf24;   /* Amber: code highlight, blockquote accent */

  /* Typography — mikelopster.dev style */
  --font-body:       'Sarabun', 'Inter', system-ui, sans-serif;
  --font-code:       'Inter', 'JetBrains Mono', ui-monospace, monospace;

  /* Font size scale */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.25rem;    /* 20px */
  --fs-2xl:   1.5rem;     /* 24px */
  --fs-3xl:   1.875rem;   /* 30px */
  --fs-4xl:   2.25rem;    /* 36px */
  --fs-5xl:   3rem;       /* 48px */

  /* Line height */
  --lh-tight:  1.25;
  --lh-snug:   1.375;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;
  --lh-loose:  2;

  /* Heading colors (theme-aware) */
  --heading-dark-bg:  #faf6ee;   /* heading บน dark bg — warm ivory */
  --heading-light-bg: #2c1a0e;   /* heading บน light bg — dark espresso */

  /* Spacing scale (ใช้ร่วมกับ Bootstrap) */
  --section-py:      4rem;
}

/* ── Global link color — gold ── */
:root {
  --bs-link-color:           var(--brand-gold);
  --bs-link-hover-color:     var(--brand-gold-d);
  --bs-link-color-rgb:       201, 169, 110;
  --bs-link-hover-color-rgb: 184, 146, 79;
}
a {
  color: var(--brand-gold);
}
a:hover {
  color: var(--brand-gold-d);
}

/* ── Typography scale — mikelopster.dev style ── */
h1 { font-size: var(--fs-4xl); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-xl);  font-weight: 600; line-height: var(--lh-normal); }
h5 { font-size: var(--fs-lg);  font-weight: 600; line-height: var(--lh-normal); }
h6 { font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-normal); }

p, li { font-size: var(--fs-base); line-height: var(--lh-relaxed); }
small, .small { font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* Article body typography */
.yw-article-body,
.article-body {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--bs-body-color);
}
.yw-article-body h2, .article-body h2 { font-size: var(--fs-2xl); margin-top: 2.5rem; }
.yw-article-body h3, .article-body h3 { font-size: var(--fs-xl); margin-top: 2rem; }
.yw-article-body p,  .article-body p  { margin-bottom: 1.25rem; }

/* ── Gold on hover — ทุก element ที่กดได้ (ยกเว้น btn) ── */
a:not(.btn):hover,
.nav-link:hover,
.dropdown-item:hover,
.page-link:hover,
.badge:not(.btn):hover,
.list-group-item:hover { color: var(--brand-gold) !important; }

/* btn-outline-primary hover/active — text ต้องเป็นสีเข้ม */
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #fff !important;
}

/* pagination active */
.page-item.active .page-link {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-dark);
}

/* ── Dark mode overrides ── */
[data-bs-theme="dark"] {
  --bs-body-bg:       var(--brand-dark);
  --bs-body-color:    #e2e8f0;
  --bs-primary:       var(--brand-gold);
  --bs-primary-rgb:   201, 169, 110;
  --bs-success-rgb:   16, 185, 129;
  --bs-border-color:  var(--brand-border);
}

/* ── Light mode overrides ── */
[data-bs-theme="light"] {
  --bs-primary:       var(--brand-gold);
  --bs-primary-rgb:   201, 169, 110;
}

/* ── btn-primary override — gold bg ต้องใช้ text สีเข้ม ── */
.btn-primary {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-dark);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--brand-gold-d);
  border-color: var(--brand-gold-d);
  color: var(--brand-dark);
}
.btn-outline-primary {
  color: var(--brand-gold);
  border-color: var(--brand-gold);
}
.btn-outline-primary:hover {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-dark);
}

/* ── Heading font — override blog.css Playfair Display ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-th);
  font-style: normal;
}

/* ── Heading colors (theme-aware) ── */
[data-bs-theme="dark"]  h1, [data-bs-theme="dark"]  h2,
[data-bs-theme="dark"]  h3, [data-bs-theme="dark"]  h4,
[data-bs-theme="dark"]  h5, [data-bs-theme="dark"]  h6 { color: var(--heading-dark-bg); }
[data-bs-theme="light"] h1, [data-bs-theme="light"] h2,
[data-bs-theme="light"] h3, [data-bs-theme="light"] h4,
[data-bs-theme="light"] h5, [data-bs-theme="light"] h6 { color: var(--heading-light-bg); }

/* ── Utility classes ── */
.text-gold   { color: var(--brand-gold) !important; }
.text-navy   { color: var(--brand-navy) !important; }
.bg-navy     { background-color: var(--brand-navy) !important; }

/* ── Outline badge ── */
.badge-outline {
  background: transparent !important;
  border: 1px solid currentColor;
  color: var(--bs-secondary-color) !important;
}

/* ── Custom button: Gold (ใช้สำหรับ premium CTA เท่านั้น) ── */
.btn-gold {
  background: var(--brand-gold);
  color: var(--brand-dark);
  border: none;
  font-weight: 600;
}
.btn-gold:hover { background: var(--brand-gold-d); color: var(--brand-dark); }

body {
  font-family: 'Sarabun', 'Segoe UI', sans-serif;
  line-height: 1.75;
}

/* ============================================================
   NAVBAR — Bootstrap docs style (Navy solid bg)
   ============================================================ */

/* Base navbar — solid navy bg, ข้อความขาว */
.site-navbar {
  background-color: var(--brand-navy);
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
  min-height: 56px;
}

/* Brand */
.site-navbar .navbar-brand {
  color: #fff;
  letter-spacing: -.01em;
}
.site-navbar .navbar-brand:hover { color: var(--brand-gold); }
.navbar-brand span { color: var(--brand-gold); }

/* Nav links — white, gold on hover/active */
.site-nav-link {
  color: rgba(255, 255, 255, .80) !important;
  font-size: .875rem;
  font-weight: 500;
  padding: .4rem .65rem !important;
  border-radius: 6px;
  transition: color .15s, background-color .15s;
}
.site-nav-link:hover {
  color: var(--brand-gold) !important;
  background: rgba(201, 169, 110, .08);
}
.site-nav-link.active {
  color: var(--brand-gold) !important;
  background: rgba(201, 169, 110, .12);
  font-weight: 600;
}

/* Toggler icon — white on dark bg */
.site-navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}
.site-navbar .navbar-toggler { color: rgba(255,255,255,.75); }

/* === SEARCH BAR — pill style === */
.site-search-form { flex-shrink: 0; }

.site-search-wrap {
  display: flex;
  align-items: center;
}
.site-search-icon {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .5);
  font-size: .85rem;
  pointer-events: none;
  z-index: 1;
}
.site-search-input {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 20px !important;
  color: #fff !important;
  font-size: .825rem;
  padding: .35rem 4.5rem .35rem 2rem !important;
  width: 210px;
  transition: background .2s, border-color .2s, width .2s;
  box-shadow: none !important;
}
.site-search-input::placeholder { color: rgba(255, 255, 255, .45); }
.site-search-input:focus {
  background: rgba(255, 255, 255, .13) !important;
  border-color: var(--brand-gold) !important;
  width: 260px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, .18) !important;
}

/* Ctrl K badge inside search */
.site-search-kbd {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 4px;
  color: rgba(255, 255, 255, .60);
  font-size: .65rem;
  font-family: var(--font-th);
  padding: .1rem .35rem;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.4;
}

/* === SOCIAL / ICON LINKS === */
.site-icon-link {
  color: rgba(255, 255, 255, .65) !important;
  text-decoration: none;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.site-icon-link:hover { color: var(--brand-gold) !important; }

/* Divider between social icons */
.site-icon-divider {
  width: 1px;
  height: 1.2rem;
  background: rgba(255, 255, 255, .20);
}

.btn-link.site-icon-link {
  background: none;
  border: none;
  padding: .25rem .3rem;
}

/* Mobile collapse — dark bg continuity */
@media (max-width: 991.98px) {
  .site-navbar .navbar-collapse {
    background: var(--brand-navy);
    padding: .75rem 0;
    border-top: 1px solid rgba(201, 169, 110, .12);
    margin-top: .25rem;
  }
  .site-search-input { width: 100% !important; border-radius: 20px !important; }
  .site-search-wrap { width: 100%; }
  .site-search-form { width: 100%; margin-bottom: .5rem; }
  .site-search-kbd { display: none; }
}

/* Hero gradient background */
.hero-section {
  position: relative;
  overflow: hidden;
  padding: 80px 24px 60px;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,64,175,.15) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(124,58,237,.10) 0%, transparent 60%);
  pointer-events: none;
}
.hero-section > * { position: relative; }
.hero-section h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--heading-dark-bg);
  max-width: 820px;
}
.hero-section .accent { color: var(--brand-blue); }
.hero-section .accent2 { color: var(--brand-green); }

/* Brand cards */
.brand-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  transition: transform .15s, box-shadow .15s;
  color: var(--bs-body-color);
}
.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border-color: var(--brand-gold);
}
.brand-card:hover .stretched-link {
  color: var(--brand-gold) !important;
}
.brand-card .stretched-link:focus {
  outline: none;
}

.pain-card { background: #120a0a; border: 1px solid #2d1515; border-radius: 12px; }
.pain-card .pain-icon { font-size: 1.8rem; }
.pain-card h3 { color: #f87171; font-size: 0.95rem; }
.pain-card p { color: #6b7280; font-size: 0.85rem; }

.pkg-card.featured {
  border-color: var(--brand-blue) !important;
  background: linear-gradient(160deg, #1e293b, #1a2744) !important;
}
.featured-badge {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand-blue); color: #fff;
  font-size: .72rem; font-weight: 700;
  padding: 4px 16px; border-radius: 20px; white-space: nowrap;
}

.section-label {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--brand-gold);
}

.roi-box {
  background: rgba(22,163,74,.15);
  border: 1px solid rgba(22,163,74,.30);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .82rem;
  color: #4ade80;
}
.roi-box strong { display: block; font-size: 1rem; }

.roi-tag {
  display: inline-block;
  background: rgba(22,163,74,.20);
  border: 1px solid rgba(22,163,74,.40);
  color: #4ade80;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
}

.fnode {
  background: #0f172a; border: 1px solid var(--brand-border);
  border-radius: 8px; padding: 7px 14px;
  font-size: .82rem; white-space: nowrap;
  display: inline-block;
}
.fnode.ch { border-color: rgba(16,185,129,.3); color: #34d399; }
.fnode.gw { border-color: rgba(59,130,246,.3); color: #60a5fa; background: rgba(30,58,95,.2); }
.fnode.ai { border-color: rgba(139,92,246,.3); color: #a78bfa; }

.cta-section {
  background: var(--brand-navy);
  border-top: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
  padding: 80px 24px;
}

/* Post card thumb */
.thumb {
  width: 100%; aspect-ratio: 16/9;
  background: var(--brand-dark);
  background-size: cover;
  background-position: center;
  border-radius: 14px 14px 0 0;
}
.thumb-fallback {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--brand-muted); font-size: 2.4rem;
}

/* ============ Article body — typography v2 ============ */
.article-body {
  color: var(--bs-body-color);
  font-size: 1.0625rem;       /* 17px — better readability for Thai */
  line-height: 1.9;
  font-weight: 400;
}

/* Headings: clearer hierarchy with size, weight, color, and visual divider */
.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--heading-dark-bg);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  scroll-margin-top: 90px;    /* offset for fixed navbar when jumping via TOC */
}

.article-body h2 {
  font-size: 1.75rem;          /* 28px */
  margin: 3rem 0 1.25rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid rgba(59,130,246,.3);
  position: relative;
}
.article-body h2::before {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 60px; height: 2px;
  background: var(--brand-blue);
}

.article-body h3 {
  font-size: 1.35rem;          /* 21.6px */
  margin: 2.25rem 0 .9rem;
  padding-left: .75rem;
  border-left: 4px solid var(--brand-blue);
}

.article-body h4 {
  font-size: 1.1rem;
  margin: 1.5rem 0 .75rem;
  color: var(--brand-blue-light);
}

/* Paragraphs */
.article-body p {
  margin-bottom: 1.25rem;
}
.article-body p strong { color: var(--heading-dark-bg); font-weight: 700; }

/* Images */
.article-body img {
  max-width: 100%;
  border-radius: 10px;
  margin: 1.75rem 0;
  border: 1px solid var(--brand-border);
}

/* Lists with better spacing */
.article-body ul,
.article-body ol {
  margin: 1rem 0 1.5rem 1.5rem;
}
.article-body li {
  margin-bottom: .5rem;
  padding-left: .25rem;
}
.article-body li::marker { color: var(--brand-blue); }

/* Links */
.article-body a {
  color: var(--brand-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(37,99,235,.4);
  transition: all .15s;
}
.article-body a:hover {
  color: var(--brand-blue-light);
  border-bottom-color: var(--brand-blue-light);
}

/* Blockquote — premium callout */
.article-body blockquote {
  border-left: 4px solid var(--brand-blue);
  background: linear-gradient(135deg, rgba(30,58,95,.25) 0%, rgba(30,58,95,.10) 100%);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  border-radius: 0 10px 10px 0;
  position: relative;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body blockquote strong { color: var(--brand-amber); }

/* Inline code */
.article-body code:not(pre code) {
  background: var(--brand-dark);
  border: 1px solid var(--brand-border);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .9em;
  color: var(--brand-amber);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
  font-weight: 500;
}

/* Code blocks (pre) — terminal-like with header */
.article-body pre {
  background: var(--brand-dark);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 0;
  margin: 1.75rem 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.article-body pre code {
  display: block;
  background: transparent;
  border: 0;
  color: var(--bs-body-color);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
  font-size: .92rem;
  line-height: 1.7;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  overflow-x: auto;
  white-space: pre;
}

/* Copy code button (injected by JS) */
.code-copy-btn {
  position: absolute;
  top: .6rem; right: .6rem;
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.4);
  color: #93c5fd;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit;
}
.article-body pre:hover .code-copy-btn,
.yw-article-body pre:hover .code-copy-btn,
.code-copy-btn:focus { opacity: 1; }
.code-copy-btn:hover { background: var(--brand-blue); color: #fff; }
.code-copy-btn.copied {
  background: #16a34a; color: #fff; border-color: #16a34a; opacity: 1;
}

/* Tables */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: .95rem;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  overflow: hidden;
}
.article-body thead { background: var(--brand-card); }
.article-body th {
  padding: .85rem 1rem;
  text-align: left;
  color: var(--heading-dark-bg);
  font-weight: 700;
  border-bottom: 2px solid var(--brand-border);
}
.article-body td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--brand-border);
  color: var(--bs-body-color);
}
.article-body tbody tr:hover { background: rgba(255,255,255,.02); }
.article-body tr:last-child td { border-bottom: 0; }

/* Horizontal rule */
.article-body hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--brand-border), transparent);
  margin: 2.5rem 0;
}

/* Tag pills */
.tag-pill {
  background: var(--brand-border); color: var(--bs-body-color);
  padding: 4px 12px; border-radius: 16px;
  font-size: .78rem; text-decoration: none;
  display: inline-block;
}
.tag-pill:hover { background: var(--brand-blue); color: #fff; }

/* ========== Blog Detail: 2-column layout ========== */
.blog-detail-wrapper { max-width: 1280px; }

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: 260px 1fr;
    gap: 2rem;
  }
}
@media (min-width: 1200px) {
  .blog-grid {
    grid-template-columns: 280px 1fr;
    gap: 3rem;
  }
}

.blog-sidebar { order: -1; }
@media (min-width: 768px) {
  .blog-sidebar { order: 0; }
}

.sidebar-sticky {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.toc-card {
  background: var(--brand-dark);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
}
.toc-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--brand-card);
  font-weight: 700; color: var(--bs-body-color);
  border-bottom: 1px solid var(--brand-border);
  font-size: .95rem;
}
.toc-icon { font-size: 1.1rem; }
.toc-toggle {
  margin-left: auto; background: transparent; border: 0;
  color: var(--brand-muted); cursor: pointer; font-size: .9rem;
}

.toc-nav {
  padding: 8px 0;
  max-height: 60vh;
  overflow-y: auto;
}
.toc-nav.collapsed { display: none; }
@media (min-width: 768px) {
  .toc-nav.collapsed { display: block; }
}

.toc-nav ul { list-style: none; padding: 0; margin: 0; }
.toc-nav a {
  display: block;
  padding: 6px 16px;
  color: var(--brand-muted);
  text-decoration: none;
  font-size: .88rem;
  border-left: 2px solid transparent;
  transition: all .15s;
  line-height: 1.4;
}
.toc-nav a:hover {
  color: var(--bs-body-color);
  background: rgba(59,130,246,.05);
}
.toc-nav a.toc-h3 {
  padding-left: 32px;
  font-size: .82rem;
  color: var(--bs-secondary-color);
}
.toc-nav a.active {
  color: var(--brand-blue);
  border-left-color: var(--brand-blue);
  background: rgba(59,130,246,.08);
  font-weight: 600;
}

/* Ad slot */
.ad-slot { min-height: 200px; }
.ad-placeholder {
  border: 1px dashed var(--brand-border);
  border-radius: 12px;
  height: 250px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-dark);
}

/* Article body — wider now (no max-width 760px constraint) */
.blog-main { min-width: 0; }
.article-body { max-width: 760px; }
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5rem 0;
}

/* ========== Infographic cards (embedded inside article HTML) ========== */
.infographic {
  background: linear-gradient(135deg, #1a2540 0%, #0d1117 100%);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 16px;
  padding: 1.75rem;
  margin: 2.5rem 0;
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 0 40px rgba(59,130,246,.05);
}
.infographic::before {
  content: "";
  position: absolute;
  top: 0; left: 1.5rem; right: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-blue), transparent);
}
.infographic-title {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; font-weight: 800;
  color: #93c5fd;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.infographic-title::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 10px var(--brand-blue);
}
.infographic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.info-stat {
  text-align: center;
  padding: 1.25rem .75rem;
  background: rgba(59,130,246,.04);
  border-radius: 12px;
  border: 1px solid rgba(59,130,246,.15);
  transition: all .25s ease;
}
.info-stat:hover {
  border-color: rgba(59,130,246,.4);
  background: rgba(59,130,246,.08);
  transform: translateY(-2px);
}
.info-stat .stat-number {
  font-size: 2.25rem; font-weight: 800;
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.info-stat .stat-label {
  font-size: .82rem; color: #94a3b8;
  margin-top: .5rem;
  font-weight: 500;
}
.info-steps {
  display: flex; flex-direction: column; gap: .75rem;
}
.info-step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  background: rgba(59,130,246,.04);
  border-radius: 10px;
  border: 1px solid rgba(59,130,246,.12);
  transition: all .2s ease;
}
.info-step:hover {
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.3);
  transform: translateX(2px);
}
.info-step .step-num {
  flex-shrink: 0;
  min-width: 36px; height: 36px;
  padding: 0 .5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), #2563eb);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: 0 2px 8px rgba(59,130,246,.4);
}
.info-step .step-text {
  color: #e2e8f0;
  font-size: .98rem;
  line-height: 1.6;
  flex: 1;
}
.info-step .step-text strong { color: #f8fafc; }
.info-step .step-text code {
  background: #0d1117 !important;
  padding: 1px 6px !important;
  font-size: .88em !important;
}

/* Cover image polish */
.cover-image {
  border: 1px solid var(--brand-border);
}

/* Print styles — flatten layout, hide sidebar */
@media print {
  .blog-sidebar,
  .ad-slot,
  .toc-toggle,
  .cta-section,
  .navbar,
  footer {
    display: none !important;
  }
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
  .blog-detail-wrapper {
    max-width: 100% !important;
  }
  .article-body {
    max-width: 100% !important;
    color: #000 !important;
  }
  .infographic {
    background: #f8f9fa !important;
    color: #000 !important;
    page-break-inside: avoid;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toc-nav a {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   Clean Blog masthead + post-preview
   Ported from startbootstrap-clean-blog (MIT) and adapted for
   the AIBiz Thailand dark theme.
   ============================================================ */
header.masthead {
  margin-bottom: 3rem;
  background: no-repeat center center;
  background-color: #343a40;
  background-attachment: scroll;
  background-size: cover;
  position: relative;
}
header.masthead .overlay {
  position: absolute;
  inset: 0;
  background-color: #0d1117;
  opacity: 0.6;
}
header.masthead .container { position: relative; z-index: 1; }
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
  padding: 8rem 0 5rem;
  color: #fff;
}
@media (min-width: 768px) {
  header.masthead .page-heading,
  header.masthead .post-heading,
  header.masthead .site-heading { padding: 10rem 0 8rem; }
}
header.masthead .page-heading,
header.masthead .site-heading { text-align: center; }
header.masthead .page-heading h1,
header.masthead .site-heading h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  margin-top: 0;
  color: #fff;
}
header.masthead .page-heading .subheading,
header.masthead .site-heading .subheading {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 300;
  display: block;
  margin: 0.6rem 0 0;
  color: rgba(255,255,255,0.85);
}
header.masthead .post-heading h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; }
header.masthead .post-heading .subheading {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 600;
  display: block;
  margin: 0.6rem 0 1.5rem;
}
header.masthead .post-heading .meta {
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  display: block;
}
header.masthead .post-heading .meta a { color: #fff; }

.post-preview > a { color: #e6edf3; text-decoration: none; display: block; }
.post-preview > a:hover,
.post-preview > a:focus { color: var(--bs-primary, #6ea8fe); text-decoration: none; }
.post-preview > a > .post-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.post-preview > a > .post-subtitle {
  font-size: 1.1rem;
  font-weight: 300;
  margin: 0 0 0.6rem;
  color: #adb5bd;
}
.post-preview > .post-meta {
  font-size: 1rem;
  font-style: italic;
  margin-top: 0;
  color: #8b949e;
}
.post-preview > .post-meta > a { color: #c9d1d9; text-decoration: none; }
.post-preview > .post-meta > a:hover { color: var(--bs-primary, #6ea8fe); text-decoration: underline; }
@media (min-width: 768px) {
  .post-preview > a > .post-title { font-size: 2rem; }
}



/* ============================================================
   MOBILE RESPONSIVE FIXES
   ============================================================ */

/* ── Navbar: navbar height variable ── */
:root { --navbar-h: 56px; }

/* ── Navbar: search + social mobile layout ── */
@media (max-width: 991.98px) {
  .navbar .d-flex.align-items-center.gap-2.ms-3 {
    justify-content: flex-start;
    padding: 0.5rem 0;
  }
  .navbar form.d-flex {
    margin: 0.5rem 0;
  }
  .navbar .input-group { max-width: 100%; }
}

/* ── Homepage: sidebar sticky top + hero image height ── */
.sticky-top[style*="top: 1rem"] { top: calc(var(--navbar-h) + 1rem) !important; }

@media (max-width: 767.98px) {
  /* Hero image clamp height */
  .blog-post-card img,
  .brand-card img { height: clamp(180px, 40vw, 280px) !important; }
}

/* ── Blog detail: TOC mobile collapsible ── */
@media (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-sidebar {
    display: block !important;
    order: -1;
  }
  .sidebar-sticky { position: static !important; }
  .toc-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .toc-nav.open { max-height: 600px; }
}

/* ── Portfolio detail: sidebar mobile ── */
@media (max-width: 991.98px) {
  .detail-sidebar { position: static !important; }
}

/* ── Portfolio list: filter bar sticky top ── */
.filter-bar-wrap {
  top: var(--navbar-h) !important;
  z-index: 50 !important;
}

/* ── Services: Hero height mobile ── */
@media (max-width: 767.98px) {
  .services-hero { min-height: 65vh !important; }
  .services-hero h1 { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
  .services-hero__content { padding: 3.5rem 0 3rem !important; }
}

/* ── About: Hero + Mission image mobile ── */
@media (max-width: 991.98px) {
  .about-hero { min-height: auto !important; }
  .mission-img-wrap img { height: 280px !important; }
}
@media (max-width: 767.98px) {
  .about-hero__stat-number { font-size: 1.5rem !important; }
}

/* ── Contact: submit row wrap ── */
@media (max-width: 575.98px) {
  .info-card { height: auto !important; }
  .form-card .d-flex.align-items-center.gap-3 { flex-wrap: wrap; }
}

/* ── Blog list: filter horizontal scroll ── */
.filter-pills-scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.filter-pills-scroll::-webkit-scrollbar { display: none; }

/* ── Services: Process steps mobile ── */
@media (max-width: 575.98px) {
  .process-step { padding: 0 0.5rem !important; }
  .process-step h4 { font-size: 0.9rem !important; }
  .process-step p { font-size: 0.8rem !important; }
}

/* ── Portfolio detail: stat block border mobile ── */
@media (max-width: 575.98px) {
  .stat-block {
    border-left: none !important;
    border-top: 3px solid var(--brand-gold);
    padding: 0.75rem 0 !important;
  }
}


/* ============================================================
   PREMIUM DASHBOARD DESIGN SYSTEM v2
   Owner Dashboard — Dark + Gold tokens
   ============================================================ */

:root {
  --dash-surface:       #111827;
  --dash-surface-2:     #1a2235;
  --dash-border:        rgba(201,169,110,.15);
  --dash-glow-gold:     rgba(201,169,110,.25);
  --dash-glow-green:    rgba(16,185,129,.18);
  --dash-glow-red:      rgba(239,68,68,.18);
  --dash-glow-blue:     rgba(59,130,246,.18);
  --shadow-card:        0 4px 24px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
  --shadow-card-hover:  0 8px 40px rgba(0,0,0,.55), 0 2px 8px rgba(201,169,110,.12);
  --radius-card:        12px;
  --radius-badge:       6px;
  --transition-ui:      0.18s cubic-bezier(.4,0,.2,1);
}

/* === ds-card-stat — KPI / Metric card === */
.ds-card-stat {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-ui), transform var(--transition-ui), border-color var(--transition-ui);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.ds-card-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-gold) 0%, transparent 100%);
}
.ds-card-stat:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: rgba(201,169,110,.3);
}
.ds-card-stat .stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(201,169,110,.12);
  border: 1px solid rgba(201,169,110,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--brand-gold);
  flex-shrink: 0;
  margin-bottom: .9rem;
}
.ds-card-stat .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.1;
  margin-bottom: .25rem;
}
.ds-card-stat .stat-label {
  font-size: .75rem;
  color: var(--brand-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.ds-card-stat .stat-delta {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .78rem; font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 20px;
  margin-top: .4rem;
}
.ds-card-stat .stat-delta.up   { color: var(--brand-green); background: var(--dash-glow-green); }
.ds-card-stat .stat-delta.down { color: #f87171; background: var(--dash-glow-red); }
.ds-card-stat .stat-delta.flat { color: var(--brand-muted); background: rgba(148,163,184,.1); }

/* === ds-page-header === */
.ds-page-header {
  padding: 0 0 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--dash-border);
  position: relative;
}
.ds-page-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 48px; height: 2px;
  background: var(--brand-gold);
  border-radius: 1px;
}
.ds-page-header .page-title {
  font-size: 1.35rem !important;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 !important;
  line-height: 1.3;
}
.ds-page-header .page-subtitle {
  font-size: .85rem;
  color: var(--brand-muted);
  margin-top: .2rem;
}

/* === ds-badge — Status badge with dot indicator === */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: var(--radius-badge);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ds-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: .8;
}
.ds-badge-success {
  color: var(--brand-green);
  background: var(--dash-glow-green);
  border-color: rgba(16,185,129,.25);
}
.ds-badge-warning {
  color: #fbbf24;
  background: rgba(251,191,36,.12);
  border-color: rgba(251,191,36,.25);
}
.ds-badge-danger {
  color: #f87171;
  background: var(--dash-glow-red);
  border-color: rgba(239,68,68,.25);
}
.ds-badge-gold {
  color: var(--brand-gold);
  background: var(--dash-glow-gold);
  border-color: rgba(201,169,110,.3);
}
.ds-badge-blue {
  color: #60a5fa;
  background: var(--dash-glow-blue);
  border-color: rgba(59,130,246,.25);
}
.ds-badge-muted {
  color: var(--brand-muted);
  background: rgba(148,163,184,.08);
  border-color: rgba(148,163,184,.2);
}

/* === ds-table — Premium data table === */
.ds-table-wrap {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-family: var(--font-th);
}
.ds-table thead th {
  background: rgba(201,169,110,.06);
  color: var(--brand-gold);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--dash-border);
  white-space: nowrap;
}
.ds-table tbody tr {
  transition: background var(--transition-ui);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ds-table tbody tr:hover { background: rgba(201,169,110,.04); }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody td {
  padding: .85rem 1.1rem;
  color: #cbd5e1;
  font-size: .88rem;
  vertical-align: middle;
}
.ds-table .td-primary {
  color: #f1f5f9;
  font-weight: 500;
}
.ds-table .td-muted { color: var(--brand-muted); font-size: .82rem; }
.ds-table .td-amount {
  font-weight: 700;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
}
/* ── Responsive scroll wrapper ── */
.ds-table-scroll { overflow-x: auto; }
@media (max-width: 575px) {
  .ds-table thead th,
  .ds-table tbody td { padding: .65rem .75rem; font-size: .82rem; }
}

/* === ds-empty-state — Empty state placeholder === */
.ds-empty-state {
  padding: 3.5rem 1rem;
  text-align: center;
}
.ds-empty-state .empty-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1rem;
  color: var(--brand-muted);
  opacity: .5;
}
.ds-empty-state .empty-title {
  font-size: .95rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: .4rem;
}
.ds-empty-state .empty-sub {
  font-size: .83rem;
  color: var(--brand-muted);
  margin-bottom: 1.25rem;
}

/* === ds-section-label — Sub-section divider === */
.ds-section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-gold);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--dash-border);
  position: relative;
}
.ds-section-label::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 32px; height: 1px;
  background: var(--brand-gold);
}

/* === Sidebar nav — upgrade layer (on top of existing base.html styles) === */
#sidebar .nav-link.active {
  background: linear-gradient(90deg,
    rgba(201,169,110,.18) 0%,
    rgba(201,169,110,.05) 100%) !important;
  box-shadow: inset 0 0 12px rgba(201,169,110,.05);
}
#sidebar .nav-link.active i {
  color: var(--brand-gold) !important;
  filter: drop-shadow(0 0 4px rgba(201,169,110,.5));
}
#sidebar .nav-link:not(.active):hover i {
  color: rgba(201,169,110,.7) !important;
  transition: color var(--transition-ui);
}

/* === Card upgrade for non-stat cards === */
.dash-card {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition-ui), border-color var(--transition-ui);
}
.dash-card:hover { border-color: rgba(201,169,110,.25); }
.dash-card .dash-card-header {
  background: rgba(201,169,110,.05);
  border-bottom: 1px solid var(--dash-border);
  padding: .75rem 1.25rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand-gold);
}
.dash-card .dash-card-body { padding: 1.25rem; }

/* ===================================================================
   SITE CONTAINER — มาตรฐานเดียวทุกหน้า
   max-width: 1200px · padding: 0 1.5rem · margin: 0 auto
   =================================================================== */
.site-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ===================================================================
   SHARED SIDEBAR LAYOUT — ใช้ร่วมกัน Blog / Portfolio / About / etc.
   =================================================================== */
.yt-outer {
  display: flex;
  min-height: calc(100vh - 56px);
}
.yt-sidebar {
  width: 240px;
  flex-shrink: 0;
  padding: 1rem 0;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  border-right: 1px solid var(--bs-border-color);
  scrollbar-width: thin;
  scrollbar-color: rgba(201,169,110,.2) transparent;
}
.yt-sidebar::-webkit-scrollbar { width: 3px; }
.yt-sidebar::-webkit-scrollbar-thumb { background: rgba(201,169,110,.2); border-radius: 3px; }
.yt-main {
  flex: 1;
  min-width: 0;
}
.yt-nav-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .55rem 1.25rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.yt-nav-item:hover { background: rgba(201,169,110,.08); color: var(--brand-gold); }
.yt-nav-item.active { background: rgba(201,169,110,.12); color: var(--brand-gold); font-weight: 700; }
.yt-nav-item i { font-size: 1.1rem; width: 20px; text-align: center; }
.yt-nav-divider { height: 1px; background: var(--bs-border-color); margin: .6rem 1.25rem; }
.yt-nav-section-title {
  font-size: .7rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--brand-muted);
  margin: 0;
  padding: 0;
  line-height: 1 !important;
}
.yt-cat-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem 1.25rem;
  font-size: .85rem;
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background .15s;
}
.yt-cat-item:hover { background: rgba(201,169,110,.08); color: var(--brand-gold); }
.yt-cat-item.active { color: var(--brand-gold); font-weight: 600; }
.yt-cat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .yt-sidebar { display: none; }
}

/* === LINE BUTTON — ป้องกัน global hover rule ทับ === */
.btn-line {
  background: #06C755 !important;
  color: #fff !important;
  text-decoration: none;
}
.btn-line:hover,
.btn-line:focus,
.btn-line:active {
  background: #05b34b !important;
  color: #000 !important;
  text-decoration: none;
}

/* === SIDEBAR COLLAPSE — ต้องอยู่ใน main.css เพราะ block extra_css ถูก child override === */
.yt-collapsible-section { margin-bottom: .1rem; }
.yt-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1.25rem .4rem; cursor: pointer; user-select: none;
}
.yt-section-header:hover .yt-nav-section-title { color: var(--brand-gold); }
.yt-chevron { font-size: .65rem; color: var(--brand-muted); transition: transform .25s; }
.yt-collapse-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.yt-collapse-content.open { max-height: 800px; }
.yt-collapse-btn {
  display: flex; align-items: center; gap: .4rem;
  width: 100%; padding: .3rem 1.25rem;
  background: none; border: none; cursor: pointer;
  font-size: .74rem; font-weight: 600; color: var(--brand-gold);
  text-align: left; transition: background .15s;
}
.yt-collapse-btn:hover { background: rgba(201,169,110,.07); }
.yt-collapse-icon { font-size: .62rem; transition: transform .25s; }
.yt-collapse-icon.open { transform: rotate(180deg); }