/* ============================================================
   EKSIAM ARTICLE STYLES — Boutique Oxblood (long-form reading)
   ใช้คู่กับ eksiam-design-system.css | 5 มิ.ย. 2026
   ครอบคลาสของหน้าบทความเดิม ให้เข้าธีมใหม่ โดยไม่แตะเนื้อหา
   ============================================================ */

#reading-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft))}

/* ---------- NAV (พื้นเข้ม ให้เข้ากับหัวบทความ) ---------- */
nav{position:sticky;top:0;z-index:60;background:var(--oxblood-deep);
  border-bottom:1px solid rgba(205,176,121,.22)}
nav .container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 0}
.nav-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo-main{font-family:var(--display);font-size:1.3rem;font-weight:600;
  letter-spacing:.12em;color:var(--on-dark-strong)}
.logo-main span{color:var(--gold-soft)}
.nav-links{display:flex;gap:1.8rem;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-links a{color:var(--on-dark);text-decoration:none;font-size:.92rem;letter-spacing:.02em;font-family:var(--body)}
.nav-links a:hover,.nav-links a.active{color:var(--gold-soft)}
.hamburger,.mobile-menu{display:none}

/* ---------- ARTICLE HERO (พื้นเข้ม) ---------- */
.article-hero{background:var(--oxblood);color:var(--on-dark);
  padding-block:clamp(2.6rem,6vw,4.5rem)}
.article-hero .container{max-width:860px;margin-inline:auto;padding-inline:var(--gutter)}
.article-nav-back{display:inline-block;color:var(--on-dark-mute);text-decoration:none;
  font-family:var(--display);font-style:italic;font-size:1rem;margin-bottom:1.6rem}
.article-nav-back:hover{color:var(--gold-soft)}
.article-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.article-tag{display:inline-block;font-family:var(--body);font-size:.78rem;letter-spacing:.06em;
  color:var(--gold-soft);border:1px solid rgba(205,176,121,.5);border-radius:2px;padding:.35rem .9rem}
.article-date{font-family:var(--display);font-style:italic;color:var(--on-dark-mute);font-size:.95rem}
.heading-xl{font-family:var(--display-th);color:var(--on-dark-strong);font-weight:600;
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.22;margin:0 0 1rem}
.heading-xl + p,.intro-para{font-family:var(--body);font-weight:400;
  font-size:var(--fs-lede);line-height:1.7;color:var(--on-dark);max-width:60ch}

/* ---------- ARTICLE BODY (พื้นสว่าง อ่านยาว) ---------- */
.article-body{max-width:720px;margin:0 auto;padding:clamp(2.4rem,5vw,4rem) var(--gutter);
  background:var(--paper)}
.article-section{margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.article-body h2{font-family:var(--display);color:var(--oxblood);font-weight:500;
  font-size:var(--fs-h2);line-height:1.32;margin:0 0 1rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--line)}
.article-body h2 .heading-lg,.heading-lg{font-family:var(--display);color:var(--oxblood)}
.article-body h3{font-family:var(--display);color:var(--oxblood);font-weight:500;
  font-size:var(--fs-h3);margin:1.6rem 0 .6rem}
.article-body p{font-family:var(--body);font-size:var(--fs-body);line-height:1.9;
  color:var(--ink-soft);margin:0 0 1.2em;max-width:none}
.article-body strong{color:var(--ink);font-weight:500}
.article-body a{color:var(--oxblood);text-underline-offset:3px;text-decoration-color:var(--taupe)}
.article-body a:hover{color:var(--gold-deep)}
.intro-para{color:var(--ink)!important;font-size:var(--fs-lede)!important;max-width:none}
.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:1.3rem}
.article-body li{font-family:var(--body);line-height:1.85;color:var(--ink-soft);margin-bottom:.4rem}

/* ---------- 5 characteristics grid ---------- */
.char-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.8rem 0}
.char-item{background:var(--beige);border:1px solid var(--line);border-radius:3px;
  padding:1.2rem 1.3rem;position:relative}
