:root{--blue:#1457d9;--blue2:#0d43ad;--navy:#10254a;--text:#17243a;--muted:#69768a;--line:#e5eaf1;--bg:#f5f7fb;--card:#fff;--green:#15966d;--yellow:#f5b72d;--shadow:0 12px 35px rgba(24,47,87,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,'Noto Sans Thai','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.wrap{max-width:1240px;width:calc(100% - 36px);margin:auto}
.topbar{height:34px;background:#0e1f3c;color:#cbd6e8;font-size:11px}.topbar .wrap{height:100%;display:flex;justify-content:space-between;align-items:center}.toplinks{display:flex;gap:20px}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.nav{height:76px;display:flex;align-items:center;gap:35px}.logo{font-size:25px;font-weight:900;letter-spacing:-1.2px;white-space:nowrap}.logo i{font-style:normal;color:var(--blue)}.logo small{font-size:inherit}.navlinks{display:flex;align-items:center;gap:27px;flex:1}.navlinks a{font-size:13px;font-weight:700;color:#536075}.navlinks a:hover{color:var(--blue)}.right{display:flex;gap:10px;align-items:center}.lang{border:1px solid var(--line);background:#fff;padding:9px;border-radius:8px;font-size:12px}.login{font-size:13px;font-weight:750;padding:10px}.post{background:var(--blue);color:#fff;border:0;padding:11px 17px;border-radius:8px;font-weight:800;cursor:pointer}a.post{display:inline-block}.menu{display:none;border:0;background:none;font-size:25px}
.hero{background:linear-gradient(120deg,#0f397e,#1558d7 58%,#2874ec);color:#fff;padding:58px 0 66px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:520px;height:520px;border:100px solid rgba(255,255,255,.035);border-radius:50%;right:-150px;top:-250px}.hero .wrap{position:relative;z-index:1}.crumb{font-size:11px;color:#bcd0f5;margin-bottom:15px}.hero h1{font-size:43px;line-height:1.1;letter-spacing:-1.5px;text-align:center;margin:0;font-weight:900}.hero h1 span{color:#a9cbff}.hero p{text-align:center;color:#d5e2fa;font-size:15px;margin:13px auto 28px}.search{background:#fff;border-radius:12px;padding:8px;max-width:1030px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;box-shadow:0 16px 45px rgba(0,20,70,.24)}.sf{display:flex;align-items:center;gap:10px;padding:8px 15px;border-right:1px solid var(--line)}.sf b{font-size:18px;color:var(--blue)}.sf label{display:block;font-size:9px;text-transform:uppercase;font-weight:800;color:#8993a3;letter-spacing:.6px}.sf input,.sf select{border:0;outline:0;width:100%;font-size:13px;font-weight:650;color:var(--text);background:#fff;margin-top:2px}.search button{border:0;background:var(--blue);color:#fff;border-radius:9px;padding:0 24px;font-weight:850;cursor:pointer}.heroStats{display:flex;justify-content:center;gap:70px;margin-top:27px}.heroStats div{text-align:center}.heroStats strong{font-size:20px}.heroStats small{display:block;color:#c8d8f3;font-size:10px;margin-top:2px}
main{padding:42px 0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.heading h2{font-size:21px;margin:0;letter-spacing:-.4px}.heading p{font-size:12px;color:var(--muted);margin:4px 0 0}.all{font-size:12px;color:var(--blue);font-weight:800}
.filters{display:flex;gap:8px;margin-bottom:14px;overflow:auto}.filter{background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:8px;font-size:11px;font-weight:700;white-space:nowrap;color:#566276}.filter.active{background:#eaf1ff;color:var(--blue);border-color:#cbdcff}
.jobs{display:flex;flex-direction:column;gap:10px}.job{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;grid-template-columns:52px 1fr auto;gap:15px;box-shadow:0 3px 12px rgba(20,40,80,.025);transition:.18s}.job:hover{border-color:#c8d6f4;box-shadow:var(--shadow);transform:translateY(-1px)}.jlogo{width:52px;height:52px;border-radius:11px;background:#f0f4fa;display:grid;place-items:center;font-size:16px;font-weight:900;color:var(--blue);border:1px solid #e3e9f2}.job h3{font-size:15px;margin:0 0 3px}.company{font-size:11px;color:#687589;font-weight:650}.verified{color:var(--blue);font-size:10px}.meta{display:flex;flex-wrap:wrap;gap:13px;margin-top:9px;color:#707c8e;font-size:10.5px}.tags{margin-top:9px;display:flex;gap:5px;flex-wrap:wrap}.tag{background:#f3f6fa;color:#59677a;border-radius:5px;padding:4px 7px;font-size:9px;font-weight:750}.new{background:#e9f8f3;color:var(--green)}.salary{font-size:11px;color:#253a61;font-weight:800;margin-top:10px}.save{background:none;border:0;color:#9ca7b7;font-size:21px;cursor:pointer}.save.active{color:#ed4a5d}.apply{display:block;color:var(--blue);font-size:10px;font-weight:850;text-align:right;margin-top:12px}
.sidecard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;margin-bottom:15px}.sidecard h3{font-size:15px;margin:0 0 15px}.quick{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0}.quick:first-of-type{border-top:0}.quick span{font-size:11px;color:#59667a}.quick b{font-size:11px}.sideblue{background:#112d5c;color:#fff;border:0;padding:22px}.sideblue h3{font-size:19px;margin-bottom:7px}.sideblue p{color:#c7d4e9;font-size:11px;line-height:1.6}.sideblue button,.sideblue a.btn,.banner a.btn{background:#fff;color:var(--blue);border:0;padding:10px 14px;border-radius:8px;font-weight:850;font-size:11px;margin-top:7px;display:inline-block}.catlist a{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px;color:#4f5c70}.catlist a:last-child{border:0}.catlist span{color:#8994a4}
.section{margin-top:48px}.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.catcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:19px;transition:.18s}.catcard:hover,.co:hover,.loc:hover{border-color:#c8d6f4;box-shadow:var(--shadow)}.catcard .icon{width:42px;height:42px;border-radius:10px;background:#edf3ff;color:var(--blue);display:grid;place-items:center;font-size:19px;margin-bottom:12px}.catcard h3{font-size:13px;margin:0 0 3px}.catcard p{font-size:10px;color:var(--muted);margin:0}.companies{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.co{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center}.coLogo{width:52px;height:52px;border-radius:12px;background:#f1f4f8;margin:0 auto 10px;display:grid;place-items:center;color:var(--blue);font-weight:900}.co strong{font-size:11px;display:block}.co span{font-size:9px;color:var(--muted);display:block;margin-top:4px}.banner{margin-top:48px;background:linear-gradient(105deg,#172f5b,#214c9c);color:#fff;border-radius:18px;padding:35px 42px;display:flex;align-items:center;justify-content:space-between}.banner h2{font-size:24px;margin:0 0 5px}.banner p{font-size:12px;color:#c8d5ea;margin:0}.banner button{border:0;background:#fff;color:var(--blue);padding:12px 19px;border-radius:8px;font-weight:850;font-size:11px}
.locations{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.loc{background:#fff;border:1px solid var(--line);padding:14px;border-radius:9px}.loc strong{font-size:11px}.loc span{display:block;font-size:9px;color:var(--muted);margin-top:3px}
footer{background:#fff;border-top:1px solid var(--line);margin-top:55px;padding:43px 0 20px}.foot{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:45px}.foot p{font-size:11px;color:var(--muted);max-width:280px;line-height:1.7}.foot h4{font-size:11px;margin:0 0 13px}.foot ul{list-style:none;padding:0;margin:0}.foot li{margin:8px 0}.foot a{font-size:10px;color:#687589}.bottom{border-top:1px solid var(--line);margin-top:28px;padding-top:17px;display:flex;justify-content:space-between;font-size:9px;color:#8993a2}
/* inner pages */
main.page{max-width:900px;padding:34px 0 44px}main.wide{max-width:1180px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:10px 0}.flash{background:#fef9c3;padding:10px 14px;border-radius:10px}
main.page label{display:block;margin:10px 0;font-weight:700;font-size:13px}main.page input,main.page select,main.page textarea{display:block;width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--text)}main.page input[type=checkbox]{display:inline;width:auto}
main.page form button,.btn{background:var(--blue);color:#fff;border:0;padding:10px 20px;border-radius:9px;font-weight:800;cursor:pointer;display:inline-block}button.s{padding:3px 12px!important;margin-left:8px;font-size:12px;border-radius:7px!important}
.inline{display:flex;gap:8px;margin:12px 0 18px}.inline select{width:auto!important;min-width:240px}.art{max-width:760px}.art img{max-width:100%;border-radius:12px}.art h1{margin:6px 0 14px}.pimg{width:100%;height:140px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px}.tabs a{padding:8px 16px;border-radius:10px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:13px}.tabs a.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--muted)}.kpi b{display:block;font-size:30px;color:var(--blue)}.adm textarea{min-height:200px}
@media(max-width:900px){.navlinks{display:none;position:absolute;top:70px;left:18px;right:18px;background:#fff;padding:16px;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}.navlinks.open{display:flex}.menu{display:block}.right .login,.right .post{display:none}.search{grid-template-columns:1fr 1fr}.sf:nth-child(2){border-right:0}.search button{height:48px;margin-top:5px}.layout{grid-template-columns:1fr}.cards4{grid-template-columns:repeat(2,1fr)}.companies{grid-template-columns:repeat(3,1fr)}.locations{grid-template-columns:repeat(3,1fr)}.side{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sidecard{margin:0}.sideblue{grid-column:1/-1}}
@media(max-width:580px){.wrap{width:calc(100% - 26px)}.topbar{display:none}.nav{height:67px}.hero{padding:42px 0}.hero h1{font-size:32px}.search{grid-template-columns:1fr}.sf{border-right:0;border-bottom:1px solid var(--line)}.search button{height:48px}.heroStats{gap:20px}.heroStats strong{font-size:15px}.heroStats small{font-size:8px}.job{grid-template-columns:43px 1fr auto;padding:14px;gap:10px}.jlogo{width:43px;height:43px}.job h3{font-size:13px}.meta{gap:7px}.side{display:block}.sidecard{margin-bottom:13px}.cards4{grid-template-columns:1fr 1fr}.companies{grid-template-columns:1fr 1fr}.locations{grid-template-columns:1fr 1fr}.banner{display:block;padding:28px}.banner a.btn{margin-top:18px}.foot{grid-template-columns:1fr 1fr;gap:28px}.footBrand{grid-column:1/-1}.bottom{display:block}.bottom span{display:block;margin-top:5px}.inline{flex-wrap:wrap}}