/*
 * design.css — ดีไซน์ชุด "Wolffia Plus Update design" (ต.ค. 2569)
 * ส่วน hover/focus สร้างอัตโนมัติจาก style-hover / style-focus ในไฟล์ .dc.html
 * อย่าแก้คลาส wfh-* / wff-* ด้วยมือ — สร้างใหม่จากสคริปต์แปลงดีไซน์
 */
.wf-d{font-family:'IBM Plex Sans Thai',sans-serif;color:#333333;width:100%;overflow-x:hidden;background-color:#F7FAF4}
.wf-d *,.wf-d *::before,.wf-d *::after{box-sizing:border-box}
.wf-d a{text-decoration:none;color:#2F6B3D}
.wf-d a:hover{color:#1E4A2E}
.wf-d img,.wf-d video,.wf-d iframe{max-width:100%}
.wf-d [hidden]{display:none!important}
/* ดีไซน์อิงค่าเริ่มต้นของเบราว์เซอร์ ไม่ใช่ค่าจาก main.css */
:where(.wf-d) h1,:where(.wf-d) h2,:where(.wf-d) h3,:where(.wf-d) h4,:where(.wf-d) h5,:where(.wf-d) h6{font-family:inherit;color:inherit;margin:revert}
:where(.wf-d) p,:where(.wf-d) ul,:where(.wf-d) ol{margin:revert}
/* ปฏิทินจอง (template-part แบบคลาส) ใช้สไตล์หัวข้อของ main.css ตามเดิม */
.wf-d #wf-form h1,.wf-d #wf-form h2,.wf-d #wf-form h3,.wf-d #wf-form h4{font-family:var(--wf-font-head);color:var(--wf-green-700);margin:0}

/* ปรับ layout แท็บเล็ต/มือถือ — ยกมาจาก wp-mobile-nav.js ของดีไซน์ (design.js ติด data-wp* ให้) */
@media (max-width:1024px){
[data-wprg="3"],[data-wprg="4"],[data-wprg="5"],[data-wprg="6"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[data-wpfw]{width:auto!important;max-width:100%!important}
[data-wpfh]{height:auto!important}
[data-wppad]{padding-left:clamp(16px,4vw,32px)!important;padding-right:clamp(16px,4vw,32px)!important}
[data-wpgap]{gap:clamp(16px,3vw,32px)!important}
[data-wpnw]{white-space:normal!important}
}
@media (max-width:767px){
[data-wprg]{grid-template-columns:minmax(0,1fr)!important}
[data-wprg="keep2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[data-wpfs]{font-size:min(var(--wpfs),var(--wpfsm))!important;line-height:1.3!important}
[data-wprow]{flex-wrap:wrap!important}
[data-wpvpad]{padding-top:min(var(--wpvp),48px)!important;padding-bottom:min(var(--wpvb),48px)!important}
[data-wpmh]{min-height:0!important}
[data-wpfb]{flex:1 1 100%!important;min-width:0!important;max-width:100%!important}
[data-wpcard]{flex:0 0 100%!important;min-width:0!important;max-width:100%!important}
}

/* แถบเลื่อนการ์ด */
[data-wf-track]{scrollbar-width:none}
[data-wf-track]::-webkit-scrollbar{display:none}

/* FAQ แบบกดเปิด-ปิด */
[data-wf-faq] [data-wf-faq-a]{display:none}
[data-wf-faq].is-open [data-wf-faq-a]{display:block}
[data-wf-faq].is-open{background:#F2F7EC!important}
[data-wf-faq] [data-wf-faq-icon]::before{content:'+'}
[data-wf-faq].is-open [data-wf-faq-icon]{background:#1E4A2E!important;color:#FFFFFF!important}
[data-wf-faq].is-open [data-wf-faq-icon]::before{content:'\2212'}

/* หน้าต่างดูภาพขยาย / modal */
.wf-lightbox{position:fixed;inset:0;z-index:200;background:rgba(15,46,26,.86);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.wf-lightbox.is-open{display:flex}
.wf-lightbox img{max-width:100%;max-height:calc(100vh - 96px);width:auto;height:auto;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.4);background:#FFFFFF;cursor:default}
.wf-lightbox figcaption{position:absolute;left:24px;right:24px;bottom:16px;text-align:center;color:#E8F0E0;font-size:14px}
.wf-lightbox__close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:#FFFFFF;color:#1E4A2E;font-size:22px;cursor:pointer}
.wf-lightbox__close:focus-visible{outline:3px solid #8CAA5E;outline-offset:3px}
[data-wf-modal]{display:none!important}
[data-wf-modal].is-open{display:flex!important}
body.wf-noscroll{overflow:hidden}

@media (max-width:699px){.wf-d .wf-sf-hero{object-position:42% center!important}}

@media (max-width:799px){.wf-d .wf-gh-hero{aspect-ratio:16/9!important}}

.wf-d-map{position:relative}
.wf-d-map iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;display:block}

/* นโยบายความเป็นส่วนตัว: สารบัญติดข้างบนคอม / ย่อ-ขยายบนมือถือ */
.wf-d .wf-pp-toggle{display:none!important}
@media (min-width:900px){.wf-d .wf-pp-nav[hidden]{display:block!important}}
@media (max-width:899px){
.wf-d .wf-pp-grid{grid-template-columns:minmax(0,1fr)!important}
.wf-d .wf-pp-aside{position:static!important}
.wf-d .wf-pp-toggle{display:flex!important}
.wf-d .wf-pp-nav{margin-top:8px!important}
.wf-d .wf-pp-navtitle{display:none!important}
}

@media (max-width:767px){.wf-d .wf-cform{grid-template-columns:minmax(0,1fr)!important}.wf-d .wf-cform>*{grid-column:1/-1!important}}

/* header ตามดีไซน์ใหม่: แคปซูลกว้างไม่เกิน 1200px อยู่กลางจอ */
.wf-header{padding:24px clamp(12px,3vw,40px) 0}
.wf-header .wf-nav{max-width:1200px;margin:0 auto;gap:2px;flex-wrap:nowrap;overflow:visible;box-shadow:0 22px 40px rgba(0,0,0,.28),0 3px 0 rgba(255,255,255,.9) inset,0 -3px 6px rgba(0,0,0,.1) inset}
.wf-header .wf-nav__menu{gap:16px}
.wf-header .wf-nav__menu a{font-size:14px}
.wf-header .wf-nav__actions{gap:10px}
.wf-header .wf-nav__cta{padding:9px 10px;font-size:12px}
.wf-header .wf-nav__cta--ghost{padding:7.5px 10px;font-size:12.5px}
.wf-header .wf-lang select,.wf-header .wf-lang .gt_selector{width:84px;max-width:84px;padding:8px 22px 8px 10px;background-position:right 9px center}
body:has(.wf-d){background-color:#F7FAF4}
@media (max-width:1180px){.wf-header .wf-nav__menu{gap:12px}.wf-header .wf-nav__menu a{font-size:13px}}
@media (max-width:1023px){
.wf-header .wf-nav{padding:10px 14px 10px 20px;min-height:68px}
.wf-header .wf-nav__toggle{width:48px;height:48px;border:1.5px solid #DCE6D2;background:#F7FAF4}
}

/* footer ตามดีไซน์ใหม่ */
.wf-footer__brand{max-width:400px}
.wf-footer__brand img{height:64px;width:155px;object-fit:contain;object-position:left center;margin-bottom:16px}
.wf-footer__brand .wf-footer__tagline{font-weight:700;color:#1E4A2E}

/* ---- hover / focus (สร้างอัตโนมัติ) ---- */
.wff-1c9db7:focus-visible{outline:3px solid #8CAA5E!important;outline-offset:2px!important}
.wff-202385:focus-visible{outline:3px solid #8CAA5E!important;outline-offset:3px!important;border-radius:4px!important}
.wff-2f31d7:focus-visible{outline:3px solid #8CAA5E!important;outline-offset:4px!important}
.wff-37f83b:focus-visible{outline:3px solid #8CAA5E!important;outline-offset:-4px!important}
.wff-438eb7:focus-visible{outline:3px solid #8CAA5E!important;outline-offset:3px!important}
.wff-4c3285:focus-visible{outline:3px solid #8CAA5E!important;outline-offset:-3px!important;border-radius:20px!important}
.wff-5f1857:focus-visible{outline:3px solid #FFFFFF!important;outline-offset:3px!important}
.wff-8db9f1:focus-visible{outline:2px solid #8CAA5E!important;outline-offset:2px!important}
.wff-cb552d:focus-visible{outline:3px solid #1E4A2E!important;outline-offset:4px!important;border-color:#1E4A2E!important}
.wff-ed1364:focus-visible{outline:3px solid #1E4A2E!important;outline-offset:4px!important}
.wfh-065634:hover{transform:translateY(-2px)!important;box-shadow:0 10px 24px rgba(30,74,46,0.25)!important}
.wfh-0f2679:hover{transform:translateY(-2px)!important;box-shadow:0 10px 22px rgba(30,74,46,0.22)!important}
.wfh-2bcd41:hover{transform:translateY(-4px)!important;box-shadow:0 14px 28px rgba(30,74,46,0.12)!important}
.wfh-309723:hover{transform:translateY(-3px)!important;box-shadow:0 10px 20px rgba(30,74,46,0.3)!important;color:#FFFFFF!important}
.wfh-38bdf6:hover{transform:translateY(-6px)!important;box-shadow:0 20px 40px rgba(30,74,46,0.12)!important}
.wfh-588684:hover{transform:translateY(-3px)!important;box-shadow:0 8px 16px rgba(0,0,0,0.12)!important}
.wfh-5cd9e6:hover{transform:translateY(-3px)!important;box-shadow:0 10px 24px rgba(0,0,0,0.1)!important}
.wfh-5d892f:hover{transform:translateY(-3px)!important;box-shadow:0 10px 24px rgba(30,74,46,0.25)!important}
.wfh-6122c0:hover{transform:translateY(-3px)!important;box-shadow:0 8px 16px rgba(0,0,0,0.2)!important}
.wfh-62ba7e:hover{transform:translateY(-3px)!important;box-shadow:0 10px 20px rgba(0,0,0,0.2)!important}
.wfh-733188:hover{transform:translateY(-3px)!important;box-shadow:0 18px 36px rgba(0,0,0,0.12)!important}
.wfh-7e3461:hover{transform:translateY(-3px)!important;box-shadow:0 12px 24px rgba(0,0,0,0.25)!important}
.wfh-8d1ce3:hover{transform:translateY(-3px)!important;box-shadow:0 12px 24px rgba(30,74,46,0.25)!important;color:#FFFFFF!important}
.wfh-93c8aa:hover{transform:translateY(-4px)!important;box-shadow:0 28px 48px rgba(15,46,26,0.3)!important}
.wfh-9710b7:hover{transform:translateY(-2px)!important;box-shadow:0 6px 14px rgba(30,74,46,0.15)!important}
.wfh-975020:hover{transform:scale(1.01)!important}
.wfh-9db085:hover{transform:translateY(-4px)!important;box-shadow:0 16px 32px rgba(30,74,46,0.12)!important}
.wfh-9eddc5:hover{transform:translateY(-3px)!important}
.wfh-a1db98:hover{background:#2F6B3D!important}
.wfh-a38b15:hover{background:#1E4A2E!important;color:#FFFFFF!important}
.wfh-afbfd1:hover{transform:translateY(-3px)!important;box-shadow:0 14px 28px rgba(30,74,46,0.10)!important;border-color:#8CAA5E!important}
.wfh-b5a244:hover{background:#F1F6EC!important;color:#1E4A2E!important}
.wfh-bad4a9:hover{transform:translateY(-4px)!important;box-shadow:0 18px 36px rgba(30,74,46,0.14)!important}
.wfh-bf27b1:hover{background:rgba(140,170,94,0.08)!important}
.wfh-c6071f:hover{transform:translateY(-3px)!important;background:#1E4A2E!important;color:#FFFFFF!important}
.wfh-cb0d3b:hover{transform:translateY(-3px)!important;box-shadow:0 12px 24px rgba(30,74,46,0.1)!important}
.wfh-cd1c2f:hover{transform:translateY(-3px)!important;box-shadow:0 10px 20px rgba(30,74,46,0.25)!important;background:#173B24!important}
.wfh-cd655d:hover{background:rgba(255,255,255,0.1)!important}
.wfh-cee048:hover{filter:brightness(1.05)!important}
.wfh-d525bb:hover{transform:translateY(-2px)!important}
.wfh-df5b24:hover{transform:translateY(-3px)!important;box-shadow:0 12px 24px rgba(0,0,0,0.3)!important}
.wfh-e35967:hover{background:rgba(15,46,26,0.7)!important}
.wfh-e3c8c0:hover{transform:translate(-50%,-50%) scale(1.06)!important}
.wfh-ee5398:hover{color:#1E4A2E!important}
.wfh-eed1fb:hover{background:#8CAA5E!important;color:#0F2E1A!important}
.wfh-f6ca05:hover{transform:translateY(-10px)!important;box-shadow:0 26px 48px rgba(30,74,46,0.22)!important}
.wfh-fd1850:hover{transform:translateY(-3px)!important;box-shadow:0 12px 24px rgba(0,0,0,0.3)!important;color:#0F2E1A!important}
.wfh-fe9489:hover{color:#5E7F3A!important;text-decoration:underline!important}