.char-num{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1.4rem;display:block;margin-bottom:.3rem}
.char-th{display:block;font-family:var(--body);font-weight:500;color:var(--ink);margin-bottom:.2rem}
.char-en{display:block;font-family:var(--display);font-style:italic;color:var(--gold-deep);font-size:.9rem}

/* ---------- highlight / callout ---------- */
.article-highlight{background:linear-gradient(180deg,#f6efe4,var(--paper));
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:3px;
  padding:1.4rem 1.6rem;margin:1.8rem 0}
.article-highlight p{margin:0;color:var(--ink)}

/* ---------- comparison table ---------- */
.compare-table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.92rem;font-family:var(--body)}
.compare-table th{background:var(--oxblood);color:var(--gold-soft);padding:.8rem 1rem;text-align:left;
  font-weight:500;font-size:.78rem;letter-spacing:.06em}
.compare-table td{padding:.75rem 1rem;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.compare-table tr:nth-child(even) td{background:var(--beige)}
.compare-table tr:hover td{background:var(--beige-soft)}

/* ---------- footnotes ---------- */
.footnotes-section{background:var(--beige);border-top:1px solid var(--line)}
.footnotes-section .container{max-width:720px;margin:0 auto;padding:clamp(2rem,4vw,3rem) var(--gutter)}
.footnote-list{list-style:none;margin:0;padding:0}
.footnote-list li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:.5rem 0;
  border-bottom:1px dotted var(--line);font-size:.85rem;line-height:1.65}
.fn-num{font-family:var(--display);font-style:italic;color:var(--gold-deep)}
.fn-text{color:var(--ink-mute)}
.fn-text a{color:var(--oxblood)}
/* เลขอ้างอิงในเนื้อหา = ตัวยกกำลัง (superscript) */
sup.fn{display:inline;font-size:.68em;line-height:0;vertical-align:super;border:0;padding:0;margin:0}
sup.fn a{color:var(--gold-deep);text-decoration:none;font-weight:600;padding:0 1px}
sup.fn a:hover{color:var(--oxblood)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--oxblood);color:var(--on-dark);text-align:center;
  padding-block:clamp(2.6rem,6vw,4.5rem)}
.cta-band .container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.cta-band h2,.text-white{color:var(--on-dark-strong)}
.cta-btns{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-size:.95rem;
  letter-spacing:.03em;padding:.95rem 2rem;border-radius:2px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-deep);color:#fff}
.btn-outline-white{background:transparent;color:var(--on-dark-strong);border-color:rgba(236,226,216,.5)}
.btn-outline-white:hover{border-color:var(--gold-soft);color:var(--gold-soft)}

/* ---------- partners / network ---------- */
.partners-section{background:var(--oxblood-deep);color:var(--on-dark-mute);padding-block:clamp(2.6rem,6vw,4.5rem)}
.partners-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.partners-header{text-align:center;margin-bottom:2rem}
.partners-title{font-family:var(--display);color:var(--on-dark-strong);font-size:var(--fs-h2);margin:0 0 .6rem}
.partners-sub{font-size:.92rem;color:var(--on-dark-mute);max-width:560px;margin:0 auto;line-height:1.7}
.partners-group-label,.partners-label{font-family:var(--display);font-style:italic;color:var(--gold-soft);
  font-size:.95rem;letter-spacing:.04em;margin:1.5rem 0 .8rem}
.partners-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.partner-card{background:rgba(243,237,226,.05);border:1px solid rgba(205,176,121,.22);border-radius:3px;padding:1.3rem}
.pc-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.pc-name{font-family:var(--display);color:var(--on-dark-strong);font-size:1.1rem}
.pc-domain{color:var(--gold-soft);font-size:.82rem}
.pc-desc{font-size:.86rem;color:var(--on-dark-mute);line-height:1.6}
.pc-badge,.pc-cta,.pc-cta-soon{font-size:.8rem;color:var(--gold-soft)}
.pc-cta-soon,.soon{opacity:.6}

