/* brm-weather v3.2 (2026-10-10) เทศบาลนครบุรีรัมย์ */
#BRM-wrap.wx-on{position:relative;isolation:isolate}#BRM-wrap.wx-on>*:not(#WX-sky){position:relative;z-index:1}#WX-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#d9ecfb,#e8f2fb 45%,#f0f2f5 80%);transition:background 1s}.sc-cloud #WX-sky{background:radial-gradient(120% 90% at 50% 20%,#e1e8f1,#eaeff5 45%,#f0f2f5 80%)}.sc-rain #WX-sky{background:radial-gradient(120% 90% at 50% 20%,#d3dce7,#e3e9f0 45%,#f0f2f5 80%)}.sc-storm #WX-sky{background:radial-gradient(120% 90% at 50% 20%,#cbd3de,#dfe5ec 45%,#f0f2f5 80%)}#WX-sky{left:50%;right:auto;width:100vw;margin-left:-50vw;-webkit-mask:linear-gradient(180deg,transparent 0%,transparent 6%,rgba(0,0,0,.04) 8.5%,rgba(0,0,0,.12) 11%,rgba(0,0,0,.25) 13.5%,rgba(0,0,0,.42) 16%,rgba(0,0,0,.6) 18.5%,rgba(0,0,0,.76) 21%,rgba(0,0,0,.89) 23.5%,rgba(0,0,0,.97) 26%,#000 28%,#000 70%,rgba(0,0,0,.97) 72.5%,rgba(0,0,0,.89) 75%,rgba(0,0,0,.76) 77.5%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.42) 82.5%,rgba(0,0,0,.25) 85%,rgba(0,0,0,.12) 87.5%,rgba(0,0,0,.04) 90%,transparent 93%);mask:linear-gradient(180deg,transparent 0%,transparent 6%,rgba(0,0,0,.04) 8.5%,rgba(0,0,0,.12) 11%,rgba(0,0,0,.25) 13.5%,rgba(0,0,0,.42) 16%,rgba(0,0,0,.6) 18.5%,rgba(0,0,0,.76) 21%,rgba(0,0,0,.89) 23.5%,rgba(0,0,0,.97) 26%,#000 28%,#000 70%,rgba(0,0,0,.97) 72.5%,rgba(0,0,0,.89) 75%,rgba(0,0,0,.76) 77.5%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.42) 82.5%,rgba(0,0,0,.25) 85%,rgba(0,0,0,.12) 87.5%,rgba(0,0,0,.04) 90%,transparent 93%)}#sp-section-12{overflow-x:clip}.wx-sun{position:absolute;top:140px;left:9%;width:96px;height:96px;opacity:0;transition:opacity 1s}.wx-sun:before{content:"";position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle,#fff4c7,#f3cf5a 60%,#d4af37);box-shadow:0 0 50px 18px #d4af3747}.wx-sun i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(212,175,55,.45) 0 6deg,transparent 6deg 30deg);-webkit-mask:radial-gradient(circle,transparent 31px,#000 32px,#000 47px,transparent 48px);mask:radial-gradient(circle,transparent 31px,#000 32px,#000 47px,transparent 48px);animation:wxSpin 50s linear infinite}.sc-day.sc-clear .wx-sun{opacity:1}.sc-day.sc-cloud .wx-sun{opacity:.6}.sc-night #WX-sky{background:radial-gradient(130% 95% at 50% 30%,#1d3d70,#122b55 45%,#0a1a36 80%)}.wx-moon{position:absolute;top:150px;left:9%;width:60px;height:60px;border-radius:50%;box-shadow:inset -16px 9px #fff3c8;filter:drop-shadow(0 0 14px rgba(255,236,170,.55));opacity:0;transition:opacity 1s;transform:rotate(-20deg)}.wx-stars,.wx-stars:before{position:absolute;inset:16% 0 18%;opacity:0;transition:opacity 1s}.wx-stars{background-image:radial-gradient(1.8px 1.8px at 6% 22%,#fff 50%,transparent),radial-gradient(1.4px 1.4px at 14% 58%,#fff 50%,transparent),radial-gradient(2.2px 2.2px at 22% 12%,#fff 50%,transparent),radial-gradient(1.4px 1.4px at 31% 74%,#fff 50%,transparent),radial-gradient(1.8px 1.8px at 39% 34%,#fff 50%,transparent),radial-gradient(1.4px 1.4px at 47% 8%,#fff 50%,transparent),radial-gradient(2px 2px at 56% 62%,#fff 50%,transparent),radial-gradient(1.4px 1.4px at 63% 20%,#fff 50%,transparent),radial-gradient(1.8px 1.8px at 71% 84%,#fff 50%,transparent),radial-gradient(2.2px 2.2px at 79% 40%,#fff 50%,transparent),radial-gradient(1.4px 1.4px at 86% 10%,#fff 50%,transparent),radial-gradient(1.8px 1.8px at 93% 66%,#fff 50%,transparent),radial-gradient(1.4px 1.4px at 97% 30%,#fff 50%,transparent),radial-gradient(1.4px 1.4px at 3% 88%,#fff 50%,transparent);animation:wxTwinkle 3.2s ease-in-out infinite alternate}.wx-stars:before{content:"";inset:0;opacity:1;background-image:radial-gradient(1.2px 1.2px at 10% 40%,#ffe9a8 50%,transparent),radial-gradient(1.6px 1.6px at 18% 82%,#fff 50%,transparent),radial-gradient(1.2px 1.2px at 27% 28%,#fff 50%,transparent),radial-gradient(1.6px 1.6px at 35% 92%,#ffe9a8 50%,transparent),radial-gradient(1.2px 1.2px at 44% 50%,#fff 50%,transparent),radial-gradient(1.6px 1.6px at 52% 26%,#fff 50%,transparent),radial-gradient(1.2px 1.2px at 60% 90%,#fff 50%,transparent),radial-gradient(1.6px 1.6px at 68% 52%,#ffe9a8 50%,transparent),radial-gradient(1.2px 1.2px at 75% 6%,#fff 50%,transparent),radial-gradient(1.6px 1.6px at 83% 72%,#fff 50%,transparent),radial-gradient(1.2px 1.2px at 90% 46%,#fff 50%,transparent);animation:wxTwinkle 4.6s ease-in-out infinite alternate-reverse}.wx-stars:after{content:"";position:absolute;top:8%;left:62%;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.95),transparent);transform:rotate(-24deg);opacity:0;animation:wxShoot 13s ease-in 4s infinite}.sc-night .wx-moon{opacity:1}.sc-night .wx-stars{opacity:.85}.sc-night.sc-clear .wx-stars{opacity:1}.sc-night.sc-rain .wx-rain,.sc-night.sc-storm .wx-rain{background-image:repeating-linear-gradient(105deg,transparent 0 22px,rgba(200,220,250,.5) 22px 23px,transparent 23px 52px)}.sc-night .wx-flash{background:#cfe0ff}@keyframes wxShoot{0%,92%{opacity:0;transform:translate(0) rotate(-24deg)}93%{opacity:1}to{opacity:0;transform:translate(-260px,115px) rotate(-24deg)}}.wx-cloud{position:absolute;left:0;width:320px;height:170px;animation:wxDrift linear infinite;will-change:transform;--c1:#fff;--c2:rgba(185,198,216,.5);--c3:rgba(70,95,130,.16)}.wx-cloud>span{position:absolute;inset:0;transform:scale(var(--s,1));transform-origin:0 0;opacity:var(--o,1)}.wx-cloud i{position:absolute;width:300px;height:150px;border-radius:50%;top:-500px;left:-500px}.wx-cloud .b{filter:url(#wxf-b);box-shadow:500px 520px 24px -8px var(--c1)}.wx-cloud .m{filter:url(#wxf-m);box-shadow:500px 548px 48px -36px var(--c2);left:-512px}.wx-cloud .f{filter:url(#wxf-f);box-shadow:500px 566px 44px -64px var(--c3);left:-512px}.wx-c2 i,.wx-c4 i{width:240px;height:120px}.wx-c2 .b,.wx-c4 .b{filter:url(#wxf-b2)}.wx-c2 .m,.wx-c4 .m{filter:url(#wxf-m2)}.wx-c2 .f,.wx-c4 .f{filter:url(#wxf-f2)}.wx-c1{top:70px;animation-duration:110s;animation-delay:-15s;--s:1;--o:.95}.wx-c2{top:250px;animation-duration:150s;animation-delay:-80s;--s:.8;--o:.8}.wx-c3{top:430px;animation-duration:125s;animation-delay:-45s;--s:.95;--o:.85}.wx-c4{top:150px;animation-duration:170s;animation-delay:-125s;--s:.65;--o:.7}.wx-c5{top:560px;animation-duration:140s;animation-delay:-25s;--s:.75;--o:.7}.sc-clear .wx-c2,.sc-clear .wx-c4,.sc-clear .wx-c5{display:none}.sc-clear .wx-cloud{--o:.75}.sc-rain .wx-cloud{--c1:#f2f5f9;--c2:rgba(150,165,185,.55);--c3:rgba(45,65,95,.26)}.sc-storm .wx-cloud{--c1:#dde3ea;--c2:rgba(95,108,128,.7);--c3:rgba(20,30,50,.5)}.sc-night .wx-cloud{--c1:rgba(150,170,210,.42);--c2:rgba(40,60,100,.45);--c3:rgba(5,12,30,.45)}.sc-rain .wx-rain,.sc-storm .wx-rain{position:absolute;inset:-60px 0 0;opacity:.35;background-image:repeating-linear-gradient(105deg,transparent 0 22px,rgba(47,109,181,.45) 22px 23px,transparent 23px 52px);background-size:130px 130px;animation:wxRain .7s linear infinite}.sc-storm .wx-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:wxFlash 10s infinite}@keyframes wxSpin{to{transform:rotate(360deg)}}@keyframes wxTwinkle{0%{opacity:.4}to{opacity:1}}@keyframes wxDrift{0%{transform:translate(-260px)}to{transform:translate(calc(100vw + 60px))}}@keyframes wxRain{to{background-position:-30px 130px}}@keyframes wxFlash{0%,90%,93%,to{opacity:0}91%{opacity:.5}94%{opacity:.25}}#WX-card{position:absolute;top:24px;right:0;width:252px;z-index:30;box-sizing:border-box;padding:20px 18px 14px!important;border-radius:20px;background:#fff;box-shadow:0 15px 45px #00000012;font-family:Sarabun,sans-serif;color:#333;text-align:left}#WX-card .wx-title{margin:0;padding:0 0 10px;font-size:18px;line-height:1.3;font-weight:700;color:#036;position:relative}#WX-card .wx-title:after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;border-radius:2px;background:#d4af37}#WX-card .wx-sub{margin:8px 0 0;font-size:12.5px;color:#6b7280}#WX-card .wx-now{display:flex;align-items:center;gap:12px;margin:12px 0}#WX-card .wx-ic{width:64px;height:64px;flex:none;animation:wxBob 4s ease-in-out infinite}#WX-card svg{display:block;width:100%;height:100%}#WX-card strong{display:block;font-size:38px;line-height:1;color:#036;font-weight:700}#WX-card strong sup{font-size:16px;top:-1.1em;margin-left:2px;font-weight:600}#WX-card .wx-now p{margin:4px 0 0;font-size:15px;font-weight:600;color:#333}#WX-card .wx-now small{display:block;font-size:12.5px;color:#6b7280}#WX-card ul{list-style:none;margin:0;padding:0}#WX-card .wx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}#WX-card .wx-tiles li{background:#f5f7fa;border-radius:12px;padding:7px 4px;text-align:center}#WX-card .wx-tiles span{display:block;font-size:11.5px;color:#6b7280}#WX-card .wx-tiles b{display:block;font-size:14.5px;color:#036;white-space:nowrap}#WX-card .wx-tiles b small{font-size:10px;font-weight:500;color:#6b7280}#WX-card .wx-days{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:12px;padding-top:12px;border-top:1px solid #eef0f4}#WX-card .wx-days li{text-align:center;font-size:12px;line-height:1.3;color:#6b7280}#WX-card .wx-days li span{display:block;font-weight:600;color:#036}#WX-card .wx-days svg{width:28px;height:28px;margin:3px auto}#WX-card .wx-days em{display:block;font-style:normal;font-weight:700;color:#333}#WX-card .wx-days em small{font-weight:400;color:#9aa1ad;margin-left:1px}#WX-card .wx-days u{display:block;text-decoration:none;font-size:11px;color:#2f6db5}#WX-card .wx-ft{margin:12px 0 0;font-size:11px;color:#9aa1ad;text-align:center}#WX-card .wx-ft a{color:#2f6db5;white-space:nowrap}@keyframes wxBob{50%{transform:translateY(-3px)}}@media (max-width:1199px){#WX-card{width:236px;padding:16px 14px 12px!important}}@media (max-width:991px){#WX-card{position:relative;top:auto;right:auto;width:auto;max-width:440px;margin:18px auto 0}.wx-sun{top:110px;left:4%}}@media (max-width:767px){.wx-sun{width:72px;height:72px}.wx-sun:before{inset:16px}.wx-sun i{-webkit-mask:radial-gradient(circle,transparent 23px,#000 24px,#000 35px,transparent 36px);mask:radial-gradient(circle,transparent 23px,#000 24px,#000 35px,transparent 36px)}.wx-cloud{zoom:.6}#WX-card{margin:16px 12px 0}}@media (prefers-reduced-motion:reduce){#WX-sky *,#WX-card .wx-ic{animation:none!important}}
