.text-input{border:none;border-bottom:1px solid var(--main-color);outline:none;width:260px;height:30px;margin:0 0 20px;padding:5px 10px 0;font-size:16px}.form-container{background-color:#f3f2f2;border-radius:10px;flex-direction:column;align-items:center;width:300px;height:400px;margin-top:50px;padding:40px;font-family:Arial,Helvetica,sans-serif;font-size:16px;display:flex}.logo-inform{border-radius:50%;width:100px;height:100px;margin-bottom:20px}#register-form-container{height:500px}.blue-btn,.register-btn{-webkit-user-select:none;user-select:none;width:200px;height:50px;color:var(--main-color);border:1px solid var(--main-color);border-radius:10px;outline:none;margin-top:20px;margin-bottom:30px;margin-left:calc(50% - 100px)}.blue-btn:active{background-color:var(--main-color);transition:all .6s}.exit-popup-btn,.exit-otp-verify-btn,.logout-btn{width:200px;height:40px;color:var(--cancel-color);border:1px solid var(--cancel-color);border-radius:10px;margin-top:50px;margin-left:calc(50% - 100px)}.exit-otp-verify-btn{width:100px;margin:0}.exit-popup-btn:active,.exit-otp-verify-btn:active,.logout-btn:active,.cancel-btn:active{background-color:var(--cancel-color);transition:all .6s}.submit-otp-verify-btn{width:100px;height:40px;color:var(--success-color);border:1px solid var(--success-color);border-radius:10px;margin-left:calc(50% - 100px)}.submit-btn-small{width:100px}.submit-otp-verify-btn:active,.confirm-btn:active{background-color:var(--success-color);transition:all .6s}.confirm-btn,.cancel-btn{height:40px;color:var(--cancel-color);border:1px solid var(--cancel-color);border-radius:10px;width:100px;margin-top:50px}.confirm-btn{color:var(--success-color);border:1px solid var(--success-color)}.disable-layer,.disable-layer-medium{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:700;background-color:#0000;width:100vw;height:100vh;position:fixed;top:0;left:0}.disable-layer-medium{z-index:800}.err-popup{z-index:900;box-sizing:border-box;width:360px;box-shadow:0 4px 8px var(--shadow-color);background-color:#fff;border-radius:10px;padding:20px 30px;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;position:fixed;top:50px;left:calc(50% - 180px)}.err-popup h1{color:#eb2929;margin:10px 0 20px}.otp-verify-popup{color:#010305;z-index:800;box-sizing:border-box;text-align:left;background-color:#fff;border-radius:10px;width:360px;height:250px;padding:20px;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;position:fixed;top:50px;left:calc(50% - 180px);box-shadow:0 4px 8px gray}.otp-verify-popup input{box-sizing:border-box;background-color:#d8d6d6;border:none;outline:none;width:140px;height:30px;margin:40px 40px 40px calc(50% - 70px);padding:2px 20px;font-size:30px}.otp-verify-popup div{width:260px;margin-left:calc(50% - 110px)}.success-popup{z-index:900;background-color:green;margin-left:calc(50% - 100px);padding:0;position:fixed;top:200px}.success-popup img{width:200px;margin:0}.success-popup{animation:.6s fadeIn}.popup-in{animation:.4s slideInRight}.popup-out{animation:.4s ease-out forwards slideOutRight}.popup-out-left{animation:.4s ease-out forwards slideOutLeft}.slide-fade-in{animation:.3s ease-in slideFadeIn}.slide-fade-out{animation:.2 forwards slideFadeOut}.confirm-popup{z-index:900;box-sizing:border-box;background-color:#fff;width:320px;padding:20px;position:fixed;top:200px;left:calc(50% - 160px);box-shadow:0 1px 2px gray}.confirm-popup div{justify-content:center;gap:20px;display:flex}.uploadimage-popup{z-index:800;border:1px dashed var(--main-color);background-color:#fff;border-radius:5px;width:350px;height:200px;position:fixed}.uploadimage-popup-container{flex-direction:column;padding:20px;display:flex}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(1%)}}@keyframes slideOutRight{0%{transform:translate(1%)}to{transform:translate(100%)}}@keyframes slideOutLeft{0%{transform:translate(1%)}to{transform:translate(-150%)}}@keyframes slideFadeIn{0%{opacity:.2}to{opacity:1}}@keyframes slideFadeOut{0%{opacity:1}to{opacity:.2}}.header{-webkit-user-select:none;user-select:none;box-sizing:border-box;z-index:600;background-color:#f0f8ff;justify-content:center;width:100%;height:60px;padding-top:20px;display:flex;position:fixed}.navigation-item{border-bottom:2px solid #b6b6b6;width:30px;padding:0 30px;position:relative}.navigation-item:active{background-color:#c5c5c5;border-radius:5px;transition:all .45s}.navigation-active{border-bottom:4px solid #0027a8;transition:all .25s ease-in}.red-dot{z-index:900;color:#fff;text-align:center;background-color:red;border-radius:50%;width:8px;height:8px;font-size:11px;position:absolute;top:2px;left:60%}.exit-header{-webkit-user-select:none;user-select:none;align-items:center;display:flex}.exit-header img,.small-exit-header img{width:26px;margin-bottom:10px;margin-right:5px}.small-exit-header{justify-content:flex-end;align-items:center;padding-top:10px;display:flex}.account-management-container{width:100%;margin-top:80px}.account-feature{border-bottom:1px solid #b8b8b8;justify-content:space-between;align-items:center;padding:20px;display:flex}.account-feature img{width:16px}.account-feater-container{margin-top:10px;list-style:none}.userinfo-item{padding:10px 0}.userinfo-container,.contact-container,.helpcenter-container,.change-password-container{z-index:800;box-sizing:border-box;background-color:#fff;border-radius:10px;width:96%;height:96%;padding:20px;position:fixed;top:2%;left:2%;box-shadow:0 4px 8px gray}.contact-content{justify-content:center;align-items:flex-end;gap:30px;margin-top:50px;padding:50px;display:flex}.contact-content a img{width:40px}.change-password-container form{box-sizing:border-box;max-width:336px;margin-top:50px;padding:10px 24px}.change-password-btn:active{background-color:#e2e1e1}.mycard-container{width:100%;min-height:800px;margin:70px 0 0;overflow:scroll}.card-header{display:flex;position:relative}.card-header img{width:30px}.card-option{-webkit-user-select:none;user-select:none;z-index:800;background-color:#e9e9e9;position:absolute;top:5px;left:0}.card-option img{width:20px}.card-option li{border-bottom:1px solid gray;padding:10px 30px 10px 5px;list-style:none}.card-option li:active{background-color:#d1d0d0}.new-tab-container{z-index:800;box-sizing:border-box;background-color:#fff;border-radius:10px;width:96%;height:96%;padding:20px;position:fixed;top:2%;left:2%;box-shadow:0 4px 8px gray}.list-container{background-color:#f5f5f5;border-radius:5px;width:100%;height:500px;margin-top:10px;overflow:scroll}.card-feature-bar{justify-content:space-between;margin-bottom:30px;padding:10px;display:flex}.card-feature-bar img{width:30px}.card-feature-bar input{outline:none;padding:0 10px}.list-item{border-bottom:1px solid gray;justify-content:space-between;align-items:flex-end;padding:5px 0;display:flex}.list-item section{box-sizing:border-box;gap:30px;display:flex;overflow:hidden}.list-item div{-webkit-user-select:none;user-select:none;gap:30px;display:flex}.list-item div img{width:30px;padding:0 5px}.list-item div img:active{background-color:gray}.list-item section h4{min-width:50px;overflow:hidden}.list-item section p{max-width:160px;overflow:hidden}.topic-feature-container,.language-feature-container{z-index:701;box-sizing:border-box;background-color:#fff;border-radius:5px;width:360px;padding:0 10px 20px;position:fixed;top:50px;left:calc(50% - 180px);box-shadow:0 3px 6px gray}.topic-feature-container h2{margin-top:20px}.topic-feature-container form{margin-top:10px}.topic-feature-container form input{border:none;border-bottom:1px solid var(--main-color);background-color:#ebe9e9;outline:none;padding:5px 10px;font-size:14px}.topic-feature-container form button{border:1px solid var(--main-color);color:var(--main-color);border-radius:5px;margin-top:20px;padding:5px 40px}.topic-feature-container form button:active{background-color:var(--main-color);transition:all .4s}.open-selection-btn{text-align:center;height:52px;color:var(--main-color);box-sizing:border-box;border:1px solid var(--main-color);cursor:pointer;background-color:#fff;border-radius:5px;margin:10px 20px;padding:10px;font-size:16px;line-height:2;overflow:hidden}.open-selection-btn:active{background-color:var(--main-color);transition:all .4s}.card-part{box-sizing:border-box;border:1px dashed var(--main-color);outline:none;width:100%;margin-top:10px;padding:10px;font-size:16px}#question{height:100px}#answer{height:300px}.selection-popup{z-index:850;border:1px solid var(--main-color);box-sizing:border-box;background-color:#fff;border-radius:5px;width:320px;height:400px;position:fixed;top:200px;left:calc(50% - 160px)}.selection-header{justify-content:space-between;align-items:center;height:40px;display:flex}.selection-header input{box-sizing:border-box;outline:none;width:200px;height:25px;margin-left:30px;padding:0 10px;font-size:16px}.selection-header img{width:25px;margin-right:5px}.selection-container{border-radius:10px;width:80%;height:280px;margin-top:30px;margin-left:10%;overflow:scroll}.selection-item{text-align:center;box-sizing:border-box;border-bottom:1px solid gray;height:40px;padding-top:10px;overflow:hidden}.selection-item:active{background-color:#d8d7d7}.rotate-image-open{animation:.4s forwards open-chevron}.rotate-image-close{animation:.4s forwards close-chevron}.card-management-header{justify-content:center;align-items:center;gap:20px;margin-top:5px;display:flex}.search-input{border:1px solid gray;outline:none;width:180px;height:20px;padding:2px 10px;font-size:16px}@keyframes open-chevron{0%{transform:rotate(0)}to{transform:rotate(180deg)}}@keyframes close-chevron{0%{transform:rotate(180deg)}to{transform:rotate(0)}}.card-management-header img{border-radius:50%;width:26px;position:relative}.card-management-header img:active{background-color:#d3d2d2}.filter-popup{box-sizing:border-box;background-color:#d7d7d7;border-radius:5px;width:200px;height:200px;padding:8px;position:absolute;top:100px;overflow:scroll}.language-filter-popup{left:20px}.topic-filter-popup{left:60px}.filter-popup p{border-bottom:1px solid #fff;max-height:20px;padding:5px;line-height:1.5;overflow:hidden}.filter-popup p:active{background-color:#9e9d9d}.popup-down{animation:.4s slide-down}.popup-up{animation:.4s slide-up}@keyframes slide-down{0%{transform:translateY(-10%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{opacity:1;transform:translateY(0%)}to{opacity:.5;transform:translateY(-10%)}}.search-in-popup{box-sizing:border-box;border:none;outline:none;width:182px;height:20px;padding:2px 4px;font-size:16px}.card-list-container{background-color:#e6e5e5;border-radius:5px;height:700px;margin-top:50px;overflow:scroll}.card-item div img{width:26px;margin-right:20px}.card-item p{min-width:220px;max-width:220px;max-height:30px;font-size:18px;line-height:1.5;overflow:hidden}.card-item{border-bottom:1px solid #fff;justify-content:space-between;align-items:center;padding:10px;display:flex}.card-user-detail{border:2px dashed var(--main-color);box-sizing:border-box;z-index:710;background-color:#fff;border-radius:5px;width:350px;padding:10px;position:fixed;top:100px;left:calc(50% - 175px)}.card-user-detail-content{margin:20px 0;line-height:1.5}.study-card-container{justify-content:center;margin-top:5px;display:flex}.flip-card-container{perspective:1000px;cursor:pointer;width:360px;height:500px}.flip-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative}.flip-card-inner.is-flipped{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{backface-visibility:hidden;overflow:scroll}:is(.flip-card-front,.flip-card-back)::-webkit-scrollbar{display:none}.flip-card-front,.flip-card-back{box-sizing:border-box;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;padding:8px;font-size:1.2rem;font-weight:700;display:flex;position:absolute;top:0;left:0;box-shadow:0 4px 12px #00000026}.flip-card-front{color:#fff;background-color:#6e8efb}.speaker-container{box-sizing:border-box;cursor:pointer;border-radius:10px;height:40px;padding:2px 20px}.speaker-container:active{background-color:#a1a0a0}.flip-card-back{color:#2f2f2f;box-sizing:border-box;background-color:#fff;border:2px solid #6e8efb;flex-direction:column;justify-content:flex-start;display:flex;transform:rotateY(180deg)}.flip-card-back img{border:2px solid #6e8efb;border-radius:10px;height:50%}.study-card-answer{box-sizing:border-box;border-radius:10px;width:98%;height:48%;margin-top:10px;padding:10px;overflow:scroll}.rate-btn-container{flex-direction:column;align-items:center;width:100%;margin-top:10px;display:flex}.rate-btn{color:#fff;border:none;border-radius:15px;width:310px;height:50px;margin-top:8px;font-size:17px}#easy-btn{background-color:#30c930}#good-btn{background-color:#dede32}#hard-btn{background-color:#f03838}#again-btn{background-color:#2d2dc8}.rate-btn:active{opacity:.4;transition:all .4s}.report-list{padding:10px}.report-list-item{border-bottom:1px solid gray;justify-content:flex-start;align-items:center;gap:20px;height:35px;line-height:1.5;display:flex;overflow:hidden}.report-list-item:hover{background-color:#b9b9b9}.report-list-item:active{background-color:gray}.report-list-item p{line-height:1.5;overflow:hidden}.report-detail-container{box-sizing:border-box;z-index:800;background-color:#fff;width:100%;padding:10px;position:fixed;top:10px;left:0}.report-detail-content{max-height:650px;margin-top:10px;line-height:1.3;overflow:scroll}.handle-report-btn-container{justify-content:space-between;margin-top:20px;display:flex}.handle-report-btn-container button{color:#fff;border:none;border-radius:5px;outline:none;height:40px;font-weight:700}.handle-report-btn-container button:active{background-color:#bbb}.accept-report-btn{background-color:#eb3c3c;width:200px}.reject-report-btn{background-color:#042567;width:100px}.home-content-container{width:98%;margin:90px 0 20px;overflow:scroll}.origin-card{box-sizing:border-box;background-color:#fff;border:1px solid gray;border-radius:10px;flex-direction:column;align-items:center;margin-bottom:20px;padding:10px;display:flex}.illustrate-img{border-radius:10px;width:98%}.origin-card section{border:2px dashed var(--main-color);box-sizing:border-box;text-align:left;border-radius:10px;width:100%;height:200px;margin:0;padding:10px;line-height:1.5;overflow:scroll}.origin-card-header img{border-radius:10px;height:26px;padding:5px 20px}.origin-card-header img:active{background-color:#c9c8c8}.origin-card-header{align-self:flex-end;height:40px;position:relative}.origin-card-menu{background-color:#c2c2c2;width:200px;position:absolute;right:20px}.origin-card-menu-item{-webkit-user-select:none;user-select:none;border:1px solid #fff;justify-content:flex-start;align-items:center;display:flex}.origin-card-menu-item:active{background-color:#adadad}.origin-card-menu-item img{width:26px}.origin-card-menu-section{border:none;padding:5px 20px}.speaker-icon{border-radius:5px;width:30px;padding:5px 20px}.speaker-icon:active{background-color:#a3a2a2;transition:all .4s}.sound-container{justify-content:flex-start;align-items:center;width:100%;height:50px;display:flex}.report-container{z-index:700;box-sizing:border-box;background-color:#fff;border-radius:10px;width:360px;height:500px;padding:10px;position:fixed;top:calc(40% - 200px);left:calc(50% - 180px);box-shadow:0 4px 8px gray}.report-container div{margin-top:10px}.report-description{width:320px;height:150px;margin-top:20px;padding:8px;font-size:16px;overflow:scroll}.send-report-btn{color:#fff;background-color:#004b7c;border:none;border-radius:5px;outline:none;width:80px;height:30px;margin-top:20px}.send-report-btn:active{opacity:.6}.service-package-container{margin-top:80px}:root{--shadow-color:#646464;--main-color:#4c4ce2;--cancel-color:#fa2828;--success-color:#12bb03}*{margin:0;padding:0}body{justify-content:center;align-items:center;width:100vw;font-family:Arial,Helvetica,sans-serif;display:flex}#root{box-sizing:border-box;justify-content:center;width:98%;display:flex}a{color:inherit}a:hover{color:#00f}.selected:active{background-color:#d1d0d0}