/* ---------- footer ---------- */
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.footer-col h4,.footer-brand h4{font-family:var(--body);color:var(--gold-soft);font-size:.85rem;
  font-weight:500;text-transform:uppercase;letter-spacing:.12em;margin-bottom:1rem}
.footer-col a{color:var(--on-dark-mute);text-decoration:none;display:block;padding:.28rem 0}
.footer-col a:hover{color:var(--gold-soft)}
.footer-bottom{max-width:var(--maxw);margin:1.6rem auto 0;padding:1.4rem var(--gutter) 0;
  border-top:1px solid rgba(205,176,121,.2);font-size:.8rem;color:var(--on-dark-mute);opacity:.8}
footer{background:var(--oxblood-deep);color:var(--on-dark-mute);padding-block:clamp(2.6rem,5vw,4rem)}

@media(max-width:860px){.partners-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.char-grid{grid-template-columns:1fr 1fr}.compare-table{font-size:.82rem}
  .footer-grid{grid-template-columns:1fr}}
@media(max-width:560px){.partners-grid{grid-template-columns:1fr}.nav-links{gap:1rem;font-size:.85rem}}

/* ---------- Reading polish for mixed article templates ---------- */
html,body{overflow-x:clip}
@supports not (overflow-x:clip){
  html,body{overflow-x:hidden}
}
body{word-break:normal;overflow-wrap:break-word}
nav .nav-inner,nav .container,.nav-logo,.article-body,.article-section{min-width:0}
nav>.nav-inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
nav .nav-logo{
  color:var(--on-dark-strong);
  font-family:var(--display);
  font-size:1.22rem;
  font-weight:600;
  letter-spacing:.08em;
}
nav .nav-logo .accent{color:var(--gold-soft)}
.logo-main,.nav-logo{overflow-wrap:normal}
.heading-xl,.article-hero h1,.article-body h2,.article-body h3,.intro-para{text-wrap:pretty}
.article-hero h1 span{overflow-wrap:normal}

.article-hero .hero-container{
  max-width:860px;
  margin:0 auto;
  padding-inline:var(--gutter);
}
.article-hero h1:not(.heading-xl){
  font-family:var(--display-th);
  color:var(--on-dark-strong);
  font-weight:600;
  font-size:clamp(2rem,4.4vw,3.1rem);
  line-height:1.24;
  margin:0 0 1rem;
}
.article-breadcrumb,.article-nav-breadcrumb{
  font-family:var(--display);
  font-style:italic;
  color:var(--on-dark-mute);
  margin:0 0 1.4rem;
}
.article-breadcrumb a,.article-nav-breadcrumb a{color:var(--on-dark-mute);text-decoration:none}
.article-tags{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem}
.hero-subtitle,.hero-abstract{
  color:var(--on-dark);
  max-width:68ch;
  line-height:1.75;
}
.hero-subtitle{font-size:var(--fs-lede);font-weight:400}
.hero-abstract{color:var(--on-dark-mute)}
.hero-meta{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem}
.author-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(205,176,121,.18);
  color:var(--gold-soft);
  border:1px solid rgba(205,176,121,.32);
}
.author-name{color:var(--on-dark-strong);font-weight:500}
.author-title{color:var(--on-dark-mute);font-size:.86rem}
.article-layout{background:var(--paper)}
.logo-eksiam,.logo-legal{
  font-family:var(--display);
  font-size:1.28rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--on-dark-strong);
}
.logo-legal{color:var(--gold-soft);margin-left:.25rem}
.section-num{
  display:inline-block;
  font-family:var(--display);
  font-style:italic;
  color:var(--gold-deep);
  margin-bottom:.4rem;
}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.06s}
.reveal-delay-2{transition-delay:.12s}

