@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;700;800&display=swap');
/* STEP20 SCOPED: no changes to approved site-wide CSS, header or footer */
#tph20-articles{padding:24px 0 27px;background:#fff;overflow:hidden}
#tph20-articles .tph20-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}
#tph20-articles .tph20-section-head h2{font-size:clamp(18px,1.8vw,24px);line-height:1.25;font-weight:750;margin:0;color:#1a322f}
#tph20-articles .tph20-section-head p{margin:3px 0 0;font-size:12px;color:#647671}
#tph20-articles .tph20-more{font-size:12px;font-weight:700;border:1px solid #16896c;border-radius:99px;padding:8px 13px;color:#0f8065;text-decoration:none;flex-shrink:0}
#tph20-articles .tph20-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*15px)/5);column-gap:15px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:3px 2px 12px}
#tph20-articles .tph20-track::-webkit-scrollbar{display:none}
#tph20-articles .tph20-card{display:block;min-width:0;scroll-snap-align:start;text-decoration:none;border-radius:15px;overflow:hidden;box-shadow:0 5px 13px rgba(20,39,39,.16);background:#28403c;color:#fff}
#tph20-articles .tph20-photo{display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:relative;isolation:isolate;aspect-ratio:4/4.45;padding:15px 8px 14px;text-align:center;overflow:hidden}
#tph20-articles .tph20-photo>img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover}
#tph20-articles .tph20-photo:before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(9,24,30,.31),rgba(8,22,24,.02) 34%,rgba(7,23,27,.27) 60%,rgba(7,21,23,.82))}
#tph20-articles .tph20-big{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;width:100%;font-family:Kanit,'Noto Sans Thai',system-ui,sans-serif;font-weight:750;font-size:clamp(16px,1.6vw,22px);line-height:1.30;color:#fff;letter-spacing:.005em;overflow-wrap:anywhere;-webkit-text-stroke:.25px rgba(32,45,48,.5);paint-order:stroke fill;text-shadow:0 1px 2px rgba(5,19,23,.55),0 3px 7px rgba(4,19,21,.45)}
#tph20-articles .tph20-small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%;font:400 clamp(11px,.95vw,13px)/1.35 Kanit,'Noto Sans Thai',system-ui,sans-serif;color:rgba(255,255,255,.77);text-shadow:0 1px 3px #061516,0 2px 5px #061516}
#tph20-articles .tph20-controls{display:flex;justify-content:center;gap:13px;margin:13px auto 0;width:100%}
#tph20-articles .tph20-arrow{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid #c5ddd3;border-radius:50%;background:white;color:#04795d;cursor:pointer}
#tph20-articles .tph20-arrow[disabled]{opacity:.36;cursor:default}
#tph20-articles .tph20-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
#tph20-articles .tph20-card:focus-visible,#tph20-articles .tph20-arrow:focus-visible,#tph20-articles .tph20-more:focus-visible{outline:3px solid #ecab35;outline-offset:3px}
@media(max-width:767px){#tph20-articles{padding:17px 0 20px}#tph20-articles .tph20-track{grid-auto-columns:calc((100% - 12px)/2);gap:12px}#tph20-articles .tph20-photo{aspect-ratio:4/5;padding:12px 7px 11px}#tph20-articles .tph20-big{font-size:clamp(15px,4.1vw,20px);-webkit-text-stroke:.2px rgba(32,45,48,.5)}#tph20-articles .tph20-small{font-size:11px}#tph20-articles .tph20-section-head{margin-bottom:9px}}
@media(max-width:365px){#tph20-articles .tph20-track{grid-auto-columns:calc((100% - 10px)/2);gap:10px}#tph20-articles .tph20-big{font-size:15px}#tph20-articles .tph20-small{font-size:10px}}

@media(min-width:768px){#tph20-articles .tph20-mobile-only{display:none!important}}