@font-face{font-family:Inter;src:url(/fonts/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2)format("woff2");font-style:normal;font-weight:100 900;font-display:swap}@font-face{font-family:Outfit;src:url(/fonts/1b99372b3eaef0c8-s.p.1gsd1jahc5dg_.woff2)format("woff2");font-style:normal;font-weight:100 900;font-display:swap}@font-face{font-family:JetBrains Mono;src:url(/fonts/70bc3e132a0a741e-s.p.3t6q91iet4nsy.woff2)format("woff2");font-style:normal;font-weight:100 800;font-display:swap}@font-face{font-family:Sarabun;src:url(/fonts/58fcc4ad15255874-s.p.023jaxb4i0-q4.woff2)format("woff2");font-style:normal;font-weight:300;font-display:swap;unicode-range:U+E00-E7F,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;src:url(/fonts/e12efafcac952e69-s.p.3gt1gw19188hm.woff2)format("woff2");font-style:normal;font-weight:300;font-display:swap;unicode-range:U+0-24F,U+2000-206F,U+20AC,U+2122}@font-face{font-family:Sarabun;src:url(/fonts/e9ed0bc71a38d6c1-s.p.2m2jj329378-j.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+E00-E7F,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;src:url(/fonts/a19976a16d351e92-s.p.41_1bbhnqcn3l.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0-24F,U+2000-206F,U+20AC,U+2122}@font-face{font-family:Sarabun;src:url(/fonts/3836391c10060ce4-s.p.2ub5ob4yff_mt.woff2)format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+E00-E7F,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;src:url(/fonts/6281857f0573b169-s.p.2ggoighzpvw-e.woff2)format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0-24F,U+2000-206F,U+20AC,U+2122}@font-face{font-family:Sarabun;src:url(/fonts/a0529e96a7862c0d-s.p.3w1e23hf7mhof.woff2)format("woff2");font-style:normal;font-weight:600;font-display:swap;unicode-range:U+E00-E7F,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;src:url(/fonts/22d7e241aeb09639-s.p.33ndw2snxq3le.woff2)format("woff2");font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0-24F,U+2000-206F,U+20AC,U+2122}@font-face{font-family:Sarabun;src:url(/fonts/0bbfe7d70ca362ab-s.p.18qb6f14hcpif.woff2)format("woff2");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+E00-E7F,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;src:url(/fonts/bcc136e7df79ae49-s.p.3vvwmya0_3z_s.woff2)format("woff2");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0-24F,U+2000-206F,U+20AC,U+2122}:root{--font-sans:"Inter", system-ui, sans-serif;--font-outfit:"Outfit", system-ui, sans-serif;--font-sarabun:"Sarabun", system-ui, sans-serif}
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--blue:#2563eb;--blue-dark:#1d4ed8;--violet:#7c3aed;--green:#059669;--amber:#d97706;--red:#dc2626;--bg:#eef4ff;--bg2:#f6f8ff;--surface:#fff;--surface2:#f2f6ff;--text:#0f172a;--text2:#475569;--text3:#94a3b8;--border:#2563eb24;--border2:#0f172a14;--shadow:0 10px 34px #0f172a14;--shadow-lg:0 18px 54px #2563eb29;--radius:8px;--radius-lg:28px;--transition:all .22s ease;--font-th:"Sarabun", system-ui, sans-serif;--font-en:"Outfit", system-ui, sans-serif}[data-theme=dark]{--bg:#07101f;--bg2:#0b1324;--surface:#111b2e;--surface2:#17233a;--text:#f1f5f9;--text2:#a7b4c7;--text3:#64748b;--border:#60a5fa2e;--border2:#ffffff14;--shadow:0 10px 34px #00000059;--shadow-lg:0 18px 54px #2563eb40}[data-lang=th] .en,[data-lang=en] .th{display:none!important}html{scroll-behavior:smooth}body{background:linear-gradient(180deg, #2563eb0d, transparent 44%), var(--bg);min-height:100vh;color:var(--text);font-family:var(--font-th);line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;background-image:linear-gradient(var(--border2) 1px, transparent 1px), linear-gradient(90deg, var(--border2) 1px, transparent 1px);opacity:.35;background-size:48px 48px;position:fixed;inset:0}.app-shell{z-index:1;min-height:100vh;position:relative}.navbar{z-index:50;-webkit-backdrop-filter:blur(18px)saturate(160%);backdrop-filter:blur(18px)saturate(160%);border-bottom:1px solid var(--border);background:#f6f8ffdb;align-items:center;gap:14px;height:64px;padding:0 28px;display:flex;position:sticky;top:0}[data-theme=dark] .navbar{background:#07101fdb}.nav-logo{color:var(--text);font-family:var(--font-en);letter-spacing:0;white-space:nowrap;align-items:center;gap:10px;font-size:17px;font-weight:800;text-decoration:none;display:inline-flex}.logo-icon{background:linear-gradient(135deg, var(--blue), var(--violet));border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;display:inline-flex;box-shadow:0 8px 22px #2563eb40}.nav-spacer{flex:1}.nav-pill{border:1px solid var(--border);background:var(--surface2);border-radius:999px;align-items:center;gap:2px;padding:3px;display:flex}.lang-opt{color:var(--text2);cursor:pointer;font-family:var(--font-th);background:0 0;border:0;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:700}.lang-opt.active{background:var(--blue);color:#fff;box-shadow:0 5px 14px #2563eb47}.theme-btn{border:1px solid var(--border);background:var(--surface2);width:38px;height:38px;color:var(--text);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.security-banner{z-index:3;background:linear-gradient(90deg,#05966914,#2563eb12);border-bottom:1px solid #05966929;padding:11px 24px;position:relative}.sec-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;max-width:1120px;margin:0 auto;display:flex}.sec-badge{color:var(--green);align-items:center;gap:8px;font-size:13px;font-weight:800;display:inline-flex}.sec-items{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.sec-item{color:var(--text2);align-items:center;gap:6px;font-size:12.5px;font-weight:600;display:inline-flex}.dot{border-radius:50%;width:7px;height:7px;display:inline-block}.dot.green{background:var(--green);box-shadow:0 0 8px var(--green)}.dot.blue{background:var(--blue);box-shadow:0 0 8px var(--blue)}.dot.amber{background:var(--amber);box-shadow:0 0 8px var(--amber)}.page-wrap{max-width:1120px;margin:0 auto;padding:36px 20px 72px}.hero-card{border-radius:var(--radius-lg);border:1px solid var(--border);background:linear-gradient(135deg, #ffffffe0, #eff6ffcc), var(--surface);min-height:410px;box-shadow:var(--shadow);grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);align-items:center;gap:34px;padding:44px;display:grid;position:relative;overflow:hidden}[data-theme=dark] .hero-card{background:linear-gradient(135deg, #111b2ef5, #1e293bbd), var(--surface)}.hero-card:after{content:"";pointer-events:none;background:radial-gradient(circle,#2563eb29,#0000 68%);border-radius:50%;width:440px;height:440px;position:absolute;bottom:-180px;right:-180px}.hero-copy{z-index:2;position:relative}.hero-badge{color:var(--green);background:#05966914;border:1px solid #05966933;border-radius:999px;align-items:center;margin-bottom:18px;padding:7px 14px;font-size:12.5px;font-weight:800;display:inline-flex}.hero-title{max-width:620px;font-family:var(--font-en);letter-spacing:0;color:var(--text);margin-bottom:18px;font-size:clamp(38px,5vw,62px);font-weight:900;line-height:1.05}.hero-title .accent{background:linear-gradient(135deg, var(--blue), var(--violet));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-left:.16em;display:inline-block}.hero-sub{max-width:570px;color:var(--text2);font-size:16px}.hero-visual{z-index:2;justify-content:center;align-items:center;min-height:300px;display:flex;position:relative}.visual-card{aspect-ratio:1/.9;background:linear-gradient(145deg,#07122a,#0e1f43);border:1px solid #60a5fa47;border-radius:24px;place-items:center;width:min(100%,360px);animation:5s ease-in-out infinite float;display:grid;position:relative;box-shadow:0 22px 70px #2563eb3d,inset 0 1px #ffffff14}.visual-card img{object-fit:contain;filter:drop-shadow(0 14px 32px #60a5fa33);width:78%;height:78%}.visual-pill{color:#0f172a;font-family:var(--font-en);background:#ffffffeb;border:1px solid #94a3b83d;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;position:absolute;box-shadow:0 10px 26px #0f172a29}.visual-pill.top{top:20px;right:18px}.visual-pill.bottom{bottom:22px;left:20px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px;display:grid}.tool-card{min-height:330px;color:var(--text);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);transition:var(--transition);border-radius:16px;flex-direction:column;gap:18px;padding:28px;text-decoration:none;display:flex;position:relative;overflow:hidden}.tool-card:before{content:"";opacity:0;transition:opacity .22s;position:absolute;inset:0}.tool-card.blue:before{background:linear-gradient(135deg,#2563eb14,#7c3aed0d)}.tool-card.green:before{background:linear-gradient(135deg,#05966914,#2563eb0d)}.tool-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.tool-card:hover:before{opacity:1}.tool-card.blue:hover{border-color:#2563eb6b}.tool-card.green:hover{border-color:#0596696b}.tool-head{z-index:2;align-items:center;gap:14px;display:flex;position:relative}.tool-icon-wrap{border-radius:14px;place-items:center;width:58px;height:58px;font-size:28px;display:grid}.tool-icon-wrap.blue{background:#2563eb1a}.tool-icon-wrap.green{background:#0596691a}.tool-label{text-transform:uppercase;color:var(--text3);letter-spacing:0;margin-bottom:3px;font-size:11px;font-weight:800}.tool-title{font-family:var(--font-en);letter-spacing:0;font-size:24px;font-weight:900;line-height:1.15}.tool-sub{z-index:2;color:var(--text2);flex:1;font-size:14.5px;position:relative}.tool-tags{z-index:2;flex-wrap:wrap;gap:7px;display:flex;position:relative}.tag{border:1px solid;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}.tag-blue{color:var(--blue);background:#2563eb14;border-color:#2563eb33}.tag-green{color:var(--green);background:#05966914;border-color:#05966933}.tool-cta{z-index:2;border-top:1px solid var(--border2);color:var(--blue);justify-content:space-between;align-items:center;padding-top:16px;font-weight:900;display:flex;position:relative}.tool-card.green .tool-cta{color:var(--green)}.cta-arrow{background:var(--surface2);width:34px;height:34px;transition:var(--transition);border-radius:50%;place-items:center;display:grid}.tool-card:hover .cta-arrow{transform:translate(4px)}.read-first{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px;display:grid}.read-card{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;padding:20px}.read-card.warning{background:linear-gradient(135deg,#d9770614,#ffffffd1);border-color:#d977063d}[data-theme=dark] .read-card.warning{background:linear-gradient(135deg,#d977061a,#111b2ed1)}.read-title{color:var(--text);font-family:var(--font-en);margin-bottom:8px;font-weight:900}.read-card p{color:var(--text2);font-size:14px}.footer{z-index:2;border-top:1px solid var(--border);background:var(--surface);color:var(--text2);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:18px 28px;font-size:12.5px;display:flex;position:relative}.footer a{color:var(--blue);font-weight:800;text-decoration:none}.footer a:hover{text-decoration:underline}@media (max-width:820px){.navbar{padding:0 18px}.nav-logo span:last-child{display:none}.security-banner{padding-inline:18px}.page-wrap{padding:24px 16px 56px}.hero-card{grid-template-columns:1fr;min-height:auto;padding:28px 22px}.hero-visual{min-height:220px}.visual-card{max-width:280px}.tools-grid,.read-first{grid-template-columns:1fr}}@media (max-width:520px){.navbar{gap:8px;padding:0 12px}.nav-logo{flex-shrink:0}.nav-pill{flex-shrink:0;padding:2px;display:flex}.lang-opt{min-width:34px;padding:5px 8px;font-size:12px}.theme-btn{flex-shrink:0;width:36px;height:36px}.security-banner{padding:9px 12px}.sec-inner{gap:7px}.sec-badge{width:100%}.sec-items{gap:5px 10px}.sec-item{font-size:11.5px;line-height:1.35}.page-wrap{padding-inline:12px}.hero-card{padding:24px 20px}.hero-title{font-size:34px}.tool-card{min-height:300px;padding:22px}.tool-icon-wrap{flex-shrink:0;width:50px;height:50px}.tool-title{font-size:22px}.footer{text-align:center;justify-content:center}}