:root{--navy:#102d49;--teal:#0d7480;--gold:#dfa73a;--wine:#7b2e42;--ink:#17334d;--muted:#687b89;--mist:#eef6f5;--cream:#fbf7ed;--line:#dfe9e9;--shadow:0 18px 55px rgba(16,45,73,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top left,rgba(223,167,58,.15),transparent 28rem),linear-gradient(180deg,#f4fbfa,#fff 34rem);color:var(--ink);font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,Arial,sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input{font:inherit}.shell{width:min(1160px,100%);margin:auto;padding:0 22px}.header{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:11px}.brandmark{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--gold),#f3cf72);color:var(--navy);font-size:24px;font-weight:900;box-shadow:0 8px 20px rgba(223,167,58,.3)}.brand strong{display:block;color:var(--navy);font-size:14px;letter-spacing:.12em}.brand small{display:block;color:var(--teal);font-size:9px;font-weight:800;letter-spacing:.2em}.actions{display:flex;align-items:center;gap:8px}.langs{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--line);border-radius:13px;background:#fff}.langs button{border:0;border-radius:10px;background:transparent;color:var(--muted);padding:7px 10px;font-weight:800;cursor:pointer}.langs button.active{background:var(--navy);color:#fff}.hero{padding:68px 0 45px;text-align:center}.eyebrow{color:var(--teal);font-size:11px;font-weight:900;letter-spacing:.18em}.hero h1{max-width:780px;margin:11px auto;color:var(--navy);font-size:clamp(43px,7vw,80px);line-height:1;letter-spacing:-.045em}.hero p{max-width:690px;margin:20px auto 28px;color:var(--muted);font-size:16px;line-height:1.75}.search{width:min(560px,100%);margin:auto;display:flex;align-items:center;gap:10px;padding:7px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.search span{font-size:25px;color:var(--teal)}.search input{width:100%;border:0;outline:0;padding:11px 0;background:transparent}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-bottom:60px}.card{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#fff;transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.card img{width:100%;aspect-ratio:4/4.5;object-fit:cover;background:var(--cream)}.card div{position:relative;padding:17px}.card h2{margin:0;color:var(--navy);font-size:18px;line-height:1.35}.card p{margin:6px 0 0;color:var(--muted);font-size:11px;font-style:italic}.mini{position:absolute;right:15px;top:-18px;min-width:42px;height:36px;padding:0 9px;border:4px solid #fff;border-radius:20px;display:grid;place-items:center;background:#4c9c68;color:#fff;font-size:10px;font-weight:900}.crumb{padding:15px 0 25px;color:var(--muted);font-size:13px}.crumb a{color:var(--teal);font-weight:800}.animal-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,75px);align-items:center;padding:25px 0 58px}.photo{overflow:hidden;border:1px solid var(--line);border-radius:38px 38px 105px 38px;background:var(--cream);box-shadow:var(--shadow)}.photo img{width:100%;aspect-ratio:4/4.9;object-fit:cover}.copy h1{margin:10px 0 0;color:var(--navy);font-size:clamp(46px,6vw,76px);line-height:1.04;letter-spacing:-.045em}.copy h2{margin:8px 0;color:var(--wine);font-size:clamp(21px,3vw,31px)}.scientific{margin:8px 0 20px;color:var(--muted);font-size:17px;font-style:italic}.status{width:fit-content;display:flex;align-items:center;gap:10px;padding:6px 15px 6px 7px;border-radius:99px;background:#e8f5eb;color:#367b4c}.status b{width:37px;height:37px;display:grid;place-items:center;border-radius:50%;background:#4e9a64;color:#fff;font-size:11px}.status.danger{background:#fbeaec;color:#973448}.status.danger b{background:#a83e51}.status.warn{background:#fff5d8;color:#876112}.status.warn b{background:#d09a2f}.status.dom{background:#eef1f5;color:#56667a}.status.dom b{background:#70829a}.intro{margin:22px 0;color:var(--ink);font-size:18px;line-height:1.75}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.fact{padding:25px;border:1px solid var(--line);border-radius:25px;background:var(--mist)}.fact:nth-child(2){background:var(--cream)}.fact:nth-child(3){background:#f3f4f8}.fact h3{margin:0 0 8px;color:var(--navy);font-size:20px}.fact p{margin:0;color:var(--muted);line-height:1.65}.audio{margin:20px 0 55px;padding:27px;display:grid;grid-template-columns:auto 1fr;gap:20px;border-radius:28px;background:var(--navy);color:#fff}.audio-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:var(--gold);color:var(--navy);font-size:29px;font-weight:900}.audio h3{margin:5px 0 8px;font-size:23px}.audio p{margin:0;color:#cbdbe5;line-height:1.65}.audio a{display:inline-block;margin-top:15px;padding:11px 15px;border-radius:12px;background:var(--gold);color:var(--navy);font-weight:900}.sign h3{margin:7px 0 18px;color:var(--navy);font-size:27px}.sign a{display:block;overflow:hidden;border:1px solid var(--line);border-radius:25px;box-shadow:var(--shadow)}.nav{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:28px 0 45px}.nav a{padding:16px;border:1px solid var(--line);border-radius:17px;background:#fff;color:var(--teal);font-weight:800}.nav a:last-child{text-align:right}footer{padding:30px 0 44px;border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:10px;font-weight:800;letter-spacing:.13em}
@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}.facts{grid-template-columns:1fr}.animal-hero{gap:30px}}
@media(max-width:680px){.shell{padding:0 15px}.header{min-height:72px}.brandmark{width:38px;height:38px}.brand strong{font-size:11px}.hero{padding:47px 0 34px}.hero h1{font-size:46px}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.card{border-radius:18px}.card div{padding:13px}.card h2{font-size:14px}.animal-hero{grid-template-columns:1fr;padding-top:8px}.photo{border-radius:28px 28px 75px 28px}.copy h1{font-size:44px}.audio{grid-template-columns:1fr;padding:22px}.nav{grid-template-columns:1fr}.nav a:last-child{text-align:left}}