:root{--blue:#1a73e8;--blue-700:#1557b0;--ink:#0b1220;--text:#1f2937;--muted:#6b7280;--bg:#f6f8fc;--card:#fff;--border:rgba(15,23,42,.10);--success:#34a853;--danger:#ea4335;--warning:#f9ab00;--special:#9c27b0;--gold:#ffd700;--shadow:0 10px 30px rgba(2,6,23,.08);--shadow-soft:0 8px 20px rgba(2,6,23,.06);--shadow-blue:0 14px 26px rgba(26,115,232,.22);--r16:16px;--r24:24px;--max:1180px}*{box-sizing:border-box}html{scrollbar-gutter:stable;overflow-y:scroll;scroll-behavior:smooth}body{margin:0;font-family:"Prompt",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);line-height:1.6;min-height:100vh;background:radial-gradient(1200px 700px at 15% 0%,rgba(26,115,232,.14),transparent 58%) , radial-gradient(900px 520px at 85% 10%,rgba(26,115,232,.11),transparent 55%) , var(--bg)}.container{width:min(var(--max),calc(100% - 32px));margin:0 auto}h1,h2,h3,h4,h5,h6{color:var(--ink);margin-top:0}h1{font-size:clamp(28px,4vw,46px);line-height:1.08;letter-spacing:-.4px;font-weight:700}h2{font-size:clamp(22px,2.6vw,30px);line-height:1.2;font-weight:600}h3{font-size:clamp(17px,1.8vw,20px);line-height:1.3;font-weight:600}.lead{font-size:clamp(15px,1.6vw,18px);line-height:1.7;max-width:60ch;color:rgba(31,41,55,.84)}.grad{background:linear-gradient(120deg,var(--blue),var(--special));-webkit-background-clip:text;background-clip:text;color:transparent}a{color:var(--blue);text-decoration:none;transition:color .15s}a:hover{color:var(--blue-700)}.material-symbols-rounded{font-variation-settings:'FILL' 0 , 'wght' 520 , 'opsz' 24;vertical-align:middle;user-select:none}.material-symbols-rounded.filled,.material-symbols-rounded.active{font-variation-settings:'FILL' 1 , 'wght' 520 , 'opsz' 24}.icon-sm{font-size:18px}.icon-md{font-size:24px}.icon-lg{font-size:32px}.icon-xl{font-size:44px}.topbar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);background:rgba(246,248,252,.76);border-bottom:1px solid rgba(15,23,42,.08)}.topbar-inner{display:flex;align-items:center;padding:12px 0;gap:16px}.nav{display:flex;gap:6px;margin-left:auto;align-items:center}.navlink{color:var(--text);font-weight:500;font-size:14px;padding:8px 12px;border-radius:999px}.navlink:hover{background:rgba(26,115,232,.08);color:var(--blue-700)}.logo{width:40px;height:40px;border-radius:14px;background:linear-gradient(145deg,#2563eb 0%,#1557b0 100%);box-shadow:0 10px 18px rgba(26,115,232,.25);display:grid;place-items:center;color:#fff;font-size:20px;flex-shrink:0}.brand{font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.3px}.brand small{display:block;font-size:11px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:-4px}.btn{border:1px solid rgba(26,115,232,.16);background:rgba(26,115,232,.08);color:var(--blue-700);padding:10px 16px;border-radius:999px;font-family:inherit;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;transition:transform .15s , box-shadow .15s , background .15s}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft);background:rgba(26,115,232,.12)}.btn.primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}.btn.primary:hover{background:var(--blue-700);color:#fff}.btn.danger{background:rgba(234,67,53,.08);border-color:rgba(234,67,53,.16);color:var(--danger)}.btn.success{background:rgba(52,168,83,.08);border-color:rgba(52,168,83,.16);color:var(--success)}.btn.ghost{background:transparent;border-color:transparent}.btn.large{padding:14px 26px;font-size:15px}.btn.small{padding:6px 10px;font-size:12px}.card{background:rgba(255,255,255,.86);border:1px solid rgba(15,23,42,.10);border-radius:var(--r24);box-shadow:var(--shadow);padding:24px}.card-compact{padding:16px}.card-spacious{padding:32px}.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid rgba(26,115,232,.18);background:rgba(255,255,255,.72);font-size:12px;font-weight:600}.badge.success{background:rgba(52,168,83,.1);border-color:rgba(52,168,83,.3);color:var(--success)}.badge.danger{background:rgba(234,67,53,.1);border-color:rgba(234,67,53,.3);color:var(--danger)}.badge.warning{background:rgba(249,171,0,.1);border-color:rgba(249,171,0,.3);color:#b07000}.badge.special{background:rgba(156,39,176,.1);border-color:rgba(156,39,176,.3);color:var(--special)}.badge.gold{background:rgba(249,171,0,.12);border-color:rgba(249,171,0,.35);color:#b07000}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(26,115,232,.18);background:rgba(255,255,255,.72);box-shadow:0 10px 24px rgba(2,6,23,.06);font-size:13px;font-weight:500;color:var(--blue-700)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}.section-head .tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}.section-head p{margin:6px 0 0;color:var(--muted);font-size:14px}.hero{padding:64px 0 40px;text-align:center}.hero h1{margin:0 auto 18px;max-width:18ch}.hero .lead{margin:0 auto 28px}.searchbar{display:flex;gap:8px;max-width:560px;margin:0 auto;align-items:center;background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:999px;padding:8px 8px 8px 20px;box-shadow:var(--shadow)}.searchbar input{border:none;outline:none;background:transparent;flex:1;font-family:inherit;font-size:15px;color:var(--text);padding:8px 0}.stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-top:36px}.stat b{display:block;font-size:26px;color:var(--ink);font-weight:700}.stat span{font-size:13px;color:var(--muted)}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.tool{background:rgba(255,255,255,.86);border:1px solid var(--border);border-radius:var(--r16);padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer;text-decoration:none;transition:transform .15s , box-shadow .15s , border-color .15s}.tool:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(26,115,232,.3)}.tool .ti{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:rgba(26,115,232,.1);color:var(--blue)}.tool .tt{font-weight:600;color:var(--ink);font-size:15px;line-height:1.25}.tool .ts{font-size:12px;color:var(--muted)}.tool.special .ti{background:rgba(156,39,176,.1);color:var(--special)}.tool.warning .ti{background:rgba(249,171,0,.12);color:#b07000}.cats{display:flex;gap:8px;flex-wrap:wrap}.cat{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid var(--border);background:rgba(255,255,255,.7);color:var(--text);cursor:pointer;transition:all .15s}.cat:hover{border-color:rgba(26,115,232,.3);color:var(--blue-700)}.cat.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:var(--shadow-blue)}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.plan{background:rgba(255,255,255,.86);border:1px solid var(--border);border-radius:var(--r24);padding:28px;display:flex;flex-direction:column;transition:transform .15s , box-shadow .15s}.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.plan.featured{border:2px solid var(--blue);box-shadow:var(--shadow-blue);position:relative}.plan.featured::before{content:"แนะนำ";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:12px;font-weight:700;padding:5px 16px;border-radius:999px;box-shadow:var(--shadow-blue)}.plan .pr{font-size:38px;font-weight:700;color:var(--ink);margin:12px 0 2px}.plan .pr small{font-size:15px;font-weight:500;color:var(--muted)}.plan ul{list-style:none;padding:0;margin:20px 0;flex:1}.plan ul li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px;color:var(--text)}.plan ul li .material-symbols-rounded{font-size:20px;color:var(--success)}.plan ul li.off{color:var(--muted)}.plan ul li.off .material-symbols-rounded{color:rgba(15,23,42,.25)}.progress{height:10px;background:rgba(15,23,42,.08);border-radius:999px;overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),rgba(26,115,232,.55));transition:width .3s ease}input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],textarea,select{font-family:inherit;font-size:15px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r16);background:rgba(255,255,255,.9);color:var(--text);width:100%;transition:border-color .15s , box-shadow .15s}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.12)}label{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:8px}.alert{padding:16px 20px;border-radius:var(--r16);display:flex;align-items:flex-start;gap:12px;margin:16px 0}.alert.info{background:rgba(26,115,232,.08);border-left:4px solid var(--blue);color:var(--blue-700)}.alert.success{background:rgba(52,168,83,.08);border-left:4px solid var(--success);color:#1e7e34}.alert.warning{background:rgba(249,171,0,.08);border-left:4px solid var(--warning);color:#b07000}.alert.danger{background:rgba(234,67,53,.08);border-left:4px solid var(--danger);color:#b71c1c}.dropzone{border:2px dashed rgba(26,115,232,.35);border-radius:var(--r24);padding:48px 24px;text-align:center;background:rgba(26,115,232,.04);cursor:pointer;transition:all .15s}.dropzone:hover{background:rgba(26,115,232,.08);border-color:var(--blue)}.ad{border:1px dashed rgba(15,23,42,.2);border-radius:var(--r16);padding:14px;text-align:center;color:var(--muted);font-size:13px;background:rgba(255,255,255,.5)}footer{margin-top:48px;border-top:1px solid var(--border);background:rgba(255,255,255,.5);padding:40px 0 28px}.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px}.foot-grid h4{font-size:14px;margin-bottom:14px}.foot-grid a{display:block;color:var(--muted);font-size:14px;padding:4px 0}.foot-grid a:hover{color:var(--blue)}.foot-bottom{margin-top:28px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px}.text-center{text-align:center}.text-muted{color:var(--muted)}.text-blue{color:var(--blue)}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-6{margin-top:48px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mb-6{margin-bottom:48px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:8px}.gap-2{gap:16px}.gap-3{gap:24px}.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr);gap:16px}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px}.grid-4{grid-template-columns:repeat(4,1fr);gap:16px}@keyframes pulse  { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }@keyframes fadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }.animate-pulse{animation:pulse 2s infinite}.animate-fadein{animation:fadeIn .3s ease-out}@media (max-width:860px){.price-grid{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.nav .navlink{display:none}}