/* วิดเจ็ต: ปุ่มร่วมบริจาค (แถบเด่น) — โทนแสด-ทอง มทส. */
.dcta{--o:#E8731A;--o2:#F59A2E;--g:#F3C64A;--gd:#D4A017;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:clamp(14px,3vw,34px);
  padding:clamp(22px,4vw,40px) clamp(20px,4vw,48px) clamp(22px,4vw,40px) clamp(20px,4vw,40px);border-radius:24px;color:#4A2A12;
  background:
    radial-gradient(circle at 10% 58%,rgba(255,255,255,.9) 0,rgba(255,255,255,.45) 11%,rgba(255,255,255,0) 22%),
    radial-gradient(60% 120% at 100% 0%,rgba(255,170,90,.75) 0,rgba(255,170,90,0) 60%),
    radial-gradient(45% 90% at 62% 0%,rgba(255,214,120,.55) 0,rgba(255,214,120,0) 70%),
    radial-gradient(50% 100% at 38% 110%,rgba(255,150,120,.35) 0,rgba(255,150,120,0) 70%),
    linear-gradient(110deg,#FFF6EA 0%,#FFE6C6 30%,#FFD29E 62%,#FDB36E 100%);
  background-size:100% 100%,180% 180%,160% 160%,160% 160%,100% 100%;
  animation:dcta-hue 14s ease-in-out infinite alternate;
  border:1px solid #F3B979;box-shadow:0 18px 40px -22px rgba(201,82,11,.45),inset 0 1px 0 #fff;margin:0 0 8px;font-family:inherit}
@keyframes dcta-hue{0%{background-position:0 0,100% 0,50% 0,30% 100%,0 0}50%{background-position:0 0,60% 30%,20% 20%,70% 80%,0 0}100%{background-position:0 0,90% 60%,80% 0,10% 100%,0 0}}
.dcta::before{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'%3E%3Cpath d='M0 90 C200 40 380 130 600 85 S1000 30 1200 80 V160 H0Z' fill='%23F59A2E' fill-opacity='.22'/%3E%3Cpath d='M0 120 C220 80 420 150 640 115 S1010 75 1200 110 V160 H0Z' fill='%23E8731A' fill-opacity='.18'/%3E%3Cpath d='M0 140 C260 118 470 160 700 138 S1040 118 1200 135 V160 H0Z' fill='%23D4A017' fill-opacity='.22'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;z-index:-1;pointer-events:none}
.dcta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 96% 8%,transparent 0 46px,rgba(255,255,255,.55) 47px 49px,transparent 50px 70px,rgba(255,255,255,.4) 71px 72px,transparent 73px 96px,rgba(255,255,255,.28) 97px 98px,transparent 99px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='8' cy='8' r='1.6' fill='%23E8731A' fill-opacity='.28'/%3E%3Cpath d='M44 34c-2-3.4-7-2-7 1.6 0 3 3.6 5.2 7 7.6 3.4-2.4 7-4.6 7-7.6 0-3.6-5-5-7-1.6z' fill='%23E8731A' fill-opacity='.10'/%3E%3Cpath d='M20 44l1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2z' fill='%23D4A017' fill-opacity='.35'/%3E%3C/svg%3E") 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 16%,#000 40%);mask-image:linear-gradient(90deg,transparent 0,transparent 16%,#000 40%)}
.dcta-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dcta-bg i{position:absolute;bottom:-30px;width:18px;height:18px;opacity:0;animation:dcta-float 9s linear infinite}
.dcta-bg i::before{content:"♥";position:absolute;inset:0;font-style:normal;font-size:18px;line-height:1;color:rgba(232,115,26,.28)}
.dcta-bg i:nth-child(1){left:8%;animation-delay:0s}
.dcta-bg i:nth-child(2){left:26%;animation-delay:2.4s;transform:scale(.7)}
.dcta-bg i:nth-child(3){left:47%;animation-delay:5s}
.dcta-bg i:nth-child(4){left:63%;animation-delay:1.2s;transform:scale(1.3)}
.dcta-bg i:nth-child(5){left:79%;animation-delay:3.7s}
.dcta-bg i:nth-child(6){left:92%;animation-delay:6.3s;transform:scale(.8)}
.dcta-bg i:nth-child(even)::before{color:rgba(212,160,23,.45)}
@keyframes dcta-float{0%{opacity:0;translate:0 0}10%{opacity:1}100%{opacity:0;translate:14px -260px;rotate:25deg}}

.dcta-m{flex:none;width:clamp(78px,11vw,120px);height:auto;align-self:flex-end;margin:-6px 0 -40px;filter:drop-shadow(0 10px 14px rgba(160,70,0,.22));animation:dcta-bob 3.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes dcta-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.dcta-tx{flex:1;min-width:0}
.dcta-eb{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.02em;padding:4px 12px;border-radius:999px;background:#FFF4E6;border:1px solid #F2B575;color:#B5490A;margin-bottom:8px}
.dcta h2{margin:0 0 6px;color:#9E3F06;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.3;font-weight:800;text-shadow:none}
.dcta p{margin:0;color:#5A3A20;font-size:clamp(.92rem,1.4vw,1.02rem);line-height:1.6;max-width:62ch}
.dcta-promo{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;padding:7px 14px;border-radius:12px;background:#fff;border:1px dashed #F0B66E;color:#7a4a00;font-size:.9rem;line-height:1.45;box-shadow:0 4px 12px -6px rgba(120,60,0,.25)}
.dcta-promo b{color:#c45a0c}

.dcta-btn{flex:none;position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;text-decoration:none!important;
  background:linear-gradient(180deg,#F79A3A,var(--o) 55%,#D25F10);color:#fff!important;font-weight:800;font-size:clamp(1rem,1.6vw,1.12rem);white-space:nowrap;
  box-shadow:0 6px 0 #A9480A,0 14px 26px -6px rgba(150,60,0,.45);transition:transform .15s,box-shadow .15s;overflow:hidden}
.dcta-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:dcta-shine 3.2s ease-in-out infinite}
@keyframes dcta-shine{0%,55%{left:-60%}100%{left:130%}}
.dcta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #A9480A,0 18px 30px -6px rgba(150,60,0,.5)}
.dcta-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #A9480A,0 6px 14px -6px rgba(150,60,0,.5)}
.dcta-btn:focus-visible{outline:3px solid #E8731A;outline-offset:3px}
.dcta-heart{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#E8461A;font-size:15px;animation:dcta-beat 1.4s ease-in-out infinite}
@keyframes dcta-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.dcta-arr{transition:transform .2s}
.dcta-btn:hover .dcta-arr{transform:translateX(4px)}

/* แถบเล็ก */
.dcta-sm{padding:16px 22px;border-radius:18px;gap:16px}
.dcta-sm h2{font-size:clamp(1.05rem,2vw,1.3rem);margin:0}
.dcta-sm p{font-size:.9rem}
.dcta-sm .dcta-eb{margin-bottom:4px;font-size:.76rem}
.dcta-sm .dcta-btn{padding:12px 20px;font-size:1rem}

@media (max-width:760px){
  .dcta{flex-wrap:wrap;text-align:left}
  .dcta-m{width:74px;margin:0;align-self:flex-start;order:0}
  .dcta-tx{flex:1 1 calc(100% - 100px)}
  .dcta-btn{flex:1 1 100%;justify-content:center;white-space:normal;text-align:center}
}
@media (max-width:420px){
  .dcta{border-radius:18px}
  .dcta-m{width:58px}
  .dcta-tx{flex-basis:calc(100% - 80px)}
  .dcta-promo{font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){
  .dcta,.dcta-bg i,.dcta-m,.dcta-btn::after,.dcta-heart{animation:none}
}

/* ---------- แบบเด่นพิเศษ (หน้าแรก) ---------- */
.dsp{--o:#E8731A;--g:#F3C64A;--gd:#D4A017;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(18px,4vw,48px);align-items:center;
  padding:clamp(26px,4.5vw,56px);border-radius:32px;color:#fff;
  background:radial-gradient(70% 90% at 100% 0%,rgba(255,211,107,.55),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(255,120,80,.45),transparent 60%),linear-gradient(125deg,#C4510B 0%,#E8731A 45%,#F29A2E 100%);
  box-shadow:0 30px 60px -34px rgba(160,60,0,.75)}
.dsp::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.8px);background-size:24px 24px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}
.dsp::after{content:"";position:absolute;right:-120px;bottom:-160px;width:460px;height:460px;border-radius:50%;z-index:-1;border:2px solid rgba(255,255,255,.18);box-shadow:0 0 0 40px rgba(255,255,255,.05),0 0 0 90px rgba(255,255,255,.04)}
.dsp-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dsp-bg i{position:absolute;bottom:-30px;opacity:0;animation:dcta-float 10s linear infinite;font-style:normal}
.dsp-bg i::before{content:"♥";font-size:20px;color:rgba(255,255,255,.45)}
.dsp-bg i:nth-child(1){left:6%}.dsp-bg i:nth-child(2){left:22%;animation-delay:3s}.dsp-bg i:nth-child(3){left:41%;animation-delay:6s}
.dsp-bg i:nth-child(4){left:58%;animation-delay:1.5s}.dsp-bg i:nth-child(5){left:76%;animation-delay:4.5s}.dsp-bg i:nth-child(6){left:92%;animation-delay:7.5s}
.dsp-bg i:nth-child(even)::before{color:rgba(255,226,140,.6)}
.dsp-eb{display:inline-block;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);font-size:.85rem;font-weight:700;margin-bottom:12px}
.dsp h2{margin:0 0 10px;color:#fff;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.25;font-weight:800;text-shadow:0 2px 0 rgba(120,40,0,.2)}
.dsp p{margin:0;color:#FFF1E2;font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.7;max-width:58ch}
.dsp-steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0}
.dsp-steps li{display:flex;align-items:center;gap:10px;margin:0;padding:8px 14px 8px 8px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font-size:.86rem;font-weight:600;line-height:1.3;backdrop-filter:blur(4px)}
.dsp-steps li::before{display:none}
.dsp-steps b{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#fff;color:#C4510B;font-size:.95rem;flex:none}
.dsp-promo{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 16px 10px 10px;border-radius:16px;background:#FFF8E6;color:#6B3A00;max-width:520px;box-shadow:0 10px 24px -14px rgba(80,30,0,.6)}
.dsp-promo img{width:44px;height:auto;flex:none}
.dsp-promo span{display:flex;flex-direction:column;font-size:.86rem;line-height:1.45}
.dsp-promo b{color:#B5490A;font-size:.95rem}
.dsp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.dsp .dcta-btn{background:linear-gradient(180deg,#FFE27A,var(--g) 55%,var(--gd));color:#5a2a00!important;box-shadow:0 6px 0 #a87a08,0 14px 26px -6px rgba(90,40,0,.45)}
.dsp .dcta-btn:hover{box-shadow:0 8px 0 #a87a08,0 18px 30px -6px rgba(90,40,0,.5)}
.dsp .dcta-btn:active{box-shadow:0 2px 0 #a87a08,0 6px 14px -6px rgba(90,40,0,.5)}
.dsp .dcta-heart{background:#E8461A;color:#fff}
.dsp-l2{color:#fff!important;font-weight:600;text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.5)!important}
.dsp-fn{display:block;margin-top:16px;font-size:.78rem;color:rgba(255,241,226,.85);max-width:60ch}
.dsp-art{position:relative;display:grid;place-items:center;min-height:340px}
.dsp-qr{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(270px,100%);padding:16px 16px 14px;border-radius:24px;background:#fff;box-shadow:0 30px 50px -24px rgba(80,25,0,.7);transform:rotate(-4deg);transition:transform .3s;text-decoration:none!important}
.dsp-qr:hover{transform:rotate(0) scale(1.03)}
.dsp-qrh{width:100%;height:auto;border-radius:10px}
.dsp-qri{width:84%;height:auto;image-rendering:pixelated}
.dsp-qr span{font-weight:700;color:#B5490A;font-size:.92rem}
.dsp-m{position:absolute;z-index:2;right:-6px;bottom:-14px;width:clamp(96px,11vw,136px);height:auto;filter:drop-shadow(0 14px 16px rgba(80,25,0,.35));animation:dcta-bob 3.6s ease-in-out infinite;transform-origin:50% 100%}
.dsp-badge{position:absolute;z-index:2;left:2%;top:8%;padding:8px 14px;border-radius:999px;background:#2A1A0E;color:#FFE2A8;font-weight:700;font-size:.85rem;transform:rotate(-8deg);box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
@media (max-width:900px){
  .dsp{grid-template-columns:1fr}
  .dsp-art{min-height:0;padding:10px 0 20px}
  .dsp-qr{width:230px}
  .dsp-m{right:8%;width:96px}
  .dsp-badge{left:6%}
}
@media (max-width:560px){
  .dsp{border-radius:24px}
  .dsp-steps{gap:6px}
  .dsp-steps li{flex:1 1 0;flex-direction:column;text-align:center;gap:6px;padding:10px 6px;font-size:.78rem}
  .dsp-acts .dcta-btn{flex:1 1 100%;justify-content:center;white-space:normal}
  .dsp-l2{margin:0 auto}
  .dsp-m{right:0;width:82px}
  .dsp-badge{left:0;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){.dsp-bg i,.dsp-m{animation:none}}