@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap");@import url("https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css");.auth-container{position:relative;width:900px;max-width:100%;height:650px;background:#fff;margin:20px auto;border-radius:30px;box-shadow:0 0 30px rgba(0,0,0,.2);overflow:hidden}.auth-container h1{font-size:36px;margin:0 0 20px;font-family:Be Vietnam Pro,sans-serif}.auth-logo-container{display:flex;justify-content:center;align-items:center;margin:0 0 20px;height:100px}.auth-logo{width:auto!important;height:100px!important;object-fit:contain;max-width:100%}.auth-container p{font-size:14.5px;margin:15px 0;font-family:Be Vietnam Pro,sans-serif}.auth-container form{width:100%}.form-box{position:absolute;right:0;width:50%;height:100%;background:#fff;display:flex;align-items:center;color:#333;text-align:center;padding:30px 40px;z-index:1;transition:.6s ease-in-out 1.2s,visibility 0s 1s;overflow-y:auto;overflow-x:hidden}.form-box form{width:100%;display:flex;flex-direction:column;justify-content:center}.form-box.register{align-items:flex-start}.form-box.register form{justify-content:flex-start}.auth-container.active .form-box{right:50%}.form-box.register{visibility:hidden}.auth-container.active .form-box.register{visibility:visible}.input-box{position:relative;margin:15px 0}.form-box.register .input-box{margin:10px 0}.input-box .auth-select,.input-box input{width:100%;padding:13px 50px 13px 20px;background:#eee;border-radius:8px;border:none;outline:none;font-size:16px;color:#333;font-weight:500;font-family:Be Vietnam Pro,sans-serif}.input-box input::placeholder{color:#888;font-weight:400}.input-box .auth-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}.input-box .auth-select option{background:#fff;color:#333}.input-box .auth-select.is-invalid,.input-box input.is-invalid{border:2px solid #dc3545;background:#fff5f5}.input-box i{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:20px;pointer-events:none;color:#888}.input-box .error-message{position:absolute;bottom:-20px;left:0;font-size:12px;color:#dc3545;text-align:left;width:100%;font-family:Be Vietnam Pro,sans-serif}.forgot-link{margin:-15px 0 15px;text-align:right}.forgot-link a{font-size:14.5px;color:#333;text-decoration:none;font-family:Be Vietnam Pro,sans-serif}.forgot-link a:hover{color:#589fd6}.back-to-home-link{margin:15px 0 0;text-align:center}.back-to-home-link a{font-size:14.5px;color:#333;text-decoration:none;font-family:Be Vietnam Pro,sans-serif;transition:color .3s ease}.back-to-home-link a:hover{color:#589fd6}.btn{width:100%;height:48px;background:#589fd6;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);border:none;cursor:pointer;font-size:16px;color:#fff;font-weight:600;font-family:Be Vietnam Pro,sans-serif;transition:background .3s ease}.btn:hover:not(:disabled){background:#5a7de8}.btn:disabled{opacity:.6;cursor:not-allowed}.toggle-box{position:absolute;width:100%;height:100%}.toggle-box:before{content:"";position:absolute;left:-250%;width:300%;height:100%;background:#589fd6;border-radius:150px;z-index:2;transition:1.8s ease-in-out}.auth-container.active .toggle-box:before{left:50%}.toggle-panel{position:absolute;width:50%;height:100%;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2;transition:.6s ease-in-out}.toggle-panel.toggle-left{left:0;transition-delay:1.2s}.auth-container.active .toggle-panel.toggle-left{left:-50%;transition-delay:.6s}.toggle-panel.toggle-right{right:-50%;transition-delay:.6s}.auth-container.active .toggle-panel.toggle-right{right:0;transition-delay:1.2s}.toggle-panel p{margin-bottom:20px;font-family:Be Vietnam Pro,sans-serif}.toggle-panel .btn{width:160px;height:46px;background:transparent;border:2px solid #fff;box-shadow:none}.toggle-panel .btn:hover:not(:disabled){background:hsla(0,0%,100%,.1)}@media screen and (max-width:650px){.auth-container{height:calc(100vh - 40px)}.form-box{bottom:0;width:100%;height:70%}.auth-container.active .form-box{right:0;bottom:30%}.toggle-box:before{left:0;top:-270%;width:100%;height:300%;border-radius:20vw}.auth-container.active .toggle-box:before{left:0;top:70%}.auth-container.active .toggle-panel.toggle-left{left:0;top:-30%}.toggle-panel{width:100%;height:30%}.toggle-panel.toggle-left{top:0}.toggle-panel.toggle-right{right:0;bottom:-30%}.auth-container.active .toggle-panel.toggle-right{bottom:0}}@media screen and (max-width:400px){.form-box{padding:20px}.toggle-panel h1{font-size:30px}.auth-container h1{font-size:28px}.auth-logo-container{height:45px}.auth-logo{height:45px!important}}