:root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;color:#ffffffde;color-scheme:light dark;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}a{color:#646cff;font-weight:500;text-decoration:inherit}a:hover{color:#535bf2}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}h1{font-size:3.2em;line-height:1.1}button{background-color:#1a1a1a;border:1px solid #0000;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{background-color:#fff;color:#213547}a:hover{color:#747bff}button{background-color:#f9f9f9}}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{box-sizing:border-box;margin:0 auto;max-width:1280px;padding:1rem;text-align:center;width:100%}:root{--viet-red:#da251d;--viet-yellow:#ffcd00;--viet-green:#063;--viet-gold:gold;--viet-brown:#8b4513}body{background-attachment:fixed;background-color:#f5f5f5;background-image:linear-gradient(135deg,#da251d1a,#0066331a);background-position:50%;background-size:cover;color:#8b4513;color:var(--viet-brown);display:flex;margin:0;min-height:100vh;min-width:320px;place-items:center}body h1{color:#da251d;color:var(--viet-red);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;margin:1rem 0;text-shadow:2px 2px 4px #0000001a}body h2{color:#063;color:var(--viet-green);font-size:clamp(1rem,3vw,1.5rem);margin:.5rem 0}body h4{font-size:clamp(.875rem,2.5vw,1.25rem);margin:.5rem 0}.logo{align-items:center;background-color:#da251d;background-color:var(--viet-red);border-radius:50%;box-shadow:0 4px 8px #0003;display:flex;height:80px;justify-content:center;margin:0 auto;padding:1rem;transition:transform .3s ease;width:80px}.logo:hover{transform:scale(1.1)}.logo-text{color:#ffcd00;color:var(--viet-yellow);font-size:2rem;font-weight:700;text-shadow:1px 1px 2px #0000004d}@keyframes logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin 20s linear infinite}}.read-the-docs{color:#888}.main-content{align-items:flex-start;display:flex;gap:2rem;margin:0 auto;max-width:1200px}.game-area{flex:1 1}.card-management{width:300px}.card{-webkit-tap-highlight-color:transparent;align-items:center;background-color:#fffffff2;background:#0000;border-radius:25px;box-shadow:0 0 5px 2px #0000004d;cursor:pointer;display:flex;font-weight:700;height:clamp(200px,40vh,250px);justify-content:center;margin:1rem auto;padding:1rem;perspective:1000px;-moz-perspective:1000px;position:relative;touch-action:manipulation;transform-style:preserve-3d;-moz-transform-style:preserve-3d;transition:transform .6s;user-select:none;-webkit-user-select:none;width:clamp(280px,90%,500px)}.card.touch-active{transform:scale(.98);transition:transform .1s ease}.card.flipped{transform:rotateY(180deg)}.card .back,.card .front{-webkit-touch-callout:none;align-items:center;backface-visibility:hidden;display:flex;font-size:clamp(16px,3vw,20px);height:100%;justify-content:center;left:0;overflow-wrap:break-word;padding:1rem;position:absolute;top:0;-webkit-user-select:none;user-select:none;width:100%}.card .back{transform:rotateY(180deg)}.container{margin:1rem auto;max-width:600px;padding:0 1rem;width:100%}.mini-container{width:100%}.answer-space{background-color:#fffffff2;border:2px solid #063;border:2px solid var(--viet-green);border-radius:8px;display:flex;flex-direction:column;gap:.5rem;margin:1rem 0;overflow:hidden;padding:1rem;position:relative;transition:all .3s ease}.answer-space.correct{animation:successPulse .6s cubic-bezier(.4,0,.2,1);background-color:#006633e6;border-color:#063;border-color:var(--viet-green);box-shadow:0 4px 8px #4caf504d;color:#fff}.answer-space.correct:after{animation:checkmark .5s ease-out;content:"✓";font-size:24px;position:absolute;right:20px;top:50%;transform:translateY(-50%)}.answer-space.wrong{animation:errorShake .5s cubic-bezier(.36,0,.66,-.56);background-color:#da251de6;border-color:#da251d;border-color:var(--viet-red);box-shadow:0 4px 8px #f443364d;color:#fff}.answer-space.wrong:after{animation:xmark .5s ease-out;content:"✗";font-size:24px;position:absolute;right:20px;top:50%;transform:translateY(-50%)}input,select{border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:16px;margin:.25rem 0;padding:.75rem;transition:all .3s ease;width:100%}input:focus,select:focus{border-color:#2196f3;box-shadow:0 2px 4px #0000001a;transform:translateY(-1px)}button{background-color:#da251d;background-color:var(--viet-red);border:none;border-radius:8px;color:#fff;cursor:pointer;font-family:inherit;font-size:1em;font-weight:500;margin:.5rem;padding:.6em 1.2em;transform:translateZ(0);transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap}button:hover{background-color:#063;background-color:var(--viet-green);box-shadow:0 2px 4px #0003;transform:translateY(-2px)}button:active{transform:scale(.95)}.card-management{animation:fadeIn .5s ease-out;background-color:#f5f5f5e6;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:20px auto;max-width:600px;padding:20px;transition:all .3s ease;width:90%}.card-management h3{color:#333;margin-bottom:15px}.card-management form{display:flex;flex-direction:column;gap:10px;transition:all .3s ease}.card-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:1rem auto;max-width:600px;padding:0 1rem}.card-controls button{flex:0 1 auto;height:44px;min-width:44px;transform-origin:center center;transition:transform .3s cubic-bezier(.4,0,.2,1),background-color .3s ease,box-shadow .3s ease}#hard{background-color:#e25858}#easy{background-color:#36c236}#medium{background-color:#f3ff6d}#wrong{animation:errorShake .5s cubic-bezier(.36,0,.66,-.56);background-color:#f8d7da;border:2px solid #dc3545;color:#721c24}#correct{animation:successPulse .6s cubic-bezier(.4,0,.2,1);background-color:#d4edda;border:2px solid #28a745;color:#155724}.edit-button{background-color:gold;background-color:var(--viet-gold);color:#8b4513;color:var(--viet-brown)}.edit-button:hover{background-color:#063;background-color:var(--viet-green)}.delete-button{background-color:#da251d;background-color:var(--viet-red)}.delete-button:hover,.submit-Btn{background-color:#063;background-color:var(--viet-green)}.submit-Btn:hover{background-color:#da251d;background-color:var(--viet-red)}.reset-button{background-color:#ffcd00;background-color:var(--viet-yellow);color:#8b4513;color:var(--viet-brown)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes errorShake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes checkmark{0%{opacity:0;transform:translateY(-50%) scale(0)}50%{transform:translateY(-50%) scale(1.2)}to{opacity:1;transform:translateY(-50%) scale(1)}}@keyframes xmark{0%{opacity:0;transform:translateY(-50%) rotate(0deg) scale(0)}50%{transform:translateY(-50%) rotate(180deg) scale(1.2)}to{opacity:1;transform:translateY(-50%) rotate(1turn) scale(1)}}@keyframes pulse{0%{opacity:1}50%{opacity:.8}to{opacity:1}}.loading{animation:pulse 1.5s ease-in-out infinite}.nextCard,.previousCard{transition:transform .3s ease,background-color .3s ease}.nextCard:hover,.previousCard:hover{transform:scale(1.1)}.nextCard:active,.previousCard:active{transform:scale(.95)}.delete-button,.edit-button{transition:all .3s cubic-bezier(.4,0,.2,1)}.delete-button:hover,.edit-button:hover{box-shadow:0 4px 8px #0003;transform:translateY(-3px)}.delete-button:active,.edit-button:active{box-shadow:0 2px 4px #0003;transform:translateY(-1px)}@media (max-width:768px){#root{padding:.5rem}.card{height:200px;margin:.5rem auto;touch-action:manipulation;width:90%}.card:active{transform:scale(.98)}.card .back,.card .front{font-size:16px;padding:.5rem}.card-management{margin:15px auto;padding:15px}.card-controls{padding:0 .5rem}button{font-size:.9em;margin:.25rem;padding:.5em 1em;transition:transform .2s ease,background-color .2s ease}button:active{opacity:.8;transform:scale(.95)}input,select{-webkit-tap-highlight-color:transparent;font-size:14px;padding:.5rem;transition:all .3s ease}input:focus,select:focus{box-shadow:0 2px 8px #2196f333;transform:translateY(-1px)}.ripple{overflow:hidden;position:relative;transform:translateZ(0)}.ripple:after{background-image:radial-gradient(circle,#fff 10%,#0000 11%);background-position:50%;background-repeat:no-repeat;content:"";display:block;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform:scale(12);transition:transform .6s,opacity .6s;width:100%}.ripple:active:after{opacity:.3;transform:scale(0);transition:0s}.smooth-scroll{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}button,input[type=submit],select{min-height:44px;min-width:44px;padding:12px 24px}.gesture-hint{animation:floatIn 1s ease-out;opacity:.7;pointer-events:none;position:absolute}}@media (max-width:480px){body h1{font-size:1.5rem}body h2{font-size:1rem}.card{height:150px;perspective:1000px;-moz-perspective:1000px;transform-style:preserve-3d;-moz-transform-style:preserve-3d}.card .back,.card .front{backface-visibility:hidden;-moz-backface-visibility:hidden;background:#fff;font-size:14px;height:100%;left:0;position:absolute;top:0;transform:rotateY(0deg);width:100%}.card .back,.card.flipped .front{transform:rotateY(180deg)}.card.flipped .back{transform:rotateY(1turn)}.card-controls button{font-size:.85em;padding:.4em .8em}}.App{animation:fadeIn .5s ease-out forwards;opacity:0}.card-management{position:relative}.card-management:before{background:#0000001a;border-radius:8px;bottom:-3px;content:"";left:3px;position:absolute;right:-3px;top:3px;z-index:-1}@media (hover:none){.card:hover,button:hover{transform:none}}@keyframes floatIn{0%{opacity:0;transform:translateY(30px)}50%{opacity:.8;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes rotateIn{0%{opacity:0;transform:rotate(-180deg) scale(.3)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes swipeLeft{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes swipeRight{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}.touch-feedback{overflow:hidden;position:relative;transform:translateZ(0)}.touch-feedback:before{background:#ffffff1a;bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .2s ease}.touch-feedback:active:before{opacity:1}.card-enter{animation:swipeLeft .3s ease-out}.card-exit{animation:swipeRight .3s ease-out}button:not(:disabled):active{transform:scale(.95) translateY(2px);transition:all .1s ease}.loading-spinner{animation:rotateIn 1s linear infinite}.loading-pulse{animation:pulse 1.5s ease-in-out infinite}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.card-stack{position:relative}.card-stack:after,.card-stack:before{border-radius:8px;box-shadow:0 1px 3px #0000001f;content:"";position:absolute;transition:all .3s ease}.card-stack:before{background:#0000000d;bottom:-2px;left:2px;right:-2px;top:2px;z-index:-1}.card-stack:after{background:#0000000d;bottom:-4px;left:4px;right:-4px;top:4px;z-index:-2}.active-card{box-shadow:0 8px 16px #0000001a;transform:scale(1.02);z-index:1}@media (max-width:1024px){.main-content{flex-direction:column}.card-management{margin:0 auto;max-width:500px;width:100%}}.shuffle-button{background-color:#9c27b0;border:none;border-radius:4px;color:#fff;cursor:pointer;margin:0 5px;padding:8px 16px;transition:background-color .3s}.shuffle-button:hover{background-color:#7b1fa2}.speak-button{align-items:center;background:#fff;border:2px solid #063;border:2px solid var(--viet-green);border-radius:50%;bottom:15px;color:#063;color:var(--viet-green);cursor:pointer;display:flex;font-size:1.2rem;height:40px;justify-content:center;opacity:1;padding:8px;position:absolute;right:15px;transition:all .2s ease;transition:all .3s ease;visibility:visible;width:40px;z-index:2}.speak-button:hover{background:#063;background:var(--viet-green);color:#fff;transform:scale(1.05)}.speak-button:active{transform:scale(.95)}.card.flipped .front .speak-button{opacity:0;visibility:hidden}.card.flipped .back .speak-button{opacity:1;visibility:visible}@-moz-document url-prefix(){.card{perspective:1000px;transform-style:preserve-3d}.card .back,.card .front{backface-visibility:hidden;-moz-backface-visibility:hidden}.card.flipped .front{opacity:0;visibility:hidden}}
/*# sourceMappingURL=main.d8eb349f.css.map*/