/* AdminCMS 2.9 — editorial design system
   Progressive enhancement only: no stored HTML, headings or SEO values are changed.
   Loaded after the original per-page themes and site-shell.css. */
:root {
  --cms-a-ink: #182332;
  --cms-a-body: #344153;
  --cms-a-muted: #64748b;
  --cms-a-accent: #c61932;
  --cms-a-accent-dark: #a80d24;
  --cms-a-border: #e4e9ef;
  --cms-a-soft: #f6f8fb;
  --cms-a-line: #edf0f4;
}

/* Denser rhythm across migrated article-led service pages. No changes to header,
   footer, pricing/contact widgets or admin screens. */
main > .section:not(.hero),
main > section.section:not(.hero) { padding-block: clamp(34px, 4.3vw, 57px); }
main > .sectionTight { padding-block: clamp(27px, 3.7vw, 47px); }
main .sectionHead { margin-bottom: clamp(18px, 2.2vw, 25px); }
main :is(.benefitGrid,.categoryGrid2,.processGrid,.careGrid,.faqGrid) { gap: clamp(11px, 1.4vw, 16px); }
main :is(.benefitCard,.catCard,.stepCard,.careCard) {
  min-height: 0;
  padding: clamp(17px, 1.8vw, 23px);
  border-radius: 16px;
  border-color: #e9edf2;
  box-shadow: 0 5px 18px rgba(25,36,53,.045);
}
main :is(.benefitCard,.catCard,.stepCard,.careCard) :is(h3,p) { line-height: 1.72; }
main :is(.benefitCard,.catCard,.stepCard,.careCard) p { font-weight: 500; color:#516071; }
main .iconBubble { width:47px;height:47px;border-radius:13px;margin-bottom:12px;font-size:1.15rem;box-shadow:none; }
main .panel { border-radius:18px;padding:clamp(22px,2.6vw,32px);box-shadow:0 8px 26px rgba(25,36,53,.055); }
main .featureList { gap:8px; }
main .featureList li { padding:10px 13px;border-radius:10px;font-weight:600;line-height:1.7; }
main .showcaseCaption { padding:clamp(20px,2.6vw,30px); }
main .showcaseCaption p {font-weight:500;line-height:1.85;}

/* Main editorial canvas: use the width of the browser without making the text
   lines uncomfortably long. The optional chapter index occupies the right. */
:is(body #article,body .cms-article-pro).section,
body section#article { padding-block: clamp(32px,4.4vw,58px); }
:is(body #article,body .cms-article-pro) > .wrap {
  width: min(1320px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
}
:is(body #article,body .cms-article-pro) :is(.articleShell,.container.article) {
  position: relative;
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(24px,3.25vw,45px);
  background:#fff;
  border:1px solid var(--cms-a-border);
  border-radius:22px;
  box-shadow:0 15px 48px rgba(24,35,50,.065);
  overflow:visible;
}
/* Native article cards from older UPS/furniture templates are directly
   inside #article, rather than inside a .wrap. Give them equal page gutters. */
:is(body #article,body .cms-article-pro) > .container.article {
  box-sizing:border-box;
  width:min(1320px,calc(100% - 48px));
  margin-inline:auto;
}
:is(body #article,body .cms-article-pro) .cms-reading-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(218px,255px);
  grid-template-areas:"reading index";
  align-items:start;
  column-gap:clamp(25px,3.5vw,53px);
}
:is(body #article,body .cms-article-pro) .cms-reading-grid > .articleContent { grid-area:reading;min-width:0; }
:is(body #article,body .cms-article-pro) .cms-reading-grid > .cms-article-aside { grid-area:index;min-width:0; }

/* One textual standard for every imported article. Balanced typography rather
   than the original fully-bold paragraphs, with no forced justification. */
:is(body #article,body .cms-article-pro) .articleContent,
:is(body #article,body .cms-article-pro) .articleShell:not(.cms-reading-grid),
:is(body #article,body .cms-article-pro) .container.article:not(.cms-reading-grid) {
  color:var(--cms-a-body);
  font-family:"Noto Sans Thai","Sarabun",Tahoma,"Segoe UI",Arial,sans-serif;
  font-size:clamp(15.5px,1.23vw,17px);
  line-height:1.84;
  letter-spacing:0;
  text-align:left;
  word-break:normal;
  overflow-wrap:break-word;
}
:is(body #article,body .cms-article-pro) .articleContent { width:100%;min-width:0;max-width:none; }
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) p {
  margin:0 0 14px;
  color:var(--cms-a-body);
  font-size:inherit;
  line-height:1.86;
  font-weight:450;
  text-align:left;
  overflow-wrap:break-word;
}
:is(body #article,body .cms-article-pro) .articleContent p:empty { display:none; }
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) p:last-child { margin-bottom:0; }
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) strong,
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) b { font-weight:720; }
:is(body #article,body .cms-article-pro) .articleContent strong {color:#263346!important;}
:is(body #article,body .cms-article-pro) .articleContent a strong {color:inherit!important;}
:is(body #article,body .cms-article-pro) .articleContent > h2.articleMainTitle {
  margin:0 0 24px;
  padding:18px 23px;
  font-size:clamp(1.42rem,2.15vw,2rem);
  line-height:1.5;
  font-weight:830;
  letter-spacing:-.025em;
  color:var(--cms-a-ink);
  background:#f5f7fa;
  border:0;
  border-left:5px solid var(--cms-a-accent);
  border-radius:0 13px 13px 0;
  box-shadow:none;
  text-align:left;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) h2:not(.articleMainTitle) {
  position:relative;
  margin:30px 0 13px;
  padding:0 0 11px;
  border:0;
  border-bottom:1px solid var(--cms-a-border);
  background:none;
  color:var(--cms-a-ink);
  font-size:clamp(1.29rem,1.9vw,1.68rem);
  font-weight:820;
  line-height:1.55;
  letter-spacing:-.02em;
  text-wrap:pretty;
  box-shadow:none;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) h2:not(.articleMainTitle):before {
  content:"";position:absolute;bottom:-1px;left:0;width:49px;height:3px;
  background:var(--cms-a-accent);border-radius:99px;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) h3 {
  margin:21px 0 8px;
  padding:0;
  border:0;
  color:#263346;
  font-size:clamp(1.05rem,1.48vw,1.25rem);
  font-weight:780;
  line-height:1.58;
  text-wrap:pretty;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) h4,
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) h5 {
  color:#263346;font-size:1.02rem;font-weight:750;margin:18px 0 7px;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) :is(ul,ol) {
  margin:9px 0 18px;
  padding-left:1.5em;
  color:var(--cms-a-body);
  font-size:inherit;
  line-height:1.82;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) li {padding-left:3px;margin-bottom:7px;font-weight:450;}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) li::marker {color:var(--cms-a-accent);font-weight:750;}
:is(body #article,body .cms-article-pro) .articleContent a {
  color:var(--cms-a-accent-dark);
  text-decoration:underline;
  text-decoration-color:#ce7785;
  text-underline-offset:3px;
  overflow-wrap:break-word;
}
:is(body #article,body .cms-article-pro) .articleContent a:hover {text-decoration-color:currentColor;text-decoration-thickness:2px;}
:is(body #article,body .cms-article-pro) .cms-self-keyword-link strong {color:inherit;font-weight:760;}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) blockquote {
  margin:19px 0;padding:15px 19px;border-left:3px solid var(--cms-a-accent);
  border-radius:0 10px 10px 0;background:#f7f9fc;color:#344153;font-style:normal;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) :is(hr,.articleDivider) {
  border:0!important;height:1px!important;
  background:#edf0f4!important;
  margin:18px 0!important;
  box-shadow:none;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) :is(img,video,iframe) {
  max-width:100%;height:auto;border-radius:11px;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) table {
  display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;
  margin:18px 0 23px;color:var(--cms-a-body);font-size:.94em;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) :is(th,td) {
  border:1px solid var(--cms-a-border);padding:11px 13px;text-align:left;vertical-align:top;
}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) th {background:#f6f8fa;color:#243145;font-weight:720;}
:is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) :is(h2,h3,h4) {scroll-margin-top:110px;}

/* Sticky reading map: optional progressive enhancement, built from existing H2s.
   Markup is a nav, not another heading, so source SEO structure remains intact. */
.cms-article-aside { position:sticky;top:105px;align-self:start; }
.cms-toc-details {
  margin:0;background:#f8fafc;border:1px solid var(--cms-a-border);
  border-radius:16px;padding:18px 16px 17px;
  box-shadow:none;max-height:calc(100vh - 126px);
  overflow:auto;overscroll-behavior:contain;
}
.cms-toc-details > summary {list-style:none;cursor:default;display:flex;gap:9px;justify-content:space-between;align-items:center;padding:0;margin:0 0 12px;color:var(--cms-a-ink);font-size:14px;font-weight:820;}
.cms-toc-details > summary::-webkit-details-marker {display:none;}
.cms-toc-summary-label {display:flex;align-items:center;gap:8px;}
.cms-toc-mark {width:28px;height:28px;border-radius:9px;background:#ffe9ed;color:var(--cms-a-accent);display:grid;place-items:center;flex-shrink:0;}
.cms-toc-mark svg {width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.cms-toc-count {font-size:11px;font-weight:650;color:#64748b;white-space:nowrap;}
.cms-toc-details > nav {margin-top:0;}
.cms-toc-details ol {list-style:none;padding:5px 0 0;margin:0;border-top:1px solid var(--cms-a-border);counter-reset:chapter;}
.cms-toc-details li {display:block;margin:0;padding:0;}
.cms-toc-details nav a {
  display:grid;grid-template-columns:27px minmax(0,1fr);align-items:start;gap:5px;
  padding:9px 8px;border-radius:8px;color:#526074;
  font-size:12.5px;font-weight:560;line-height:1.58;
  text-decoration:none;transition:background .15s,color .15s;
}
.cms-toc-details nav a .cms-toc-num {font-size:11px;color:#9ca7b8;font-weight:780;padding-top:2px;}
.cms-toc-details nav a:hover,.cms-toc-details nav a:focus-visible {background:#eef2f7;color:#243145;}
.cms-toc-details nav a[aria-current="location"] {background:#ffeaee;color:#a70e26;font-weight:760;}
.cms-toc-details nav a[aria-current="location"] .cms-toc-num {color:var(--cms-a-accent);}
.cms-toc-bottom {display:block;padding:13px 4px 0;margin-top:9px;border-top:1px solid var(--cms-a-border);color:#708096;font-size:11px;line-height:1.5;}
.cms-toc-meter {height:4px;background:#e5e9f0;overflow:hidden;border-radius:9px;margin-top:9px;}
.cms-toc-meter > span {display:block;width:0;height:100%;background:var(--cms-a-accent);border-radius:9px;transition:width .1s linear;}
.cms-toc-chevron {display:none;}

/* Editorial heading and FAQ follow the same balanced rhythm. */
main #faq.sectionTight {padding-block:clamp(28px,3.5vw,45px);}
main #faq .sectionHead {margin-bottom:20px;}
main #faq .faqItem {border-radius:13px;box-shadow:0 4px 17px rgba(25,36,53,.04);border-color:var(--cms-a-border);}
main #faq .faqItem summary {padding:15px 17px;background:#fff;color:var(--cms-a-ink);font-weight:700;line-height:1.6;}
main #faq .faqItem p {padding:0 18px 17px;color:var(--cms-a-body);font-weight:450;line-height:1.83;}
.cms-contextual-links {padding-block:clamp(25px,3.2vw,40px);background:#fafbfc;}
.cms-contextual-links .wrap {max-width:1230px;}
.cms-contextual-links h2 {color:var(--cms-a-ink);font-size:clamp(1.25rem,1.8vw,1.65rem);}
.cms-contextual-links p {font-weight:450;line-height:1.8;}

/* Special legacy layouts do not share .articleShell or .articleContent. */
main.cms-legacy {padding-block:clamp(30px,4vw,52px);background:#f8f9fb;}
main.cms-legacy > .wrap {
  width:min(1220px,calc(100% - 44px));max-width:none;
  padding:clamp(23px,3vw,43px);
  background:#fff;border:1px solid var(--cms-a-border);
  border-radius:20px;box-shadow:0 12px 40px rgba(24,35,50,.06);
  color:var(--cms-a-body);font-size:16px;line-height:1.85;
}
main.cms-legacy > .wrap h1 {font-size:clamp(1.7rem,2.5vw,2.6rem);line-height:1.45;color:var(--cms-a-ink);padding-bottom:18px;border-bottom:2px solid #f0e2e5;margin-bottom:23px;}
main.cms-legacy > .wrap h2 {font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.54;border-bottom:1px solid #e5eaf0;padding-bottom:10px;margin:28px 0 13px;color:var(--cms-a-ink);}
main.cms-legacy > .wrap h3 {font-size:1.15rem;margin:19px 0 8px;color:#263346;}
main.cms-legacy > .wrap p {font-size:inherit;font-weight:450;line-height:1.84;margin-bottom:14px;color:var(--cms-a-body);}
main.cms-legacy > .wrap :is(ul,ol) {margin-bottom:17px;line-height:1.8;}
main.cms-legacy > .wrap :is(img,video) {max-width:100%;height:auto;border-radius:12px;}

@media (max-width:1030px) {
  :is(body #article,body .cms-article-pro) .cms-reading-grid {grid-template-columns:minmax(0,1fr) 215px;column-gap:26px;}
  :is(body #article,body .cms-article-pro) > .wrap {width:min(100% - 34px,1320px);}
}
@media (max-width:780px) {
  :is(body #article,body .cms-article-pro) .cms-reading-grid {grid-template-columns:minmax(0,1fr);grid-template-areas:"index" "reading";row-gap:20px;}
  .cms-article-aside {position:static;top:auto;}
  .cms-toc-details {max-height:none;padding:0;overflow:visible;background:#f8fafc;border-radius:12px;}
  .cms-toc-details > summary {cursor:pointer;padding:12px 15px;margin:0;user-select:none;}
  .cms-toc-details > nav {padding:0 11px 12px;max-height:270px;overflow:auto;}
  .cms-toc-details > nav ol {padding-top:9px;}
  .cms-toc-details .cms-toc-bottom {display:none;}
  .cms-toc-chevron {display:inline-block;width:7px;height:7px;transform:rotate(45deg);border-right:2px solid #8b98a9;border-bottom:2px solid #8b98a9;margin:0 5px 4px 4px;}
  .cms-toc-details[open] .cms-toc-chevron {transform:rotate(225deg);margin-bottom:0;}
  :is(body #article,body .cms-article-pro) :is(.articleShell,.container.article) {padding:clamp(18px,3.5vw,28px);}
}
@media (max-width:640px) {
  :is(body #article,body .cms-article-pro).section,body section#article {padding-block:24px!important;}
  :is(body #article,body .cms-article-pro) > .wrap {width:calc(100% - 24px)!important;max-width:none;}
  :is(body #article,body .cms-article-pro) > .container.article {width:calc(100% - 24px)!important;margin-inline:auto!important;}
  :is(body #article,body .cms-article-pro) .cms-reading-grid {display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"index" "reading"!important;}
  :is(body #article,body .cms-article-pro) :is(.articleShell,.container.article) {
    padding:19px 16px!important;border-radius:15px!important;
    border:1px solid var(--cms-a-border)!important;
    box-shadow:0 6px 21px rgba(24,35,50,.045)!important;
  }
  :is(body #article,body .cms-article-pro) .articleContent {font-size:15.5px!important;line-height:1.85!important;color:var(--cms-a-body)!important;}
  :is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) p,
  :is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) li {
    display:initial;visibility:visible!important;opacity:1!important;
    margin:0 0 12px!important;color:var(--cms-a-body)!important;
    font-size:15.5px!important;line-height:1.88!important;font-weight:450!important;
    text-align:left!important;word-break:normal!important;overflow-wrap:break-word!important;
  }
  :is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) p {display:block;}
  :is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) li {display:list-item!important;margin-bottom:6px!important;}
  :is(body #article,body .cms-article-pro) .articleContent h2.articleMainTitle {
    padding:14px 15px!important;margin:0 0 18px!important;
    color:var(--cms-a-ink)!important;background:#f5f7fa!important;
    border:0!important;border-left:4px solid var(--cms-a-accent)!important;
    border-radius:0 10px 10px 0!important;
    font-size:clamp(1.24rem,5.5vw,1.48rem)!important;line-height:1.55!important;
    font-weight:800!important;box-shadow:none!important;
  }
  :is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) h2:not(.articleMainTitle) {
    margin:24px 0 10px!important;padding:0 0 10px!important;
    font-size:clamp(1.15rem,5.1vw,1.38rem)!important;
    line-height:1.58!important;color:var(--cms-a-ink)!important;
    border-bottom:1px solid var(--cms-a-border)!important;
    font-weight:800!important;
  }
  :is(body #article,body .cms-article-pro) :is(.articleContent,.articleShell,.container.article) h3 {
    margin:17px 0 7px!important;color:#263346!important;
    font-size:1.055rem!important;line-height:1.6!important;font-weight:760!important;
  }
  :is(body #article,body .cms-article-pro) .articleContent strong {display:inline!important;color:#263346!important;font-size:inherit!important;line-height:inherit!important;font-weight:750!important;margin:0!important;}
  :is(body #article,body .cms-article-pro) .articleContent :is(hr,.articleDivider) {margin:15px 0!important;}
  main #faq .faqItem summary {padding:13px 14px;}
  main #faq .faqItem p {padding:0 14px 14px;}
  main.cms-legacy {padding-block:22px;}
  main.cms-legacy > .wrap {width:calc(100% - 24px);padding:19px 16px;border-radius:15px;font-size:15.5px;}
  main > .section:not(.hero),main > section.section:not(.hero) {padding-block:28px;}
  main > .sectionTight {padding-block:24px;}
}
@media (prefers-reduced-motion:reduce) {
  .cms-toc-details nav a,.cms-toc-meter > span {transition:none;}
}