/* Shared by public articles and the editor iframe. No global resets. */
.article-bodyhtml, .article-editor {
  font-family: var(--content-font-family, 'Anuphan', 'Noto Sans Thai', sans-serif);
  font-size: 18px; line-height: 1.8; color: #302735; overflow-wrap: anywhere;
}
:is(.article-bodyhtml, .article-editor) p { margin: 0 0 1em; }
:is(.article-bodyhtml, .article-editor) img { width: auto; max-width: 100%; height: auto; }
:is(.article-bodyhtml, .article-editor) h2 { font-size: 28px; line-height: 1.5; margin: 1.4em 0 .6em; }
:is(.article-bodyhtml, .article-editor) h3 { font-size: 22px; line-height: 1.5; margin: 1em 0 .5em; }
.article-bodyhtml h1 *, .article-bodyhtml h2 *, .article-bodyhtml h3 * { font-size: inherit; }
:is(.article-bodyhtml, .article-editor) .doc-heading,
:is(.article-bodyhtml, .article-editor) .doc-section-title { color: #712d7d; }
:is(.article-bodyhtml, .article-editor) .doc-section-title { border-left: 4px solid #712d7d; padding-left: 14px; }
:is(.article-bodyhtml, .article-editor) .doc-card { padding: 24px; margin: 0 0 20px; border: 1px solid #e3d9e7; border-radius: 14px; background-color: #fff; }
:is(.article-bodyhtml, .article-editor) .doc-card h3 { margin-top: 0; }
:is(.article-bodyhtml, .article-editor) .doc-note { padding: 18px 22px; background-color: #f4edf7; border-left: 4px solid #712d7d; border-radius: 10px; margin-bottom: 24px; }
:is(.article-bodyhtml, .article-editor) .doc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
:is(.article-bodyhtml, .article-editor) .doc-link { display: inline-block; padding: 10px 18px; margin: 4px 4px 4px 0; border: 1px solid #712d7d; border-radius: 8px; font-size: 16px; line-height: 1.5; color: #712d7d; background-color: #fff; text-decoration: none; }
:is(.article-bodyhtml, .article-editor) .doc-link-primary { color: #fff; background-color: #712d7d; }
:is(.article-bodyhtml, .article-editor) .doc-link:hover { color: #fff; background-color: #582260; }
:is(.article-bodyhtml, .article-editor) .doc-link:focus-visible { outline: 3px solid #c32237; outline-offset: 3px; }
:is(.article-bodyhtml, .article-editor) .doc-list { padding-left: 24px; }
:is(.article-bodyhtml, .article-editor) .doc-list li { margin-bottom: 10px; }
:is(.article-bodyhtml, .article-editor) .clean-table { width: 100%; border-collapse: collapse; }
:is(.article-bodyhtml, .article-editor) .clean-table th { background-color: #712d7d; color: white; padding: 12px; white-space: normal; }
:is(.article-bodyhtml, .article-editor) .clean-table td { padding: 12px; border: 1px solid #e3d9e7; vertical-align: top; }
:is(.article-bodyhtml, .article-editor) .doc-table-scroll { overflow-x: auto; max-width: 100%; }
@media (max-width: 575.98px) {
  :is(.article-bodyhtml, .article-editor) .doc-card { padding: 18px; }
  :is(.article-bodyhtml, .article-editor) .doc-actions { flex-direction: column; }
  :is(.article-bodyhtml, .article-editor) .doc-actions .doc-link { text-align: center; }
}