@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap";:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);animation-fill-mode:both}.animate__animated.animate__infinite{animation-iteration-count:infinite}.animate__animated.animate__repeat-1{animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animate__animated.animate__repeat-3{animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animate__animated.animate__delay-1s{animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animate__animated.animate__delay-3s{animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animate__animated.animate__delay-4s{animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animate__animated.animate__delay-5s{animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animate__animated.animate__faster{animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animate__animated.animate__fast{animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*.8);animation-duration:calc(var(--animate-duration)*.8)}.animate__animated.animate__slow{animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animate__animated.animate__slower{animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animate__animated{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.animate__animated[class*=Out]{opacity:0}}@keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translateY(-30px)scaleY(1.1)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translateY(-15px)scaleY(1.05)}80%{transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)scaleY(.95)}90%{transform:translateY(-4px)scaleY(1.02)}}.animate__bounce{transform-origin:bottom;animation-name:bounce}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.animate__pulse{animation-name:pulse;animation-timing-function:ease-in-out}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale(1.25,.75)}40%{transform:scale(.75,1.25)}50%{transform:scale(1.15,.85)}65%{transform:scale(.95,1.05)}75%{transform:scale(1.05,.95)}to{transform:scaleX(1)}}.animate__rubberBand{animation-name:rubberBand}@keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.animate__shakeX{animation-name:shakeX}@keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translateY(-10px)}20%,40%,60%,80%{transform:translateY(10px)}}.animate__shakeY{animation-name:shakeY}@keyframes headShake{0%{transform:translate(0)}6.5%{transform:translate(-6px)rotateY(-9deg)}18.5%{transform:translate(5px)rotateY(7deg)}31.5%{transform:translate(-3px)rotateY(-5deg)}43.5%{transform:translate(2px)rotateY(3deg)}50%{transform:translate(0)}}.animate__headShake{animation-name:headShake;animation-timing-function:ease-in-out}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0)}}.animate__swing{transform-origin:top;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9)rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1)rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1)rotate(-3deg)}to{transform:scaleX(1)}}.animate__tada{animation-name:tada}@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate(-25%)rotate(-5deg)}30%{transform:translate(20%)rotate(3deg)}45%{transform:translate(-15%)rotate(-3deg)}60%{transform:translate(10%)rotate(2deg)}75%{transform:translate(-5%)rotate(-1deg)}to{transform:translateZ(0)}}.animate__wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skew(-12.5deg)skewY(-12.5deg)}33.3%{transform:skew(6.25deg)skewY(6.25deg)}44.4%{transform:skew(-3.125deg)skewY(-3.125deg)}55.5%{transform:skew(1.5625deg)skewY(1.5625deg)}66.6%{transform:skew(-.78125deg)skewY(-.78125deg)}77.7%{transform:skew(.390625deg)skewY(.390625deg)}88.8%{transform:skew(-.195313deg)skewY(-.195313deg)}}.animate__jello{transform-origin:50%;animation-name:jello}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.animate__heartBeat{animation-name:heartBeat;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);animation-timing-function:ease-in-out}@keyframes backInDown{0%{opacity:.7;transform:translateY(-1200px)scale(.7)}80%{opacity:.7;transform:translateY(0)scale(.7)}to{opacity:1;transform:scale(1)}}.animate__backInDown{animation-name:backInDown}@keyframes backInLeft{0%{opacity:.7;transform:translate(-2000px)scale(.7)}80%{opacity:.7;transform:translate(0)scale(.7)}to{opacity:1;transform:scale(1)}}.animate__backInLeft{animation-name:backInLeft}@keyframes backInRight{0%{opacity:.7;transform:translate(2000px)scale(.7)}80%{opacity:.7;transform:translate(0)scale(.7)}to{opacity:1;transform:scale(1)}}.animate__backInRight{animation-name:backInRight}@keyframes backInUp{0%{opacity:.7;transform:translateY(1200px)scale(.7)}80%{opacity:.7;transform:translateY(0)scale(.7)}to{opacity:1;transform:scale(1)}}.animate__backInUp{animation-name:backInUp}@keyframes backOutDown{0%{opacity:1;transform:scale(1)}20%{opacity:.7;transform:translateY(0)scale(.7)}to{opacity:.7;transform:translateY(700px)scale(.7)}}.animate__backOutDown{animation-name:backOutDown}@keyframes backOutLeft{0%{opacity:1;transform:scale(1)}20%{opacity:.7;transform:translate(0)scale(.7)}to{opacity:.7;transform:translate(-2000px)scale(.7)}}.animate__backOutLeft{animation-name:backOutLeft}@keyframes backOutRight{0%{opacity:1;transform:scale(1)}20%{opacity:.7;transform:translate(0)scale(.7)}to{opacity:.7;transform:translate(2000px)scale(.7)}}.animate__backOutRight{animation-name:backOutRight}@keyframes backOutUp{0%{opacity:1;transform:scale(1)}20%{opacity:.7;transform:translateY(0)scale(.7)}to{opacity:.7;transform:translateY(-700px)scale(.7)}}.animate__backOutUp{animation-name:backOutUp}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.animate__bounceIn{animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*.75);animation-duration:calc(var(--animate-duration)*.75);animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translateY(-3000px)scaleY(3)}60%{opacity:1;transform:translateY(25px)scaleY(.9)}75%{transform:translateY(-10px)scaleY(.95)}90%{transform:translateY(5px)scaleY(.985)}to{transform:translateZ(0)}}.animate__bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate(-3000px)scaleX(3)}60%{opacity:1;transform:translate(25px)scaleX(1)}75%{transform:translate(-10px)scaleX(.98)}90%{transform:translate(5px)scaleX(.995)}to{transform:translateZ(0)}}.animate__bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate(3000px)scaleX(3)}60%{opacity:1;transform:translate(-25px)scaleX(1)}75%{transform:translate(10px)scaleX(.98)}90%{transform:translate(-5px)scaleX(.995)}to{transform:translateZ(0)}}.animate__bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translateY(3000px)scaleY(5)}60%{opacity:1;transform:translateY(-20px)scaleY(.9)}75%{transform:translateY(10px)scaleY(.95)}90%{transform:translateY(-5px)scaleY(.985)}to{transform:translateZ(0)}}.animate__bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.animate__bounceOut{animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*.75);animation-duration:calc(var(--animate-duration)*.75);animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translateY(10px)scaleY(.985)}40%,45%{opacity:1;transform:translateY(-20px)scaleY(.9)}to{opacity:0;transform:translateY(2000px)scaleY(3)}}.animate__bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate(20px)scaleX(.9)}to{opacity:0;transform:translate(-2000px)scaleX(2)}}.animate__bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate(-20px)scaleX(.9)}to{opacity:0;transform:translate(2000px)scaleX(2)}}.animate__bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translateY(-10px)scaleY(.985)}40%,45%{opacity:1;transform:translateY(20px)scaleY(.9)}to{opacity:0;transform:translateY(-2000px)scaleY(3)}}.animate__bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate(-2000px)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate(2000px)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeInTopLeft{0%{opacity:0;transform:translate(-100%,-100%)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopLeft{animation-name:fadeInTopLeft}@keyframes fadeInTopRight{0%{opacity:0;transform:translate(100%,-100%)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopRight{animation-name:fadeInTopRight}@keyframes fadeInBottomLeft{0%{opacity:0;transform:translate(-100%,100%)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomLeft{animation-name:fadeInBottomLeft}@keyframes fadeInBottomRight{0%{opacity:0;transform:translate(100%,100%)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomRight{animation-name:fadeInBottomRight}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translateY(100%)}}.animate__fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translateY(2000px)}}.animate__fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate(-100%)}}.animate__fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate(-2000px)}}.animate__fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate(100%)}}.animate__fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate(2000px)}}.animate__fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translateY(-100%)}}.animate__fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translateY(-2000px)}}.animate__fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate(-100%,-100%)}}.animate__fadeOutTopLeft{animation-name:fadeOutTopLeft}@keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate(100%,-100%)}}.animate__fadeOutTopRight{animation-name:fadeOutTopRight}@keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate(100%,100%)}}.animate__fadeOutBottomRight{animation-name:fadeOutBottomRight}@keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate(-100%,100%)}}.animate__fadeOutBottomLeft{animation-name:fadeOutBottomLeft}@keyframes flip{0%{animation-timing-function:ease-out;transform:perspective(400px)scaleX(1)translateZ(0)rotateY(-1turn)}40%{animation-timing-function:ease-out;transform:perspective(400px)scaleX(1)translateZ(150px)rotateY(-190deg)}50%{animation-timing-function:ease-in;transform:perspective(400px)scaleX(1)translateZ(150px)rotateY(-170deg)}80%{animation-timing-function:ease-in;transform:perspective(400px)scale3d(.95,.95,.95)translateZ(0)rotateY(0)}to{animation-timing-function:ease-in;transform:perspective(400px)scaleX(1)translateZ(0)rotateY(0)}}.animate__animated.animate__flip{backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{opacity:0;animation-timing-function:ease-in;transform:perspective(400px)rotateX(90deg)}40%{animation-timing-function:ease-in;transform:perspective(400px)rotateX(-20deg)}60%{opacity:1;transform:perspective(400px)rotateX(10deg)}80%{transform:perspective(400px)rotateX(-5deg)}to{transform:perspective(400px)}}.animate__flipInX{animation-name:flipInX;backface-visibility:visible!important}@keyframes flipInY{0%{opacity:0;animation-timing-function:ease-in;transform:perspective(400px)rotateY(90deg)}40%{animation-timing-function:ease-in;transform:perspective(400px)rotateY(-20deg)}60%{opacity:1;transform:perspective(400px)rotateY(10deg)}80%{transform:perspective(400px)rotateY(-5deg)}to{transform:perspective(400px)}}.animate__flipInY{animation-name:flipInY;backface-visibility:visible!important}@keyframes flipOutX{0%{transform:perspective(400px)}30%{opacity:1;transform:perspective(400px)rotateX(-20deg)}to{opacity:0;transform:perspective(400px)rotateX(90deg)}}.animate__flipOutX{animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*.75);animation-duration:calc(var(--animate-duration)*.75);animation-name:flipOutX;backface-visibility:visible!important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{opacity:1;transform:perspective(400px)rotateY(-15deg)}to{opacity:0;transform:perspective(400px)rotateY(90deg)}}.animate__flipOutY{animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*.75);animation-duration:calc(var(--animate-duration)*.75);animation-name:flipOutY;backface-visibility:visible!important}@keyframes lightSpeedInRight{0%{opacity:0;transform:translate(100%)skew(-30deg)}60%{opacity:1;transform:skew(20deg)}80%{transform:skew(-5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInRight{animation-name:lightSpeedInRight;animation-timing-function:ease-out}@keyframes lightSpeedInLeft{0%{opacity:0;transform:translate(-100%)skew(30deg)}60%{opacity:1;transform:skew(-20deg)}80%{transform:skew(5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInLeft{animation-name:lightSpeedInLeft;animation-timing-function:ease-out}@keyframes lightSpeedOutRight{0%{opacity:1}to{opacity:0;transform:translate(100%)skew(30deg)}}.animate__lightSpeedOutRight{animation-name:lightSpeedOutRight;animation-timing-function:ease-in}@keyframes lightSpeedOutLeft{0%{opacity:1}to{opacity:0;transform:translate(-100%)skew(-30deg)}}.animate__lightSpeedOutLeft{animation-name:lightSpeedOutLeft;animation-timing-function:ease-in}@keyframes rotateIn{0%{opacity:0;transform:rotate(-200deg)}to{opacity:1;transform:translateZ(0)}}.animate__rotateIn{transform-origin:50%;animation-name:rotateIn}@keyframes rotateInDownLeft{0%{opacity:0;transform:rotate(-45deg)}to{opacity:1;transform:translateZ(0)}}.animate__rotateInDownLeft{transform-origin:0 100%;animation-name:rotateInDownLeft}@keyframes rotateInDownRight{0%{opacity:0;transform:rotate(45deg)}to{opacity:1;transform:translateZ(0)}}.animate__rotateInDownRight{transform-origin:100% 100%;animation-name:rotateInDownRight}@keyframes rotateInUpLeft{0%{opacity:0;transform:rotate(45deg)}to{opacity:1;transform:translateZ(0)}}.animate__rotateInUpLeft{transform-origin:0 100%;animation-name:rotateInUpLeft}@keyframes rotateInUpRight{0%{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:translateZ(0)}}.animate__rotateInUpRight{transform-origin:100% 100%;animation-name:rotateInUpRight}@keyframes rotateOut{0%{opacity:1}to{opacity:0;transform:rotate(200deg)}}.animate__rotateOut{transform-origin:50%;animation-name:rotateOut}@keyframes rotateOutDownLeft{0%{opacity:1}to{opacity:0;transform:rotate(45deg)}}.animate__rotateOutDownLeft{transform-origin:0 100%;animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{0%{opacity:1}to{opacity:0;transform:rotate(-45deg)}}.animate__rotateOutDownRight{transform-origin:100% 100%;animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{0%{opacity:1}to{opacity:0;transform:rotate(-45deg)}}.animate__rotateOutUpLeft{transform-origin:0 100%;animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{0%{opacity:1}to{opacity:0;transform:rotate(90deg)}}.animate__rotateOutUpRight{transform-origin:100% 100%;animation-name:rotateOutUpRight}@keyframes hinge{0%{animation-timing-function:ease-in-out}20%,60%{animation-timing-function:ease-in-out;transform:rotate(80deg)}40%,80%{opacity:1;animation-timing-function:ease-in-out;transform:rotate(60deg)}to{opacity:0;transform:translateY(700px)}}.animate__hinge{animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);transform-origin:0 0;animation-name:hinge}@keyframes jackInTheBox{0%{opacity:0;transform-origin:bottom;transform:scale(.1)rotate(30deg)}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.animate__jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate(-100%)rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.animate__rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate(100%)rotate(120deg)}}.animate__rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.animate__zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;animation-timing-function:cubic-bezier(.55,.055,.675,.19);transform:scale3d(.1,.1,.1)translateY(-1000px)}60%{opacity:1;animation-timing-function:cubic-bezier(.175,.885,.32,1);transform:scale3d(.475,.475,.475)translateY(60px)}}.animate__zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;animation-timing-function:cubic-bezier(.55,.055,.675,.19);transform:scale3d(.1,.1,.1)translate(-1000px)}60%{opacity:1;animation-timing-function:cubic-bezier(.175,.885,.32,1);transform:scale3d(.475,.475,.475)translate(10px)}}.animate__zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;animation-timing-function:cubic-bezier(.55,.055,.675,.19);transform:scale3d(.1,.1,.1)translate(1000px)}60%{opacity:1;animation-timing-function:cubic-bezier(.175,.885,.32,1);transform:scale3d(.475,.475,.475)translate(-10px)}}.animate__zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;animation-timing-function:cubic-bezier(.55,.055,.675,.19);transform:scale3d(.1,.1,.1)translateY(1000px)}60%{opacity:1;animation-timing-function:cubic-bezier(.175,.885,.32,1);transform:scale3d(.475,.475,.475)translateY(-60px)}}.animate__zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.animate__zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;animation-timing-function:cubic-bezier(.55,.055,.675,.19);transform:scale3d(.475,.475,.475)translateY(-60px)}to{opacity:0;animation-timing-function:cubic-bezier(.175,.885,.32,1);transform:scale3d(.1,.1,.1)translateY(2000px)}}.animate__zoomOutDown{transform-origin:bottom;animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475)translate(42px)}to{opacity:0;transform:scale(.1)translate(-2000px)}}.animate__zoomOutLeft{transform-origin:0;animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475)translate(-42px)}to{opacity:0;transform:scale(.1)translate(2000px)}}.animate__zoomOutRight{transform-origin:100%;animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;animation-timing-function:cubic-bezier(.55,.055,.675,.19);transform:scale3d(.475,.475,.475)translateY(60px)}to{opacity:0;animation-timing-function:cubic-bezier(.175,.885,.32,1);transform:scale3d(.1,.1,.1)translateY(-2000px)}}.animate__zoomOutUp{transform-origin:bottom;animation-name:zoomOutUp}@keyframes slideInDown{0%{visibility:visible;transform:translateY(-100%)}to{transform:translateZ(0)}}.animate__slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{visibility:visible;transform:translate(-100%)}to{transform:translateZ(0)}}.animate__slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{visibility:visible;transform:translate(100%)}to{transform:translateZ(0)}}.animate__slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{visibility:visible;transform:translateY(100%)}to{transform:translateZ(0)}}.animate__slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translateY(100%)}}.animate__slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate(-100%)}}.animate__slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate(100%)}}.animate__slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translateY(-100%)}}.animate__slideOutUp{animation-name:slideOutUp}:root{--ink:#173a5f;--muted:#687f95;--paper:#f3f4f4;--line:#cbd8e5;--orange:#d97858;--green:#2f78b7;--yellow:#f2c95c;--radius:8px;color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Avenir Next,Helvetica Neue,sans-serif}:root[data-theme=dark]{--ink:#e4f0fc;--muted:#91abc3;--paper:#2c2c2c;--line:#4a4a4a;--orange:#ffb08d;--green:#79b9ed;--yellow:#4f6a8a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--paper);min-width:320px;margin:0;font-family:Noto Sans Thai,Avenir Next,Helvetica Neue,sans-serif;font-size:15px;line-height:1.5}button,input,select{font:inherit}button{cursor:pointer}#app{min-height:100svh}.app-shell{width:min(1120px,100%);margin:auto;padding:0 46px 40px}.topbar{border-bottom:1px solid var(--line);letter-spacing:.7px;justify-content:space-between;align-items:center;height:76px;font-size:13px;display:flex}.topbar-tools{align-items:center;gap:18px;display:flex}.theme-toggle{border:1px solid var(--line);width:34px;height:34px;color:var(--ink);background:0 0;border-radius:50%;padding:0}.theme-toggle .fa-duotone{--fa-primary-color:var(--ink);--fa-secondary-color:var(--green);--fa-secondary-opacity:.6}.brand{align-items:center;gap:10px;font-weight:700;display:flex}.brand-mark .fa-duotone{--fa-primary-color:#eef6ff;--fa-secondary-color:#f2c95c;--fa-secondary-opacity:1}.brand-mark{background:var(--ink);color:#eef6ff;border-radius:50%;place-items:center;width:27px;height:27px;font-size:15px;display:grid}.topbar-date,.eyebrow,.label{color:var(--muted);letter-spacing:1.6px;text-transform:uppercase;font-size:10px}.intro{justify-content:space-between;align-items:end;padding:57px 0 42px;display:flex}.intro h1{letter-spacing:-3px;margin:13px 0 0;font-size:clamp(42px,6vw,72px);font-weight:500;line-height:.98}.intro h1 em{color:var(--orange);font-style:normal}.add-button{background:var(--ink);color:#fff;border-radius:var(--radius);border:0;padding:13px 19px;font-size:13px}.add-button .fa-duotone{--fa-primary-color:#fff;--fa-secondary-color:var(--green);--fa-secondary-opacity:1;margin-right:8px}.month-row{border-block:1px solid var(--line);display:flex}.month-tab{color:var(--muted);border:0;border-right:1px solid var(--line);text-align:left;background:0 0;min-width:137px;padding:18px 30px}.month-tab span{letter-spacing:1px;font-size:15px;font-weight:700;display:block}.month-tab small{margin-top:4px;font-size:11px;display:block}.month-tab.active{color:var(--ink);box-shadow:inset 0 -3px var(--orange)}.floating-add{z-index:10;border-radius:var(--radius);background:var(--green);color:#fff;border:0;align-items:center;gap:9px;padding:13px 18px;font-weight:700;display:inline-flex;position:fixed;bottom:28px;right:28px;box-shadow:0 10px 24px #173a5f38}.floating-add .fa-duotone{--fa-primary-color:#fff;--fa-secondary-color:var(--yellow);--fa-secondary-opacity:1}.floating-add:hover{transform:translateY(-2px);box-shadow:0 14px 28px #173a5f4d}.expense-form{border-bottom:1px solid var(--line);gap:8px;padding:18px 0;display:flex}.expense-form input,.expense-form select{border:1px solid var(--line);background:#fbfffc;min-width:0;padding:11px 12px}.expense-name-input{flex:2}.expense-form input{flex:1;width:120px}.expense-form select{width:145px}.expense-form button{background:var(--green);color:#fff;border:0;padding:0 18px}:root[data-theme=dark] .expense-form input,:root[data-theme=dark] .expense-form select,:root[data-theme=dark] .summary-card,:root[data-theme=dark] .filters button.selected,:root[data-theme=dark] .editing input,:root[data-theme=dark] .editing select,:root[data-theme=dark] .edit-amount{color:var(--ink);background:#19352d}.summary-grid{grid-template-columns:2fr 1fr 1fr;gap:12px;padding:28px 0 54px;display:grid}.summary-card{border:1px solid var(--line);border-radius:var(--radius);background:#fffdf8;flex-direction:column;justify-content:space-between;min-height:145px;padding:22px 24px;display:flex}.summary-main{background:var(--yellow);border-color:var(--yellow);flex-direction:row;align-items:center}.summary-card strong{letter-spacing:0;font-size:34px;font-weight:800}.summary-card strong small{font-size:15px}.summary-note{color:var(--muted);font-size:11px}.green{color:var(--green)}.coral{color:var(--orange)}.ring{background:conic-gradient(var(--ink) var(--progress), #2423212b 0);border-radius:50%;place-items:center;width:76px;height:76px;display:grid;position:relative}.ring:after{content:"";background:var(--yellow);border-radius:50%;position:absolute;inset:7px}.ring span{z-index:1;font-size:12px;font-weight:700}.list-heading{justify-content:space-between;align-items:end;margin-bottom:16px;display:flex}.list-heading h2{letter-spacing:-.7px;margin:8px 0 0;font-size:25px;font-weight:500}.filters{gap:4px;display:flex}.filters button{border:1px solid var(--line);color:var(--muted);background:0 0;padding:8px 12px;font-size:11px}.filters button.selected{color:var(--ink);border-color:var(--ink);background:#fffdf8}.expense-list{border-top:1px solid var(--ink)}.expense-item{border-bottom:1px solid var(--line);grid-template-columns:28px minmax(150px,1fr) 105px 112px;align-items:center;gap:14px;min-height:65px;display:grid}.expense-item.completed{opacity:.48}.expense-item.completed .expense-name strong{text-decoration:line-through}.check{width:28px;height:28px;color:var(--ink);background:0 0;border:0;padding:0;font-size:21px;line-height:1}.check .fa-duotone{--fa-primary-color:var(--ink);--fa-secondary-color:var(--orange);--fa-secondary-opacity:.55}.completed .check .fa-duotone{--fa-primary-color:var(--green);--fa-secondary-color:var(--yellow);--fa-secondary-opacity:1}.expense-name strong{font-size:14px;font-weight:600;display:block}.expense-name span{color:var(--muted);margin-top:2px;font-size:11px;display:block}.installment,.type-label{color:var(--muted);font-size:11px}.type-label .fa-duotone{--fa-primary-color:currentColor;--fa-secondary-color:currentColor;--fa-secondary-opacity:.5;margin-right:5px}.type-fixed{color:var(--green)}.type-installment{color:#8067c7}.type-one-off{color:#c18a2d}.type-split{color:#278f9b}.type-label.deduction{color:var(--orange)}.amount{text-align:right;letter-spacing:.2px;font-size:18px;font-weight:800}.amount.deduction{color:var(--orange)}.row-actions,.edit-actions{justify-content:end;gap:2px;display:flex}.row-actions button,.edit-actions button{color:var(--muted);background:0 0;border:0;padding:4px;font-size:17px}.row-actions button:hover,.edit-actions button:hover{color:var(--orange)}.row-actions .fa-duotone,.edit-actions .fa-duotone{--fa-primary-color:currentColor;--fa-secondary-color:var(--orange);--fa-secondary-opacity:.55}.delete{color:var(--muted);background:0 0;border:0;font-size:20px}.editing{background:#eaf3fb;padding:10px 0}.edit-fields,.edit-meta{flex-direction:column;gap:5px;display:flex}.editing input,.editing select{border:1px solid var(--line);background:#fbfffc;width:100%;min-width:0;padding:7px 8px;font-size:12px}.edit-amount{border:1px solid var(--line);text-align:right;background:#fbfffc;width:100%;padding:7px 8px}.empty-state{text-align:center;border-top:1px solid var(--ink);color:var(--muted);padding:60px 20px}.empty-state span{color:var(--orange);font-size:34px}.empty-state span .fa-duotone{--fa-primary-color:var(--orange);--fa-secondary-color:var(--yellow);--fa-secondary-opacity:1}.empty-state button{color:var(--orange);background:0 0;border:0;margin-top:12px;text-decoration:underline}.empty-state button .fa-duotone{--fa-primary-color:var(--orange);--fa-secondary-color:var(--yellow);--fa-secondary-opacity:1;margin-right:5px}footer{color:var(--muted);letter-spacing:.5px;border-top:1px solid var(--line);justify-content:space-between;margin-top:50px;padding-top:18px;font-size:10px;display:flex}:root[data-theme=dark] .summary-main{background:#224d79;border-color:#224d79}:root[data-theme=dark] .ring:after{background:#224d79}@property --progress{syntax:"<angle>";inherits:false;initial-value:0deg}.ring{transition:--progress .65s cubic-bezier(.22,1,.36,1)}@media (width<=700px){.app-shell{padding:0 20px 28px}.topbar-date{display:none}.intro{flex-direction:column;align-items:start;gap:25px;padding:42px 0 30px}.intro h1{letter-spacing:-2px}.add-button{align-self:stretch}.month-row{margin-inline:-20px;padding-left:20px;overflow-x:auto}.month-tab{min-width:110px;padding:15px 18px}.summary-grid{grid-template-columns:1fr 1fr;padding-bottom:40px}.summary-main{grid-column:1/-1}.summary-card strong{font-size:25px}.list-heading{flex-direction:column;align-items:start;gap:18px}.filters{width:100%}.filters button{flex:1}.expense-item{grid-template-columns:26px minmax(0,1fr) 72px 20px;gap:8px}.expense-item .type-label{display:none}.expense-item .installment{white-space:nowrap;font-size:10px;display:block}.row-actions{grid-template-columns:repeat(3,32px);gap:4px;margin:0;display:grid;position:static}.expense-item{padding-right:0;position:relative}.editing{grid-template-columns:12px minmax(0,1fr) 20px}.editing .edit-meta,.editing .edit-amount{grid-column:2}.editing .edit-actions{flex-direction:column;grid-area:1/3/span 2}.amount{font-size:15px;font-weight:800}.expense-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;display:grid}.expense-form .expense-name-input,.expense-form .expense-note-input,.expense-form .expense-submit{grid-column:1/-1}.expense-form input,.expense-form select{width:100%}.expense-form .expense-submit{min-height:42px}footer{gap:10px}}.row-actions{grid-template-columns:repeat(3,34px);justify-content:end;align-items:center;gap:5px;display:grid}.row-actions button{border:1px solid var(--line);background:var(--paper);width:34px;height:34px;color:var(--ink);border-radius:6px;place-items:center;padding:0;transition:background .2s,color .2s,border-color .2s,transform .2s;display:grid}.row-actions button:hover,.row-actions button:focus-visible{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-1px)}.row-actions .delete{color:var(--orange)}.row-actions .delete:hover,.row-actions .delete:focus-visible{background:var(--orange);border-color:var(--orange);color:#fff}@media (width<=700px){.expense-item{grid-template-columns:26px minmax(0,1fr) 72px 106px}}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f213585;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.expense-modal{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);width:min(680px,100%);padding:24px;box-shadow:0 24px 70px #0f213547}.modal-heading{justify-content:space-between;align-items:start;margin-bottom:20px;display:flex}.modal-heading h2{margin:6px 0 0;font-size:25px;font-weight:500}.modal-close{border:1px solid var(--line);width:36px;height:36px;color:var(--ink);background:0 0;border-radius:50%;place-items:center;display:grid}.modal-close:hover,.modal-close:focus-visible{color:var(--orange);border-color:var(--orange)}.modal-close .fa-duotone{--fa-primary-color:currentColor;--fa-secondary-color:var(--orange);--fa-secondary-opacity:.55}.expense-modal .expense-form{border-bottom:0;padding:0}:root[data-theme=dark] .modal-backdrop{background:#000000ad}:root[data-theme=dark] .expense-modal{box-shadow:0 24px 70px #00000073}.floating-add{right:18px;bottom:max(18px, env(safe-area-inset-bottom));padding:14px 16px}.floating-add span{font-size:12px}.expense-name .type-label{border-radius:4px;align-items:center;width:fit-content;margin-top:5px;padding:2px 7px;font-weight:700;line-height:1.35;display:inline-flex}.expense-name .type-label .fa-duotone{flex:none}.expense-name .type-label.type-fixed{color:#1769aa;background:#dceeff}.expense-name .type-label.type-installment{color:#7048a8;background:#eee4ff}.expense-name .type-label.type-one-off{color:#9a6500;background:#fff0c7}.expense-name .type-label.type-split{color:#087b83;background:#d8f3f0}.expense-name .type-label.deduction{color:#b84b2d;background:#ffe2d8}:root[data-theme=dark] .expense-name .type-label.type-fixed{color:#8ecbff;background:#173e62}:root[data-theme=dark] .expense-name .type-label.type-installment{color:#d3b4ff;background:#3c2859}:root[data-theme=dark] .expense-name .type-label.type-one-off{color:#ffd978;background:#55431d}:root[data-theme=dark] .expense-name .type-label.type-split{color:#7de2df;background:#164e50}:root[data-theme=dark] .expense-name .type-label.deduction{color:#ffb08d;background:#5d2f25}.expense-form input,.expense-form select,.filters button,.expense-submit,.row-actions button,.check{border-radius:var(--radius)}.expense-submit{min-height:44px}