@keyframes pulse-red{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kanit-v17-latin_thai-regular.woff2)format("woff2")}@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/kanit-v17-latin_thai-700.woff2)format("woff2")}:root{--primary:#3b82f6;--primary-dark:#1e3a8a;--bg:#0f172a;--white:#1e293b;--text-main:#f1f5f9;--text-muted:#94a3b8;--border-color:#334155;--header-start:#020617;--header-mid:#0f172a;--header-end:#1e3a8a;--header-shadow:rgba(0,0,0,0.5);--nav-height:56px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,html{max-width:100vw;overflow-x:hidden;width:100%;margin:0;padding:0}body{font-family:"Kanit",sans-serif;background:var(--bg);color:var(--text-main);padding-top:var(--nav-height);line-height:1.6;min-height:100vh}.container{max-width:1000px;margin:0 auto;padding:0 20px}[data-icon],header{justify-content:center}[data-icon]{display:inline-flex;align-items:center;line-height:0}[data-icon] svg{width:1em;height:1em;fill:currentColor}.tool-icon svg{width:1.6rem;height:1.6rem}header{flex-direction:column;padding:80px 20px 100px;min-height:280px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--header-start),var(--header-mid),var(--header-end));border-radius:0 0 30px 30px;overflow:hidden}header h1{font-size:2.8rem;font-weight:700;text-shadow:0 4px 15px var(--header-shadow);margin:0}header p{font-size:1.2rem;margin-top:15px;color:#cbd5e1}.search-outer{position:relative;z-index:20;margin-top:-35px;padding:0 20px}.search-container,header{display:flex;align-items:center}.search-container{width:100%;max-width:600px;margin:0 auto;background:var(--white);border:1px solid var(--border-color);padding:4px 8px 4px 20px;border-radius:50px;gap:12px;box-shadow:0 4px 12px rgba(0,0,0,.05)}.search-container input{flex:1;min-width:0;border:0;background:0 0;padding:10px 4px;font-size:1rem;color:var(--text-main);outline:0}.btn-search,.btn-voice,.search-container>svg{flex-shrink:0;color:var(--text-muted)}.btn-search,.btn-voice{width:38px;height:38px;border:0;background:0 0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s}.btn-search:hover,.btn-voice:hover{color:var(--primary)}.btn-voice.voice-active svg{color:#ef4444;animation:pulse-red 1.5s infinite}.category-section{margin-top:60px;margin-bottom:40px;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.category-header{font-size:1.3rem;font-weight:700;margin-bottom:25px;display:flex;align-items:center;gap:15px;border-bottom:2px solid var(--border-color);padding-bottom:12px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:24px;width:100%}.tool-card{position:relative;background:var(--white);border-radius:20px;padding:16px;text-decoration:none;color:var(--text-main);display:flex;gap:16px;border:1px solid var(--border-color);transition:all .4s cubic-bezier(.175,.885,.32,1.275);min-width:0;box-sizing:border-box}.tool-card:hover{transform:translateY(-8px);border-color:var(--primary);box-shadow:0 20px 40px rgba(0,0,0,.3)}.tool-card .tool-icon{width:54px;height:54px;border-radius:16px;flex-shrink:0;background:rgba(255,255,255,.03)}.tool-info{flex:1;min-width:0;padding-right:25px}.tool-info h3,.tool-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tool-info h3{font-size:1.05rem;font-weight:700;white-space:normal;word-wrap:break-word;overflow-wrap:anywhere;line-height:1.3;margin:0 0 4px}.tool-info p{margin:0;font-size:.85rem;color:var(--text-muted);line-height:1.5;height:3em}.btn-heart,.tool-card .tool-icon{display:flex;align-items:center;justify-content:center}.btn-heart{position:absolute;bottom:12px;right:12px;width:34px;height:34px;border:0;cursor:pointer;background:rgba(255,255,255,.05);border-radius:50%;color:var(--text-muted);transition:all .2s ease;z-index:5}.btn-heart:hover{transform:scale(1.1);background:rgba(239,68,68,.1)}.btn-heart.active{color:#ef4444}.btn-heart svg{pointer-events:none;width:1.1rem;height:1.1rem}.filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px;padding:2px}.chip{flex:0 0 auto;padding:5px 12px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:15px;font-size:.85rem;color:var(--text-main);cursor:pointer;white-space:nowrap;transition:all .2s ease}.chip.active,.chip:hover{border-color:var(--primary)}.chip:hover{color:var(--primary);background:rgba(59,130,246,.05)}.chip.active{background:var(--primary);color:#fff}.tool-icon-3d{display:flex;align-items:center;justify-content:center;width:80px;height:80px;flex-shrink:0}.tool-icon-3d img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.08))}@media (max-width:600px){.grid{grid-template-columns:1fr;gap:16px}header{padding:60px 20px 80px}header h1{font-size:2rem}.tool-card{padding:14px;gap:12px}.tool-card .tool-icon{width:48px;height:48px}}@media (max-width:340px){.search-container{padding:4px 4px 4px 12px}.btn-search,.btn-voice{width:34px}.tool-info h3{font-size:.95rem}}.hidden{display:none!important}