/* Teephak STEP21C: targeted layout fix only for blog listing and article reader. */
@media (max-width:767px){
  /* Reveal the full banner above the search content instead of laying text over the photo. */
  .blog-hero.tph21c-blog-hero{background:#f6faf9!important;color:#163c42!important;padding:193px 0 18px!important;min-height:0!important}
  .blog-hero.tph21c-blog-hero::before{height:200px!important;bottom:auto!important;inset:0 0 auto!important}
  .blog-hero.tph21c-blog-hero::after{height:200px!important;bottom:auto!important;inset:0 0 auto!important;background:linear-gradient(180deg,rgba(3,36,43,.06),rgba(3,36,43,.13))!important}
  .blog-hero.tph21c-blog-hero .container.wrap{display:block!important;grid-template-columns:1fr!important;background:#fff!important;color:#153a3d!important;border:1px solid #e2ece9;border-radius:17px!important;padding:17px 15px!important;width:calc(100% - 28px)!important;max-width:650px!important;margin:0 auto!important;box-shadow:0 4px 16px rgba(13,62,58,.06)!important}
  .blog-hero.tph21c-blog-hero .eyebrow{font-size:10px!important;color:#0e8972!important;letter-spacing:.12em!important;margin:0 0 5px!important}
  .blog-hero.tph21c-blog-hero h1{color:#173b41!important;font-size:clamp(21px,5.8vw,25px)!important;line-height:1.32!important;margin:0 0 7px!important;max-width:none!important;text-wrap:pretty}
  .blog-hero.tph21c-blog-hero p:not(.eyebrow){color:#61747b!important;font-size:12.5px!important;line-height:1.6!important;margin:0!important;max-width:none!important;opacity:1!important}
  .blog-hero.tph21c-blog-hero .blog-stat{display:none!important}
  .blog-hero.tph21c-blog-hero .blog-search{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(106px,.68fr)!important;gap:9px!important;margin-top:15px!important;padding:0!important;background:transparent!important;box-shadow:none!important;max-width:none!important;align-items:stretch}
  .blog-hero.tph21c-blog-hero .blog-search input{grid-column:1/-1!important;width:100%!important;box-sizing:border-box!important;min-height:44px!important;padding:11px 12px!important;font-size:13px!important;background:#f4f8f7!important;border:1px solid #e3eae8!important}
  .blog-hero.tph21c-blog-hero .blog-search select{grid-column:1!important;min-width:0!important;width:100%!important;box-sizing:border-box!important;min-height:44px!important;padding:10px!important;font-size:13px!important;border:1px solid #e3eae8!important;background:#f4f8f7!important}
  .blog-hero.tph21c-blog-hero .blog-search button{grid-column:2!important;min-height:44px!important;padding:8px 12px!important;line-height:1.35!important;font-size:14px!important;background:#eb730f!important}
  .blog-hero.tph21c-blog-hero + .blog-main{padding-top:7px!important}
}
/* Article reader: only a short editorial display title is laid over the photo. */
.article-hero.tph21c-reader-hero{min-height:320px!important;padding:28px 0 16px!important;display:flex!important;align-items:flex-end!important}
.tph21c-reader-hero .tph21c-hero-inner{display:flex!important;align-items:flex-end;justify-content:center;max-width:1000px!important;min-height:220px!important;text-align:center;padding:0 20px 26px!important;box-sizing:border-box}
.tph21c-reader-hero .tph21c-hero-headline{font-family:'Kanit','Prompt',system-ui,sans-serif;font-size:clamp(26px,3.5vw,42px)!important;line-height:1.34!important;font-weight:800!important;color:#fff!important;margin:0 auto!important;max-width:860px!important;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 2px 8px rgba(3,24,31,.48),0 0 1px rgba(3,24,31,.35)!important;-webkit-text-stroke:.18px rgba(4,36,42,.22)}
.article-hero.tph21c-reader-hero::after{background:linear-gradient(180deg,rgba(2,24,31,.08) 0%,rgba(2,24,31,.10) 34%,rgba(2,24,31,.18) 52%,rgba(2,24,31,.46) 76%,rgba(2,24,31,.72) 100%)!important}
.tph21c-article-intro{padding:0 0 23px;margin:0 0 25px;border-bottom:1px solid #e7efed}
.tph21c-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:#6c7e87;margin:0 0 13px}
.tph21c-breadcrumb a{color:#27786e;text-decoration:underline;text-underline-offset:3px}
.tph21c-category{display:inline-flex;background:#ecf8f1;color:#087366;font-size:12px;font-weight:800;border:1px solid #c4e6d9;border-radius:999px;padding:5px 12px;margin:0 0 11px}
.tph21c-article-intro h1{font-size:clamp(25px,2.8vw,36px)!important;font-weight:800;line-height:1.4!important;letter-spacing:0;color:#1b3d48;margin:0 0 13px!important;overflow-wrap:anywhere}
.tph21c-reader-body .tph21c-lead{font-size:clamp(15px,1.45vw,17px)!important;line-height:1.8!important;color:#5e717b!important;margin:0 0 15px!important;font-weight:400}
.tph21c-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:12.5px;color:#788995}
@media(max-width:767px){
 .article-hero.tph21c-reader-hero{min-height:216px!important;padding:18px 0 8px!important;align-items:flex-end!important}
 .tph21c-reader-hero .tph21c-hero-inner{min-height:170px!important;align-items:flex-end!important;padding:0 18px 18px!important}
 .tph21c-reader-hero .tph21c-hero-headline{font-size:clamp(22px,6.1vw,28px)!important;line-height:1.38!important;max-width:94%!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
 .tph21c-article-intro{padding-bottom:18px;margin-bottom:19px}
 .tph21c-article-intro h1{font-size:clamp(22px,6vw,27px)!important;line-height:1.45!important}
 .tph21c-breadcrumb{margin-bottom:10px}
 .tph21c-reader-body .tph21c-lead{font-size:15px!important;line-height:1.7!important}
}