.article-body table.compare-table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.article-body .table-wrap,
.article-body div[style*="overflow-x:auto"],
.article-body div[style*="overflow-x: auto"]{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Legacy article series templates: normalize nav, hero and reading layout. */
body > nav:has(> .nav-logo){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:76px;
  padding:.95rem var(--gutter);
}
body > nav:has(> .nav-logo) > .nav-logo{
  flex:0 1 auto;
  max-width:min(52vw,320px);
}
.nav-logo-sub{
  display:block;
  margin-top:.12rem;
  color:var(--on-dark-mute);
  font-family:var(--body);
  font-size:.68rem;
  font-weight:300;
  letter-spacing:.02em;
  line-height:1.2;
}
body > nav:has(> .nav-logo) > .nav-links{
  margin-left:auto;
  flex:0 0 auto;
}
body > nav:has(> .nav-logo) > .hamburger{
  flex:0 0 auto;
}
.mobile-nav{
  display:none;
}

.hero-series-tag{
  font-family:var(--display);
  font-style:italic;
  color:var(--gold-soft);
  letter-spacing:.04em;
  margin-bottom:.9rem;
}
.article-subtitle{
  color:var(--on-dark);
  max-width:68ch;
  font-size:var(--fs-lede);
  line-height:1.75;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .7rem;
  color:var(--on-dark-mute);
  margin-top:1.4rem;
  font-size:.95rem;
}
.article-meta .meta-divider{opacity:.45}
.article-hero > .hero-series-tag,
.article-hero > h1,
.article-hero > .article-subtitle,
.article-hero > .article-meta{
  width:min(860px, calc(100% - 44px));
  margin-left:auto;
  margin-right:auto;
}
.article-hero > h1:not(.heading-xl){
  margin-left:auto;
  margin-right:auto;
  overflow-wrap:anywhere;
  word-break:normal;
}
.article-hero > h1 span{color:var(--gold-soft)}

.article-container{
  max-width:920px;
  margin:0 auto;
  padding:clamp(2.2rem,5vw,3.6rem) var(--gutter);
  background:var(--paper);
}
.article-container .article-body{
  max-width:720px;
  padding:0;
  background:transparent;
}
.article-container .section-nav,
.article-container .article-nav{
  position:static;
  top:auto;
  z-index:auto;
  height:auto;
  background:var(--beige);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:3px;
  color:var(--ink-soft);
  padding:1.35rem 1.5rem;
  margin:0 auto 2rem;
  max-width:720px;
}
.article-container .section-nav h3{
  font-family:var(--display);
  color:var(--oxblood);
  font-size:1.2rem;
  margin:0 0 .9rem;
}
.article-container .section-nav ol{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem 1.2rem;
}
.article-container .section-nav a,
.article-container .article-nav a{
  color:var(--oxblood);
  text-decoration:none;
  border-bottom:1px solid rgba(176,141,87,.35);
}
.article-container .section-nav a:hover,
.article-container .article-nav a:hover{color:var(--gold-deep)}
.article-container .article-nav{
  display:grid;
  gap:.75rem;
}
.article-container .structure-grid,
.article-container .group-types{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin:1.5rem 0;
}
.article-container .structure-card,
.article-container .group-card{
  background:var(--beige);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.article-container .structure-card-header,
.article-container .group-card-header{
  background:var(--oxblood);
  color:var(--gold-soft);
  padding:.8rem 1rem;
  font-family:var(--display);
  font-size:1.05rem;
}
.article-container .structure-card-body,
.article-container .group-card-body{
  padding:1rem;
}

@media(max-width:760px){
  nav .nav-inner{min-height:68px;padding:.85rem var(--gutter)}
  nav .nav-logo{max-width:calc(100vw - 8rem)}
  nav .nav-inner>.btn{display:none}
  nav .nav-links{display:none}
  nav .hamburger,
  nav .nav-toggle{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    margin-left:auto;
    padding:.58rem .68rem;
    border:1px solid rgba(205,176,121,.38);
    border-radius:2px;
    background:transparent;
    color:var(--gold-soft);
    cursor:pointer;
  }
  nav .hamburger span,
  nav .nav-toggle span{
    display:block;
    width:22px;
    height:1.5px;
    background:currentColor;
  }
  nav .nav-links.open{
    display:flex;
    position:fixed;
    top:68px;
    left:0;
    right:0;
    z-index:70;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:1rem var(--gutter) 1.2rem;
    background:var(--oxblood-deep);
    border-top:1px solid rgba(205,176,121,.24);
    box-shadow:0 18px 32px rgba(51,34,42,.2);
  }
  nav .nav-links.open a{
    display:block;
    width:100%;
    padding:.82rem 0;
    border-bottom:1px solid rgba(205,176,121,.18);
  }
  .mobile-menu{
    position:fixed;
    top:68px;
    left:0;
    right:0;
    z-index:70;
    display:none;
    flex-direction:column;
    gap:0;
    padding:1rem var(--gutter) 1.2rem;
    background:var(--oxblood-deep);
    border-top:1px solid rgba(205,176,121,.24);
    box-shadow:0 18px 32px rgba(51,34,42,.2);
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a{
    color:var(--on-dark);
    text-decoration:none;
    padding:.82rem 0;
    border-bottom:1px solid rgba(205,176,121,.18);
  }
  body > nav:has(> .nav-logo){
    min-height:68px;
    padding:.85rem var(--gutter);
  }
  body > nav:has(> .nav-logo) > .nav-logo{
    max-width:calc(100vw - 7rem);
    font-size:1.05rem;
    line-height:1.25;
  }
  body > nav:has(> .nav-logo) > .nav-links{display:none}
  .nav-logo-sub{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.62rem;
  }
  body > nav:has(> .nav-logo) > .hamburger{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    margin-left:auto;
    padding:.58rem .68rem;
    border:1px solid rgba(205,176,121,.38);
    border-radius:2px;
    background:transparent;
    color:var(--gold-soft);
    cursor:pointer;
  }
  body > nav:has(> .nav-logo) > .hamburger span{
    display:block;
    width:22px;
    height:1.5px;
    background:currentColor;
  }
  .mobile-nav{
    position:fixed;
    top:68px;
    left:0;
    right:0;
    z-index:70;
    display:none;
    flex-direction:column;
    gap:0;
    padding:1rem var(--gutter) 1.2rem;
    background:var(--oxblood-deep);
    border-top:1px solid rgba(205,176,121,.24);
    box-shadow:0 18px 32px rgba(51,34,42,.2);
  }
  .mobile-nav.open{display:flex}
  .mobile-nav a{
    color:var(--on-dark);
    text-decoration:none;
    padding:.82rem 0;
    border-bottom:1px solid rgba(205,176,121,.18);
  }
  .article-hero{padding-block:clamp(2.2rem,9vw,3.3rem)}
  .article-hero h1:not(.heading-xl),
  .heading-xl{
    font-size:clamp(1.72rem,7vw,2.18rem);
    line-height:1.32;
  }
  .article-hero h1 br{display:none}
  .article-meta-row,.article-tags{gap:.55rem}
  .article-tag{font-size:.72rem;padding:.32rem .72rem}
  .article-body{
    max-width:none;
    padding:clamp(2rem,7vw,2.8rem) var(--gutter);
  }
  .article-body h2{line-height:1.42}
  .article-body p,.article-body li{line-height:1.88}
  .char-grid{grid-template-columns:1fr}
  .cta-btns{gap:.8rem}
  .cta-btns .btn,.mobile-menu .btn{width:100%;justify-content:center;text-align:center}
  .article-hero > .hero-series-tag,
  .article-hero > h1,
  .article-hero > .article-subtitle,
  .article-hero > .article-meta{
    width:calc(100% - 44px);
  }
  .article-container{
    max-width:none;
    padding:2rem var(--gutter);
  }
  .article-container .section-nav,
  .article-container .article-nav{
    padding:1.1rem 1.15rem;
  }
  .article-container .section-nav ol{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .article-body table.compare-table{font-size:.82rem}
  .article-body table.compare-table th,
  .article-body table.compare-table td{
    min-width:7.5rem;
    padding:.7rem .8rem;
  }
  .article-body table.compare-table th:first-child,
  .article-body table.compare-table td:first-child{min-width:6.25rem}
  .footnote-list li{grid-template-columns:1fr;gap:.2rem}
}