/* How To Ads: one quiet, legible system across public and operational screens. */
@font-face{font-family:HTA UI;src:url(fonts/kanit-thai-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:HTA UI;src:url(fonts/kanit-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:HTA UI;src:url(fonts/kanit-thai-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:HTA UI;src:url(fonts/kanit-latin-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:HTA UI;src:url(fonts/kanit-thai-600.woff2) format("woff2");font-weight:600 700;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:HTA UI;src:url(fonts/kanit-latin-600.woff2) format("woff2");font-weight:600 700;font-display:swap}
.hta-design-system{
 --hta-brand:#1559e8;--hta-ink:#10264a;--hta-paper:#f4f8ff;--hta-surface:#fff;
 --hta-teal:#087d84;--hta-muted:#526579;--hta-line:#dce5f0;--hta-focus:#087d84;
 --hta-radius:18px;--hta-radius-sm:12px;--hta-ui-font:"HTA UI","Kanit",sans-serif;
 --hta-success:#146b52;--hta-warning:#805b15;--hta-danger:#ae3141;
}
.hta-design-system :where(.hta-member-ui,.hta-all-plans,.hta-dashboard-intro,.htas-page,.htas-shell,.hta-learning-packages,.hta-article-body,#hta-live-report,.hta-admin-workspace,.hta-customer-admin){
 font-family:var(--hta-ui-font);color:var(--hta-ink);accent-color:var(--hta-brand)
}
.hta-design-system :where(.htal-shell,.htal-dialog){font-family:var(--hta-ui-font)}
.hta-design-system :where(.hta-member-ui,.hta-all-plans,.hta-dashboard-intro,.htas-page,.htas-shell,.hta-learning-packages,.hta-article-body,#hta-live-report,.hta-admin-workspace,.hta-customer-admin) :where(button,input,select,textarea){font-family:inherit}
.hta-design-system :where(.hta-member-ui,.hta-all-plans,.hta-dashboard-intro,.htas-page,.htas-shell,.hta-learning-packages,.hta-article-body,#hta-live-report,.hta-admin-workspace,.hta-customer-admin) :where(a,button,input,select,textarea,summary):focus-visible{
 outline:3px solid var(--hta-focus);outline-offset:3px
}
.hta-design-system :where(.hta-member-ui,.hta-all-plans,.hta-dashboard-intro,.htas-page,.htas-shell,.hta-learning-packages,.hta-admin-workspace,.hta-customer-admin) :where(button,.hta-button,.hta-learning-select,summary){min-height:44px}
.hta-design-system :where(.hta-member-ui,.hta-all-plans,.hta-dashboard-intro,.htas-page,.htas-shell) :where(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
.hta-design-system :where(.hta-button,.hta-learning-select){background:var(--hta-brand);border-color:var(--hta-brand);color:#fff;border-radius:var(--hta-radius-sm);box-shadow:none}
.hta-design-system :where(.hta-button,.hta-learning-select):hover{background:#1048be;color:#fff}
.hta-design-system :where(.hta-learning-card,.hta-member-card,.hta-service-plan){box-shadow:none;border-color:var(--hta-line)}
.hta-design-system .hta-learning-card{display:flex;flex-direction:column;border-radius:var(--hta-radius);padding:28px}
.hta-design-system .hta-learning-card>p{color:var(--hta-muted);line-height:1.8}
.hta-design-system .hta-learning-card>ul{margin-top:auto;padding-top:18px}
.hta-design-system .hta-learning-card .hta-learning-select{min-height:48px;background:var(--hta-brand);color:#fff!important}
.hta-design-system .hta-learning-card .hta-learning-select:hover{background:#1048be;color:#fff!important}
.hta-design-system .hta-learning-grid{align-items:stretch}
.hta-design-system .hta-learning-upcoming{margin-top:28px;border-block:1px solid var(--hta-line);padding:8px 0}
.hta-design-system .hta-learning-upcoming>summary{display:flex;gap:20px;align-items:center;justify-content:space-between;cursor:pointer;padding:16px 4px;font-size:18px;font-weight:500;list-style:none}
.hta-design-system .hta-learning-upcoming>summary::-webkit-details-marker{display:none}
.hta-design-system .hta-learning-upcoming>summary::after{content:"+";font-size:24px;color:var(--hta-brand)}
.hta-design-system .hta-learning-upcoming[open]>summary::after{content:"−"}
.hta-design-system .hta-learning-upcoming>p{color:var(--hta-muted);margin:0 4px 24px;line-height:1.8}
.hta-design-system .hta-learning-upcoming .hta-learning-grid{padding-bottom:24px}
.hta-design-system .hta-learning-upcoming .hta-learning-card{background:var(--hta-paper)}
.hta-design-system .hta-learning-section-label{margin:24px 0 16px;font-size:20px;line-height:1.6;font-weight:500}
.hta-design-system .hta-learning-terms{color:var(--hta-muted);font-size:14px;line-height:1.85}
.hta-design-system .hta-article-body{font-size:18px;line-height:1.9}
.hta-design-system .hta-article-body :where(h2,h3){line-height:1.5;scroll-margin-top:100px}
.hta-design-system .hta-article-body p{max-width:75ch}
.hta-design-system .hta-article-body :where(figure,img){max-width:100%;height:auto}
.hta-policy-page :where(.entry-content,.elementor-widget-theme-post-content){font-family:var(--hta-ui-font);color:var(--hta-ink);line-height:1.85}
.hta-policy-toc{max-width:850px;margin:24px auto 32px;border-block:1px solid var(--hta-line);padding:18px 0;color:var(--hta-ink);font-family:var(--hta-ui-font)}
.hta-policy-toc summary{cursor:pointer;font-weight:500;min-height:44px;display:flex;align-items:center;gap:12px}
.hta-policy-toc summary::after{content:"+";color:var(--hta-brand);margin-left:auto}
.hta-policy-toc[open] summary::after{content:"−"}
.hta-policy-toc ul{margin:8px 0 0;padding-left:24px}
.hta-policy-toc a{display:inline-block;padding:8px 0;color:var(--hta-brand);text-underline-offset:4px}
.hta-policy-page :where(h2,h3){scroll-margin-top:100px}
@media(max-width:600px){
 .hta-design-system .hta-learning-card{padding:22px}
 .hta-design-system .hta-learning-section-label{font-size:20px}
 .hta-design-system .hta-article-body{font-size:17px;line-height:1.9}
 .hta-design-system :where(.hta-member-ui,.hta-all-plans,.htas-page,.htas-shell) :where(p,li){overflow-wrap:break-word}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 html:not([data-hta-motion=off]) .hta-design-system :where(.hta-button,.hta-learning-select,.hta-learning-card){transition:background-color .18s,border-color .18s}
 html:not([data-hta-motion=off]) .hta-design-system .hta-learning-card:hover{border-color:#9bb9ec}
}
@media(prefers-reduced-motion:reduce){
 .hta-design-system :where(.hta-member-ui,.hta-all-plans,.hta-dashboard-intro,.htas-page,.htas-shell,.hta-learning-packages,.hta-admin-workspace,.hta-customer-admin) *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}