:root{--bg:#f0fdf4;--card:#fff;--ink:#14532d;--muted:#5b8a6f;--brand:#16a34a;--brand2:#4ade80;--brand-dark:#15803d;--line:#d1fae5;--mint:#dcfce7;--shadow:0 10px 30px rgba(22,163,74,.12);--radius:18px}
body.dark{--bg:#052e16;--card:#0a3d24;--ink:#ecfdf5;--muted:#86c9a3;--line:#14532d;--shadow:0 10px 30px rgba(0,0,0,.4)}
*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Tahoma,'Noto Sans Thai',sans-serif;background:var(--bg);color:var(--ink);background-image:radial-gradient(circle at 10% 10%,#dcfce7 0,transparent 22%),radial-gradient(circle at 90% 5%,#fef9c3 0,transparent 20%),radial-gradient(circle at 85% 90%,#bbf7d0 0,transparent 22%);background-attachment:fixed}
body.dark{background-image:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 14px}
.topbar{background:linear-gradient(100deg,#15803d 0%,#22c55e 45%,#86efac 100%);color:#fff;position:sticky;top:0;z-index:9;box-shadow:0 4px 18px rgba(21,128,61,.28)}
.topbar-in{display:flex;gap:12px;align-items:center;padding:10px 14px;flex-wrap:wrap}
.logo{color:#fff;text-decoration:none;font-size:22px;transition:.25s}.logo:hover{transform:rotate(-3deg) scale(1.05)}.logo small{display:block;font-size:11px;opacity:.9;letter-spacing:1px}
.search{flex:1;display:flex;min-width:220px;background:#fff;border-radius:999px;padding:4px;box-shadow:0 4px 12px rgba(0,0,0,.15)}.search input{flex:1;padding:9px 14px;border:0;border-radius:999px;outline:none;font-size:14px;background:transparent;color:#14532d}
.search button{border:0;background:linear-gradient(90deg,#15803d,#22c55e);color:#fff;padding:0 20px;border-radius:999px;cursor:pointer;font-weight:800;transition:.25s}.search button:hover{transform:scale(1.05)}
.nav{display:flex;gap:10px;align-items:center}.nav a{color:#fff;text-decoration:none;font-weight:700;background:rgba(255,255,255,.18);padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);transition:.25s}.nav a:hover{background:#fff;color:#15803d;transform:translateY(-2px)}
#darkBtn{border:0;border-radius:50%;width:36px;height:36px;cursor:pointer;background:#fff;font-size:17px;transition:.3s}#darkBtn:hover{transform:rotate(20deg) scale(1.1)}
.hero{background:linear-gradient(180deg,#fff 0%,#f0fdf4 100%);border:2px solid #bbf7d0;border-radius:26px;padding:30px 22px 24px;margin:18px 0;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;opacity:.55;animation:float 6s ease-in-out infinite}
.hero::before{width:180px;height:180px;background:radial-gradient(circle,#86efac,#22c55e);top:-60px;left:-50px}
.hero::after{width:140px;height:140px;background:radial-gradient(circle,#fde68a,#fbbf24);bottom:-50px;right:-30px;animation-delay:2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero .gift{font-size:52px;display:inline-block;animation:bounce 2.2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
.hero h1{margin:6px 0;font-size:clamp(22px,4vw,34px);background:linear-gradient(90deg,#15803d,#22c55e,#65a30d);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.stat{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 18px;font-size:14px;box-shadow:0 4px 0 #bbf7d0;transition:.25s}
.stat:hover{transform:translateY(-3px)}.stat b{color:var(--brand-dark);font-size:17px}
h2.sec{margin:24px 0 12px;display:flex;align-items:center;gap:8px;font-size:20px}
h2.sec::after{content:'';flex:1;height:3px;border-radius:99px;background:linear-gradient(90deg,#bbf7d0,transparent)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;gap:10px;transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#86efac}
.card-icon{font-size:38px;min-width:58px;height:58px;background:linear-gradient(180deg,#f0fdf4,#dcfce7);border-radius:14px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}.card-icon img{width:52px;height:52px;object-fit:cover;border-radius:12px;display:block}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.shots img{width:100%;height:130px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.card-body h3{margin:0 0 4px;font-size:16px}.card-body h3 a{color:var(--ink);text-decoration:none}
.muted{color:var(--muted);font-size:13px}.meta{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.badge{background:#f0fdf4;border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-size:12px}
.badge.lic{background:#dcfce7;color:#166534;border-color:#86efac;font-weight:800}.row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:13px}
.btn{background:linear-gradient(90deg,#15803d,#22c55e);color:#fff!important;text-decoration:none;padding:9px 16px;border-radius:999px;font-weight:800;border:0;cursor:pointer;display:inline-block;transition:.25s;box-shadow:0 4px 12px rgba(34,197,94,.35)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn.ghost{background:#fff;color:var(--ink)!important;border:2px solid var(--line);box-shadow:none}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cat{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 12px;text-align:center;text-decoration:none;color:var(--ink);font-weight:700;transition:.25s}
.cat:hover{border-color:#22c55e;transform:translateY(-4px);box-shadow:var(--shadow);background:linear-gradient(180deg,#fff,#f0fdf4)}.cat span{font-size:30px;display:block;transition:.25s}.cat:hover span{transform:scale(1.25) rotate(-8deg)}
.detail{display:grid;grid-template-columns:1fr 320px;gap:14px;margin-top:14px}
@media(max-width:800px){.detail{grid-template-columns:1fr}}
.panel{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:0 4px 14px rgba(22,163,74,.06)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px;font-size:14px}.kv b{color:var(--muted)}
table.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:9px;font-size:14px;text-align:left}
.tbl th{background:#dcfce7;color:#14532d}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.filters select,.filters input,.form input,.form select,.form textarea{padding:9px 10px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);width:100%;outline:none;transition:.2s}
.filters select:focus,.filters input:focus,.form input:focus,.form textarea:focus{border-color:#22c55e;box-shadow:0 0 0 3px #bbf7d0}
.form{max-width:640px}.form label{display:block;margin:10px 0 4px;font-weight:700;color:#15803d}
.pager{display:flex;gap:8px;margin:14px 0}.pager a{padding:7px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);background:var(--card)}
.footer{text-align:center;color:var(--muted);padding:22px 0;font-size:13px}.footer a{color:var(--muted)}
.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.pill{text-decoration:none;padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;background:#fff;border:2px solid var(--line);color:var(--ink);transition:.25s}
.pill:hover{background:linear-gradient(90deg,#15803d,#22c55e);color:#fff;border-color:transparent;transform:translateY(-3px)}
.pill.hot{background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#fff;border-color:transparent}
.upd-row{border-bottom:1px dashed #bbf7d0!important;transition:.2s;border-radius:10px}.upd-row:hover{background:#f0fdf4;padding-left:10px!important}
.reveal{opacity:0;transform:translateY(18px);transition:.6s}.reveal.show{opacity:1;transform:none}
@media(max-width:600px){.hero{padding:22px 14px}.stat{flex:1;min-width:130px}}
.top-item{display:flex;align-items:center;gap:12px}.rank{font-size:22px;font-weight:900;color:var(--brand);min-width:40px;text-align:center}