:root{--green:#1b3627;--deep:#142a1e;--mid:#255139;--ink:#15180f;--gold:#c8922f;--gold2:#d9a03c;--pink:#f0aebd;--cream:#fbfaf6;--muted:#5d6359;--line:#dfdacb;--soft:#eff4ec;--serif:'IBM Plex Sans Thai',system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:17px}button,input,select,textarea{font:inherit}button,a{transition:.2s ease}.hidden{display:none!important}.nav{height:68px;position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:34px;padding:0 max(24px,calc((100vw - 1340px)/2));background:rgba(20,42,30,.96);backdrop-filter:blur(12px);color:#fff;border-bottom:1px solid rgba(217,160,60,.3)}.brand{color:#fff;text-decoration:none;font-weight:700;font-size:20px;white-space:nowrap}.brand i{display:inline-block;width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg);margin:0 9px 2px}.nav nav{display:flex;gap:28px;margin-right:auto}.nav nav a{color:#cfe0d4;text-decoration:none}.nav nav a:hover{color:#fff}.cart-button{border:1px solid #a9761f;background:var(--gold);color:#1b1405;border-radius:10px;padding:10px 15px;font-weight:700;cursor:pointer}.cart-button span{display:inline-grid;place-items:center;background:var(--deep);color:#fff;border-radius:20px;min-width:25px;height:25px;margin-left:6px}.hero{min-height:660px;display:grid;place-items:center;position:relative;overflow:hidden;text-align:center;color:#fff;background:radial-gradient(circle at 50% 10%,#315f46 0,#1b3627 48%,#102219 100%)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}.hero:after{content:"";position:absolute;bottom:-200px;width:850px;height:440px;border-radius:50%;background:radial-gradient(ellipse,#315b43 0,#1b3627 62%,transparent 63%);opacity:.8}.hero-orbit{position:absolute;border:1px solid rgba(217,160,60,.25);border-radius:50%;width:620px;height:620px}.hero-orbit.one{left:-380px;top:-160px}.hero-orbit.two{right:-410px;bottom:-260px}.hero-content{position:relative;z-index:2;max-width:920px;padding:80px 24px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--gold2);font-weight:600;font-size:14px}.eyebrow.dark{color:#8a6a2e}.hero h1{font-size:clamp(42px,5.2vw,72px);line-height:1.18;margin:18px 0 12px;letter-spacing:-.025em}.hero h1 em,.results h2 em{font-style:normal;color:var(--pink)}.gold-rule{display:flex;align-items:center;margin:24px auto;width:260px}.gold-rule:before,.gold-rule:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold2))}.gold-rule:after{transform:rotate(180deg)}.gold-rule i{width:8px;height:8px;border:1.5px solid var(--gold2);transform:rotate(45deg);margin:0 12px}.hero-copy{font-size:20px;line-height:1.75;color:#dbe9df;max-width:720px;margin:0 auto 28px}.primary,.secondary{display:inline-flex;justify-content:center;align-items:center;min-height:54px;padding:14px 22px;border-radius:12px;border:1.5px solid #a9761f;background:var(--gold);color:#1b1405;font-weight:700;text-decoration:none;cursor:pointer}.primary:hover{background:#b98527;transform:translateY(-1px)}.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.hero-cta{font-size:20px;padding:17px 28px}.trust{color:#b9cbbf;font-size:15px}.section{padding:90px max(24px,calc((100vw - 1240px)/2))}.section-heading{max-width:780px;text-align:center;margin:0 auto 42px}.section-heading h2{font-size:clamp(32px,4vw,46px);line-height:1.3;margin:8px 0 12px}.section-heading p:last-child{color:var(--muted);line-height:1.7}.checker-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:28px;align-items:start}.card{background:#fff;border:2px solid var(--line);border-radius:18px;padding:24px}.quiz{display:grid;grid-template-columns:1fr 1fr;gap:14px}.quiz .progress,.quiz .primary,.quiz .reassure{grid-column:1/-1}.progress{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:15px}.progress i{display:block;width:150px;height:7px;background:#eee9db;border-radius:10px;overflow:hidden}.progress b{display:block;height:100%;width:0;background:var(--gold);transition:.3s}.quiz label{display:flex;flex-direction:column;gap:7px;background:#f4f2e9;border:2px solid #dad5c6;border-radius:13px;padding:12px 14px;color:var(--muted);font-size:15px}.quiz label.featured{background:#fff8e8;border-color:var(--gold2);color:#8a6a2e;font-weight:600}.quiz select{border:0;background:transparent;color:var(--ink);font-size:18px;font-weight:600;min-height:38px;width:100%;outline:0}.reassure{margin:0;background:var(--soft);color:#2a4b36;padding:12px 14px;border-radius:10px;font-size:15px}.promise{background:var(--green);color:#fff;border-color:var(--gold);position:sticky;top:92px}.promise .number{font-size:80px;line-height:.9;color:var(--pink);font-weight:700}.promise>strong{color:var(--gold);margin-left:8px}.promise h3{font-size:25px}.promise ul{padding-left:22px;color:#c7d8cb;line-height:1.9}.promise blockquote{border-left:2px solid var(--gold);padding:12px 0 12px 16px;margin:20px 0 0;color:#e4eee6;line-height:1.7}.results{background:var(--deep);color:#fff}.result-intro{max-width:900px;margin-bottom:34px}.result-intro h2{font-size:44px;margin:8px 0}.result-intro>p:not(.eyebrow){color:#d7e4da;line-height:1.8;font-size:19px}.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:7px 11px;border-radius:30px;color:#e4eee6;font-size:15px}.set-card{display:grid;grid-template-columns:1fr 1fr;gap:30px;background:linear-gradient(135deg,#244d37,#1b3627);border:1px solid var(--gold);border-radius:18px;padding:28px;margin-bottom:48px}.set-card h3{font-size:32px;color:var(--pink);margin:4px 0 12px}.set-card p{color:#c7d8cb;line-height:1.75}.set-roles{display:grid;gap:8px}.role{display:flex;justify-content:space-between;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:12px 14px;border-radius:10px}.role b{color:#fff}.role span{color:var(--gold)}.recommend-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.recommend-heading h2{margin:0;font-size:30px}.recommend-heading p{color:#a9bfaf}.recommend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tree-card{background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:15px;overflow:hidden;transition:.2s}.tree-card:hover,.catalog-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.13)}.tree-visual{height:150px;display:flex;align-items:end;padding:14px;background:linear-gradient(145deg,#dce8d8,#aec7b3);position:relative;overflow:hidden}.tree-visual:before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:#6f9b75;top:25px;right:-25px;box-shadow:-90px 45px 0 -30px #527f5c}.rank{position:relative;background:var(--gold);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-weight:700}.tree-body{padding:16px}.tree-code{color:#8a6a2e;font-size:13px;letter-spacing:.12em;font-weight:700}.tree-body h3{font-size:24px;margin:4px 0}.badge{display:inline-block;background:#f7e8c8;color:#6e5320;border-radius:7px;padding:5px 8px;font-size:14px;font-weight:600}.story{background:#fbf3f5;border:1px solid #f0d8df;border-radius:10px;padding:12px;margin:14px 0;line-height:1.7;color:#3b4038;min-height:152px}.reason{color:#2a4b36;line-height:1.65;font-size:16px}.card-actions{display:flex;gap:8px}.card-actions button{flex:1}.secondary{background:transparent;border:2px solid #2f5a3c;color:#215037}.secondary.light{border-color:#e8c578;color:#e8c578}.sets{background:#f1efe4}.set-showcase{max-width:980px;margin:auto;background:var(--green);border:1px solid var(--gold);border-radius:18px;color:#fff;padding:34px;display:flex;justify-content:space-between;align-items:center;gap:28px}.set-showcase small{color:var(--gold);letter-spacing:.12em}.set-showcase h3{font-size:34px;color:var(--pink);margin:7px 0}.set-showcase p{color:#c7d8cb;max-width:680px;line-height:1.7}.catalog-tools{display:flex;gap:12px;max-width:1000px;margin:0 auto 24px}.catalog-tools input,.catalog-tools select{background:#fff;border:2px solid var(--line);border-radius:11px;padding:12px 14px;min-height:52px}.catalog-tools input{flex:1}.catalog-tools span{display:grid;place-items:center;color:var(--muted);min-width:80px}.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.catalog-card{background:#fff;border:2px solid var(--line);border-radius:13px;padding:16px;transition:.2s;display:flex;flex-direction:column}.catalog-card .tag{align-self:flex-start;background:var(--soft);color:#2a4b36;border-radius:20px;padding:4px 8px;font-size:13px}.catalog-card h3{font-size:21px;margin:10px 0 2px}.catalog-card .goal{color:#8a3552;font-weight:600;margin:0 0 8px}.catalog-card .mini-story{color:var(--muted);line-height:1.6;font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.catalog-card button{margin-top:auto}.catalog>.secondary{display:flex;margin:26px auto 0}.drawer-backdrop{position:fixed;inset:0;background:rgba(8,18,12,.55);z-index:39}.drawer{position:fixed;z-index:40;right:0;top:0;height:100vh;width:min(480px,100%);background:var(--cream);box-shadow:-10px 0 40px rgba(0,0,0,.25);padding:22px;overflow:auto;transform:translateX(105%);transition:.3s}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--line);padding-bottom:14px}.drawer-head small{color:#8a6a2e}.drawer-head h2{margin:2px 0}.drawer-head button,.dialog-close{border:0;background:#f1efe4;width:42px;height:42px;border-radius:50%;font-size:28px;cursor:pointer}.cart-items{display:grid;gap:10px;margin:18px 0}.cart-item{background:#fff;border:2px solid var(--line);border-radius:12px;padding:12px}.cart-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.cart-item h4{margin:0;font-size:19px}.qty{display:flex;align-items:center;gap:8px}.qty button{width:36px;height:36px;border:1px solid #bdb7a6;border-radius:8px;background:#fff}.cart-item select{width:100%;margin-top:10px;padding:8px;border:1px solid var(--line);border-radius:8px}.remove{border:0;background:transparent;color:#8a3552;padding:8px 0;cursor:pointer}.empty-cart{text-align:center;color:var(--muted);padding:34px}.toggle{display:flex;align-items:center;gap:10px;background:var(--green);color:#fff;padding:14px;border-radius:12px}.toggle input{width:20px;height:20px}.contact{display:grid;gap:10px;margin-top:20px}.contact input,.contact textarea{padding:13px;border:2px solid var(--line);border-radius:11px;background:#fff}.contact textarea{min-height:90px}.contact p{text-align:center;color:var(--muted);font-size:14px}dialog{width:min(600px,calc(100% - 28px));border:1px solid var(--gold);border-radius:18px;padding:32px;color:var(--ink);background:var(--cream);box-shadow:0 30px 80px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(8,18,12,.72)}.dialog-close{float:right}.dialog-goal{color:#8a3552;font-size:20px;font-weight:600}dialog blockquote{margin:22px 0;background:#fbf3f5;border-left:3px solid var(--pink);padding:18px;line-height:1.8}.toast{position:fixed;z-index:80;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;border:1px solid var(--gold);border-radius:10px;padding:13px 18px;box-shadow:0 8px 30px rgba(0,0,0,.2)}footer{text-align:center;background:#102219;color:#fff;padding:42px 20px}footer p{color:#a9bfaf}
@media(max-width:900px){.nav nav{display:none}.nav{padding:0 18px}.cart-button{margin-left:auto}.section{padding:70px 20px}.checker-layout,.set-card{grid-template-columns:1fr}.promise{position:static}.recommend-grid{grid-template-columns:1fr 1fr}.catalog-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){body{font-size:16px}.nav{height:60px}.brand{font-size:16px}.cart-button{font-size:0;padding:8px}.cart-button:before{content:"รายการ";font-size:15px}.hero{min-height:650px}.hero-content{padding:72px 18px}.hero h1{font-size:39px}.hero h1 em{font-size:46px}.hero-copy{font-size:17px}.section{padding:58px 14px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:32px}.quiz{grid-template-columns:1fr;padding:10px}.quiz label{grid-column:1!important}.progress{padding:8px}.promise{padding:20px}.results{padding-left:14px;padding-right:14px}.result-intro h2{font-size:32px}.set-card{padding:18px}.recommend-heading{display:block}.recommend-grid{grid-template-columns:1fr}.tree-card .story{min-height:0}.set-showcase{display:block;padding:22px}.catalog-tools{flex-wrap:wrap}.catalog-tools input{flex-basis:100%}.catalog-tools select{flex:1}.catalog-grid{grid-template-columns:1fr 1fr}.catalog-card{padding:12px}.catalog-card h3{font-size:19px}.catalog-card .mini-story{display:none}.drawer{padding:16px}.nav .cart-button span{margin-left:4px}}

/* Production fidelity layer */
.hero{background-image:linear-gradient(90deg,rgba(12,28,19,.88) 0%,rgba(20,42,30,.66) 48%,rgba(20,42,30,.48) 100%),url('assets/hero-mangkorn-tree.png');background-size:cover;background-position:center}.method{background:#fff}.method-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.method-grid article{border-top:3px solid var(--gold);background:var(--cream);padding:22px 18px;border-radius:0 0 13px 13px}.method-grid b{color:#8a6a2e;font-size:14px;letter-spacing:.12em}.method-grid h3{margin:12px 0 5px;font-size:21px}.method-grid p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}.tree-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.tree-facts div{background:var(--soft);border-radius:9px;padding:10px 12px}.tree-facts small{display:block;color:var(--muted)}.tree-facts b{color:#215037}.safety-note{font-size:14px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:12px}
@media(max-width:900px){.method-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.hero{background-position:62% center}.method-grid{grid-template-columns:1fr 1fr}.method-grid article:last-child{grid-column:1/-1}.tree-facts{grid-template-columns:1fr}}

.tree-visual{padding:0}.tree-visual:before{display:none}.tree-visual img{width:100%;height:100%;object-fit:cover;display:block}.tree-visual .rank{position:absolute;left:14px;bottom:14px;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.22)}.catalog-card{overflow:hidden}.catalog-image{width:calc(100% + 32px);height:170px;object-fit:cover;display:block;margin:-16px -16px 14px}.dialog-image{width:calc(100% + 64px);height:270px;object-fit:cover;display:block;margin:-32px -32px 22px;border-radius:18px 18px 0 0}.dialog-close{position:relative;z-index:2;background:rgba(251,250,246,.92)}
@media(max-width:620px){.catalog-image{width:calc(100% + 24px);height:130px;margin:-12px -12px 12px}.dialog-image{height:220px}}

/* 3MONGKOL: the 3 doubles as a living tree mark */
.brand-new{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0;text-decoration:none}.brand-new img{display:block;width:148px;height:auto}
@media(max-width:620px){.brand-new img{width:124px}}
.page-hero .hero-copy h1{color:#173526;font-weight:900;letter-spacing:-.02em;text-shadow:none}.page-hero .hero-copy h1:after{content:"";display:block;width:76px;height:4px;margin-top:13px;border-radius:10px;background:#d29a2e}