@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--ink:#24372b;--muted:#81867c;--cream:#f7f8f2;--lime:#c8f36b;--border:#e8ebe2}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:14px 'Be Vietnam Pro',sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #80ac44;outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;background:#202d26;color:#eaf0e7;padding:38px 25px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;letter-spacing:-1px;font-size:24px;font-weight:800}.brand>span:not(.brand-icon){font-weight:400}.brand-icon{background:var(--lime);color:#273c27;width:32px;height:32px;display:grid;place-items:center;margin-right:9px;border-radius:9px;font-size:27px}.brand i{font-size:7px;color:var(--lime);align-self:flex-start;margin-top:8px;margin-left:3px}.side-label{font-size:9px;letter-spacing:1.7px;color:#8c9c8f;margin:60px 12px 20px}.nav{display:flex;align-items:center;gap:12px;background:none;border:0;text-align:left;font-size:12px;color:#a7b4a8;width:100%;padding:15px 12px;border-radius:9px;margin-bottom:7px}.nav>span{font-size:21px}.nav.active{background:#354331;color:var(--lime)}.nav:hover{background:#2c3c30}.side-note{margin:auto 13px 32px;border-top:1px solid #3a483b;padding-top:29px}.spark{color:var(--lime);font-size:38px}.side-note p{font-size:22px;line-height:1.5;letter-spacing:-.6px}.side-note small{font-size:11px;line-height:1.8;color:#9baa9c}.local{font-size:10px;color:#91a293;padding:0 12px;display:flex;gap:8px;align-items:center}.local>span{width:6px;height:6px;border-radius:50%;background:#a6c483}main{margin-left:244px;padding:0 46px;max-width:1600px}header{height:94px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.breadcrumb{font-size:11px;color:var(--muted)}.breadcrumb span{margin:0 14px;color:#c7cbbf}.breadcrumb strong{font-weight:500;color:#425140}.quiet{background:none;border:0;font-size:12px;color:#6b7567;display:flex;gap:8px}.intro{padding:35px 0 28px;display:flex;justify-content:space-between;align-items:center;gap:20px}.eyebrow{font-size:9px;letter-spacing:1.6px;font-weight:600;color:#8c9585}h1{font-size:32px;letter-spacing:-1.3px;font-weight:600;margin:12px 0}h1>span{color:#7d9e4d}.intro p{color:var(--muted);font-size:12px;margin:0;line-height:1.8}.streak{display:flex;gap:12px;align-items:center}.streak>span{width:43px;height:43px;background:#eaf0de;border-radius:50%;display:grid;place-items:center;font-size:25px}.streak strong{display:block;font-size:13px;font-weight:600}.streak small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.dashboard{display:grid;grid-template-columns:1.15fr 1fr;gap:23px}.card{background:#fff;border:1px solid var(--border);border-radius:17px}.counter{padding:25px 30px 20px;text-align:center}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.live{font-size:9px;background:#f0f6e9;border-radius:20px;padding:6px 10px;color:#6f8b4f}.live i{display:inline-block;width:5px;height:5px;background:#91b461;border-radius:50%;margin-right:5px}.exercise-label{display:block;font-size:10px;color:var(--muted);margin-bottom:6px}select{background:#fff;color:var(--ink);border:0;font-size:24px;font-weight:600;text-align:center;max-width:100%;cursor:pointer;padding-right:12px}.exercise-sub{font-size:10px;color:#959a8e;margin:6px 0 17px}.count-ring{display:block;position:relative;width:250px;height:250px;background:none;border:0;margin:0 auto;padding:0;border-radius:50%;transition:transform .12s}.count-ring:active{transform:scale(.97)}.count-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.count-ring circle{fill:none;stroke-width:6}.count-ring .track{stroke:#edf0e6}.count-ring #ring{stroke:#a3cb63;stroke-linecap:round;stroke-dasharray:729;stroke-dashoffset:729;transition:stroke-dashoffset .2s}.count-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.count-inner strong{font-size:78px;font-weight:500;letter-spacing:-5px;line-height:1.1}.count-inner>span{font-size:10px;letter-spacing:3px;margin-top:8px;color:#929a87}.count-inner small{font-size:10px;color:#98a18d;margin-top:18px}.keyboard{font-size:9px;color:#a3a99c;margin:7px 0 22px}kbd{background:#f5f6ef;border:1px solid #e6e9df;border-radius:4px;padding:2px 6px;margin-left:4px}.set-config{display:grid;grid-template-columns:1fr 1fr;gap:15px;text-align:left;max-width:330px;margin:0 auto 19px}label{font-size:10px;color:#859078}input{width:100%;border:1px solid var(--border);border-radius:7px;padding:10px;margin-top:7px;color:#3b4a33;background:#fcfcf9;font-size:13px;outline-color:#9ac363}.counter-actions{display:flex;gap:10px;max-width:330px;margin:auto}.primary{border:0;background:var(--lime);color:#2c3a23;border-radius:8px;padding:14px 20px;font-size:11px;font-weight:600;display:flex;justify-content:space-between;gap:25px;align-items:center}.counter-actions .primary{flex:1}.primary:hover{background:#b6e552}.icon-button{width:43px;border:1px solid var(--border);background:#fff;border-radius:8px;font-size:20px}.helper{font-size:8px;color:#a0a792;margin:18px 0 0}.right-column{display:flex;flex-direction:column;gap:18px}.daily,.timer{padding:23px 25px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}h2{font-size:13px;font-weight:600;margin:0}.mini-icon{font-size:20px;color:#8e9a7e}.metrics{display:flex;gap:0;padding:24px 0}.metrics>div{width:50%;display:flex;flex-direction:column;gap:7px}.metrics>div+div{border-left:1px solid var(--border);padding-left:30px}.metrics strong{font-weight:500;font-size:36px;letter-spacing:-1px}.metrics span{color:#929b86;font-size:10px}.goal-heading{display:flex;justify-content:space-between;font-size:10px;align-items:center}.goal-heading button{font-size:10px;background:none;border:0;color:#819663;padding:5px 0}.progress-track{height:6px;background:#eff2e9;border-radius:10px;margin:10px 0 12px;overflow:hidden}.progress-track>div{height:100%;width:0;background:#a8c976;transition:width .2s}.daily>p,.timer>p{font-size:10px;color:#99a18f;margin:0;line-height:1.6}.timer>p{margin-top:10px}.timer-row{display:flex;justify-content:space-between;align-items:center;margin:19px 0}.timer-row strong{font-size:43px;font-weight:500;letter-spacing:-2px;font-variant-numeric:tabular-nums}.timer-start{border:1px solid #e1e7d5;background:#f3f7ec;width:44px;height:44px;border-radius:50%;color:#758e53}.timer-presets{display:flex;gap:7px}.timer-presets button{border:1px solid var(--border);background:#fff;padding:8px 0;border-radius:6px;font-size:10px;flex:1;color:#849174}.timer-presets button.selected{background:#edf3e2;border-color:#d7e5be;color:#627c3e}.quote{display:flex;align-items:center;gap:20px;background:#ecf0e3;border-radius:14px;padding:23px 24px;flex:1}.quote>span{font-size:42px;color:#9eae7b}.quote h3{font-size:12px;font-weight:600;margin:0 0 8px}.quote p{font-size:10px;line-height:1.8;color:#8b977a;margin:0}.session{margin-top:24px;padding:25px 28px}.section-heading p{font-size:10px;color:#929b86;margin:8px 0 0}.pill{font-size:9px;border:1px solid var(--border);border-radius:20px;padding:6px 11px;color:#8d987f}.empty{text-align:center;padding:28px 10px 12px;color:#9aa38c;font-size:11px;line-height:1.8}.empty>span{display:block;font-size:26px;color:#c1cbbb;margin-bottom:8px}.set-row{display:flex;align-items:center;gap:16px;border-top:1px solid var(--border);padding:16px 0;font-size:11px}.set-row:first-child{margin-top:20px}.set-number{width:27px;height:27px;border-radius:7px;background:#f2f5eb;display:grid;place-items:center;color:#8b9c76}.set-name{flex:1}.set-name small{display:block;font-size:9px;color:#9ca38f;margin-top:5px}.set-reps{font-size:12px;color:#6a8052}.delete-set{border:0;background:none;color:#9ba58d;font-size:18px;padding:4px 8px}footer{display:flex;justify-content:space-between;color:#a6ad9c;font-size:9px;padding:29px 0}footer b{margin:0 7px;font-weight:400}.outline{border:1px solid #dce3d2;background:transparent;padding:11px 16px;border-radius:8px;font-size:11px}.history-card{padding:15px 28px;min-height:170px}.day-heading{font-size:12px;padding:20px 0 5px}.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.exercise-card{padding:25px;text-align:left;border:1px solid var(--border);background:#fff;border-radius:14px}.exercise-card:hover{border-color:#a6c176}.exercise-card .exercise-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#edf2e4;color:#799a4d;font-size:27px;margin-bottom:25px}.exercise-card h2{margin-bottom:10px}.exercise-card p{color:#939c87;font-size:10px}.exercise-card>span:last-child{display:block;color:#6d894c;font-size:10px;margin-top:25px}dialog{border:1px solid var(--border);border-radius:16px;padding:28px;width:340px;color:var(--ink)}dialog::backdrop{background:#14231877;backdrop-filter:blur(3px)}dialog p{font-size:11px;color:#8e9883}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}#toast{position:fixed;bottom:25px;left:calc(50% + 122px);transform:translateX(-50%) translateY(100px);background:#253b2d;color:#fff;padding:14px 23px;border-radius:10px;font-size:12px;opacity:0;transition:.2s;z-index:20}#toast.visible{transform:translateX(-50%) translateY(0);opacity:1}[hidden]{display:none!important}.focused .sidebar,.focused header,.focused .intro,.focused .right-column,.focused .session,.focused footer{display:none}.focused main{margin:0;padding:25px;max-width:700px;margin:auto}.focused .dashboard{display:block}.focused .counter{padding:35px}.focused:after{content:'Esc để thoát chế độ tập trung';position:fixed;bottom:15px;left:50%;transform:translateX(-50%);font-size:11px;color:#8b977f}
@media(min-width:1500px){main{margin-right:auto;margin-left:244px;padding:0 65px}.count-ring{width:275px;height:275px}}@media(max-width:1100px){.sidebar{width:205px;padding:35px 16px}main{margin-left:205px;padding:0 25px}h1{font-size:26px}.dashboard{gap:16px;grid-template-columns:1fr 1fr}.counter{padding:22px 19px}.daily,.timer{padding:22px 20px}.count-ring{width:220px;height:220px}.streak{display:none}}@media(max-width:800px){.sidebar{position:static;width:auto;padding:18px 20px;display:block}.brand{font-size:22px}.side-label,.side-note,.local{display:none}nav{display:flex;gap:7px;margin-top:19px}.nav{justify-content:center;padding:9px 5px;font-size:10px;margin:0}.nav>span{font-size:17px}main{margin:0;padding:0 20px}header{height:60px}.intro{padding:27px 0 24px}h1{font-size:25px}.intro p{font-size:11px}.dashboard{grid-template-columns:1fr 1fr}.counter{padding:22px 18px}.count-ring{width:200px;height:200px}.count-inner strong{font-size:65px}.quote{padding:18px 15px;gap:10px}.quote>span{font-size:29px}.quote h3{font-size:11px}.metrics>div+div{padding-left:15px}footer{font-size:8px;gap:20px}#toast{left:50%}.library-grid{grid-template-columns:1fr 1fr}.quiet span{display:none}.history-card{padding:10px 18px}}@media(max-width:580px){.dashboard{grid-template-columns:1fr}.counter{padding:24px}.count-ring{width:255px;height:255px}.count-inner strong{font-size:80px}.right-column{display:grid;grid-template-columns:1fr;gap:16px}.daily,.timer{padding:24px}.quote{padding:23px}.intro h1{font-size:24px}.eyebrow{font-size:8px}.breadcrumb{font-size:10px}.session{padding:23px 20px}.library-grid{grid-template-columns:1fr 1fr;gap:12px}.exercise-card{padding:20px 16px}footer{flex-direction:column;gap:10px}.intro{align-items:flex-start}.intro .outline{font-size:9px;white-space:nowrap;padding:9px}.set-config{max-width:100%}.counter-actions{max-width:100%}.nav{font-size:9px;gap:7px}.set-row{gap:9px}.helper{font-size:9px}}