:root{--cobalt:#243B80;--blue:#5278F5;--lemon:#FFD84D;--ivory:#F5F3EA;--r:20px}
html,body{margin:0;font-family:'Prompt','Noto Sans Thai',sans-serif;background:var(--ivory);color:var(--cobalt);overflow-x:hidden}
button{transition:all .2s;cursor:pointer}button:active{transform:scale(.96)}
.card{background:#fff;border-radius:var(--r);box-shadow:0 4px 18px rgba(36,59,128,.08)}
.btn{background:var(--cobalt);color:#fff;border-radius:16px;padding:.7rem 1.2rem;font-weight:600}
.btn:hover{background:var(--blue)}.btn.y{background:var(--lemon);color:var(--cobalt)}
.inp{width:100%;border:2px solid #dfe5fb;border-radius:14px;padding:.65rem .9rem;outline:none;background:#fff}.inp:focus{border-color:var(--blue)}
.chip{padding:.4rem .9rem;border-radius:99px;background:#fff;border:2px solid #dfe5fb;white-space:nowrap;font-size:.85rem}
.chip.on{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.sheet-bg{position:fixed;inset:0;background:rgba(20,30,70,.5);z-index:60;animation:fi .2s}
.sheet{position:fixed;z-index:61;background:#fff;max-height:88vh;overflow:auto;animation:su .25s ease-out;left:0;right:0;bottom:0;border-radius:28px 28px 0 0;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.sheet.side{top:0;bottom:0;left:auto;width:min(420px,100%);height:100vh;height:100dvh;max-height:none;border-radius:28px 0 0 28px;animation:sr .25s ease-out}
.sheet.chat{padding:0;display:flex;flex-direction:column;overflow:hidden}
@media(max-width:480px){.sheet.side{border-radius:0;width:100%}}
@keyframes fi{from{opacity:0}}@keyframes su{from{transform:translateY(40px);opacity:0}}@keyframes sr{from{transform:translateX(40px);opacity:0}}
@keyframes sk{0%{background-position:-200px 0}100%{background-position:200px 0}}
.sk{height:110px;border-radius:20px;background:linear-gradient(90deg,#e9e6d8 25%,#f5f3ea 50%,#e9e6d8 75%);background-size:400px;animation:sk 1s infinite}
.spin{animation:sp .6s linear}@keyframes sp{to{transform:rotate(360deg)}}
.pop{animation:pp .4s}@keyframes pp{50%{transform:scale(1.25)}}
.noscroll::-webkit-scrollbar{display:none}.noscroll{scrollbar-width:none}
.nav-i{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;padding:8px 0;color:#7d8ab8}.nav-i.on{color:var(--cobalt);font-weight:600}
.nav-i.on i{color:var(--blue)}