.spo { color:#202d28; background:#fff; }
.spo *, .spo *::before, .spo *::after { box-sizing:border-box; letter-spacing:0; }
.spo [hidden] { display:none!important; }
.spo [id], .spo-card { scroll-margin-top:140px; }
.spo .mhg-shell { width:calc(100% - 48px); max-width:1240px; margin-inline:auto; }
.spo :is(a,button,input,select,summary):focus-visible { outline:3px solid #276e39; outline-offset:4px; }
.spo .mhg-btn { box-shadow:none; }
.spo-intro { padding:24px 0 26px; border-bottom:1px solid #d8dedb; }
.spo-back { display:block; width:fit-content; font-size:14px; font-weight:600; margin-bottom:20px; }
.spo-heading { display:flex; align-items:center; gap:24px; }
.spo-heading > img { width:160px; height:74px; object-fit:contain; flex:none; }
.spo-heading > .mhg-btn { margin-left:auto; flex:none; }
.spo .spo-eyebrow { color:#536257; font-size:12px; font-weight:700; margin:0 0 7px; }
.spo h1 { font-size:44px; line-height:1.15; margin:0; }
.spo .spo-subtitle { font-size:22px; margin:5px 0 0; line-height:1.5; }
.spo .spo-intro-copy { max-width:920px; margin:16px 0 0; font-size:16px; line-height:1.65; color:#4e6158; }
.spo h2 { font-size:27px; line-height:1.35; margin:0; }
.spo-catalog { background:#f4f6f5; padding:28px 0; }
.spo-catalog-heading { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:16px; }
.spo .spo-catalog-heading p { font-size:15px; margin:7px 0 0; line-height:1.65; color:#52625a; }
.spo-search { width:330px; max-width:100%; flex:none; }
.spo label { display:block; font-size:13px; font-weight:650; margin:0 0 6px; }
.spo :is(input[type=search],select) { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #8c9d92; border-radius:4px; background:white; color:#202d28; font:inherit; font-size:16px; }
.spo .spo-filters { position:static; display:flex; flex-wrap:wrap; gap:0 22px; padding:0; margin:0; border:0; border-bottom:1px solid #ccd6cf; background:transparent; }
.spo .spo-filters a { display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 0; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:#43564a; font-size:13px; font-weight:600; }
.spo .spo-filters a.is-active { border-bottom-color:#d5af00; color:#1a3323; background:transparent; }
.spo-filters strong { font-size:11px; font-weight:500; }
.spo-mobile-category { display:none; }
.spo .spo-status { font-size:13px; color:#52625a; margin:14px 0; }
.spo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.spo-grid > section { display:contents; }
.spo-card { display:flex; flex-direction:column; min-width:0; background:white; border:1px solid #d4ded7; border-radius:6px; overflow:hidden; }
.spo-media { display:block; height:170px; margin:18px 18px 0; background:#fff; }
.spo-media img { display:block; width:100%; height:100%; object-fit:contain; }
.spo-card-copy { display:flex; flex-direction:column; padding:18px; flex:1; min-width:0; }
.spo .spo-category { font-size:11px; line-height:1.5; color:#5b6047; font-weight:600; margin:0 0 7px; }
.spo-card h3 { font-size:20px; line-height:1.4; margin:0; overflow-wrap:anywhere; }
.spo-card h3 a { color:inherit; text-decoration:none; }
.spo-card h3 a:hover { text-decoration:underline; }
.spo .spo-description { font-size:14px; line-height:1.65; color:#4e6158; margin:10px 0 18px; flex:1; }
.spo-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.spo-actions .mhg-btn { display:flex; align-items:center; justify-content:center; min-width:0; min-height:44px; padding:9px 7px; font-size:13px; line-height:1.45; white-space:normal; border-radius:3px; text-align:center; }
.spo-actions [data-mhg-compare-id] { grid-column:1/-1; justify-self:center; background:transparent; color:#385442; border-color:transparent; padding:5px 12px; text-decoration:underline; }
.spo-pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:22px; }
.spo-resources { padding:30px 0; }
.spo-resources-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.spo-resources-heading > a { font-size:14px; font-weight:600; }
.spo-applications { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:20px 0 24px; }
.spo-applications a { min-width:0; font-size:15px; font-weight:600; line-height:1.6; }
.spo-applications img { display:block; width:100%; height:180px; object-fit:contain; background:#f4f6f5; margin-bottom:10px; border-radius:4px; }
.spo-resources details { border-top:1px solid #d4ded7; padding:0; }
.spo summary { cursor:pointer; min-height:48px; padding:13px 0; font-size:15px; line-height:1.6; font-weight:650; }
.spo-resources details > p { max-width:880px; font-size:15px; line-height:1.75; margin:8px 0 18px; color:#52625a; }
.spo-link-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 24px; padding:8px 0 20px; }
.spo-link-grid a { font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.spo #mhg-sales { margin:0; }
html:lang(th) body:not(.course-reading) main.spo :is(.spo-eyebrow,.spo-category) { font-size:12px!important; line-height:1.65!important; }
html:lang(th) body:not(.course-reading) main.spo :is(.spo-description,.spo-status) { font-size:15px!important; line-height:1.75!important; }
@media(max-width:1100px) { .spo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
 .spo .mhg-shell { width:calc(100% - 32px); }
 .spo-intro { padding:18px 0 22px; }
 .spo-heading { flex-wrap:wrap; gap:12px; }
 .spo-heading > img { width:88px; height:58px; }
 .spo-heading > div { flex:1; min-width:0; }
 .spo-heading > .mhg-btn { width:100%; margin:6px 0 0; }
 .spo h1 { font-size:30px; }
 .spo .spo-subtitle { font-size:17px; }
 .spo .spo-intro-copy { font-size:15px; }
 .spo h2 { font-size:23px; }
 .spo-catalog-heading { flex-direction:column; align-items:stretch; gap:16px; }
 .spo-search { width:100%; }
 .spo[data-spo-ready] .spo-filters { display:none; }
 .spo-mobile-category:not([hidden]) { display:block; }
 .spo-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
 .spo-media { height:155px; margin:16px 16px 0; }
 .spo-card-copy { padding:16px; }
 .spo-resources-heading { flex-direction:column; align-items:start; gap:10px; }
 .spo-applications { grid-template-columns:minmax(0,1fr); gap:16px; }
 .spo-applications a { display:grid; grid-template-columns:100px minmax(0,1fr); gap:14px; align-items:center; }
 .spo-applications img { width:100px; height:80px; margin:0; }
 .spo-link-grid { grid-template-columns:minmax(0,1fr); }
}