@font-face{font-family:Opus Chords Std;font-style:normal;font-weight:400;font-display:swap;src:url(/files/fonts/OpusChordsStd.otf) format("opentype")}.han-chord-stage{--han-chord-panel: rgba(3, 8, 14, .34);--han-chord-line: rgba(255, 255, 255, .12);--han-chord-btn: rgba(13, 24, 36, .94);--han-chord-btn-line: rgba(179, 238, 248, .24);--han-chord-cyan: #b3eef8;--han-chord-pink: #ffafc5;--han-chord-text: rgba(238, 247, 255, .9);--han-chord-soft: rgba(220, 235, 246, .72)}.han-chord-stage-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;padding:4px 4px 16px}.han-chord-stage-head h2{max-width:620px;margin:0;color:#fff;font-size:24px;line-height:1.24;font-weight:920}.han-chord-stage-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.han-chord-stage-badges span{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--han-chord-line);border-radius:12px;color:var(--han-chord-text);background:var(--han-chord-panel);font-size:12px;font-weight:850}.han-chord{display:grid;gap:14px;min-width:0;color:var(--han-chord-soft);font-size:14px}.han-chord #chord-player{position:relative;display:grid;gap:14px;min-width:0;-webkit-user-select:none;user-select:none}.han-chord #chord-player .buttons-module{display:block;min-width:0}.han-chord #chord-player .buttons:before,.han-chord #chord-player .buttons--section-b:before,.han-chord #chord-player .sequencer:before{flex:0 0 100%;color:#b3eef8b8;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.han-chord #chord-player .buttons:before{content:"Điều khiển"}.han-chord #chord-player .sequencer:before{content:"Vòng hợp âm"}.han-chord #chord-player .buttons--section-b:before{content:"Đoạn nhạc"}.han-chord #chord-player .sequencer~.sequencer:before{content:"Vòng hợp âm — đoạn 2"}.han-chord #chord-player .buttons,.han-chord #chord-player .buttons--section-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%;min-width:0;margin:0;padding:14px 16px;border:1px solid var(--han-chord-line);border-radius:20px;background:var(--han-chord-panel);-webkit-user-select:none;user-select:none}.han-chord #chord-player button{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0;padding:0 15px;border:1px solid var(--han-chord-btn-line);border-radius:13px;color:var(--han-chord-text);background:var(--han-chord-btn);box-shadow:inset 0 1px #ffffff14;font-family:inherit;font-size:13px;font-weight:850;line-height:1;white-space:nowrap;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease}.han-chord #chord-player button:hover{transform:translateY(-1px);border-color:#b3eef870;color:#fff;background:#162a3afa}.han-chord #chord-player button:focus-visible{outline:2px solid rgba(179,238,248,.55);outline-offset:2px}.han-chord #chord-player .play--button{width:52px;padding:0;border-color:#4ade8080;background-image:none;background-color:#225438d9}.han-chord #chord-player .play--button:hover{border-color:#4ade80cc;background-color:#2c6846f2}.han-chord #chord-player .play--button.play:before{content:"";width:0;height:0;margin-left:3px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #4ade80}.han-chord #chord-player .play--button.pause:before{content:"";width:13px;height:15px;border-left:4px solid #4ade80;border-right:4px solid #4ade80}.han-chord #chord-player input[type=text].tempo{width:74px;height:40px;margin:0;padding:0;border:1px solid var(--han-chord-btn-line);border-radius:13px;color:#fff;background:var(--han-chord-btn);font-family:inherit;font-size:17px;font-weight:950;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.han-chord #chord-player input[type=text].tempo:focus{outline:none;color:var(--han-chord-cyan);border-color:#b3eef88c}.han-chord #chord-player .drop-down{position:relative;display:inline-flex}.han-chord #chord-player .drop-down>button:after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6}.han-chord #chord-player .drop-down .style{position:absolute;top:calc(100% + 6px);left:0;z-index:30;display:none;max-height:320px;min-width:100%;margin:0;padding:5px;overflow-y:auto;list-style:none;border:1px solid rgba(179,238,248,.24);border-radius:15px;background:#09111afc;box-shadow:0 18px 38px #00000075;font-family:inherit;font-size:13px}.han-chord #chord-player .drop-down .style.active{display:block}.han-chord #chord-player .drop-down .style li{padding:9px 12px;border-radius:10px;color:var(--han-chord-soft);white-space:nowrap;cursor:pointer;transition:background .16s ease,color .16s ease}.han-chord #chord-player .drop-down.align-left .style li{text-align:left}.han-chord #chord-player .drop-down .style li:hover{color:#fff;background:#ffffff14}.han-chord #chord-player .drop-down .style li.active{color:#07111b;background:var(--han-chord-cyan);font-weight:900}.han-chord #chord-player .drop-down .style::-webkit-scrollbar{width:8px}.han-chord #chord-player .drop-down .style::-webkit-scrollbar-track{border-radius:999px;background:#03080e66}.han-chord #chord-player .drop-down .style::-webkit-scrollbar-thumb{border-radius:999px;background:#b3eef861}.han-chord #chord-player .sequencer{position:relative;display:flex;flex-wrap:wrap;gap:10px;width:100%;min-width:0;padding:14px 16px;border:1px solid var(--han-chord-line);border-radius:20px;background:var(--han-chord-panel)}.han-chord #chord-player .sequencer ul{display:flex;width:100%;margin:0;padding:0;list-style:none;z-index:3}.han-chord #chord-player .sequencer li{display:flex;align-items:center;height:auto;padding:0 3px;outline:none;color:#fff;font-size:1.6rem;font-weight:800;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:3}.han-chord #chord-player .sequencer li>div{display:flex;align-items:center;position:relative;overflow:hidden;height:100%;width:100%;border:1px solid var(--han-chord-btn-line);border-radius:15px;background:var(--han-chord-btn);box-shadow:inset 0 1px #ffffff12;transition:background .2s ease-out,border-color .2s ease-out}.han-chord #chord-player .sequencer li>div:hover{border-color:#b3eef875;background:#162a3afa}.han-chord #chord-player .sequencer--cell.active>div,.han-chord #chord-player .sequencer--cell.active>div:hover{border-color:transparent;background:linear-gradient(135deg,var(--han-chord-cyan),var(--han-chord-pink));box-shadow:0 10px 28px #b3eef838}.han-chord #chord-player .sequencer--cell.active .sequencer--cell--text{color:#07111b}.han-chord #chord-player .sequencer--cell.active svg{stroke:#07111b}.han-chord #chord-player .sequencer--cell.active .lines span{color:#07111b57}.han-chord #chord-player .sequencer--cell{overflow:hidden}.han-chord #chord-player .sequencer--cell--content,.han-chord #chord-player .sequencer--cell--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.han-chord #chord-player .sequencer--cell--text{padding-left:14px;color:#fff;font-weight:900;-webkit-user-select:none;user-select:none}.han-chord #chord-player .sequencer--cell--text svg{stroke:#fff;transition:stroke .2s ease}.han-chord #chord-player .sequencer--cell--text .special--symbol{position:absolute;top:23px;font-size:1.2rem}.han-chord #chord-player .sequencer--cell--text .inner--symbol{position:absolute;bottom:4px;font-size:1.2rem}.han-chord #chord-player .sequencer--cell--text .sign-dim{position:absolute;bottom:25px}.han-chord #chord-player .sequencer--cell--text .accidentals{padding-right:1px}.han-chord #chord-player .sequencer--cell-duration-1 .inner--symbol,.han-chord #chord-player .sequencer--cell-duration-1 .special--symbol,.han-chord #chord-player .sequencer--cell-duration-2 .inner--symbol,.han-chord #chord-player .sequencer--cell-duration-2 .special--symbol{font-size:1rem}.han-chord #chord-player .sequencer--cell-duration-1 .sign-dim svg circle,.han-chord #chord-player .sequencer--cell-duration-2 .sign-dim svg circle{r:5;stroke-width:2}.han-chord #chord-player .sequencer--cell-duration-1 .sequencer--cell--text,.han-chord #chord-player .sequencer--cell-duration-2 .sequencer--cell--text{padding-left:8px}.han-chord #chord-player .sequencer li .lines{position:absolute;left:0;bottom:0;display:flex;justify-content:space-between;width:100%;padding:0 13px;-webkit-user-select:none;user-select:none}.han-chord #chord-player .sequencer li .lines span{display:inline-flex;justify-content:center;width:100%;height:15px;overflow:hidden;color:#fff3}.han-chord #chord-player .sequencer--cell--draggable{position:absolute;display:flex;align-items:center;width:100%;height:100%;background:none;opacity:.3}.han-chord #chord-player .sequencer--cell--draggable.dragging{background:repeating-linear-gradient(320deg,#b3eef859,#b3eef859 5px,#b3eef81f 0,#b3eef81f 10px)}.han-chord #chord-player .handle,.han-chord #chord-player .handle--resizer{width:100%;height:100%}.han-chord #chord-player .handle--line{position:absolute;top:50%;right:8px;width:4px;height:26px;transform:translateY(-50%);border-radius:999px;background:#b3eef8e6;opacity:0;transition:opacity .24s ease}.han-chord #chord-player .sequencer--cell:hover .handle--line{opacity:1}.han-chord #chord-player .sequencer--cell.active .handle--line{background:#07111b8c}.han-chord #chord-player .add-chord{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:80px;margin:0 0 0 6px;border:1px dashed rgba(179,238,248,.4);border-radius:15px;color:var(--han-chord-cyan);background:#b3eef80f;font-size:1.6rem;font-weight:700;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease,border-color .2s ease}.han-chord #chord-player .add-chord:hover{border-color:var(--han-chord-cyan);background:#b3eef829}.han-chord #chord-player .sequencer--circle-counter{position:absolute;top:8px;right:14px;z-index:4;display:flex;align-items:center;justify-content:center;width:34px;height:26px;border:1px solid var(--han-chord-btn-line);border-radius:999px;color:var(--han-chord-text);background:var(--han-chord-btn);box-shadow:0 8px 20px #0006;font-size:12px;font-weight:900;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease,color .2s ease}.han-chord #chord-player .sequencer--circle-counter:hover{color:#07111b;background:var(--han-chord-cyan)}.han-chord-keys{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.han-chord-keys li{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--han-chord-line);border-radius:12px;background:#ffffff0d;color:#dcebf6ad;font-size:12.5px}.han-chord-keys kbd{min-width:26px;padding:3px 7px;border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;border-radius:7px;background:#ffffff1a;color:#fff;font-family:inherit;font-size:11px;font-weight:900;text-align:center}.ReactModalPortal{z-index:101}.ReactModal__Overlay{z-index:101;background-color:#040910b8!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.ReactModal__Content{margin:0;position:relative;max-width:calc(100vw - 24px);height:auto!important;border:1px solid rgba(179,238,248,.2)!important;border-radius:22px!important;background:#0d1824!important;box-shadow:0 30px 70px #0009!important;color:#eef7ffe6;font-family:var(--han-font-family, inherit)}.ReactModal__Content h2{margin:0;padding:18px 20px 14px;color:#fff;font-size:1.3rem;font-weight:900}.ReactModal__Content h2 span{color:var(--han-chord-pink, #ffafc5);font-size:1.6rem}.ReactModal__Content header hr{margin:0;border:0;border-top:1px solid rgba(255,255,255,.1)}.modal--select-chord,.modal--duration,.modal--delete-apply{display:flex;align-items:center;padding:0 20px}.modal--select-chord,.modal--delete-apply{height:85px}.modal--duration{height:50px;justify-content:end}.modal--delete-apply{justify-content:space-between}.modal--text{color:#eef7ffe6;font-size:1.1rem;font-weight:800}.ReactModal__Content button{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0;padding:0 15px;border:1px solid rgba(179,238,248,.24);border-radius:13px;color:#eef7ffe6;background:#0d1824f0;font-family:inherit;font-size:13px;font-weight:850;line-height:1;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}.ReactModal__Content button:hover{transform:translateY(-1px);border-color:#b3eef870;background:#162a3afa}.ReactModal__Content .modal--save{width:44px;padding:0;border-color:#4ade8080;background:#225438e6}.ReactModal__Content .modal--save:hover{border-color:#4ade80d9;background:#2c6846fa}.ReactModal__Content .modal--delete{width:44px;padding:0;border-color:#ff6b4a80;background:#5e221ee6}.ReactModal__Content .modal--delete:hover{border-color:#ff6b4ad9;background:#7e2c26fa}.modal--delete svg,.modal--save svg{width:20px;height:20px;stroke:#fff}.duration--buttons{display:flex;align-items:center;justify-content:space-around;gap:6px}.ReactModal__Content .duration--buttons button{width:40px;height:40px;padding:0;font-size:1.2rem;font-weight:900}.ReactModal__Content .duration--buttons button:disabled,.ReactModal__Content .duration--buttons button[disabled]{cursor:not-allowed;opacity:.4}.ReactModal__Content .duration--buttons button:disabled:hover{transform:none;border-color:#b3eef83d;background:#0d1824f0}.duration--buttons span{width:100px;color:#dcebf6c7;font-size:1.05rem;font-weight:800;text-align:center;-webkit-user-select:none;user-select:none}.select-chord{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.select-chord__root,.select-chord__accidentals{width:80px}.select-chord__key{width:135px}.select-chord [class*=-control]{min-height:40px;border-color:#b3eef83d;border-radius:13px;background-color:#0d1824f0;box-shadow:none}.select-chord [class*=-control]:hover{border-color:#b3eef880}.select-chord [class*=-singleValue],.select-chord [class*=-placeholder],.select-chord input{color:#eef7ffeb}.select-chord [class*=indicatorSeparator]{background-color:#ffffff24}.select-chord [class*=indicatorContainer]{color:#b3eef8b3}.select-chord [class*=-menu]{overflow:hidden;border:1px solid rgba(179,238,248,.24);border-radius:15px;background-color:#09111afc;box-shadow:0 18px 38px #00000075}.select-chord [class*=-menu]>div{padding:5px;background-color:transparent}.select-chord [class*=-menu]>div::-webkit-scrollbar{width:8px}.select-chord [class*=-menu]>div::-webkit-scrollbar-track{border-radius:999px;background:#03080e66}.select-chord [class*=-menu]>div::-webkit-scrollbar-thumb{border-radius:999px;background:#b3eef861}.select-chord [class*=-option]{padding:9px 12px;border-radius:10px;color:#eef7ffd9;background-color:transparent;cursor:pointer}.select-chord [class*=-option]:hover,.select-chord [class*=-option]:active{color:#fff;background-color:#ffffff14}.select-chord .css-3zt1ez-option,.select-chord .css-3zt1ez-option:hover{color:#07111b;background-color:var(--han-chord-cyan, #b3eef8);font-weight:900}.accidentals,.accidentals-select{font-family:Opus Chords Std,serif}.accidentals-select{font-size:1.1rem}.modal--select-instrument{border-bottom:1px solid rgba(255,255,255,.08)}.modal--select-instrument:last-child{border-bottom:0}.select-instrument{height:84px;padding:0 20px}.select-instrument,.audio-wave-wrapper{display:flex;align-items:center;justify-content:space-between}.audio-wave-wrapper p{margin:0}.wave{width:30px;fill:var(--han-chord-cyan, #b3eef8)}.Line_1{animation:han-chord-pulse .6s infinite;animation-delay:.15s}.Line_2{animation:han-chord-pulse .6s infinite;animation-delay:.3s}.Line_3{animation:han-chord-pulse .6s infinite;animation-delay:.45s}.Line_4{animation:han-chord-pulse .6s infinite;animation-delay:.6s}.Line_5{animation:han-chord-pulse .6s infinite;animation-delay:.75s}.Line_6{animation:han-chord-pulse .6s infinite;animation-delay:.9s}.Line_7{animation:han-chord-pulse .6s infinite;animation-delay:1.05s}.Line_8{animation:han-chord-pulse .6s infinite;animation-delay:1.2s}.Line_9{animation:han-chord-pulse .6s infinite;animation-delay:1.35s}@keyframes han-chord-pulse{0%{transform:scaleY(1);transform-origin:50% 50%}50%{transform:scaleY(.7);transform-origin:50% 50%}to{transform:scaleY(1);transform-origin:50% 50%}}.ReactModal__Content .switch{position:relative;display:inline-block;width:52px;height:30px}.ReactModal__Content .switch input{width:0;height:0;opacity:0}.ReactModal__Content .slider{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background-color:#ffffff2e;cursor:pointer;transition:background-color .3s ease}.ReactModal__Content .slider:before{content:"";position:absolute;left:4px;bottom:4px;width:22px;height:22px;border-radius:50%;background-color:#fff;box-shadow:0 2px 6px #00000059;transition:transform .3s ease}.ReactModal__Content input:checked+.slider{background-color:var(--han-chord-cyan, #b3eef8)}.ReactModal__Content input:checked+.slider:before{transform:translate(22px)}@media (max-width: 640px){.han-chord-stage-head{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:12px}.han-chord-stage-badges{justify-content:flex-start}.han-chord #chord-player .buttons,.han-chord #chord-player .buttons--section-b,.han-chord #chord-player .sequencer{gap:8px;padding:12px;border-radius:16px}.han-chord #chord-player .sequencer--cell--text{padding-left:8px;font-size:1.3rem}}@media (prefers-reduced-motion: reduce){.wave [class^=Line_]{animation:none}}