@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*---GLOBAL FRONTEND---*/
:root{--primary:#176b62;--secondary:#103d31;--ink:#19312d;--muted:#64736f;--paper:#fbfcfa;--line:#dbe5e1;--accent:#b8ed3b;--radius:14px;--space:24px;font-family:Sarabun,Prompt,Arial,sans-serif;font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);line-height:1.6}a{color:inherit}button,.button{min-height:44px;border:1px solid var(--primary);border-radius:24px;padding:9px 18px;background:var(--primary);color:#fff;cursor:pointer;text-decoration:none;font:inherit}button:hover,.button:hover{background:var(--secondary)}.site-header{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:12px max(24px,calc((100% - 1200px)/2));background:rgba(251,252,250,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.brand{font-weight:800;letter-spacing:.08em;text-decoration:none}.site-nav{display:flex;gap:18px;align-items:center}.site-nav a,.site-nav button{background:none;border:0;color:var(--ink);text-decoration:none;padding:8px}.menu-toggle{display:none;background:none;color:var(--ink);border:0}.hero,.page-intro,.content-section{max-width:1200px;margin:auto;padding:120px var(--space) 48px}.hero{min-height:520px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#dceee8,#f8fbf8)}.hero h1{font-size:clamp(2.2rem,5vw,4.8rem);line-height:1.08;max-width:760px;margin:8px 0}.eyebrow{color:var(--primary);letter-spacing:.12em}.search-form,.filter-form{display:flex;gap:10px;align-items:end;max-width:720px;margin-top:24px}.search-form label{display:block}.search-form input,.filter-form input,.filter-form select{flex:1;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit}.content-section{padding-top:28px}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.content-card{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.media-placeholder{aspect-ratio:16/9;display:grid;place-items:center;background:#dbe5e1;color:var(--muted);border-radius:10px;margin-bottom:12px}.breadcrumb{color:var(--muted)}.breadcrumb a{color:var(--primary)}fieldset{border:0;padding:0}fieldset label{display:block;padding:10px 0}.site-footer{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding:28px max(24px,calc((100% - 1200px)/2));background:#eef4f0}.site-footer span{margin-left:auto}.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(0,0,0,.5);padding:20px}.modal-card{position:relative;background:#fff;border-radius:var(--radius);padding:28px;max-width:520px;width:100%}.modal-close{position:absolute;right:12px;top:12px;background:none;color:var(--ink);border:0;font-size:24px}

.site-nav a.is-active{color:var(--primary);font-weight:800;border-bottom:3px solid var(--accent)}.video-modal-card{max-width:900px}.video-modal-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px}.video-modal-card .video-fallback{padding:30px;text-align:center;background:#eef4f0;border-radius:10px}

.hero{position:relative;overflow:hidden;isolation:isolate}.hero-visual{position:absolute;inset:0;z-index:-1}.hero-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,252,250,.96) 0%,rgba(251,252,250,.82) 43%,rgba(251,252,250,.12) 100%)}.hero-visual img{width:100%;height:100%;object-fit:cover}.hero-copy{max-width:720px}.content-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}.feature-image{max-width:820px;margin:18px auto 28px}.feature-image .content-image{aspect-ratio:16/9}.media-placeholder.has-image{padding:0;overflow:hidden}
/*---DESIGN SYSTEM STATES---*/
:root{--font-sans:'Noto Sans Thai','IBM Plex Sans Thai','LINE Seed Sans TH',Sarabun,Arial,sans-serif;--font-serif:Georgia,'Noto Serif Thai',serif;--surface:#fff;--surface-muted:#eef4f0;--shadow-soft:0 8px 24px rgba(16,61,49,.08);--motion:200ms ease;font-family:var(--font-sans)}
:root[data-theme=dark]{--paper:#12211d;--ink:#f4f8f5;--muted:#b8c9c2;--line:#34584e;--surface:#1b302a;--surface-muted:#263e36;--primary:#55b4a5;--secondary:#b8ed3b}
:root[data-theme=dark] .site-header{background:rgba(18,33,29,.94)}:root[data-theme=dark] .site-footer{background:#1b302a}:root[data-theme=dark] .content-card,:root[data-theme=dark] .modal-card{background:var(--surface)}
button,.button{transition:background var(--motion),transform var(--motion),opacity var(--motion);box-shadow:none}button:hover,.button:hover{transform:translateY(-1px)}button:disabled,.is-loading{opacity:.6;cursor:wait;transform:none}.is-loading:after{content:' ';display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.state-skeleton{background:linear-gradient(90deg,var(--surface-muted),#fff,var(--surface-muted));background-size:200% 100%;animation:skeleton 1.2s infinite;border-radius:var(--radius);min-height:120px}@keyframes skeleton{to{background-position:-200% 0}}.state-empty,.state-error,.state-offline{padding:24px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface-muted)}.state-error{border-color:#d66;background:#fff4f4}.state-offline{position:fixed;z-index:20;bottom:16px;left:16px;right:16px;text-align:center;background:#fff4cc;color:#854d0e}.is-offline:before{content:'ขณะนี้ออฟไลน์ — กรุณาตรวจสอบการเชื่อมต่อ';position:fixed;z-index:19;bottom:0;left:0;right:0;padding:8px;text-align:center;background:#fff4cc;color:#854d0e}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/*---LIST PAGINATION AND ACCESSIBILITY---*/
.pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin:28px auto 48px}.pagination a{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:var(--surface)}.pagination a:hover,.pagination a.is-current{background:var(--primary);color:#fff;border-color:var(--primary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.modal[hidden]{display:none!important}
.hero-expanded{min-height:600px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.button-ghost{background:rgba(255,255,255,.72);color:var(--primary)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}.section-heading h2{margin:0}.section-heading>a,.text-link{color:var(--primary);font-weight:700;text-decoration:none}.impact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding-top:0;padding-bottom:0;background:var(--line);border-radius:var(--radius);overflow:hidden}.impact-strip div{display:flex;flex-direction:column;gap:2px;padding:22px;background:var(--surface)}.impact-strip strong{font-size:1.5rem;color:var(--primary)}.impact-strip span{color:var(--muted)}.featured-section{padding-top:56px}.featured-carousel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft)}.carousel-slide{display:none;grid-template-columns:1.05fr .95fr;min-height:320px}.carousel-slide.is-active{display:grid}.carousel-image{min-height:320px;background:var(--surface-muted)}.carousel-image img{width:100%;height:100%;object-fit:cover}.carousel-copy{display:flex;flex-direction:column;justify-content:center;padding:40px}.carousel-copy h3{font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.2;margin:10px 0}.carousel-copy p{color:var(--muted)}.card-kicker{display:inline-block;color:var(--primary);font-size:.9rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.carousel-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;border-top:1px solid var(--line);background:var(--surface-muted)}.carousel-controls button{min-width:44px;padding:7px 12px}.lift-card{box-shadow:var(--shadow-soft);transition:transform var(--motion),box-shadow var(--motion)}.lift-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(16,61,49,.14)}.split-section{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:28px;align-items:start}.video-preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.activity-feature{min-height:280px;padding:32px;border-radius:var(--radius);background:linear-gradient(145deg,var(--secondary),#dff4c0);color:#19312d;box-shadow:var(--shadow-soft)}.activity-feature h2{font-size:1.8rem;line-height:1.2}.activity-feature .button{background:#19312d;border-color:#19312d}.activity-feature .button:hover{background:#103d31}@media(max-width:915px){.impact-strip{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column;gap:8px}.carousel-slide.is-active{display:flex;flex-direction:column}.carousel-image{min-height:220px;height:220px}.carousel-copy{padding:24px}.split-section{grid-template-columns:1fr}.video-preview-grid{grid-template-columns:1fr}}:root[data-theme=dark] .button-ghost{background:rgba(18,33,29,.72);color:var(--ink)}:root[data-theme=dark] .activity-feature{color:#19312d}

/* Short / video cover ratio on public homepage only */
.video-preview-card--short .media-placeholder,
.video-preview-card--short .content-image {
    aspect-ratio: 9 / 16;
}

.video-preview-card--video .media-placeholder,
.video-preview-card--video .content-image {
    aspect-ratio: 16 / 9;
}

.video-preview-card .content-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*---PUBLIC FONT---*/
body {
    font-family: "Prompt", sans-serif;
}

/*---INTERACTIVE------------*/
body.interactive-page,
body.interactive-thanks-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--theme-background, #fbfcfa);
    color: var(--theme-text, #19312d);
}

body.interactive-page main,
body.interactive-thanks-page main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
}

.interactive-stage,
.interactive-thanks {
    --interactive-accept: #d9efd4;
    --interactive-accept-ink: #1b5e20;
    --interactive-accept-hover: #b7e0ad;
    --interactive-accept-strong: #7dce78;
    --interactive-review: #fff3c4;
    --interactive-review-ink: #7a5b00;
    --interactive-review-hover: #ffe08a;
    --interactive-review-strong: #ffc94a;
    --interactive-reject: #ffd5d8;
    --interactive-reject-ink: #8e2430;
    --interactive-reject-hover: #f3b4ba;
    --interactive-reject-strong: #ef9a9a;
    width: min(1600px, 100%);
    margin: 0 auto;
    padding: 108px 50px 48px;
    color: var(--theme-text, #19312d);
    scroll-margin-top: 88px;
}

.interactive-stage {
    flex: 1 0 auto;
}

.interactive-crumb,
.interactive-progress,
.interactive-empty,
.interactive-thanks-fallback {
    margin: 0 0 18px;
    color: var(--theme-text, #19312d);
}

.interactive-crumb a {
    color: inherit;
}

.interactive-progress {
    color: #6a4de0;
    font-weight: 600;
}

.interactive-question {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    margin: 0 0 28px;
    padding: 28px;
    overflow-wrap: anywhere;
    color: var(--theme-text, #19312d);
    text-align: center;
}

body.interactive-page .interactive-question {
    font-size: 30px;
    font-weight: 500;
}

.interactive-question > :first-child {
    margin-top: 0;
}

.interactive-question > :last-child {
    margin-bottom: 0;
}

.interactive-choices {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.interactive-choice {
    flex: 1 1 0;
    min-height: 72px;
    padding: 16px;
    border: 2px solid transparent;
    border-radius: 16px;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.interactive-choice--acceptable {
    background: var(--interactive-accept);
    color: var(--interactive-accept-ink);
}

.interactive-choice--review {
    background: var(--interactive-review);
    color: var(--interactive-review-ink);
}

.interactive-choice--unacceptable {
    background: var(--interactive-reject);
    color: var(--interactive-reject-ink);
}

.interactive-choice--acceptable:hover {
    border-color: #0f4a16;
    background: var(--interactive-accept);
    color: var(--interactive-accept-ink);
    transform: none;
}

.interactive-choice--review:hover {
    border-color: #8a6200;
    background: var(--interactive-review);
    color: var(--interactive-review-ink);
    transform: none;
}

.interactive-choice--unacceptable:hover {
    border-color: #8e2430;
    background: var(--interactive-reject);
    color: var(--interactive-reject-ink);
    transform: none;
}

.interactive-choice--acceptable.is-selected,
.interactive-choice--acceptable.is-selected:hover {
    background: var(--interactive-accept-strong);
    border-color: var(--interactive-accept-ink);
    color: var(--interactive-accept-ink);
    transform: none;
}

.interactive-choice--review.is-selected,
.interactive-choice--review.is-selected:hover {
    background: var(--interactive-review-strong);
    border-color: var(--interactive-review-ink);
    color: var(--interactive-review-ink);
    transform: none;
}

.interactive-choice--unacceptable.is-selected,
.interactive-choice--unacceptable.is-selected:hover {
    background: var(--interactive-reject-strong);
    border-color: var(--interactive-reject-ink);
    color: var(--interactive-reject-ink);
    transform: none;
}

.interactive-feedback {
    display: grid;
    gap: 14px;
    margin-top: 20px;
    padding: 18px;
    border-radius: 16px;
    background: #f7e8ea;
}

.interactive-feedback[hidden] {
    display: none !important;
}

.interactive-chosen,
.interactive-focus,
.interactive-explain {
    margin: 0;
    overflow-wrap: anywhere;
}

.interactive-chosen,
.interactive-explain {
    padding: 0;
    background: transparent;
}

.interactive-focus {
    background: #f3eef8;
    border: 2px solid #6a4de0;
}

.interactive-focus-title,
.interactive-explain-title {
    margin: 0 0 8px;
    font-size: 16px;
}

.interactive-focus-body > :last-child,
.interactive-explain-body > :last-child,
.interactive-thanks-body > :last-child {
    margin-bottom: 0;
}

.interactive-nav {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 24px;
}

.interactive-back,
.interactive-next,
.interactive-home {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--theme-text, #19312d);
    border-radius: 12px;
    background: transparent;
    color: var(--theme-text, #19312d);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.interactive-next {
    margin-left: auto;
}

.interactive-next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.interactive-thanks {
    flex: 1 0 auto;
}

.interactive-thanks-title {
    margin: 0 0 18px;
    color: var(--theme-text, #19312d);
}

.interactive-home {
    display: inline-flex;
    align-items: center;
    margin-top: 28px;
}