:root{--navy:#0b1830;--blue:#143b88;--yellow:#ffd000;--red:#f21c2b;--ink:#15213a;--muted:#6c7688;--line:#dde2ea}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Manrope,"Noto Sans Thai",sans-serif;color:var(--ink);background:#fff}body{min-height:100vh}.login-layout{min-height:100vh;display:grid;grid-template-columns:minmax(440px,42%) 1fr}.login-panel{padding:34px clamp(34px,5vw,78px) 24px;display:flex;flex-direction:column;background:linear-gradient(145deg,#fff 50%,#f6f8fc);position:relative;z-index:2}.login-header{display:flex;align-items:center;justify-content:space-between}.login-logo{width:180px;height:auto;display:block}.language-switch{display:flex;background:#eff2f7;padding:3px;border-radius:9px}.language-switch button{border:0;background:transparent;border-radius:7px;color:#7c8595;font-weight:800;font-size:11px;padding:7px 9px}.language-switch button.active{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(20,33,58,.1)}.login-content{width:min(100%,440px);margin:auto}.welcome-mark{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--yellow);color:var(--blue);font-weight:900;letter-spacing:-1px;box-shadow:0 10px 26px rgba(255,208,0,.28);margin-bottom:27px}.eyebrow{font-size:10px;letter-spacing:.15em;color:var(--blue);font-weight:800;margin:0 0 12px}.login-content h1{font-size:clamp(31px,3vw,43px);letter-spacing:-.045em;line-height:1.14;margin:0}.intro{color:var(--muted);font-size:14px;line-height:1.75;margin:14px 0 31px;max-width:410px}.login-content form{display:grid;gap:18px}.login-content label>span{display:block;font-weight:700;font-size:12px;margin-bottom:7px}.input-wrap{height:52px;border:1px solid var(--line);border-radius:11px;background:#fff;display:flex;align-items:center;padding:0 13px;transition:.18s;box-shadow:0 3px 12px rgba(20,33,58,.025)}.input-wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(20,59,136,.09)}.field-icon{color:#8d98aa;width:23px;font-size:18px}.input-wrap input{border:0;outline:0;background:transparent;height:100%;min-width:0;flex:1;color:var(--ink);font-size:14px}.show-password{border:0;background:none;color:#8b95a6;font-size:15px;padding:8px}.form-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}.remember{display:flex;align-items:center;gap:7px;cursor:pointer}.remember input{width:16px;height:16px;accent-color:var(--blue)}.remember span{margin:0!important;font-weight:500!important}.secure-note{display:flex;align-items:center;gap:6px}.secure-note i,.live-dot{width:7px;height:7px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 4px rgba(34,160,107,.12)}.login-button{height:52px;border:0;border-radius:11px;background:var(--blue);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 14px 28px rgba(20,59,136,.22);transition:.18s}.login-button:hover{background:#0d2f73;transform:translateY(-1px)}.login-button:disabled{opacity:.65;cursor:wait;transform:none}.login-button b{font-size:18px}.login-error{display:none;background:#fff1f2;border:1px solid #fecdd3;color:#b42318;border-radius:9px;padding:10px 12px;font-size:11px}.login-error.show{display:block}.support{display:flex;gap:10px;align-items:center;margin-top:30px;padding-top:22px;border-top:1px solid #e9ecf1}.support>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#edf1f8;color:var(--blue);font-weight:800}.support p,.support b,.support small{display:block;margin:0}.support b{font-size:11px}.support small{font-size:10px;color:var(--muted);margin-top:3px}.login-panel>footer{font-size:9px;color:#9aa3b2}.login-panel>footer span{margin:0 4px}.hero-panel{position:relative;overflow:hidden;background:var(--navy);min-height:100vh;color:#fff}.hero-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,19,43,.1),rgba(6,19,43,.2) 42%,rgba(4,14,32,.9)),linear-gradient(90deg,rgba(4,14,32,.15),transparent)}.hero-top{position:absolute;top:38px;right:42px;display:flex;gap:9px;align-items:center;background:rgba(6,22,50,.55);border:1px solid rgba(255,255,255,.16);padding:9px 13px;border-radius:20px;backdrop-filter:blur(10px);font-size:9px;font-weight:800;letter-spacing:.13em}.hero-copy{position:absolute;left:7%;right:7%;bottom:150px;max-width:710px}.hero-kicker{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--yellow)}.hero-copy h2{font-size:clamp(38px,4.5vw,70px);line-height:1.03;letter-spacing:-.045em;margin:14px 0 18px;text-shadow:0 3px 18px rgba(0,0,0,.2)}.hero-copy p{max-width:590px;font-size:13px;line-height:1.75;color:rgba(255,255,255,.78);margin:0}.hero-cards{position:absolute;left:7%;right:7%;bottom:34px;display:flex;gap:11px}.hero-cards article{min-width:190px;background:rgba(7,25,57,.62);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 16px;backdrop-filter:blur(14px);position:relative}.hero-cards small,.hero-cards strong{display:block}.hero-cards small{font-size:8px;letter-spacing:.13em;color:#b8c4d9}.hero-cards strong{font-size:12px;margin-top:5px}.hero-cards i{display:block;width:75px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--yellow) 72%,rgba(255,255,255,.15) 72%);margin-top:11px}.people{display:flex;margin-top:7px}.people span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--blue);font-size:8px;font-weight:900;border:2px solid #193869}.people span+span{margin-left:-5px;background:#fff;color:var(--blue)}
@media(max-width:900px){.login-layout{grid-template-columns:1fr}.hero-panel{display:none}.login-panel{min-height:100vh}.login-content{padding:42px 0}.login-panel>footer{text-align:center}}
@media(max-width:520px){.login-panel{padding:25px 22px 20px}.login-logo{width:150px}.login-content{padding:35px 0}.welcome-mark{margin-bottom:22px}.form-meta{align-items:flex-start;gap:10px;flex-direction:column}.login-content h1{font-size:31px}}