@font-face{font-family:Public Sans Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/public-sans-vietnamese-wght-normal-CtlIRbEm.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Public Sans Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/public-sans-latin-ext-wght-normal-MQgHevqp.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Public Sans Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/public-sans-latin-wght-normal-DdeTHZLK.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper:#f2f5f8;--card:#fff;--ink:#151b24;--muted:#536072;--rule:#d3dae3;--field:#6b7a8e;--field-bg:#f5f7fa;--primary:#0b6b58;--on-primary:#fff;--seg-on:#dcf0ea;--blue:#3f67a8;--orange:#a34808;--orange-bar:#e8913a;--lift:0 10px 24px #0f172a1f;--error:#b3261e;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--paper:#0e131a;--card:#151b24;--ink:#e8ecf2;--muted:#a3afbf;--rule:#263140;--field:#3a4859;--field-bg:#0f141b;--primary:#5fd0b6;--on-primary:#0b1a16;--seg-on:#1b3032;--blue:#7c9ccb;--orange:#f0a04b;--orange-bar:#f0a04b;--lift:0 10px 26px #0000008c;--error:#ff9b91}}*{box-sizing:border-box}body{background:var(--paper);margin:0}button,input{font:inherit}.sheet{background:var(--paper);min-height:100vh;color:var(--ink);font-family:Public Sans Variable,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;container:sheet/inline-size}.num{font-variant-numeric:tabular-nums lining-nums}.sr{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.page{flex-direction:column;gap:20px;max-width:1120px;margin:0 auto;padding:20px 16px 32px;display:flex}.head h1{letter-spacing:-.01em;margin:0;font-size:24px;font-weight:800;line-height:1.25}.head p{color:var(--muted);margin:2px 0 0}.cols{grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;display:grid}.form{flex-direction:column;gap:16px;min-width:0;display:flex}fieldset{border:0;min-width:0;margin:0;padding:0}.card{background:var(--card);border:1px solid var(--rule);border-radius:14px;min-width:0;padding:20px 16px}.cq{container:card/inline-size}.card-title{margin:0;font-size:17px;font-weight:700;line-height:1.3}.sub{color:var(--muted);margin:2px 0 0;font-size:15px}.card-head{flex-direction:column;gap:12px;margin-bottom:16px;display:flex}.settings{flex-direction:column;gap:16px;margin-top:16px;display:flex}.card-head+.settings{margin-top:0}.setting{flex-direction:column;gap:6px;min-width:0;display:flex}.setting>label{font-size:15px;font-weight:600}.help{color:var(--muted);margin:0;font-size:15px}.seg-grid{border:1px solid var(--rule);background:var(--field-bg);border-radius:10px;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px;display:grid}.seg{min-height:44px;color:var(--muted);text-align:center;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:6px 12px;font-size:15px;font-weight:600;line-height:1.25;display:flex;position:relative}.seg.on{background:var(--seg-on);color:var(--primary)}.seg:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:1px}.box{background:var(--field-bg);height:48px;box-shadow:inset 0 0 0 1px var(--field);border-radius:10px;align-items:center;display:flex}.box.bad{box-shadow:inset 0 0 0 2px var(--error)}.box:focus-within{outline:3px solid var(--primary);outline-offset:1px}.box input{width:100%;min-width:0;height:100%;color:var(--ink);text-align:right;background:0 0;border:0;outline:none;flex:1;padding:0 0 0 12px;font-size:16px}.affix{color:var(--muted);font-size:16px}.affix.pre{padding-left:14px}.affix.post{padding:0 14px 0 6px}.affix.pre+input{padding-right:14px}.err{color:var(--error);align-items:flex-start;gap:6px;margin:0;font-size:15px;font-weight:600;display:flex}.err svg{flex:none;margin-top:3px}.err span{overflow-wrap:anywhere;min-width:0}@container sheet (width<=400px){.dbox .affix.post{display:none}.dbox input{padding:0 8px 0 4px}}.days{flex-direction:column;display:flex}.day{border-top:1px solid var(--rule)}.day .err{margin:0 0 8px}.drow{border-radius:8px;grid-template-columns:92px minmax(0,1fr) 44px 44px;align-items:center;gap:0 4px;margin:0 -6px;padding:4px 6px;display:grid}.drow.head-row{padding-bottom:6px}.head-row .hd-reg,.head-row .hd-ot{display:none}.hd{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:700;line-height:1.2}.hd-hours{text-align:right;padding-right:36px}.hd-tick{text-align:center;overflow-wrap:normal}.hd-tick .long{display:none}.drow.off{background:repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--field) 30%, transparent) 5px 6px)}.drow.leave{background:color-mix(in srgb, var(--primary) 12%, transparent)}.dname{flex-direction:column;min-width:0;font-weight:600;line-height:1.25;display:flex}.all-ot{color:var(--muted);font-size:12px;font-style:italic;font-weight:400}.dbox{height:44px}.tick{cursor:pointer;justify-content:center;justify-self:center;align-items:center;width:44px;height:44px;display:flex}.tick:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:-2px;border-radius:6px}.tick input{width:22px;height:22px;accent-color:var(--primary);cursor:pointer;margin:0}.split{color:var(--muted);grid-area:2/1/auto/-1;padding:0 0 6px 2px;font-size:14px}.cell{display:inline}.cell.ot:before{content:" · "}.cell.ot.has{color:var(--orange);font-weight:700}.lbl{display:inline}.actions{z-index:3;background:var(--paper);border-top:1px solid var(--rule);gap:12px;margin:0 -16px;padding:12px 16px;display:flex;position:sticky;bottom:0}.btn{cursor:pointer;border-radius:10px;flex:1 1 0;min-height:48px;padding:0 20px;font-size:16px;font-weight:600}.btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.btn.primary{background:var(--primary);color:var(--on-primary);border:0}.btn.secondary{border:1px solid var(--field);color:var(--ink);background:0 0}.result{flex-direction:column;gap:16px;display:flex}.empty{color:var(--muted);margin:0}.result-body{flex-direction:column;gap:16px;display:flex}.big-total{letter-spacing:-.02em;white-space:nowrap;font-size:clamp(30px,11vw,44px);font-weight:800;line-height:1.1}.bar{background:var(--rule);border-radius:5px;gap:2px;height:10px;display:flex;overflow:hidden}.bar.neutral{background:var(--rule)}.bar-reg{background:var(--blue)}.bar-ot{background:var(--orange-bar)}.rows{flex-direction:column;display:flex}.rrow{justify-content:space-between;align-items:center;gap:12px;padding:10px 0;font-size:15px;display:flex}.rlabel{align-items:center;gap:10px;min-width:0;font-weight:600;display:inline-flex}.sq{border-radius:2px;flex:none;width:10px;height:10px}.sq.reg{background:var(--blue)}.sq.ot{background:var(--orange-bar)}.amt{text-align:right;font-weight:700}.amt.ot{color:var(--orange)}.rrow.total{border-top:1px solid var(--rule);margin-top:4px;padding-top:14px}.total-amt{text-align:right;white-space:nowrap;font-size:24px;font-weight:800;line-height:1.2}.how{border-top:1px solid var(--rule);flex-direction:column;gap:6px;padding-top:14px;display:flex}.how h3,.ot-box h3{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 2px;font-size:13px;font-weight:700}.how p{overflow-wrap:anywhere;margin:0;font-size:15px}.muted{color:var(--muted)}.ot-box{border:1px solid var(--rule);background:var(--field-bg);border-radius:10px;padding:12px 14px}.ot-box p{overflow-wrap:anywhere;margin:0;font-size:15px}@container card (width>=420px){.settings{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:16px;display:grid}.settings.two{grid-template-columns:repeat(2,minmax(0,1fr))}}@container card (width>=500px){.card-head{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:16px}.modes{flex:none}.seg-grid{grid-template-columns:repeat(2,auto)}}@container card (width>=580px){.drow{grid-template-columns:88px 116px 128px 128px minmax(56px,1fr) minmax(56px,1fr);column-gap:8px;min-height:56px;padding:2px 6px}.split{display:contents}.drow.head-row{min-height:0;padding-bottom:8px}.head-row .hd-reg,.head-row .hd-ot{display:block}.hd-hours{padding-right:36px}.hd-reg,.hd-ot{text-align:right}.hd-tick .long{display:inline}.hd-tick{letter-spacing:.04em;padding:0 8px}.hd-tick .short{display:none}.cell{text-align:right;color:var(--ink);font-size:16px;display:block}.cell.ot:before{content:none}.cell.ot.has{color:var(--orange)}.lbl{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.all-ot{font-size:12px}}@container sheet (width>=900px){.page{padding:40px 32px 56px}.cols{grid-template-columns:minmax(0,1fr) 340px;gap:24px}.result{position:sticky;top:24px}.actions{background:0 0;border-top:0;margin:0;padding:0;position:static}.card{padding:24px}}.card,.btn,.seg,.box,.drow,.tick,.ot-box{transition:transform .18s,box-shadow .18s,background-color .18s,border-color .18s,color .18s}@media (hover:hover) and (pointer:fine){.card:hover{border-color:color-mix(in srgb, var(--primary) 40%, var(--rule))}.btn.primary:hover{background:color-mix(in srgb, var(--primary) 86%, #fff)}.btn.secondary:hover{background:color-mix(in srgb, var(--primary) 10%, transparent);border-color:var(--primary)}.box:hover:not(:focus-within):not(.bad){box-shadow:inset 0 0 0 1px var(--primary)}.seg:not(.on):hover{background:color-mix(in srgb, var(--primary) 10%, transparent);color:var(--ink)}.seg.on:hover{background:color-mix(in srgb, var(--primary) 26%, var(--seg-on))}.day:hover .drow:not(.head-row):not(.off):not(.leave){background:color-mix(in srgb, var(--ink) 5%, transparent)}.tick:hover{background:color-mix(in srgb, var(--primary) 14%, transparent);border-radius:8px}.ot-box:hover{border-color:color-mix(in srgb, var(--primary) 40%, var(--rule))}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.card:hover:not(:focus-within),.btn:hover{box-shadow:var(--lift);transform:translateY(-2px)}.btn:active{box-shadow:none;transform:translateY(0)}.seg:hover,.tick:hover{transform:translateY(-1px)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}