/* Standalone article shell. Existing footer, reviews and coverage keep their own styles. */
.article-site {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  background: #fff;
  color: #19354c;
  font: 400 15px/1.85 "Noto Sans Thai", Tahoma, "Segoe UI", sans-serif;
}
.article-site *, .article-site *::before, .article-site *::after { box-sizing: border-box; }
.article-site__shell { width: min(var(--layout-max-width, 1120px), calc(100% - var(--layout-side-space, 16px) - var(--layout-side-space, 16px))); min-width: 0; margin-inline: auto; }
.article-site__skip { position: fixed; z-index: 100; top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 11px 18px; transform: translateY(-180%); border: 2px solid #c6a568; border-radius: 8px; background: #16354c; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.article-site__skip:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
.article-site__header { position: sticky; top: 0; z-index: 60; min-width: 0; border-bottom: 1px solid #e1e8ee; background: rgba(255, 255, 255, .97); box-shadow: 0 3px 14px rgba(21, 47, 69, .035); backdrop-filter: blur(10px); }
.article-site__header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; min-width: 0; padding: 12px 0; }
.article-site__brand { display: flex; align-items: center; flex: 1 1 auto; gap: 12px; min-width: 0; max-width: 560px; color: #18354c; text-decoration: none; }
.article-site .article-site__logo { display: block; flex: 0 0 62px; width: 62px; height: 62px; max-width: 62px; object-fit: contain; }
.article-site__brand-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; overflow-wrap: anywhere; }
.article-site__brand-copy strong { color: #1a364e; font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; line-height: 1.6; letter-spacing: -.02em; }
.article-site__brand-copy small { color: #6e8192; font-size: 11px; font-weight: 400; line-height: 1.65; }
.article-site__actions { display: flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; flex-wrap: wrap; gap: 9px; min-width: 0; max-width: 100%; }
.article-site__contact { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; min-width: 0; max-width: 100%; padding: 10px 15px; border: 1px solid #cad7e1; border-radius: 9px; color: #294962; font-size: 12px; font-weight: 600; line-height: 1.75; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.article-site__contact svg { display: block; flex: 0 0 17px; width: 17px; height: 17px; }
.article-site__contact span { min-width: 0; }
.article-site__contact--line { border-color: #167b54; background: #147650; color: #fff; }
.article-site__contact--line:hover { border-color: #096441; background: #0c6644; }
.article-site__contact--phone { border-color: #d0dbe4; background: #fff; color: #35546c; }
.article-site__contact--phone:hover { border-color: #b89a66; background: #fcfaf5; color: #785a2e; }
.article-site__brand:focus-visible, .article-site__contact:focus-visible, .article-site__menu a:focus-visible, .article-site__preview a:focus-visible { outline: 3px solid #a58149; outline-offset: 4px; }
.article-site__navigation { min-width: 0; border-bottom: 1px solid #e1e8ef; background: #f6f8fb; }
.article-site__menu { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 15px; padding: 7px 0; }
.article-site__menu a { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; min-width: 0; max-width: 100%; padding: 6px 11px; border: 1px solid transparent; border-radius: 7px; color: #60778b; font-size: 12px; font-weight: 500; line-height: 1.8; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.article-site__menu a:hover { color: #835f2d; background: #f0eee7; }
.article-site__menu a.is-current { border-color: #e7dcc6; background: #fcf8ee; color: #866335; font-weight: 600; }
.article-site__main { width: 100%; min-width: 0; margin: 0; scroll-margin-top: 115px; }
.article-site__preview { min-width: 0; border-bottom: 1px solid #e0d0af; background: #fbf3df; color: #715628; }
.article-site__preview-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; padding: 11px 0; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.article-site__preview-inner > span { min-width: 0; }
.article-site__preview strong { margin-right: 8px; font-weight: 600; }
.article-site__preview a { display: inline-block; max-width: 100%; padding: 5px 0; color: #795320; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .article-site__header-inner { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
  .article-site__brand { flex-basis: 100%; max-width: 100%; gap: 11px; }
  .article-site .article-site__logo { flex-basis: 54px; width: 54px; height: 54px; max-width: 54px; }
  .article-site__brand-copy strong { font-size: 17px; }
  .article-site__brand-copy small { font-size: 10px; }
  .article-site__actions { justify-content: flex-start; width: 100%; gap: 8px; }
  .article-site__contact { flex: 1 1 120px; min-height: 39px; padding: 8px 10px; font-size: 11px; }
  .article-site__contact svg { flex-basis: 15px; width: 15px; height: 15px; }
  .article-site__menu { gap: 5px 8px; padding-block: 5px; }
  .article-site__menu a { min-height: 38px; padding-inline: 10px; font-size: 11px; }
  .article-site__main { scroll-margin-top: 165px; }
}
@media (max-width: 360px) {
  .article-site__header-inner { gap: 9px; }
  .article-site__brand-copy strong { font-size: 16px; }
  .article-site__brand-copy small { font-size: 9px; }
  .article-site__menu { gap: 4px; }
  .article-site__menu a { padding-inline: 8px; }
}
@media print {
  .article-site__header { position: static; box-shadow: none; }
  .article-site__header-inner { padding: 8px 0; }
  .article-site__actions, .article-site__navigation, .article-site__preview, .article-site__skip { display: none; }
}