/* หน้ากิจกรรม (activities/*.html): City Nature Challenge, Summer Nature Camp, เวิร์กช็อปและอบรม
   แนวเนื้อหาเหมือนหน้าในอื่น: จอ ≥901px เว้นซ้าย var(--g) + 380px ให้เมนูลอย, >1440px วางกลาง กว้างสูงสุด 1320px
   UI แบน ไม่มีเงา เส้นขอบ หรือไล่สี แอนิเมชันใช้ transform/opacity เท่านั้น */
.act{--p:#9e5da5;--pd:#7d4485;--gr:#2e8b57;--gl:#e8f4ec;--pl:#f5edf6;--t:#2b2430;--m:#6b6070;font-family:"LINE Seed Sans TH",sans-serif;color:var(--t);line-height:1.8;position:relative;z-index:1;padding-bottom:0}
.act h1,.act h2,.act h3{line-height:1.5;margin:0 0 .5em}
.act img{display:block;width:100%;height:100%;object-fit:cover}
.act .w{box-sizing:border-box;padding:0 24px;max-width:1200px;margin:0 auto}
.act .band{padding:72px 0}.act .pt0{padding-top:0}.act .pt24{padding-top:24px}
.act .pl{background:var(--pl)}.act .gl{background:var(--gl)}.act .dk{background:var(--pd);color:#fff}.act .dk h2{color:#fff}
.act .bc{font-size:14px;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;color:var(--m)}.act .bc a{color:inherit;text-decoration:none}
.act .hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-top:96px;padding-bottom:56px}
.act .hero.one{grid-template-columns:1fr;padding-bottom:8px}
.act .hero h1{font-size:clamp(34px,3.4vw,48px);font-weight:800;color:var(--pd);margin-top:16px}
.act .hero p{font-size:18px;color:var(--m);margin:0 0 12px}
.act .pic{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--pl)}
.act .pic.sq{aspect-ratio:1;border-radius:28px}
.act .tag{display:inline-block;background:var(--gl);color:var(--gr);padding:4px 16px;border-radius:99px;font-weight:700;font-size:14px;line-height:1.8}
.act .meta{color:var(--gr)!important;font-weight:700}
.act .btn{display:inline-block;background:var(--p);color:#fff;padding:12px 28px;border-radius:99px;text-decoration:none;font-weight:700;line-height:1.8;margin:8px 8px 0 0;transition:transform .2s ease,opacity .2s ease}
.act .btn:hover{transform:translateY(-2px);opacity:.92}
.act .btn.s{background:var(--pl);color:var(--pd)}.act .btn.wh{background:#fff;color:var(--pd)}
.act h2{font-size:32px;font-weight:800;color:var(--pd)}.act .mt{margin-top:14px}
.act .lead{font-size:18px}.act p{margin:0 0 12px}
.act .two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.act .cards{display:grid;gap:24px}.act .c2{grid-template-columns:1fr 1fr}.act .c3{grid-template-columns:repeat(3,1fr)}
.act .card{background:#fff;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.act .card .pic{aspect-ratio:16/9;border-radius:0}.act .card .b{padding:22px 26px 24px;flex:1 1 auto}
.act .card h3{font-size:20px}
.act .ill{display:grid;place-items:center}.act .ill svg{width:55%;height:auto}
.act .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.act .step{background:#fff;border-radius:22px;padding:28px}
.act .n{width:48px;height:48px;border-radius:50%;background:var(--gr);color:#fff;display:grid;place-items:center;font-weight:800;font-size:21px;margin-bottom:14px}
.act .gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}.act .gal div{border-radius:18px;overflow:hidden}
.act .gal .big{grid-column:span 2;grid-row:span 2}.act .gal .w2{grid-column:span 2}
.act .ct{margin-top:20px}.act .note{font-size:14px;color:var(--m)}
.act .rules{margin:0;padding-left:1.2em}.act .rules li{margin-bottom:8px}
/* รายการเวิร์กช็อป */
.act .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.act .grid .card .pic{aspect-ratio:16/10}
.act .grid .card:hover img{transform:scale(1.05)}.act .grid img{transition:transform .5s ease}
.act .grid h3{font-size:19px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:2px 0;margin:8px 0 6px}
.act .grid .x{color:var(--m);font-size:15px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:2px}
.act .cat{color:var(--p);font-weight:700;font-size:14px}.act .date{color:var(--m);font-size:14px;margin:0}
.act .empty{background:#fff;border-radius:24px;padding:56px 24px;text-align:center}.act .empty svg{width:120px;margin:0 auto 16px;display:block}
.act [hidden]{display:none!important}
.act .fx{animation:act-in .5s ease both}
@keyframes act-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.act .fx{animation:none}.act .btn,.act .grid img{transition:none}}
@media(min-width:901px){.act .w{max-width:none;margin:0;padding-left:calc(var(--g) + 380px);padding-right:var(--g)}}
@media(min-width:1441px){.act .w{--act-gap:max(var(--g),(100% - var(--g) - 380px - 1320px) / 2);padding-left:calc(var(--g) + 380px + var(--act-gap));padding-right:var(--act-gap)}}
@media(max-width:1199px){.act .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.act .steps{grid-template-columns:1fr 1fr}.act .c3{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.act .hero{padding-top:168px}}
@media(max-width:760px){.act .hero,.act .two,.act .c2,.act .c3{grid-template-columns:1fr}.act .hero h1{font-size:32px}.act .tl{grid-template-columns:1fr}.act .gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px}.act .band{padding:48px 0}.act .pt0{padding-top:0}.act .pt24{padding-top:16px}.act h2{font-size:26px}}
@media(max-width:600px){.act .grid{grid-template-columns:1fr}.act .steps{grid-template-columns:1fr 1fr}.act .step{padding:20px}}