/* AdminCMS 3.3 | Premium editorial and keyword system
   Loaded LAST; only public-facing content, no changes to admin/install UI. */
:root {
  --cms-editor-ink: #1a2533;
  --cms-editor-body: #425064;
  --cms-editor-muted: #66768a;
  --cms-editor-red: #c5162c;
  --cms-editor-border: #e2e8f0;
  --cms-editor-soft: #f7f9fc;
}

/* Same page gutters as V3.2, no unnaturally long single lines. */
body main #article,
body main section.cms-article-pro { background: linear-gradient(180deg,#fbfcfe 0,#fff 100%); }
body main #article .articleShell,
body main .cms-article-pro .articleShell,
body main #article .container.article {
  padding: clamp(22px,2.65vw,36px) !important;
  border: 1px solid var(--cms-editor-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 34px rgba(25,40,60,.055) !important;
}
body main #article .cms-reading-grid,
body main .cms-article-pro .cms-reading-grid {
  grid-template-columns: minmax(0,1fr) minmax(210px,240px);
  column-gap: clamp(22px,2.4vw,34px);
}
body main #article .articleContent,
body main .cms-article-pro .articleContent {
  font-size: clamp(15.5px,1.24vw,17px) !important;
  line-height:1.76 !important;
  letter-spacing:0;
  color:var(--cms-editor-body);
  min-width:0;
}
body main #article .articleContent p,
body main .cms-article-pro .articleContent p {
  margin:0 0 11px !important;
  font-size:inherit !important;
  line-height:1.78 !important;
  font-weight:440 !important;
  color:var(--cms-editor-body) !important;
  text-align:left !important;
}
body main #article .articleContent p:empty,
body main .cms-article-pro .articleContent p:empty{display:none!important}
body main #article .articleContent > h2.articleMainTitle,
body main .cms-article-pro .articleContent > h2.articleMainTitle {
  padding:15px 19px !important;
  margin:0 0 22px !important;
  background:#f6f8fb !important;
  border-left:4px solid var(--cms-editor-red) !important;
  border-radius:0 12px 12px 0 !important;
  color:var(--cms-editor-ink) !important;
  font-size:clamp(1.3rem,2vw,1.8rem) !important;
  line-height:1.48 !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
body main #article .articleContent > h2:not(.articleMainTitle):not(.cms-keywords-heading),
body main .cms-article-pro .articleContent > h2:not(.articleMainTitle):not(.cms-keywords-heading) {
  margin:24px 0 11px !important;
  padding:0 0 10px !important;
  border-bottom:1px solid var(--cms-editor-border) !important;
  color:var(--cms-editor-ink) !important;
  font-size:clamp(1.23rem,1.8vw,1.57rem) !important;
  line-height:1.54 !important;
  font-weight:800 !important;
}
body main #article .articleContent > h3,
body main .cms-article-pro .articleContent > h3 {
  margin:17px 0 7px !important;
  padding:0 !important;
  font-size:clamp(1.02rem,1.35vw,1.17rem) !important;
  line-height:1.55 !important;
  font-weight:770 !important;
  color:#253548 !important;
}
body main #article .articleContent :is(ul,ol),
body main .cms-article-pro .articleContent :is(ul,ol) {
  margin:8px 0 14px;
  line-height:1.72;
}
body main #article .articleContent li,
body main .cms-article-pro .articleContent li { margin-bottom:5px; }
body main #article .articleContent :is(hr,.articleDivider),
body main .cms-article-pro .articleContent :is(hr,.articleDivider) {
  margin:12px 0 !important;
  border:0 !important;
  border-top:1px solid #edf0f3 !important;
  opacity:.7 !important;
}
body main #article .articleContent a:not(.cms-self-keyword-link),
body main .cms-article-pro .articleContent a:not(.cms-self-keyword-link) {
  color:#aa1230;text-decoration-thickness:1.1px;text-underline-offset:3px;
}
body main #article .cms-article-aside .cms-toc-details,
body main .cms-article-pro .cms-article-aside .cms-toc-details {
  background:#fafbfd;border-color:#e4eaf1;border-radius:15px;
  padding:15px 13px;box-shadow:none;
}
body main #article .cms-toc-details nav a,
body main .cms-article-pro .cms-toc-details nav a {padding:7px 6px;font-size:12px;line-height:1.54;}

/* Replaces large comma-separated keyword dumps with one restrained module. */
body main .cms-keywords-panel {
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  margin:27px 0 7px;
  padding:clamp(19px,2vw,27px);
  border:1px solid #e2e8f0;
  border-radius:19px;
  background:linear-gradient(135deg,#ffffff,#fafbfe 78%);
  box-shadow:0 12px 30px rgba(24,42,65,.06);
  overflow:hidden;
}
body main .cms-keywords-panel::before {
  content:"";
  position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,#d01228 0,#f29ca4 48%,transparent 100%);
}
body main .cms-keywords-head {
  display:flex;align-items:start;justify-content:space-between;gap:14px;
  margin-bottom:17px;
}
body main .cms-keywords-overline {
  display:block;margin:0 0 5px;color:#b3172e;
  font:750 10px/1.4 "Noto Sans Thai",Tahoma,Arial,sans-serif;
  letter-spacing:.12em;
}
body main .cms-keywords-panel .cms-keywords-heading {
  position:static;
  display:block;
  margin:0 0 5px !important;
  padding:0 !important;
  border:0 !important;
  color:#19283a !important;
  background:none !important;
  font-size:clamp(1.23rem,1.7vw,1.48rem) !important;
  font-weight:810 !important;
  line-height:1.5 !important;
  letter-spacing:-.02em;
  box-shadow:none !important;
}
body main .cms-keywords-panel .cms-keywords-heading::before,
body main .cms-keywords-panel .cms-keywords-heading::after {display:none!important;content:none!important}
body main .cms-keywords-panel .cms-keywords-intro {
  margin:0 !important;
  color:#788395 !important;
  font-size:13px !important;
  line-height:1.6 !important;
  font-weight:440 !important;
}
body main .cms-keywords-count {
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:999px;
  border:1px solid #e5eaf0;background:#fff;
  color:#69798a;font-size:12px;font-weight:750;
  line-height:1.4;white-space:nowrap;flex:none;
}
body main .cms-keywords-focus {
  display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  border:1px solid #f2dfe2;
  border-radius:14px;
  padding:12px 15px;margin-bottom:18px;
  background:#fff5f6;
}
body main .cms-keywords-field-label {
  color:#bd1a32;font-size:11px;line-height:1.5;font-weight:770;
  letter-spacing:0;white-space:nowrap;
}
body main .cms-keywords-focus strong,
body main #article .articleContent .cms-keywords-focus strong,
body main .cms-article-pro .articleContent .cms-keywords-focus strong {
  display:block !important;margin:0 !important;padding:0 !important;
  color:#99152b !important;font-size:clamp(15px,1.23vw,17px) !important;
  font-weight:790 !important;line-height:1.6 !important;overflow-wrap:anywhere;
}
body main .cms-keywords-subhead {
  margin:0 0 10px;
  font-size:12px;font-weight:750;color:#48586d;line-height:1.6;
}
body main .cms-keywords-panel .cms-keywords-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
  list-style:none;
  margin:0 !important;
  padding:0 !important;
  width:100%;
}
body main .cms-keywords-panel .cms-keywords-item {
  display:flex !important;
  align-items:center;
  min-width:0;
  margin:0 !important;
  padding:10px 13px !important;
  border:1px solid #e5ebf1;
  border-radius:11px;
  background:#fff;
  color:#425165 !important;
  font-size:clamp(13px,1vw,14px) !important;
  font-weight:540 !important;
  line-height:1.6 !important;
  overflow-wrap:anywhere;
}
body main .cms-keywords-item::before {
  content:"";display:block;flex:0 0 5px;
  width:5px;height:5px;margin-right:11px;
  background:#d22b43;border-radius:50%;
}
/* Modernize old author-made chip sections, without overriding their content. */
body main .keywordBox{padding:clamp(18px,2vw,27px);border-radius:19px;border-color:#e2e8f0;box-shadow:0 10px 30px rgba(24,42,65,.05)}
body main .keywordClusters{gap:12px;margin-top:16px}
body main .keywordClusters .cluster{border-radius:13px;padding:16px;border-color:#e7edf3;background:#f8fafc}
body main .keywordClusters .cluster h3{font-size:1.02rem;line-height:1.5}
body main .keywordClusters .chip{border:1px solid #e7eaf0;border-radius:9px;background:#fff;padding:7px 10px;font-size:13px;font-weight:600;color:#49586a;line-height:1.55;overflow-wrap:anywhere}

@media(max-width:1024px){
  body main #article .cms-reading-grid,
  body main .cms-article-pro .cms-reading-grid{
    grid-template-columns:minmax(0,1fr) 210px;
    column-gap:20px;
  }
}
@media(max-width:780px){
  body main #article .cms-reading-grid,
  body main .cms-article-pro .cms-reading-grid{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"index" "reading" !important;
  }
  body main #article .cms-article-aside .cms-toc-details,
  body main .cms-article-pro .cms-article-aside .cms-toc-details{padding:0}
}
@media(max-width:640px){
  body main #article .articleShell,
  body main .cms-article-pro .articleShell,
  body main #article .container.article{padding:18px 15px!important;border-radius:17px!important}
  body main #article .articleContent,
  body main .cms-article-pro .articleContent{font-size:15.5px!important;line-height:1.74!important}
  body main #article .articleContent p,
  body main .cms-article-pro .articleContent p{line-height:1.76!important;margin-bottom:10px!important}
  body main .cms-keywords-panel{margin:21px 0 5px;padding:18px 14px;border-radius:15px}
  body main .cms-keywords-head{flex-direction:column;gap:8px;margin-bottom:14px}
  body main .cms-keywords-count{font-size:11px}
  body main .cms-keywords-panel .cms-keywords-heading{font-size:1.18rem!important}
  body main .cms-keywords-focus{align-items:flex-start;flex-direction:column;gap:4px;padding:11px 12px;margin-bottom:14px}
  body main .cms-keywords-panel .cms-keywords-list{grid-template-columns:minmax(0,1fr);gap:7px}
  body main .cms-keywords-panel .cms-keywords-item{padding:9px 11px!important;font-size:13.5px!important;line-height:1.6!important;display:flex!important}
}

/* Override migrated mobile article rules (those use #article and !important). */
body main #article .articleContent .cms-keywords-panel .cms-keywords-heading,
body main .cms-article-pro .articleContent .cms-keywords-panel .cms-keywords-heading {
  margin:0 0 5px !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:#19283a !important;
  font-size:clamp(1.23rem,1.7vw,1.48rem) !important;
  font-weight:810 !important;
  line-height:1.5 !important;
}
body main #article .articleContent .cms-keywords-panel .cms-keywords-intro,
body main .cms-article-pro .articleContent .cms-keywords-panel .cms-keywords-intro {
  margin:0 !important;font-size:13px !important;line-height:1.6 !important;
  color:#788395 !important;
}
body main #article .articleContent .cms-keywords-panel .cms-keywords-list,
body main .cms-article-pro .articleContent .cms-keywords-panel .cms-keywords-list {
  margin:0 !important;padding:0 !important;list-style:none !important;
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px 10px !important;
}
body main #article .articleContent .cms-keywords-panel .cms-keywords-item,
body main .cms-article-pro .articleContent .cms-keywords-panel .cms-keywords-item {
  display:flex !important;align-items:center !important;list-style:none !important;
  margin:0 !important;padding:10px 13px !important;
  font-size:14px !important;line-height:1.6 !important;
  font-weight:540 !important;color:#425165 !important;
}
@media(max-width:640px) {
  body main #article .articleContent .cms-keywords-panel .cms-keywords-heading,
  body main .cms-article-pro .articleContent .cms-keywords-panel .cms-keywords-heading {font-size:1.18rem !important;}
  body main #article .articleContent .cms-keywords-panel .cms-keywords-list,
  body main .cms-article-pro .articleContent .cms-keywords-panel .cms-keywords-list {
    grid-template-columns:minmax(0,1fr) !important;gap:7px !important;
  }
  body main #article .articleContent .cms-keywords-panel .cms-keywords-item,
  body main .cms-article-pro .articleContent .cms-keywords-panel .cms-keywords-item {
    display:flex !important;padding:9px 11px !important;
    font-size:13.5px !important;line-height:1.6 !important;
  }
}