/* SỔ LỚP — Toàn bộ CSS được tách từ tệp HTML gốc. */

/* --- style-1 --- */

:root{--ink:#263c35;--muted:#7c8983;--line:#e5eae4;--green:#38654e;--bg:#f6f7f2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro',Arial,sans-serif;font-size:13px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;transition:.16s}button:disabled{cursor:default;opacity:.5}button:hover:not(:disabled){filter:brightness(.97)}button:focus-visible,a:focus-visible{outline:3px solid #b9d9a4;outline-offset:3px}button{color:inherit}a{color:inherit}button svg{flex-shrink:0}.app{min-height:100vh}.sidebar{width:236px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:38px 22px 22px}.brand{text-decoration:none;font-size:25px;font-weight:700;letter-spacing:-1.2px;display:flex;align-items:center;gap:10px;margin-bottom:54px;padding-left:8px}.brand>span:first-child{background:var(--green);color:#fff;width:37px;height:37px;display:grid;place-items:center;border-radius:11px}.brandDot{color:#cbaa70;margin-left:-9px}.sideLabel{font-size:9px;letter-spacing:1.3px;color:#97a198;font-weight:600;padding-left:14px;margin-bottom:17px}nav{display:grid;gap:7px}nav button{border:0;background:none;display:flex;align-items:center;gap:13px;padding:14px 15px;text-align:left;color:#78857d;border-radius:9px;font-weight:500}nav button.active{background:#edf3eb;color:#37604a}nav small{margin-left:auto;background:#d9e5d7;border-radius:5px;padding:2px 6px;font-size:10px}.sideNote{margin-top:auto;background:#f6f7ef;border-radius:12px;padding:21px 18px;position:relative;overflow:hidden}.sideNote svg{color:#9eae83;margin-bottom:14px}.sideNote strong{display:block;line-height:1.7;font-size:14px}.sideNote p{color:#899181;font-size:11px;line-height:1.8;margin:8px 0 0}.profile{border-top:1px solid var(--line);margin-top:24px;padding-top:23px;display:flex;gap:10px;align-items:center}.profile>span:first-child{width:35px;height:35px;background:#efe8db;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#8a7455}.profile strong,.profile small{display:block}.profile strong{font-size:11px}.profile small{font-size:10px;color:var(--muted);margin-top:5px}.online{width:7px;height:7px;background:#8aa77c;border-radius:50%;margin-left:auto}main{margin-left:236px}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid var(--line);background:#fafbf7}.breadcrumb{font-size:11px;color:#90988e;display:flex;gap:13px}.breadcrumb b{font-weight:500;color:#536454}.cloud{display:flex;gap:7px;align-items:center;color:#7e8b7c;font-size:10px}.content{max-width:1480px;margin:auto;padding:38px 44px 0}.pageHead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:31px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#8b9b7f;font-weight:600;margin-bottom:12px}h1{font-size:28px;font-weight:600;letter-spacing:-1.2px;margin:0 0 12px}h2{font-size:16px;font-weight:600;letter-spacing:-.4px;margin:0}h3{font-size:17px;font-weight:600;margin:16px 0 10px}p{color:var(--muted);line-height:1.8;margin:0}.pageHead p{font-size:12px}.primary,.subtle,.textButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:12px 16px;border:1px solid transparent;font-size:11px;font-weight:500;white-space:nowrap}.primary{background:#3b654f;color:#fff;box-shadow:0 3px 6px #243b3010}.subtle{background:#fff;border-color:var(--line)}.textButton{background:none;color:#55735a;padding:5px 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:27px}.stat{padding:22px 21px;background:white;border:1px solid var(--line);border-radius:12px;position:relative}.statIcon{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;position:absolute;right:20px;top:23px}.tone0{background:#edf3e9;color:#739266}.tone1{background:#f0eff8;color:#8a86ac}.tone2{background:#f9f0e4;color:#bb9a67}.tone3{background:#eaf3ef;color:#76a68d}.statNumber{font-size:30px;line-height:1.1;font-weight:600;margin-bottom:18px;letter-spacing:-1px}.statNumber span{font-size:11px;display:block;margin-top:13px;letter-spacing:0;font-weight:500}.stat>small{font-size:9px;color:#9ca697;display:block;border-top:1px solid #f0f2ed;padding-top:13px}.overviewGrid{display:grid;grid-template-columns:minmax(0,1fr) 287px;gap:24px;margin-bottom:25px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.panelHead{padding:23px 25px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eef0e9;gap:15px}.panelHead p{font-size:10px;margin-top:7px}.pill{display:inline-block;background:#eff3eb;color:#718369;padding:4px 8px;border-radius:5px;font-size:10px;font-weight:500;vertical-align:middle}.panelHead h2 .pill{margin-left:5px}.welcome{background:#eaf0df;border:1px solid #e1e9d5;border-radius:12px;padding:26px 29px;overflow:hidden}.welcome h2{font-size:25px;line-height:1.55;letter-spacing:-1px;margin-bottom:10px}.welcome p{font-size:11px;color:#7d8d70}.welcome button{display:flex;align-items:center;gap:9px;background:transparent;border:0;border-top:1px solid #d7e1ca;width:100%;padding:18px 0 0;margin-top:22px;font-size:11px;text-align:left;color:#536a43}.illustration{height:130px;display:grid;place-items:center;position:relative}.paper{background:#fffef6;border:1px solid #e1e6d3;width:95px;height:105px;border-radius:8px;transform:rotate(-12deg);padding:25px 17px;box-shadow:8px 10px 0 #d8e3c8}.paper span{display:block;background:#e0e7d4;height:4px;border-radius:3px;margin:9px 0;width:50px}.paper div{position:absolute;right:-17px;bottom:5px;border:5px solid #eaf0df;background:#638259;color:#fff;width:41px;height:41px;border-radius:50%;display:grid;place-items:center;font-size:21px}.floating{position:absolute;right:18px;top:15px;color:#b4a36e;font-size:30px}.welcome .eyebrow{color:#8b9b78;margin-top:10px}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:42px 25px;min-height:290px;color:#7f9275}.emptyIcon{background:#f3f6ed;border-radius:18px;padding:20px;display:grid;place-items:center}.empty p{font-size:11px;margin-bottom:22px;max-width:310px}.empty h3{color:#53654b}.empty .sessionCard{width:100%;margin-bottom:8px}.classGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:15px;padding:20px}.classTile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:19px;text-align:left;position:relative}.classMonogram{display:grid;place-items:center;width:43px;height:43px;border-radius:11px;font-size:15px;font-weight:600;margin-bottom:18px}.classTile strong{display:block;font-weight:600;font-size:13px}.classTile p{font-size:10px;margin-top:7px}.classTile>svg{position:absolute;right:20px;top:25px;color:#97a290}.inlineEmpty{padding:28px 20px;color:#929c8c;font-size:12px;text-align:center;width:100%;grid-column:1/-1}.classDetail{background:#fff;border:1px solid var(--line);padding:23px;border-radius:12px}.classDetail p{margin-top:9px;font-size:12px}.classMeta{color:var(--muted);font-size:11px;margin:22px 0}.actions{display:flex;justify-content:space-between;align-items:center}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:20px 24px;border-bottom:1px solid var(--line)}.toolbar>span{font-size:11px;color:var(--muted);margin-right:auto}.toolbar>.primary:last-child,.toolbar>.subtle:last-child{margin-left:auto}input,select,textarea{background:#fff;border:1px solid #dfe5da;border-radius:7px;padding:11px 12px;outline:none;color:var(--ink);min-width:0}input:focus,select:focus,textarea:focus{border-color:#81a77b;box-shadow:0 0 0 3px #edf2e9}input::placeholder,textarea::placeholder{color:#a5afa0}select{font-size:11px;max-width:100%}.search{display:flex;align-items:center;gap:9px;color:#9aa78f}.search input{border:0;box-shadow:none;padding-left:0;width:190px}.tableWrap{width:100%;overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:10px;font-weight:500;color:#929d89;background:#fafbf7;padding:16px 24px}td{padding:16px 24px;border-top:1px solid #eef0e9;font-size:12px}td strong{font-weight:500}.avatar{display:inline-grid;place-items:center;vertical-align:middle;width:31px;height:31px;border-radius:50%;background:#eff2e9;color:#819373;margin-right:11px;font-size:11px}.iconButton{border:0;background:transparent;display:inline-grid;place-items:center;padding:7px;color:#98a18f;border-radius:6px}.iconButton:hover{color:#ad665c;background:#faf1ed}.dateLabel{font-size:10px;color:#91a082;margin:20px 25px 10px;text-transform:uppercase}.sessionCard{display:flex;align-items:center;gap:17px;border-left:3px solid var(--green);margin:10px 24px 17px;padding:10px 0 10px 14px}.sessionTime{font-size:12px;font-weight:600}.sessionTime small{display:block;font-weight:400;color:#a1aa99;font-size:10px;margin-top:7px}.sessionInfo{flex:1}.sessionInfo strong{display:block;font-size:12px;font-weight:600}.sessionInfo span{display:block;margin-top:8px;color:#98a18f;font-size:10px}.sessionCard .subtle{padding:8px 10px;font-size:10px}.weekNav{display:flex;gap:12px;align-items:center}.weekNav button{background:none;border:0;padding:5px}.weekNav strong{font-weight:500;font-size:12px}.weekGrid{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));min-height:380px;overflow:auto}.dayColumn{border-right:1px solid var(--line);padding:12px 8px;min-height:380px}.dayColumn:last-child{border:0}.dayTitle{font-size:9px;color:#97a38e;text-align:center;border-bottom:1px solid var(--line);padding:7px 0 19px;margin-bottom:15px}.dayTitle strong{display:block;font-size:21px;color:#5c7050;margin-top:12px;font-weight:500}.isToday{background:#fafcf6}.isToday .dayTitle strong{background:#41664c;color:white;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin:7px auto -3px}.calendarEvent{border-left:3px solid;padding:9px 7px;border-radius:5px;margin-bottom:10px}.calendarEvent button:first-child{padding:0;background:none;border:0;display:block;text-align:left;width:100%}.calendarEvent small{font-size:9px;color:#89977e}.calendarEvent b{display:block;font-weight:600;font-size:11px;margin:10px 0}.calendarEvent span{font-size:9px;color:#8e9a83;line-height:1.8;display:block}.deleteEvent{display:block;margin-left:auto;background:none;border:0;color:#9eab94;padding:7px 0 0}.noSchedule{font-size:9px;color:#bbc3b2;display:block;text-align:center;margin-top:20px}.inlineLabel{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.attendanceHead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:25px}.attendanceHead p{font-size:11px;margin-top:9px}.statusGroup{display:flex;gap:4px}.statusGroup button{border:1px solid #e5eade;background:white;border-radius:5px;font-size:10px;color:#9ca693;padding:7px 8px}.statusGroup .selected.present{color:#4f7b42;background:#edf5e7;border-color:#b7ceac}.statusGroup .selected.late{color:#ac8c48;background:#faf2df;border-color:#ddc792}.statusGroup .selected.excused{color:#6d82a3;background:#edf2fa;border-color:#b6c7df}.statusGroup .selected.absent{color:#af7266;background:#fbefeb;border-color:#dfb9b1}.statusGroup .clearMark{border:0;padding:2px 6px;font-size:16px;color:#b6bead}.noteInput{border:0;padding:7px 0;font-size:11px;min-width:130px;width:100%}.saveBar{padding:20px 25px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);background:#fafbf7;gap:12px}.saveBar>span{font-size:11px;color:#8f9e83}.reportNote{padding:22px 25px;font-size:10px}footer{display:flex;justify-content:space-between;font-size:9px;color:#a0aa96;margin-top:35px;padding:23px 0;border-top:1px solid var(--line)}footer b{padding:0 7px;font-weight:400}.error{display:flex;gap:12px;align-items:center;background:#fff1ed;color:#a96958;border:1px solid #efcec2;padding:15px;border-radius:8px;font-size:12px;margin-bottom:20px}.error button{margin-left:auto;background:none;border:0;color:inherit}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#2f5743;box-shadow:0 8px 30px #2c45352b;color:white;padding:14px 22px;border-radius:9px;z-index:60;display:flex;gap:10px;align-items:center}.modalBackdrop{position:fixed;inset:0;background:#1a312f60;backdrop-filter:blur(4px);z-index:50;display:grid;place-items:center;padding:20px}.modal{width:470px;max-width:100%;max-height:90vh;overflow:auto;background:#fffefa;border-radius:16px;box-shadow:0 20px 80px #20372e30;padding:30px}.modalHead{display:flex;justify-content:space-between;align-items:start;margin-bottom:26px}.modalHead .eyebrow{font-size:8px}.modal h2{font-size:23px}.modal label{display:flex;flex-direction:column;gap:9px;font-size:11px;color:#68795e;margin-bottom:18px}.modal label input,.modal label select,.modal label textarea{width:100%;font-size:12px}.modal textarea{resize:vertical;min-height:95px}.modal label small{color:#a2ad96;font-size:10px}.formRow{display:grid;grid-template-columns:1fr 1fr;gap:16px}.modalActions{display:flex;justify-content:flex-end;gap:10px;margin-top:26px;border-top:1px solid var(--line);padding-top:23px}.formError{color:#a66958;font-size:11px;line-height:1.7;padding:10px;background:#fff0e9;border-radius:5px}
@media(min-width:1550px){.content{padding-top:50px}.pageHead{margin-bottom:36px}.stat{padding:28px}.overviewGrid{grid-template-columns:1fr 330px}.welcome{padding:30px 35px}}
@media(max-width:1150px){.sidebar{width:205px;padding-left:15px;padding-right:15px}main{margin-left:205px}.content{padding:30px 25px 0}header{padding:0 25px}.overviewGrid{grid-template-columns:1fr 245px}.welcome{padding:22px}.stats{gap:10px}.stat{padding:18px 14px}.statIcon{right:12px;width:31px;height:31px}.statNumber{font-size:26px}.statNumber span{font-size:10px}h1{font-size:25px}.panelHead{padding:21px}.weekGrid{display:flex}.dayColumn{flex:1;min-width:120px}}
@media(max-width:850px){.sidebar{width:76px;padding:25px 12px}.brand{padding:0;margin:0 0 35px;font-size:0;gap:0;justify-content:center}.brandDot,.sideLabel,.sideNote,.profile{display:none}nav{gap:12px}nav button{font-size:0;padding:13px;justify-content:center}nav button svg{width:21px;height:21px}nav small{display:none}main{margin-left:76px}.overviewGrid{grid-template-columns:1fr 230px}.content{padding:27px 22px 0}.cloud{font-size:0}.stats{grid-template-columns:repeat(2,1fr)}.pageHead{align-items:flex-start}.pageHead>.primary{font-size:10px;padding:11px}.pageHead p{font-size:11px}.toolbar{padding:16px}.classGrid{padding:15px}}
@media(max-width:620px){.sidebar{position:fixed;inset:auto 0 0;width:100%;height:66px;z-index:30;background:#fffffff5;border-top:1px solid var(--line);padding:6px 8px;backdrop-filter:blur(10px)}.brand{display:none}nav{display:flex;justify-content:space-around;gap:0}nav button{font-size:8px;flex-direction:column;padding:7px;gap:5px;flex:1}nav button svg{width:18px;height:18px}main{margin-left:0;padding-bottom:66px}header{height:58px;padding:0 20px}.breadcrumb{font-size:9px}.content{padding:26px 17px 0}.pageHead{flex-wrap:wrap;gap:18px}.pageHead .eyebrow{font-size:8px}h1{font-size:24px;letter-spacing:-1px}.pageHead>.primary{padding:11px 14px}.overviewGrid{grid-template-columns:1fr}.welcome{display:none}.stats{gap:10px}.stat{padding:17px 13px}.statIcon{width:28px;height:28px;right:13px;top:18px}.statIcon svg{width:16px}.statNumber{font-size:27px}.stat>small{font-size:8px}.statNumber span{font-size:10px}.panelHead{padding:19px 17px}h2{font-size:14px}.panelHead .textButton{font-size:9px}.sessionCard{margin:10px 17px 17px;padding-left:10px;gap:10px}.sessionInfo span{font-size:9px}.sessionCard .subtle{font-size:9px}.dateLabel{margin-left:17px}.empty{padding:32px 18px;min-height:270px}.toolbar{gap:10px}.toolbar>.primary:last-child{margin-left:0}.toolbar select{max-width:180px}.weekNav strong{font-size:10px}.weekNav{gap:6px}.dayColumn{min-width:125px}.attendanceHead{padding:20px 16px;flex-wrap:wrap}.saveBar{padding:16px}.saveBar>span{font-size:9px}.saveBar .primary{font-size:10px}td,th{padding:14px 16px}.search{width:100%}.classGrid{grid-template-columns:1fr}.classDetail{padding:20px}.modal{padding:24px}.modal h2{font-size:21px}footer{font-size:8px;gap:20px}footer>span:last-child{display:none}.toast{bottom:85px;font-size:11px;width:max-content;max-width:90%}}
.profileLink{text-decoration:none}.profileLink>div{min-width:0}.profileLink strong{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profileLink:hover strong{color:#568355}.mobileAccount{display:none}.authPage{min-height:100vh;background:#f5f7ef;padding:40px max(24px,6vw);color:var(--ink)}.authBrand{font-size:27px;font-weight:700;letter-spacing:-1px;display:flex;gap:10px;align-items:center;text-decoration:none}.authBrand svg{color:#52734d}.authBrand span{color:#c1a676;margin-left:-8px}.authLayout{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;max-width:1080px;margin:80px auto}.authStory h1{font-size:52px;letter-spacing:-2.6px;line-height:1.4;margin:20px 0}.authStory>p{line-height:2.1;font-size:13px}.authBenefits{display:grid;gap:23px;margin-top:40px}.authBenefits>div{display:flex;gap:14px;align-items:center;font-size:12px;color:#6c805e}.authBenefits svg{color:#89a278}.authCard{padding:38px;background:#fffefb;border:1px solid #e1e7d9;border-radius:18px;box-shadow:0 15px 50px #455e3d08}.authIcon{display:grid;place-items:center;width:61px;height:61px;background:#eef4e6;color:#6f8c5b;border-radius:16px;margin-bottom:25px}.authCard h2{font-size:25px;letter-spacing:-1px;margin-bottom:13px}.authCard>p{font-size:12px}.authLink{width:100%;text-decoration:none;padding:15px;margin-top:26px;font-size:12px}.authDivider{font-size:8px;letter-spacing:1.3px;text-align:center;margin-top:28px;color:#a0ac94}.authDivider+.authLink{margin-top:16px}.authCard .authHint{font-size:10px;line-height:1.9;margin:23px 0 0;color:#a1ac97}.authSecondary{display:flex;justify-content:center;align-items:center;gap:8px;color:#829173;font-size:11px;margin-top:22px;text-decoration:none}.authFooter{font-size:10px;color:#a2ad97;text-align:center;padding:20px}.signedIn{font-size:11px;line-height:2;color:#94a087;background:#f3f6ed;padding:16px;border-radius:8px;margin-top:22px;word-break:break-word}.signedIn strong{color:#5e7750;font-weight:500}.profileCard{max-width:520px;margin:36px auto}.profileCard form{margin-top:25px}.profileCard label{display:flex;flex-direction:column;gap:8px;margin-bottom:19px;font-size:11px;color:#6e805f}.profileCard label small{font-size:9px;color:#a3ae97}.profileCard input{width:100%;font-size:12px}.profileCard input:disabled{background:#f4f6ef;color:#98a18f}.profileCard .authLink{margin-top:10px}.savedProfile{display:flex;gap:8px;align-items:center;background:#edf5e7;color:#6b8957;padding:12px;border-radius:7px;margin-bottom:16px;font-size:11px}@media(max-width:850px){.authLayout{gap:30px;margin:50px auto}.authStory h1{font-size:38px}.authCard{padding:28px}.mobileAccount{display:block;text-decoration:none;border:1px solid var(--line);padding:8px 12px;border-radius:6px;font-size:10px;margin-left:auto;margin-right:15px}.authStory>p br{display:none}}@media(max-width:620px){.authPage{padding:25px 20px}.authLayout{grid-template-columns:1fr;gap:25px;margin:35px auto}.authStory h1{font-size:34px}.authBenefits{display:none}.authStory>p{font-size:11px}.authCard h2{font-size:23px}.authCard{padding:27px}.authStory h1 br{display:none}.authBrand{font-size:24px}.profileCard{margin:30px auto}.authFooter{font-size:9px}}
.backupTools{display:flex;gap:6px;margin-left:auto;margin-right:16px}.backupTools button{border:1px solid var(--line);background:white;padding:7px 9px;border-radius:6px;font-size:9px}.offlineNotice{font-size:10px;line-height:1.9;padding:13px;border-radius:7px;background:#f3f6ed;color:#89997a;margin-top:20px}.authSwitch{display:flex;gap:8px;margin:20px 0}.authSwitch button{flex:1;border:1px solid var(--line);background:#fff;padding:11px;border-radius:7px;font-size:11px}.authSwitch .chosen{background:#e9f0e1;color:#55764b;border-color:#b8cbaa}.authCard form label{display:flex;flex-direction:column;gap:9px;font-size:11px;color:#7e8e72;margin-top:16px}.authCard form input{width:100%}@media(max-width:620px){.backupTools{gap:3px;margin-right:7px}.backupTools button{padding:6px 5px;font-size:8px}.mobileAccount{margin-right:7px;padding:6px}.cloud{display:none}}

/* --- fin-receipt-style --- */

.fin-receipt-backdrop{position:fixed;inset:0;background:#1a312f99;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}.fin-receipt{background:white;width:480px;max-width:100%;max-height:95vh;overflow:auto;border-radius:15px;padding:28px 34px;box-shadow:0 15px 50px #0002}.fin-receipt hr{border:0;border-top:1px solid #e5eae4;margin:18px 0}.fin-receipt p{margin:7px 0}.fin-receipt-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:18px}.fin-qr{text-align:center;background:#f7faf5;border-radius:12px;padding:16px;margin:20px 0}.fin-qr img{display:block;width:260px;max-width:100%;margin:auto}.fin-qr strong{display:block;margin:8px 0}@media print{body>*:not(#fin-receipt-modal){display:none!important}#fin-receipt-modal{position:static!important;display:block!important;background:white!important;padding:0!important}#fin-receipt-modal .fin-receipt{width:100%!important;max-height:none!important;overflow:visible!important;box-shadow:none!important}#fin-receipt-modal .fin-receipt-actions{display:none!important}}

/* --- solop-month-navigation-fix --- */


/* Bộ chọn tháng/năm thanh toán rõ ràng, không phụ thuộc lịch mặc định của trình duyệt */
.fin-date-group{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#68795e;font-weight:600}.fin-date-group input{height:39px;min-width:158px}.fin-date-group small{font-weight:400;font-size:9px;color:#899688}.fin-daily-summary{background:#eaf3eb;border:1px solid #d9e6d9;padding:12px 16px;border-radius:9px;font-size:12px;margin:-3px 0 17px;color:#37604a}.fin-daily-summary span{color:#7c8983;font-size:10px}.fin-month-group{display:flex;flex-direction:column;gap:8px;min-width:270px}
.fin-month-title{font-size:11px;color:#68795e;font-weight:600}
.fin-month-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fin-month-nav select{height:39px;padding:8px 10px;background:#fff;border:1px solid #dfe5da;border-radius:8px;font-size:12px}
.fin-month-nav button{height:39px;min-width:36px;border:1px solid #dfe5da;border-radius:8px;background:#fff;color:#38654e;font-weight:700;font-size:19px}
.fin-month-nav #fin-current-month{font-size:11px;padding:0 12px;font-weight:600}
.fin-month-nav button:hover{background:#edf3eb}
/* Chức năng mở rộng: chỉ hiển thị chữ, không có icon */
.sidebar nav .addon-nav-button{gap:0;white-space:normal;line-height:1.3}
@media(max-width:620px){.sidebar nav .addon-nav-button{font-size:9px;line-height:1.2}.fin-month-group{min-width:0;width:100%}.fin-month-nav{gap:5px}.fin-month-nav select{max-width:105px}}


/* --- surcharge-style --- */


/* Quản lý phụ phí */
.surcharge-banner{display:flex;align-items:center;gap:19px;border-color:#ebdaed!important;background:linear-gradient(115deg,#fff8fc,#f8f2ff)!important}
.surcharge-banner-icon{flex:none;width:61px;height:61px;border-radius:18px;background:#f3e6f5;color:#ac7ca8;display:grid;place-items:center;font-size:30px}
.surcharge-banner strong{display:block;color:#8f628d;font-size:25px;margin:6px 0}.surcharge-banner p{font-size:11px;line-height:1.7}.surcharge-form-card{border-color:#efe3ed!important}.surcharge-section-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:17px;flex-wrap:wrap}.surcharge-section-heading h2{margin:0}.surcharge-pill{display:inline-block;border-radius:100px;padding:7px 11px;background:#f9edf6;color:#a17b9c;font-size:10px}
.surcharge-form-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-top:15px}.surcharge-form-footer p{font-size:11px;max-width:500px}.surcharge-table{white-space:normal;min-width:650px}.surcharge-table th,.surcharge-table td{padding:13px}.surcharge-remove{font-size:11px!important;padding:7px 12px!important;color:#a36377!important}
.fin-extra-summary{background:#fdf4fa;border:1px solid #f2ddea;border-radius:12px;padding:12px 17px;margin:0 0 15px;color:#936b88;font-size:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.fin-extra-summary strong{color:#8c548c}.fin-extra-summary button{background:none;border:0;text-decoration:underline;color:#895c88;font-size:11px;font-weight:700;margin-left:auto}
#addon-extra-custom-wrap[hidden]{display:none!important}


/* --- style-5 --- */


#finance-launch{margin:12px 0;padding:12px 14px;width:100%;border:1px solid #d9e6d9;border-radius:9px;background:#eaf3eb;color:#37604a;text-align:left;font-weight:600;font-size:12px}#finance-overlay{position:fixed;inset:0;z-index:100;background:#f6f7f2;overflow:auto;padding:35px max(20px,5vw);color:#263c35}#finance-overlay[hidden]{display:none}.fin-top{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:25px}.fin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:20px 0}.fin-card,.fin-panel{background:white;border:1px solid #e5eae4;border-radius:12px;padding:22px}.fin-card strong{display:block;font-size:25px;margin-top:10px}.fin-card small{color:#7c8983}.fin-controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:20px}.fin-controls label{display:grid;gap:6px}.fin-table{overflow:auto}.fin-table table{min-width:790px}.fin-table td,.fin-table th{padding:12px}.fin-actions{display:flex;gap:8px;flex-wrap:wrap}.fin-actions button{border:1px solid #dce7da;border-radius:7px;padding:8px;background:white}.fin-actions button:hover{background:#edf3eb}.fin-muted{font-size:11px;color:#829083}.fin-panel h2{margin-bottom:15px}@media(max-width:650px){.fin-grid{grid-template-columns:1fr}#finance-overlay{padding:18px}.fin-card strong{font-size:23px}}


/* --- fin-rates-styles --- */

.fin-rates-backdrop{position:fixed;inset:0;z-index:120;background:#1a312f75;display:grid;place-items:center;padding:16px}.fin-rates-dialog{background:#fffefa;border-radius:16px;padding:28px;width:min(680px,100%);max-height:90vh;overflow:auto;box-shadow:0 22px 70px #172b2540}.fin-rates-header{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.fin-rates-header h2{font-size:23px;margin:0 0 9px}.fin-rates-header p{font-size:12px}.fin-rates-list{margin:23px 0;display:grid;gap:10px}.fin-rate-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #e5eae4;border-radius:10px;padding:15px}.fin-rate-row strong,.fin-rate-row small{display:block}.fin-rate-row strong{font-size:13px}.fin-rate-row small{color:#879487;font-size:10px;margin-top:6px}.fin-rate-input{display:flex;align-items:center;gap:8px}.fin-rate-input input{width:145px;text-align:right;font-weight:600}.fin-rate-input em{font-size:11px;color:#829083;font-style:normal;white-space:nowrap}.fin-rates-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid #e5eae4}@media(max-width:550px){.fin-rates-dialog{padding:19px}.fin-rates-header h2{font-size:19px}.fin-rate-row{align-items:stretch;flex-direction:column}.fin-rate-input input{flex:1;width:100%}}

/* --- style-7 --- */


#tw-modal{position:fixed;inset:0;background:#182e2880;z-index:9999;display:none;place-items:center;padding:18px}#tw-modal.open{display:grid}#tw-card{background:#fff;border-radius:16px;padding:26px;max-width:480px;width:100%;box-shadow:0 15px 55px #0002}#tw-card h2{margin-bottom:12px}#tw-card label{display:block;margin:12px 0 5px;font-size:12px}#tw-card input,#tw-card select{width:100%}#tw-card .tw-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}#tw-card .tw-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}#tw-card p{font-size:11px}


/* --- solop-plus-style --- */


/* Sổ Lớp Plus: trang chức năng bổ sung và ảnh giáo viên */
@media(min-width:621px){.sidebar{overflow-y:auto;scrollbar-width:thin}.sidebar .brand{margin-bottom:27px}.sidebar nav{gap:3px}.sidebar nav>button{padding:10px 12px;min-height:37px}.sidebar .sideNote{display:none}.sidebar .profile{margin-top:auto;flex-shrink:0}.sidebar .addon-nav-separator{margin:9px 0 5px;padding:0 12px;font-size:9px;letter-spacing:1.4px;color:#98a794;font-weight:700}}
.sidebar nav .addon-nav-button{font-size:11px;text-align:left;border:0;background:transparent;border-radius:8px;color:#74867a;display:flex;align-items:center;gap:12px;font-weight:500;width:100%;white-space:nowrap}
.sidebar nav .addon-nav-button:hover,.sidebar nav .addon-nav-button.addon-selected{background:#edf3eb;color:#37604a}
.sidebar nav .addon-nav-emoji{font-size:17px;width:19px;text-align:center;display:inline-grid;place-items:center}
.profile.profileLink>span:first-child{background-position:center;background-size:cover;background-repeat:no-repeat;flex-shrink:0}
@media(max-width:620px){.sidebar nav{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:thin;padding-bottom:2px}.sidebar nav>button,.sidebar nav .addon-nav-button{flex:0 0 78px;min-width:78px;font-size:8px;justify-content:center;padding:6px 4px;gap:3px;flex-direction:column;white-space:nowrap}.sidebar nav .addon-nav-separator{display:none}#finance-launch{margin:0!important;padding:6px 4px!important;font-size:8px!important;width:86px!important;flex:0 0 86px!important;text-align:center!important}.sidebar nav .addon-nav-emoji{font-size:18px}.sidebar{padding:5px 5px}}
.addon-avatar-editor{margin:23px 0 0;padding:19px;border:1px solid #dfe8dd;background:#f8fbf6;border-radius:13px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.addon-avatar-preview{width:82px;height:82px;border:3px solid white;background:#dbe8d5;color:#42674e;display:grid;place-items:center;border-radius:50%;font-size:30px;font-weight:700;box-shadow:0 0 0 1px #d5e2d2;background-size:cover;background-position:center;flex-shrink:0}
.addon-avatar-copy{flex:1;min-width:190px}.addon-avatar-copy strong{display:block;font-size:13px;margin-bottom:7px}.addon-avatar-copy p{font-size:10px;margin-bottom:11px}.addon-avatar-buttons{display:flex;gap:8px;flex-wrap:wrap}.addon-avatar-buttons button,.addon-btn{padding:9px 13px;border:1px solid #d5e3d2;background:white;border-radius:8px;font-size:11px;color:#3d634b;cursor:pointer}
.addon-avatar-editor input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.addon-avatar-msg{font-size:10px;color:#547b55;min-height:15px;margin-top:8px}
#addon-panel{position:fixed;inset:0;background:#f6f7f2;z-index:105;overflow-y:auto;padding:27px clamp(16px,4vw,65px) 45px;color:#263c35}
#addon-panel[hidden]{display:none}#addon-panel .addon-inner{max-width:1250px;margin:0 auto}
.addon-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.addon-head h1{font-size:27px;margin:4px 0 8px}.addon-head p{font-size:12px}.addon-kicker{font-size:10px;color:#85a17f;letter-spacing:1.5px;font-weight:700}
.addon-actions{display:flex;gap:9px;flex-wrap:wrap}.addon-actions button,.addon-control button,.addon-card button{font-size:11px}
.addon-card{background:white;border:1px solid #e2e9de;border-radius:12px;padding:22px;margin-bottom:18px}
.addon-card h2{margin-bottom:13px;font-size:16px}.addon-card p{font-size:11px}
.addon-toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}.addon-toolbar label,.addon-form label{display:flex;flex-direction:column;gap:7px;font-size:11px;color:#648069;flex:1;min-width:150px}
.addon-toolbar select,.addon-toolbar input,.addon-form input,.addon-form textarea,.addon-form select{width:100%;font-size:12px;background:#fff}
.addon-form{display:grid;gap:13px}.addon-form textarea{min-height:110px;resize:vertical}.addon-form .addon-row{display:flex;gap:14px;flex-wrap:wrap}.addon-form .addon-row label{flex:1}
.addon-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.addon-summary>div{background:#fff;border:1px solid #e3e9df;border-radius:11px;padding:22px}.addon-summary span{font-size:10px;color:#839482}.addon-summary strong{font-size:26px;display:block;margin-top:9px}
.addon-table-scroll{overflow-x:auto}.addon-table-scroll table{min-width:620px;width:100%;border-collapse:collapse}.addon-table-scroll th,.addon-table-scroll td{padding:12px;text-align:left;font-size:11px}.addon-table-scroll td{border-top:1px solid #edf0e9}
.addon-badge{border-radius:6px;padding:4px 7px;background:#edf4ea;font-size:10px;color:#568257}.addon-empty{padding:36px 15px;text-align:center;color:#91a18b}
.addon-note{background:#f0f6ea;border-radius:10px;padding:15px;color:#688362;font-size:11px;line-height:1.8}
.addon-sheet{margin-top:17px;border:1px solid #dfe6db;padding:24px;max-width:760px;background:#fff;border-radius:8px}
.addon-sheet h2{font-size:22px;text-align:center;margin:8px 0 20px}.addon-sheet p{font-size:12px;color:#33483b;line-height:1.9}.addon-sheet .sheet-line{margin:15px 0}.addon-sheet .sheet-sign{text-align:right;margin-top:26px}
.addon-help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.addon-help .addon-card{margin-bottom:0}.addon-help h3{font-size:14px;margin-top:0}.addon-help p{font-size:12px}
#addon-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#315c44;color:white;z-index:201;border-radius:9px;box-shadow:0 10px 28px #203e3540;padding:13px 20px;font-size:12px;max-width:88vw}
@media(max-width:700px){#addon-panel{padding:19px 15px 90px}.addon-summary{grid-template-columns:1fr}.addon-head h1{font-size:22px}.addon-card{padding:16px}.addon-help{grid-template-columns:1fr}.addon-sheet{padding:15px}}
@media print{body *{visibility:hidden!important}#addon-panel,#addon-panel .addon-sheet,#addon-panel .addon-sheet *{visibility:visible!important}#addon-panel{position:absolute;inset:0;overflow:visible;background:white;padding:0}#addon-panel .addon-sheet{position:absolute;top:0;left:0;width:100%;max-width:none;margin:0;border:0;padding:12mm}#addon-panel .addon-head,#addon-panel .addon-card,#addon-panel .addon-summary{display:none!important}#addon-panel .addon-card:has(.addon-sheet){display:block!important;padding:0;border:0}#addon-panel .addon-sheet{display:block!important}}


/* --- flex-attendance-styles --- */


/* Lịch linh hoạt - hiển thị riêng và không yêu cầu thời khóa biểu */
#flex-attendance-overlay[hidden], #flex-fee-dialog[hidden]{display:none!important}
#flex-attendance-overlay{position:fixed;inset:0;z-index:85;background:#f6f7f2;overflow:auto;padding:28px max(20px,calc((100vw - 1180px)/2)) 45px;color:#263c35;font-family:'Be Vietnam Pro',Arial,sans-serif}
.flex-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}.flex-head h1{margin:8px 0 8px;font-size:28px}.flex-head p{font-size:12px}.flex-kicker{font-size:10px;letter-spacing:2px;color:#77906f}.flex-controls,.flex-panel,.flex-summary-card,.flex-fee-card{border:1px solid #e3e9df;border-radius:14px;background:white;box-shadow:0 2px 12px #263c3505}.flex-controls{padding:24px;display:flex;gap:18px;flex-wrap:wrap;align-items:end;margin-bottom:19px}.flex-controls label{display:flex;flex:1;min-width:180px;flex-direction:column;gap:9px;font-size:12px;color:#5d755f}.flex-controls input,.flex-controls select{font-size:13px;width:100%}.flex-panel{padding:22px 24px;margin-bottom:20px}.flex-panel h2{margin:0 0 9px}.flex-muted{font-size:11px;color:#7d897d;line-height:1.85}.flex-table-wrap{overflow:auto;margin-top:18px}.flex-table{width:100%;min-width:650px;white-space:normal}.flex-table th,.flex-table td{padding:14px 12px}.flex-table th:last-child{min-width:230px}.flex-statuses{display:flex;flex-wrap:wrap;gap:6px}.flex-statuses button{font-size:11px;background:#fff;border:1px solid #dce5d7;border-radius:7px;padding:8px 10px}.flex-statuses button[data-status="present"].on{background:#e6f3e4;border-color:#8bb783;color:#2b6634;font-weight:700}.flex-statuses button[data-status="late"].on{background:#fff4db;border-color:#ddbb6e;color:#936820;font-weight:700}.flex-statuses button[data-status="absent"].on{background:#ffebe8;border-color:#daa093;color:#ab5047;font-weight:700}.flex-statuses button[data-status="excused"].on{background:#edf1fc;border-color:#a6b4df;color:#566f9b;font-weight:700}.flex-statuses button[data-status=""].on{background:#edf2eb;color:#536b50;font-weight:700}.flex-table .flex-note{min-width:140px;max-width:250px;width:100%;font-size:11px;padding:8px}.flex-summary{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.flex-summary span{border-radius:8px;background:#eff4eb;padding:10px 12px;font-size:11px;color:#537258}.flex-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;margin-top:18px}.flex-bottom button{min-width:160px}.flex-history-item{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid #eef1e9;padding:11px 0;font-size:12px}.flex-history-item button{font-size:10px}.flex-fee-card{padding:18px 20px;margin:16px 0}.flex-fee-card h3{margin:0 0 12px;font-size:14px}.flex-fee-grid{display:flex;gap:12px;flex-wrap:wrap}.flex-fee-item{border:1px solid #e4e9e1;border-radius:10px;padding:13px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:170px}.flex-fee-item strong{font-size:12px}.flex-fee-item b{font-size:17px;color:#38654e}.flex-fee-actions{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}.flex-fee-actions p{font-size:11px}.flex-inline-price{display:block;color:#41684c;font-size:11px;margin-top:8px;font-weight:600}.flex-dialog-backdrop{position:fixed;inset:0;z-index:100;background:#152b2870;display:grid;place-items:center;padding:18px}.flex-dialog{border-radius:15px;padding:26px;background:white;width:470px;max-width:100%;box-shadow:0 24px 70px #22392c30}.flex-dialog h2{margin-bottom:8px}.flex-dialog label{display:flex;flex-direction:column;gap:10px;margin:18px 0;font-size:12px}.flex-dialog input{width:100%}.flex-dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}.fin-day-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0}.fin-day-column{background:#f7faf4;border:1px solid #e2ebdc;border-radius:10px;padding:14px;min-width:0}.fin-day-column h3{font-size:12px;margin:0 0 11px;color:#3d5d45}.fin-day-tags{display:flex;gap:6px;flex-wrap:wrap}.fin-day-tag{font-size:10px;border-radius:5px;padding:7px 9px}.fin-day-tag.present{background:#e3f2e1;color:#376c3a}.fin-day-tag.absent{background:#f9e7df;color:#985747}.fin-day-empty{font-size:11px;color:#9aa697}
@media(max-width:650px){#flex-attendance-overlay{padding:20px 14px 95px}.flex-controls,.flex-panel{padding:17px}.flex-head h1{font-size:23px}.flex-controls label{min-width:135px}.fin-day-breakdown{grid-template-columns:1fr}}
@media print{#flex-attendance-overlay,#flex-fee-dialog{display:none!important}.fin-day-breakdown{break-inside:avoid}.fin-day-tag{-webkit-print-color-adjust:exact;print-color-adjust:exact}}


/* --- receipt-photo-styles --- */

:root{--solop-receipt-export-section-start:1}


/* Phiếu thu theo mẫu: đầu phiếu gradient, ngày đi học/nghỉ, QR và bản in đẹp. */
#fin-receipt-modal.receipt-photo-backdrop{position:fixed;inset:0;z-index:9999;background:rgba(31,27,43,.66);display:grid;place-items:center;padding:22px;overflow:hidden}
.receipt-photo-modal{width:min(100%,625px);max-height:min(94vh,950px);background:#fbfafc;border-radius:18px;display:flex;flex-direction:column;box-shadow:0 25px 80px #150b2b4a;overflow:hidden;color:#463e4d;font-family:Arial,'Be Vietnam Pro',sans-serif}
.receipt-modal-top{flex:none;display:flex;align-items:center;justify-content:space-between;padding:17px 25px;border-bottom:1px solid #e9e5ed;background:#fff}.receipt-modal-top h2{font-size:17px;font-weight:700;margin:0;color:#342d39}.receipt-modal-top button{font-size:28px;color:#817884;background:transparent;border:0;width:33px;height:33px;border-radius:9px;line-height:1;display:grid;place-items:center}
.receipt-scroll{overflow-y:auto;padding:18px 22px 6px;scrollbar-width:thin;min-height:0}.receipt-paper{width:100%;max-width:570px;margin:0 auto;background:#fff;border-radius:13px;box-shadow:0 4px 24px #27183913;overflow:hidden}
.receipt-hero{display:block;height:auto;border:0;min-height:0;background:linear-gradient(112deg,#3c3093 0%,#83528b 48%,#efa6a0 100%);color:white;padding:25px 28px 30px;text-align:center}.receipt-hero-tools{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:14px}.receipt-small-top{font-size:11px;font-weight:600;letter-spacing:1.3px;color:#f9e7fc}.receipt-hero-symbol{position:absolute;right:0;top:-6px;font-size:17px;color:#f3d9eb}.receipt-hero h2{font-size:27px;letter-spacing:.1px;line-height:1.35;font-family:Georgia,serif;color:#fff;margin:0 0 8px;font-weight:700}.receipt-month{font-size:15px;color:#fbf1f3;font-style:italic}
.receipt-main{padding:0 26px}.receipt-info-row{display:flex;justify-content:space-between;gap:18px;align-items:center;min-height:65px;border-bottom:1px solid #e8e4e9}.receipt-row-key{font-size:13px;color:#625d68;white-space:nowrap}.receipt-student-name{font-size:17px;text-align:right;letter-spacing:-.3px;color:#473d52}.receipt-fee-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;justify-content:flex-end;text-align:right}.receipt-fee-value span{font-size:12px;color:#807987}.receipt-fee-value b{font-size:19px;color:#3d3345}.receipt-total-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:77px;padding:20px 0;border-bottom:1px solid #ebe8ed}.receipt-total-row span{font-size:14px;color:#59505f}.receipt-total-row b{font-size:25px;color:#332b38}.receipt-paid-row,.receipt-balance-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:11px 0;border-bottom:1px solid #f0edf1;font-size:12px}.receipt-paid-row strong{color:#456c55}.receipt-balance-row{font-size:12px;color:#6b536a}.receipt-balance-row b{font-size:15px;color:#684f8f}
.receipt-attendance{padding:23px 0 22px;border-bottom:1px dashed #dbd3dd}.receipt-attendance h3,.receipt-qr-section h3{font-size:11px;color:#90848b;text-align:center;font-weight:700;letter-spacing:.9px;margin:0 0 17px}.receipt-day-grid{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.receipt-date-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;line-height:1;border-radius:25px;padding:9px 11px;background:#f0eef6;color:#5b4c82;white-space:nowrap}.receipt-date-chip.receipt-late{background:#fff5dc;color:#9b7a25}.receipt-date-chip.receipt-absent{background:#ffedea;color:#b1544d}.receipt-date-chip.receipt-excused{background:#eaf3f8;color:#46748f}.receipt-dot{display:inline-block;width:7px;height:7px;flex:none;background:#6654a4;border-radius:50%}.receipt-absent .receipt-dot,.receipt-dot-absent{background:#b84d46!important}.receipt-excused .receipt-dot,.receipt-dot-excused{background:#327794!important}.receipt-late .receipt-dot{background:#c6a146}.receipt-no-days{font-size:12px;text-align:center;color:#9c929b}
.receipt-day-legend{margin-top:15px;display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}.receipt-day-legend span{display:flex;gap:6px;align-items:center;font-size:10px;color:#8a818c}.receipt-qr-section{padding:24px 0 20px;text-align:center}.receipt-qr-section h3{font-size:10px;line-height:1.6;letter-spacing:.8px;margin-bottom:12px}.receipt-qr-image{display:block;width:205px;height:205px;object-fit:contain;margin:0 auto 8px}.receipt-qr-warning{font-size:12px;color:#8b6a67;background:#fff4ee;padding:14px;border-radius:8px;line-height:1.7;margin:14px auto;max-width:290px}.receipt-bank{display:block;font-size:13px;color:#5e5370;margin:7px 0}.receipt-transfer-note{font-size:11px;color:#8a808f;line-height:1.8;overflow-wrap:anywhere;margin:0}.receipt-paper-foot{text-align:center;font-size:10px;letter-spacing:.2px;color:#938996;padding:16px;background:#faf8fb;border-top:1px solid #f3f0f3}
.receipt-modal-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;padding:13px 22px 2px}.receipt-modal-actions button{font-size:12px;border-radius:8px;padding:10px 14px;font-weight:600}.receipt-action-secondary{background:#fff;color:#5a4e6a;border:1px solid #e3dce9}.receipt-action-primary{background:#544488;color:#fff;border:1px solid #544488}.receipt-disclaimer{font-size:10px;color:#958d9a;line-height:1.6;margin:5px 22px 14px}
@media(max-width:600px){#fin-receipt-modal.receipt-photo-backdrop{padding:8px}.receipt-photo-modal{max-height:97vh}.receipt-scroll{padding:10px}.receipt-hero{padding:19px 15px 23px}.receipt-hero h2{font-size:23px}.receipt-main{padding:0 16px}.receipt-student-name{font-size:15px}.receipt-total-row b{font-size:23px}.receipt-modal-actions{padding:11px 12px 2px;justify-content:center}.receipt-modal-actions button{padding:10px 12px}.receipt-qr-image{width:185px;height:185px}}
@media print{ @page{size:A4;margin:12mm} html,body{height:auto!important;background:#fff!important}body>*:not(#fin-receipt-modal){display:none!important}#fin-receipt-modal.receipt-photo-backdrop{display:block!important;position:static!important;inset:auto!important;padding:0!important;background:white!important;overflow:visible!important}#fin-receipt-modal .receipt-photo-modal{display:block!important;width:100%!important;max-height:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}#fin-receipt-modal .receipt-scroll{overflow:visible!important;padding:0!important}#fin-receipt-modal .receipt-paper{max-width:570px!important;box-shadow:none!important;break-inside:avoid!important}#fin-receipt-modal .receipt-modal-top,#fin-receipt-modal .receipt-modal-actions,#fin-receipt-modal .receipt-disclaimer{display:none!important}.receipt-hero,.receipt-date-chip,.receipt-paper-foot{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}}

/* PHIẾU THU PASTEL: màu hồng phấn, hoa nhí, các ô ngăn nắp, ưu tiên dễ đọc và dễ in */
#fin-receipt-modal.receipt-photo-backdrop{background:rgba(54,43,65,.52)}
.receipt-photo-modal{border-radius:24px;background:#fffafd;box-shadow:0 30px 100px #46335a48;border:1px solid #f2e5ef}
.receipt-modal-top{background:linear-gradient(110deg,#fff9fc,#f9f3ff);border-bottom-color:#f4e5f1;padding:17px 25px}.receipt-modal-top h2{color:#7b5877;font-family:Georgia,serif;font-size:19px}
.receipt-scroll{padding:20px 24px 12px;background:linear-gradient(160deg,#fffafa,#f8f3fd)}
.receipt-paper{border-radius:21px;border:1px solid #f1e0eb;box-shadow:0 8px 35px #7e57731a;overflow:hidden;color:#57485c}
.receipt-hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#eebacb 0%,#ddb9e7 52%,#b8c7f5 100%);padding:27px 26px 29px;color:#674a6c;text-align:center;border-bottom:4px solid #fff6fd}
.receipt-hero:before{content:'';width:145px;height:145px;position:absolute;top:-105px;left:-35px;background:#ffffff40;border-radius:50%;box-shadow:270px 180px 0 20px #ffffff20}
.receipt-hero:after{content:'';position:absolute;bottom:-15px;left:0;right:0;height:22px;background:radial-gradient(circle at 11px 0px,#fff 10px,transparent 11px) repeat-x;background-size:22px 22px}
.receipt-hero-tools{position:relative;z-index:1;margin:0 0 11px}.receipt-small-top{color:#694e6e;letter-spacing:1.9px;font-weight:700;font-size:10px;background:#ffffff94;border:1px solid #ffffffb6;padding:8px 18px;border-radius:100px}
.receipt-heartline{position:relative;z-index:1;color:#fffdfc;font-size:22px;letter-spacing:7px;margin-bottom:4px;text-shadow:0 1px 1px #a47b9a70}
.receipt-spark{position:absolute;z-index:1;color:#fffafc;text-shadow:0 2px 6px #a26d9d50;pointer-events:none}.receipt-spark-a{top:30px;left:40px;font-size:29px}.receipt-spark-b{top:72px;right:45px;font-size:21px}.receipt-spark-c{bottom:35px;left:74px;font-size:24px}
.receipt-hero h2{position:relative;z-index:1;color:#5d4265;font-family:Georgia,'Times New Roman',serif;font-size:29px;letter-spacing:.8px;margin:7px 0 7px;text-shadow:0 2px 0 #ffffffa6}
.receipt-month{position:relative;z-index:1;display:inline-block;font-size:13px;font-style:normal;font-weight:700;color:#785a7b;background:#fff9fbc7;padding:8px 17px;border-radius:22px}
.receipt-hero-caption{position:relative;z-index:1;font-size:11px;margin:13px 0 0;color:#624d68;letter-spacing:.15px}
.receipt-main{padding:0 27px}
.receipt-little-banner{text-align:center;margin:21px 0 4px;font-size:11px;color:#a57895;letter-spacing:.6px}
.receipt-info-row{min-height:64px;border-bottom:1px dashed #efdfec;gap:10px}.receipt-row-key{color:#8b7485;font-size:12px}.receipt-student-name{font-size:18px;color:#75527c}.receipt-fee-value span{font-size:12px;color:#877b8d}.receipt-fee-value b{color:#735475;font-size:18px}
.receipt-extra-list{background:#fff8fc;border:1px dashed #e9cce1;border-radius:14px;padding:12px 15px;margin:14px 0 3px}.receipt-extra-title{font-size:10px;letter-spacing:1.2px;color:#a1769c;font-weight:700;margin-bottom:9px}.receipt-extra-line,.receipt-extra-subtotal{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;padding:6px 0}.receipt-extra-line strong{color:#9b6581;white-space:nowrap}.receipt-extra-subtotal{margin-top:6px;padding-top:9px;border-top:1px dashed #ead6e4;font-weight:600;color:#786381}.receipt-extra-subtotal b{color:#935a80}
.receipt-total-row{min-height:0;margin-top:16px;background:linear-gradient(110deg,#fff0f7,#f6efff);border:1px solid #f1d9e8;border-radius:15px;padding:19px 17px}.receipt-total-row span{color:#875d7e;font-size:12px;font-weight:700;letter-spacing:.25px}.receipt-total-row b{color:#825391;font-size:24px}
.receipt-paid-row,.receipt-balance-row{padding:13px 2px;border-bottom:1px dashed #f1e5ee}.receipt-balance-row b{font-size:17px;color:#945b84}
.receipt-attendance{padding:23px 0 21px;border-color:#efdeea}.receipt-attendance h3,.receipt-qr-section h3{color:#a0779d;font-size:11px;letter-spacing:1px}.receipt-day-grid{gap:8px}.receipt-date-chip{background:#f4edfc;color:#8163a4;font-size:11px;border:1px solid #e9dcf7;padding:9px 12px}.receipt-date-chip.receipt-absent{border-color:#f4d9dc}.receipt-date-chip.receipt-excused{border-color:#d9e9f2}.receipt-date-chip.receipt-late{border-color:#f6e3b9}.receipt-day-legend{gap:13px}.receipt-day-legend span{font-size:10px}
.receipt-qr-section{padding:17px 0 13px}.receipt-qr-heading-art{font-size:20px;color:#d3a1c7;letter-spacing:9px;margin:0 0 9px}.receipt-qr-image{width:186px;height:186px;margin:5px auto 7px;background:#fff;padding:9px;border:1px solid #f0e2eb;border-radius:15px;box-shadow:0 4px 20px #8c738214}.receipt-bank{color:#755577;font-size:12px}.receipt-transfer-note{color:#928594}
.receipt-thanks{margin:0 auto 21px;padding:12px;text-align:center;background:#fff6f9;border-radius:13px;color:#9b7196;font-size:12px;line-height:1.6}.receipt-thanks span{color:#d589a9;font-size:16px}
.receipt-paper-foot{background:#fdf4fa;color:#a58ba0;border-top-color:#f5e3f1;font-size:9px;letter-spacing:.6px}
.receipt-modal-actions{padding-top:16px}.receipt-modal-actions button{border-radius:11px;font-weight:700}.receipt-action-primary{background:#a273b5;border-color:#a273b5}.receipt-action-secondary{border-color:#ead4e7;color:#8d648d;background:#fff}
@media(max-width:600px){.receipt-scroll{padding:10px}.receipt-hero{padding:20px 14px 25px}.receipt-main{padding:0 15px}.receipt-hero h2{font-size:24px}.receipt-heartline{font-size:18px}.receipt-spark-a{left:12px}.receipt-spark-b{right:16px}.receipt-student-name{font-size:15px}.receipt-fee-value b{font-size:15px}.receipt-total-row b{font-size:20px}.receipt-qr-image{width:174px;height:174px}}
@media print{.receipt-photo-modal,.receipt-paper{border:0!important}.receipt-paper{max-width:570px!important}.receipt-hero,.receipt-total-row,.receipt-date-chip,.receipt-thanks,.receipt-extra-list{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.receipt-hero,.receipt-attendance,.receipt-extra-list,.receipt-qr-section{break-inside:avoid}}


:root{--solop-receipt-export-section-end:1}

/* --- individual-fee-and-review-styles --- */



/* 2026-10: PHIẾU NHẬN XÉT PASTEL & HỌC PHÍ RIÊNG THEO HỌC SINH */
.review-filter-card{background:linear-gradient(110deg,#fffafc,#f8f8ff)!important;border-color:#efe2f0!important}
.review-workspace{display:grid;grid-template-columns:minmax(315px,.9fr) minmax(410px,1.13fr);gap:18px;align-items:start}
.review-workspace .addon-card{margin-bottom:0}
.review-form-card{border-color:#efe1ec!important;border-radius:17px!important;box-shadow:0 6px 25px #94758a0d}
.review-kicker,.review-section-kicker{font-size:10px;letter-spacing:1.3px;font-weight:700;color:#aa7a9e}
.review-form-title{padding-bottom:16px;border-bottom:1px dashed #e9dbe8;margin-bottom:17px}
.review-form-title h2{font-size:19px!important;color:#785c80;margin:9px 0}
.review-form-title p{color:#958695;line-height:1.8}
.review-form-card .addon-form{gap:17px}
.review-form-card .addon-form label{font-size:12px;color:#735b76;font-weight:600;gap:9px}
.review-label-icon{display:inline;color:#bf8fae;font-size:14px}
.review-form-card textarea,.review-form-card select{border-color:#ebdce9!important;border-radius:11px!important;background:#fffcfe!important;line-height:1.6;font-weight:400}
.review-form-card textarea{min-height:85px!important;resize:vertical}
.review-homework-editor{background:linear-gradient(130deg,#fff4fb,#f8f4ff);padding:17px;border-radius:14px;border:1px solid #f0ddea;display:grid;gap:15px}
.review-homework-editor label{margin:0}
.review-homework-editor textarea{min-height:70px!important}
.review-save-note{font-size:11px;color:#947a91;background:#fbf6fa;padding:10px;border-radius:9px;line-height:1.5}
.review-form-actions{display:flex;gap:10px;flex-wrap:wrap}
.review-form-actions button{padding:12px 15px!important;border-radius:10px!important;font-size:12px!important}
.review-form-actions .primary{background:#a772ac!important}
.review-preview-card{padding:20px 16px!important;background:linear-gradient(135deg,#fffafc,#f9f5ff)!important;border:1px solid #eee0ee!important;border-radius:18px!important}
.review-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 8px 13px}
.review-preview-heading h2{margin:7px 0!important;font-size:18px!important;color:#725779}
.review-preview-label{border-radius:100px;padding:7px 11px;background:#f6e8f3;color:#aa7a9a;font-size:10px;white-space:nowrap}
#addon-panel .review-sheet{margin:0 auto!important;padding:0!important;max-width:760px;width:100%;border:1px solid #f0dce9;border-radius:18px;box-shadow:0 8px 30px #ae86a321;background:#fff;overflow:hidden;color:#57465a;position:relative}
#addon-panel .review-sheet *{box-sizing:border-box}
#addon-panel .review-sheet .review-hero{padding:28px 16px 34px;position:relative;overflow:hidden;text-align:center;background:linear-gradient(120deg,#f8d9e6 0%,#e8d7f5 51%,#d8e4fa 100%);color:#76597f}
#addon-panel .review-hero::after{content:'';position:absolute;bottom:-11px;left:0;right:0;height:22px;background:radial-gradient(circle at 11px 11px,#fff 10px,transparent 11px) repeat-x;background-size:22px 22px}
.review-top-note{display:inline-block;border:1px solid #fff8;background:#ffffff80;border-radius:30px;padding:8px 16px;font-size:10px;font-weight:700;letter-spacing:1.3px}
.review-hero-icon{color:white;font-size:22px;letter-spacing:7px;margin:12px 0 0}
#addon-panel .review-sheet .review-hero h2{font-family:'Segoe UI',Arial,'DejaVu Sans',sans-serif;font-size:27px;font-weight:800;line-height:1.3;letter-spacing:.3px;color:#795681;margin:9px 0 12px;text-align:center;text-shadow:0 1px #fff9;word-spacing:normal;font-kerning:normal}
.review-period{display:inline-block;background:#fff9fdc9;border-radius:30px;padding:8px 15px;font-size:12px;font-weight:700;color:#805b88}
#addon-panel .review-hero p{font-size:11px;color:#866b88;line-height:1.5;margin-top:10px}
.review-sparkle{position:absolute;color:#fff;font-size:37px;opacity:.9;pointer-events:none}.review-sparkle-left{left:7%;top:55px}.review-sparkle-right{right:7%;top:70px}
.review-paper-body{padding:7px 24px 20px}
.review-student-info{display:flex;align-items:center;gap:12px;margin:13px 0 16px;padding:13px 15px;border-radius:13px;background:#fbf6fc;border:1px solid #f0e5f2}
.review-student-symbol{flex:none;width:41px;height:41px;display:grid;place-items:center;background:#f2deed;border-radius:14px;color:#b586a7;font-size:22px}
.review-student-info div:nth-child(2){flex:1;min-width:0}
.review-student-info small{display:block;color:#aa91a7;font-size:9px;letter-spacing:1px;font-weight:700}
.review-student-info strong{display:block;color:#7e5c84;font-size:16px;margin:4px 0;overflow-wrap:anywhere}
.review-student-info span{font-size:11px;color:#9b899a}
.review-info-month{text-align:right}.review-info-month b{font-size:11px;color:#846882;white-space:nowrap}
.review-section{margin:12px 0;padding:15px 16px;border-radius:13px;border:1px solid #f0e8ee;background:#fffdfd;break-inside:avoid}
.review-strength{background:#f8fbf4;border-color:#e8f0df}.review-improve{background:#fff9f7;border-color:#f4e9e3}.review-homework{background:#f9f5ff;border-color:#eee4fa}.review-plan{background:#fffbf1;border-color:#f4edde}
.review-section-title{display:flex;align-items:center;gap:9px;margin-bottom:9px}.review-section-icon{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:9px;background:white;color:#af86a5;font-size:16px}
#addon-panel .review-section-title h3{margin:0;font-size:13px;color:#795e79;font-weight:700}
#addon-panel .review-section p{font-size:12px;line-height:1.75;color:#605263;overflow-wrap:anywhere;margin:0}
.review-status{display:inline-flex;align-items:center;gap:7px;border-radius:50px;padding:8px 12px;font-size:11px;font-weight:700;margin:0 0 10px;border:1px solid transparent}
.review-status::before{content:'●';font-size:9px}
.review-status-unrecorded{background:#f0eef3;color:#837a86;border-color:#e7e0e8}.review-status-done{background:#e3f4e8;color:#31774a;border-color:#bde2c8}.review-status-partial{background:#fff2da;color:#986e25;border-color:#efd9a8}.review-status-not_done{background:#fff0ef;color:#b05359;border-color:#eccbd1}.review-status-not_assigned{background:#eaf3fa;color:#537796;border-color:#d3e5f2}
.review-footer{display:flex;gap:16px;justify-content:space-between;align-items:flex-end;margin-top:19px;padding:16px 8px 0;border-top:1px dashed #ecddea}
.review-footer>div:first-child{max-width:60%}.review-footer b{font-size:11px;color:#a3749b}
#addon-panel .review-footer p{font-size:10px;color:#97839a;line-height:1.7;margin-top:7px}
.review-signature{text-align:right;min-width:100px}.review-signature small{font-size:9px;color:#9c8b9c;letter-spacing:.5px;display:block}.review-signature strong{display:block;margin-top:9px;font-size:12px;color:#8c6188;word-break:break-word}
.review-bottom-bar{padding:13px;background:#f8eefa;text-align:center;font-size:9px;color:#b18baa;letter-spacing:.7px;line-height:1.5}
.fin-rates-student-dialog{width:min(740px,100%)!important}.fin-fee-class-group{border:1px solid #e3e6e3;border-radius:14px;overflow:hidden;background:#fff}.fin-fee-class-header,.fin-fee-student-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 17px}.fin-fee-class-header{background:#f1f7ee}.fin-fee-class-header strong{font-size:14px;color:#3a654c}.fin-fee-class-header small,.fin-fee-student-row small{display:block;color:#8c958e;font-size:10px;margin-top:5px}.fin-fee-students{padding:10px 15px}.fin-fee-students-title{font-size:10px;color:#7a827b;letter-spacing:1px;font-weight:700;display:flex;gap:10px;justify-content:space-between;margin:7px 0}.fin-fee-students-title span{font-size:9px;letter-spacing:0;font-weight:400;color:#9ca69b}.fin-fee-student-row{border-top:1px solid #eff2ed;padding:11px 2px}.fin-fee-student-row>span:first-child{font-size:12px;font-weight:600}.fin-fee-student-row .fin-rate-input input{border-radius:9px}.fin-fee-empty{font-size:11px;padding:13px}.flex-fee-item small{font-size:10px;color:#7d8d7f}
.flex-individual-fee-dialog{width:min(630px,100%);max-height:90vh;overflow-y:auto}.flex-default-rate{border:1px solid #d9e9d7;padding:15px;border-radius:12px;background:#f6faf3}.flex-default-rate label{margin:0 0 6px;font-weight:700;color:#41694c}.flex-default-rate small{font-size:10px;color:#7f9a81}.flex-people-fees{margin:18px 0}.flex-people-fees h3{margin:0 0 13px;font-size:14px}.flex-person-fee{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:15px!important;border-top:1px solid #edf0eb;padding:12px 0;margin:0!important}.flex-person-fee span:first-child{display:block;flex:1}.flex-person-fee strong{font-size:12px}.flex-person-fee small{display:block;font-size:10px;color:#8d9a8d;margin-top:6px}.flex-person-input{display:flex;gap:7px;align-items:center;width:170px;flex:none}.flex-person-input input{margin:0;width:125px;text-align:right}.flex-person-input small{white-space:nowrap}
@media(max-width:1040px){.review-workspace{grid-template-columns:1fr}.review-preview-card{max-width:780px}}
@media(max-width:600px){.review-workspace{display:block}.review-workspace .addon-card{margin-bottom:16px}.review-paper-body{padding:7px 13px 16px}#addon-panel .review-sheet .review-hero h2{font-size:23px}.review-info-month{display:none}.review-footer>div:first-child{max-width:55%}.fin-fee-class-header,.fin-fee-student-row{flex-direction:column;align-items:stretch}.fin-rate-input input{width:100%}.fin-fee-students-title{display:block}.fin-fee-students-title span{display:block;margin-top:3px}.flex-person-input{width:146px}.flex-person-input input{width:105px}}
@media print{
 @page{size:A4;margin:10mm}
 body:has(#addon-panel.review-active:not([hidden])) > #addon-panel.review-active{display:block!important;visibility:visible!important;position:static!important;background:#fff!important;inset:auto!important;padding:0!important;overflow:visible!important;min-height:0!important;z-index:99999!important}
 body:has(#addon-panel.review-active:not([hidden])) > *:not(#addon-panel){display:none!important}
 #addon-panel.review-active .addon-inner{max-width:none!important;margin:0!important}
 #addon-panel.review-active .addon-head,#addon-panel.review-active .review-filter-card,#addon-panel.review-active .review-form-card,#addon-panel.review-active .review-preview-heading{display:none!important}
 #addon-panel.review-active .review-workspace{display:block!important}
 #addon-panel.review-active .review-preview-card{display:block!important;margin:0!important;padding:0!important;background:#fff!important;border:0!important;box-shadow:none!important}
 #addon-panel.review-active .addon-sheet.review-sheet{display:block!important;visibility:visible!important;position:static!important;width:100%!important;max-width:175mm!important;margin:0 auto!important;padding:0!important;box-shadow:none!important;border-radius:0!important;border:1px solid #eddfe9!important;break-inside:auto!important}
 #addon-panel.review-active .review-sheet *{visibility:visible!important}
 #addon-panel.review-active .review-hero,#addon-panel.review-active .review-section,#addon-panel.review-active .review-student-info,#addon-panel.review-active .review-bottom-bar,#addon-panel.review-active .review-status{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
 #addon-panel.review-active .review-section{break-inside:avoid!important}
 #addon-panel.review-active .review-hero{padding-top:21px!important;padding-bottom:28px!important}
 #addon-panel.review-active .review-paper-body{padding-left:18px!important;padding-right:18px!important}
}



/* Ngày/tháng/năm đầy đủ và luồng 2 bước: soạn → hoàn thành → xem/in phiếu */
.solop-full-date{display:inline-flex;align-items:center;gap:5px;margin:5px 0 11px;padding:7px 12px;background:#f5eef8;border:1px solid #efe4f1;border-radius:25px;color:#856889;font-weight:650;font-size:11px}
.solop-header-date{font-size:11px;color:#657a67;background:#eff5eb;border:1px solid #deebda;padding:7px 11px;border-radius:25px;white-space:nowrap;margin-left:12px}
.review-workspace.review-show-form,.review-workspace.review-show-final{display:block;max-width:850px;margin:0 auto}
.review-workspace .review-form-card{padding:25px 28px;margin-bottom:20px!important}
.review-workspace .review-preview-card{max-width:850px;margin:0 auto}
#addon-panel .review-form-card[hidden],#addon-panel .review-preview-card[hidden]{display:none!important}
.review-history-box{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(120deg,#fffefe,#fdf8ff)!important;border-color:#eee4ef!important}
.review-history-box strong{color:#735a79;font-size:13px}
.review-history-box p{font-size:11px;margin-top:5px}
.review-history-scroll{display:flex;align-items:center;gap:8px;max-width:100%;flex-wrap:wrap}
.review-history-day{border:1px solid #eddaee;border-radius:20px;background:#fff;padding:8px 12px;font-size:11px;color:#866a90}
.review-history-day:hover,.review-history-current{background:#f4e8f4!important;color:#815486!important;border-color:#dcb4df!important}
.review-no-history{color:#a490a5;font-size:11px}
.review-selected-date{display:inline-flex;align-items:center;background:#f4e7f3;color:#8a668c;font-weight:700;padding:9px 11px;border-radius:12px;font-size:11px;white-space:nowrap}
.review-legacy-tip{padding:12px 14px;color:#886335;background:#fff6e8;border:1px solid #f5e3c2;border-radius:10px;line-height:1.7;font-size:11px}
.review-finished-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:0 8px 17px}
.review-finished-actions button{border-radius:10px;padding:10px 14px;font-size:11px}
.review-finished-actions .primary{background:#a772ac}
.receipt-issued-date{font-size:11px;font-weight:700;color:#826b90;margin-top:11px}
.receipt-day-grid .receipt-date-chip{font-size:10px;padding:8px 10px}
@media(max-width:720px){.review-history-box{padding:16px!important}.review-workspace .review-form-card{padding:19px 16px}.review-finished-actions{justify-content:center}.solop-header-date{font-size:9px;margin-left:6px;padding:5px 7px}}
@media print{#addon-panel.review-active .review-history-box,#addon-panel.review-active .review-finished-actions{display:none!important}}

/* Phụ phí gộp chung cho tất cả lớp, không còn bộ lọc theo lớp */
.surcharge-combined-toolbar{align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.surcharge-all-classes-label{display:inline-flex;align-items:center;font-size:11px;background:#f0f8ef;border:1px solid #dcebd8;color:#547751;border-radius:18px;padding:9px 12px;font-weight:600}
.surcharge-section-heading > #addon-export-extras{margin-left:auto;font-size:11px;padding:9px 13px}
@media(max-width:620px){.surcharge-all-classes-label{font-size:10px}.surcharge-section-heading > #addon-export-extras{padding:8px}}

/* =============================
   TRANG DOANH THU: thu thực nhận, phải thu, công nợ, biểu đồ năm
   ============================= */
#addon-panel .revenue-toolbar{background:linear-gradient(105deg,#fff,#f6f5ff);border-color:#e4e9f1;padding:15px 20px}
#addon-panel .revenue-toolbar .addon-toolbar{padding:0;border:0;gap:15px;align-items:end}
#addon-panel .revenue-toolbar label{display:flex;flex-direction:column;gap:7px;color:#6d7a75;font-size:11px;font-weight:600}
#addon-panel .revenue-toolbar input,#addon-panel .revenue-toolbar select{min-height:41px;min-width:150px;border-radius:10px;background:#fff;color:#394c49;font-size:12px}
#addon-panel .revenue-toolbar button{height:41px;border-radius:10px}
.revenue-period-note{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin:-1px 0 17px;font-size:11px;color:#7e898a}
.revenue-period-note span:first-child{background:#edf5f1;color:#48735d;border:1px solid #dbe9e1;border-radius:22px;padding:9px 14px}
.revenue-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.revenue-metric{background:white;border:1px solid #e7e9eb;border-radius:16px;padding:20px 18px 21px;min-height:157px;display:flex;flex-direction:column;box-shadow:0 8px 25px #37584b09;position:relative;overflow:hidden}
.revenue-metric:after{content:'✧';position:absolute;right:15px;top:8px;font-size:33px;opacity:.18}
.revenue-metric>span{font-size:10px;font-weight:700;letter-spacing:1px;line-height:1.6;color:#668575}
.revenue-metric strong{font-size:clamp(19px,2vw,27px);color:#2e6952;margin:14px 0 12px;letter-spacing:-.8px;overflow-wrap:anywhere}
.revenue-metric small{font-size:10px;color:#78877f;line-height:1.65;margin-top:auto}
.rev-green{background:linear-gradient(120deg,#f2faf3,#fff);border-color:#d8ebdc}
.rev-lilac{background:linear-gradient(120deg,#f8f3ff,#fff);border-color:#e9ddf4}
.rev-lilac>span,.rev-lilac strong{color:#84699e}
.rev-peach{background:linear-gradient(120deg,#fff6ee,#fff);border-color:#f3e1d5}
.rev-peach>span,.rev-peach strong{color:#b47858}
.rev-blue{background:linear-gradient(120deg,#f0f5ff,#fff);border-color:#dce7f5}
.rev-blue>span,.rev-blue strong{color:#597fa0}
.revenue-two-col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(275px,1fr);gap:16px}
.revenue-two-col>.addon-card{min-width:0;margin-bottom:18px}
.revenue-section-head{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.revenue-section-head h2{font-size:17px!important;color:#3b5548;margin:6px 0!important}
.revenue-section-head p{font-size:11px!important;margin-top:6px}
.revenue-overline{color:#9d9ab1;letter-spacing:1.2px;font-size:9px;font-weight:800}
.revenue-chip{font-size:10px;color:#746ba0;background:#f3f0fb;border:1px solid #e9e2f4;border-radius:20px;padding:8px 12px;white-space:nowrap}
.revenue-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;height:230px;align-items:stretch;padding-top:14px;margin:0 -6px}
.revenue-chart-col{appearance:none;border:0;background:transparent;border-radius:10px;display:flex;flex-direction:column;min-width:0;align-items:center;gap:9px;padding:10px 2px 5px;color:#86928c;cursor:pointer}
.revenue-chart-col:hover,.revenue-chart-col.current{background:#f3f6f1}
.revenue-chart-col.current .revenue-chart-label{color:#3f7359;font-weight:800}
.revenue-chart-value{height:16px;font-size:9px;font-weight:600;white-space:nowrap;color:#687e71}
.revenue-chart-bars{height:150px;width:100%;min-width:0;display:flex;gap:3px;justify-content:center;align-items:end;border-bottom:1px solid #dfe8e1}
.revenue-bar{width:min(16px,42%);display:block;border-radius:7px 7px 2px 2px;transition:height .24s ease;min-width:0}
.revenue-bar-income{background:linear-gradient(0deg,#87b9a4,#badac0)}
.revenue-bar-cost{background:linear-gradient(0deg,#d9a7b8,#f2ced5)}
.revenue-chart-label{font-size:10px}
.revenue-chart-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:10px;color:#6e827a;margin-top:13px}
.revenue-chart-legend span{display:inline-flex;align-items:center;gap:6px}
.revenue-chart-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.revenue-legend-income{background:#87b9a4}.revenue-legend-cost{background:#d9a7b8}
.revenue-chart-legend em{font-size:9px;font-style:normal;color:#a0a7a1;margin-left:auto}
.revenue-split-total{font-size:27px;font-weight:700;margin:26px 0 18px;letter-spacing:-1px;color:#3d6c54}
.revenue-split-bar{display:flex;overflow:hidden;border-radius:14px;height:17px;background:#edf1ed;gap:0;margin-bottom:21px}
.revenue-split-bar>span{height:100%;display:block}
.revenue-split-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:12px;margin:15px 0;color:#6c8474}
.revenue-split-row>span{display:flex;align-items:center;gap:10px}
.revenue-split-row i{display:inline-block;width:11px;height:11px;border-radius:4px}
.revenue-split-row b{color:#475e50;white-space:nowrap}
#addon-panel p.revenue-small-note{font-size:10px;margin-top:25px;line-height:1.8;padding:13px;background:#f8f8fb;border-radius:9px;color:#75818c}
.revenue-table{min-width:650px}
.revenue-table th,.revenue-table td{padding:13px 14px;font-size:11px}
.revenue-table th{color:#80908a;white-space:normal;line-height:1.5}
.revenue-table td{white-space:nowrap}
.revenue-table td strong{font-weight:700}
.revenue-positive{color:#407d5e}.revenue-due{color:#bb8167;font-weight:700}
.revenue-caveat{border:1px solid #e6e7de;background:#fbfbf6;padding:18px 20px;border-radius:13px;margin:5px 0 25px;font-size:11px;line-height:1.85;color:#728172}
@media(max-width:1180px){.revenue-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.revenue-two-col{grid-template-columns:1fr}}
@media(max-width:640px){#addon-panel .revenue-toolbar .addon-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:10px}#addon-panel .revenue-toolbar label{min-width:0}#addon-panel .revenue-toolbar input,#addon-panel .revenue-toolbar select{width:100%;min-width:0}#addon-panel .revenue-toolbar button{font-size:10px;white-space:normal;height:41px}.revenue-metrics{gap:10px}.revenue-metric{min-height:150px;padding:15px 12px}.revenue-metric strong{font-size:19px;margin:10px 0}.revenue-metric>span{font-size:9px}.revenue-metric small{font-size:9px}.revenue-chart{gap:1px;margin:0 -7px}.revenue-chart-col{padding-left:1px;padding-right:1px}.revenue-chart-value{font-size:7px}.revenue-chart-label{font-size:9px}.revenue-chart-bars{gap:1px}.revenue-chart-legend em{margin-left:0}.revenue-section-head h2{font-size:15px!important}}
@media print{#addon-panel:not(.review-active) .revenue-toolbar,#addon-panel:not(.review-active) .addon-actions,#addon-panel:not(.review-active) .revenue-chart-col{print-color-adjust:exact;-webkit-print-color-adjust:exact}}



/* ========================================================================
   SỔ LỚP SIGNATURE — giao diện 2026
   Cập nhật giao diện, giữ nguyên toàn bộ dữ liệu và chức năng JavaScript.
   Ảnh giáo viên lưu trực tiếp trong CSS để vẫn chỉ cần 3 tệp, dùng offline.
   ======================================================================== */
:root{
  --ink:#2d3342;
  --muted:#707b88;
  --line:#e8e7ed;
  --green:#8060a0;
  --bg:#f7f7fb;
  --sl-plum:#76558e;
  --sl-darker:#242b3a;
  --sl-gold:#d2a878;
  --sl-surface:#fff;
}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI','Be Vietnam Pro',Tahoma,Arial,sans-serif!important;font-size:14px;line-height:1.65;background:#f7f7fb;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit!important}
input,select,textarea{min-height:42px;font-size:13.5px;line-height:1.5;border:1px solid #dfe0e8;border-radius:11px;padding:11px 13px;background:#fff;color:#323747}
input:focus,select:focus,textarea:focus{border-color:#a787c1;box-shadow:0 0 0 4px #eee5f6;outline:0}
input::placeholder,textarea::placeholder{color:#9499a6}
button:focus-visible,a:focus-visible{outline:3px solid #b89ad3;outline-offset:3px}
.primary{background:linear-gradient(130deg,#8260a0,#654b87);border-color:transparent;color:white;border-radius:11px;padding:12px 18px;min-height:42px;font-size:12.5px;font-weight:700;letter-spacing:.05px;box-shadow:0 7px 18px #70528b24}
.primary:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.subtle{background:#fff;color:#63547a;border-color:#e5dfeb;border-radius:11px;padding:11px 16px;min-height:40px;font-size:12px;font-weight:600}
.textButton{color:#765691;font-size:12px;font-weight:700}
h1,h2,h3{font-family:'Segoe UI','Be Vietnam Pro',Tahoma,Arial,sans-serif;line-height:1.35;color:#323242}
p{font-size:13px;line-height:1.8}

/* TRANG ĐĂNG NHẬP — ảnh chân dung của giáo viên bên trái */
.authPage:not(.profilePage){background:radial-gradient(ellipse at 14% 7%,#fce9ec 0,transparent 40%),radial-gradient(ellipse at 90% 85%,#ebe4f6 0,transparent 35%),#f9f7f5;min-height:100vh;padding:21px clamp(18px,4vw,62px) 36px;color:#2e3040}
.authPage:not(.profilePage) .authBrand{max-width:1290px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 6px;font-size:25px;font-weight:800;color:#43384e;letter-spacing:-.9px}
.authPage:not(.profilePage) .authBrand svg{color:#8060a0;width:29px;height:29px}
.authPage:not(.profilePage) .authBrand span{color:#d2a878;margin-left:-8px}
.authPage:not(.profilePage) .authLayout{max-width:1290px;min-height:680px;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(410px,.87fr);gap:clamp(24px,4.4vw,70px);align-items:center;margin:20px auto 0}
.authPage:not(.profilePage) .authStory{background-image:linear-gradient(0deg,rgba(24,22,39,.76) 0%,rgba(31,23,43,.28) 29%,rgba(35,27,44,0) 59%),linear-gradient(135deg,#084954,#137e77);background-size:cover;background-position:center,center 33%;min-height:700px;align-self:stretch;position:relative;border-radius:29px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(26px,3.2vw,44px);box-shadow:0 20px 65px #5b4d6540;isolation:isolate}
.authPage:not(.profilePage) .authStory:after{content:'';position:absolute;inset:14px;border:1px solid #fff6;border-radius:20px;pointer-events:none;z-index:-1}
.authPage:not(.profilePage) .authStory .eyebrow{position:absolute;top:35px;left:34px;margin:0;padding:11px 14px;border-radius:24px;font-size:10px;line-height:1.2;letter-spacing:1.5px;font-weight:800;color:#534c5a;background:#ffffffe8;backdrop-filter:blur(10px);box-shadow:0 6px 18px #00000014}
.authPage:not(.profilePage) .authStory h1{font-size:clamp(28px,3vw,43px);font-weight:800;letter-spacing:-1.5px;line-height:1.3;color:#fff;margin:0 0 17px;text-shadow:0 2px 15px #14101e59;max-width:580px}
.authPage:not(.profilePage) .authStory>p{font-size:13px;line-height:1.85;font-weight:500;color:#fdfbff;max-width:530px;text-shadow:0 2px 9px #17121dbb}
.authPage:not(.profilePage) .authBenefits{display:none}
.authPage:not(.profilePage) .authCard{width:100%;max-width:530px;margin:0 auto;background:#ffffffeb;backdrop-filter:blur(12px);border:1px solid #eee8ee;border-radius:29px;padding:clamp(26px,3.2vw,48px);box-shadow:0 20px 70px #3e345018}
.authPage:not(.profilePage) .authIcon{width:64px;height:64px;border-radius:19px;background:linear-gradient(140deg,#f1e8f7,#e3e9df);color:#7b5b94;margin-bottom:25px}
.authPage:not(.profilePage) .authCard h2{font-size:clamp(23px,2.3vw,30px);font-weight:800;letter-spacing:-.7px;color:#313342;margin-bottom:12px}
.authPage:not(.profilePage) .authCard>p{font-size:13px;line-height:1.75;color:#7a7c89}
.authPage:not(.profilePage) .authSwitch{display:grid;grid-template-columns:1fr 1fr;background:#f5f1f8;padding:5px;margin:25px 0 24px;gap:4px;border-radius:13px}
.authPage:not(.profilePage) .authSwitch button{border:0;background:transparent;border-radius:9px;color:#7c7489;font-size:12.5px;font-weight:700;min-height:41px;padding:10px 7px}
.authPage:not(.profilePage) .authSwitch button.chosen{background:#fff;color:#775394;box-shadow:0 3px 12px #5a46601b}
.authPage:not(.profilePage) .authCard form label{font-size:12.5px;font-weight:650;line-height:1.5;color:#5f5b6b;gap:8px;margin:15px 0 0}
.authPage:not(.profilePage) .authCard form input{min-height:48px;background:#fff;border-color:#e3dee8;font-size:13.5px;border-radius:12px;padding:11px 15px}
.authPage:not(.profilePage) .authCard .authLink{min-height:52px;margin-top:24px;font-size:13px;border-radius:12px;width:100%}
.authPage:not(.profilePage) .offlineNotice,.authPage:not(.profilePage) .authHint{background:#f8f5fa;color:#7a6f83;font-size:11.5px;line-height:1.85;border-radius:14px;border:1px solid #f0eaf5;padding:15px 17px;margin-top:23px}
.authPage:not(.profilePage) .authSecondary{font-size:12px}
.authPage:not(.profilePage) .authFooter{font-size:11px;color:#958a9c;padding:17px}

/* SỔ LỚP BÊN TRONG — khác mẫu cũ: thanh bên tối, card nổi, nhấn tím */
.app{background:#f7f7fb;min-height:100vh}
.app .sidebar{width:263px;padding:28px 16px 21px;background:linear-gradient(170deg,#282d3e 0%,#282b3b 51%,#3b304a 100%);border:0;box-shadow:10px 0 38px #25263f0c;color:#edf0f6}
.app .sidebar .brand{font-size:25px;color:#fff;letter-spacing:-1px;margin-bottom:29px;white-space:nowrap;padding-left:7px}
.app .sidebar .brand>span:first-child{background:linear-gradient(145deg,#a688bf,#6b538c);color:white;box-shadow:0 5px 17px #a990c42a;border-radius:13px;width:39px;height:39px}
.app .sidebar .brandDot{color:#d5b48a}
.app .sidebar .sideLabel,.app .sidebar .addon-nav-separator{font-size:10px;color:#aaa5be;letter-spacing:1.4px;font-weight:700}
.app .sidebar nav{gap:5px}
.app .sidebar nav>button,.app .sidebar nav .addon-nav-button{font-size:12.5px;color:#d9d9e5;background:transparent;min-height:43px;line-height:1.4;border:1px solid transparent;border-radius:12px;font-weight:570;padding:11px 12px;gap:13px;transition:background .18s,color .18s,border .18s}
.app .sidebar nav>button svg{width:19px;height:19px;color:#b9afcf}
.app .sidebar nav>button:hover,.app .sidebar nav .addon-nav-button:hover{background:#ffffff12;border-color:#ffffff10;color:#fff}
.app .sidebar nav>button.active,.app .sidebar nav .addon-nav-button.addon-selected{color:#fff;background:linear-gradient(115deg,#896da4a0,#9972aa59);border-color:#d6bdd034;box-shadow:0 4px 11px #17142021}
.app .sidebar nav>button.active svg{color:#f8e7ff}
.app .sidebar nav small{background:#655471;color:#fff}
.app .sidebar nav .addon-nav-emoji{font-size:17px}
.app .sidebar .profile{border-top:1px solid #ffffff23;padding-top:16px;color:#eae8f1}
.app .sidebar .profile>span:first-child{background:#9c85ae;color:white;width:39px;height:39px}
.app .sidebar .profile strong{font-size:12px;color:white}
.app .sidebar .profile small{font-size:10.5px;color:#b5aec6}
.app .sidebar .online{background:#b9dda9;box-shadow:0 0 0 4px #b9dda923}
.app .sidebar .sideNote{background:#ffffff0c;color:white;border:1px solid #ffffff16}
.app .sidebar .sideNote strong{color:white}
.app main{margin-left:263px;min-height:100vh}
.app header{height:86px;padding:0 clamp(23px,3.4vw,54px);background:#fff;border-bottom:1px solid #eceaf1;box-shadow:0 4px 20px #53505b07;position:sticky;top:0;z-index:15}
.app header .breadcrumb{font-size:12px;gap:12px;color:#818091}
.app header .breadcrumb b{font-size:12px;color:#695381;font-weight:750}
.app header .cloud{font-size:11px}
.app .content{max-width:1530px;padding:31px clamp(20px,3vw,48px) 0}
.app .pageHead{background:linear-gradient(107deg,#faf1fa,#f5f3fc 57%,#f5f5fc);border:1px solid #ede4f0;border-radius:22px;padding:27px 29px 25px;margin-bottom:23px;box-shadow:0 9px 22px #63557c08}
.app .pageHead .eyebrow{letter-spacing:1.9px;color:#97759b;font-size:10px;font-weight:800}
.app .pageHead h1{font-size:29px;color:#333145;letter-spacing:-1.1px;font-weight:760;margin:0 0 9px}
.app .pageHead p{font-size:13px;color:#7a7588}
.app .stats{gap:16px;margin-bottom:25px}
.app .stat{border-radius:19px;background:#fff;padding:24px 21px 21px;border:1px solid #eae7f0;box-shadow:0 12px 25px #45334d08;min-height:153px;overflow:hidden}
.app .stat:after{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:#c4a5d7}
.app .stat:nth-child(2):after{background:#8ba8ce}.app .stat:nth-child(3):after{background:#deb68d}.app .stat:nth-child(4):after{background:#9ac3aa}
.app .statNumber{font-size:32px;font-weight:760;color:#363448;margin-bottom:16px;letter-spacing:-1px}
.app .statNumber span{font-size:12.5px;color:#6a6677;letter-spacing:0;line-height:1.5}
.app .stat>small{font-size:11px;color:#858292;padding-top:12px}
.app .statIcon{width:43px;height:43px;border-radius:13px;right:19px;top:22px}
.app .tone0{background:#f2e9f8;color:#9570b1}.app .tone1{background:#eaf0fb;color:#6c8bac}.app .tone2{background:#fff3e6;color:#c49560}.app .tone3{background:#eaf7f0;color:#6b9b83}
.app .overviewGrid{grid-template-columns:minmax(0,1fr) 310px;gap:20px}
.app .panel{background:#fff;border:1px solid #e9e8f0;border-radius:20px;box-shadow:0 9px 25px #45304c09;overflow:hidden}
.app .panelHead{padding:23px 26px;border-color:#f0edf3}
.app .panelHead h2{font-size:17px;color:#373548;font-weight:750}
.app .panelHead p{font-size:12px}
.app .welcome{background:linear-gradient(150deg,#685180 0%,#906d9d 58%,#c19ca8 100%);border:0;border-radius:20px;box-shadow:0 12px 31px #846a9c21;color:#fff;padding:27px 24px}
.app .welcome h2{color:#fff;font-size:24px;font-weight:760;line-height:1.5}
.app .welcome p,.app .welcome .eyebrow{color:#f5eefa;font-size:12px}
.app .welcome button{color:#fff;border-color:#ffffff59;font-weight:700;font-size:12px}
.app .paper{background:#fffcfa;box-shadow:8px 10px 0 #ffffff38}.app .paper span{background:#e9d9ed}
.app .classGrid{padding:21px;gap:15px}
.app .classTile{border:1px solid #eeeaf2;background:linear-gradient(145deg,#fff,#fdfaff);border-radius:16px;padding:20px;box-shadow:0 5px 13px #43385108;transition:transform .18s,box-shadow .18s}
.app .classTile:hover{transform:translateY(-3px);box-shadow:0 11px 24px #43385117}
.app .classTile strong{font-size:14px;font-weight:750}
.app .classTile p{font-size:12px}
.app .classMonogram{border-radius:13px}
.app .toolbar{padding:18px 22px;gap:12px}
.app .toolbar>span{font-size:12px}
.app .pill{font-size:11px;background:#f4eefa;color:#785d96;border-radius:8px;padding:5px 9px}
.app td,.app th{padding:16px 19px;font-size:12.5px}.app th{background:#faf8fc;font-weight:700;color:#706b81}
.app td{color:#424153;border-top-color:#f1edf3}.app .avatar{width:36px;height:36px;background:#f1e8f6;color:#76518a}
.app .empty p{font-size:12px}.app .empty h3{color:#584b69}
.app .emptyIcon{background:#f4edfa;color:#8a69ab}
.app .classDetail{border-radius:20px}
.app .sessionCard{border-left-color:#9c78b7;padding-left:16px}
.app .sessionInfo strong{font-size:13px}.app .sessionInfo span,.app .sessionTime small{font-size:11px}
.app .sessionTime{font-size:13px}
.app footer{font-size:11px}
.app .modal{border-radius:23px;box-shadow:0 25px 100px #30263c38}
.app .modal h2{font-size:24px}
.app .modal label{font-size:12px}
.app .modal label input,.app .modal label select,.app .modal label textarea{font-size:13px}
.app .toast,#addon-toast{background:#5c4576;border-radius:12px;font-size:12px}

/* CÁC KHÔNG GIAN QUẢN LÝ: nhận xét, doanh thu, điểm danh, học phí */
#addon-panel,#flex-attendance-overlay,#finance-overlay{background:#f7f7fb;color:#303342;font-family:'Segoe UI','Be Vietnam Pro',Tahoma,Arial,sans-serif}
#addon-panel .addon-inner{max-width:1350px}
#addon-panel .addon-head h1,.flex-head h1{font-size:29px;font-weight:750;color:#333145}
#addon-panel .addon-kicker,.flex-kicker{color:#9371a9;font-size:10.5px;font-weight:800}
#addon-panel .addon-head p,.flex-head p{font-size:13px;color:#71717e}
#addon-panel .addon-card,.flex-controls,.flex-panel,.flex-summary-card,.flex-fee-card{border:1px solid #ece8f1;background:#fff;border-radius:19px;box-shadow:0 9px 26px #49384d09}
#addon-panel .addon-card h2,.flex-panel h2{color:#403b53;font-size:17px;font-weight:760}
#addon-panel .addon-card p,.flex-muted{font-size:12.5px}
#addon-panel .addon-toolbar label,#addon-panel .addon-form label,.flex-controls label{font-size:12.5px;color:#625c74;font-weight:650}
#addon-panel .addon-toolbar select,#addon-panel .addon-toolbar input,#addon-panel .addon-form input,#addon-panel .addon-form select,#addon-panel .addon-form textarea{font-size:13.5px;min-height:43px}
#addon-panel .addon-summary>div{border-radius:16px;border:1px solid #ece7ef;box-shadow:0 6px 16px #49384d09;background:linear-gradient(145deg,#fff,#fdf9ff)}
#addon-panel .addon-summary span{font-size:12px;color:#757186}
#addon-panel .addon-summary strong{font-size:27px;color:#605078}
#addon-panel .addon-table-scroll th,#addon-panel .addon-table-scroll td{font-size:12px;padding:13px 14px}
#addon-panel .addon-table-scroll th{background:#faf8fc;color:#71687f;font-weight:700}
#addon-panel .addon-note{background:#f5eff9;color:#6c5583;font-size:12px}
#addon-panel .addon-btn{border-color:#e8dfed;color:#675078;background:#fff;border-radius:10px;font-size:12px}
#addon-panel .revenue-metric{border-radius:18px;box-shadow:0 9px 25px #523f610c}
#addon-panel .revenue-metric>span,#addon-panel .revenue-metric small{font-size:11.5px}
#addon-panel .revenue-metric strong{font-size:clamp(22px,2.2vw,29px)}
#addon-panel .revenue-section-head h2{font-size:18px!important}
#addon-panel .revenue-section-head p,#addon-panel .revenue-toolbar label{font-size:12.5px!important}
#addon-panel .revenue-table th,#addon-panel .revenue-table td{font-size:12px}
#flex-attendance-overlay .flex-table th,#flex-attendance-overlay .flex-table td{font-size:12.5px}
#finance-overlay h1,#finance-overlay h2{color:#373146}
#finance-launch{background:#8a6aa3!important;color:white!important;border-color:#9477ac!important;border-radius:11px!important;font-size:12px!important}
#addon-panel .review-sheet,#fin-receipt-modal .receipt-paper{font-family:'Segoe UI',Tahoma,Arial,sans-serif}
.profilePage{background:radial-gradient(ellipse at top left,#f4eaf7,transparent 60%),#f7f7fb}
.profilePage .profileCard{border-radius:25px;border-color:#eee8f2;box-shadow:0 15px 30px #49415912}
.profilePage .authBrand{color:#795692}
.profilePage .authCard label{font-size:13px}

/* Thiết kế thích ứng cho máy tính bảng / điện thoại */
@media(max-width:1150px){
 .app .sidebar{width:230px;padding:27px 12px}
 .app main{margin-left:230px}
 .app .overviewGrid{grid-template-columns:minmax(0,1fr) 260px}
 .authPage:not(.profilePage) .authLayout{grid-template-columns:minmax(0,1fr) minmax(350px,.94fr);gap:25px}
 .authPage:not(.profilePage) .authStory{min-height:650px}
}
@media(max-width:900px){
 .app .sidebar{width:84px;padding:23px 12px}
 .app main{margin-left:84px}
 .app .sidebar .brand{font-size:0;padding:0;margin:0 0 27px;justify-content:center;gap:0}
 .app .sidebar .brand>span:first-child{font-size:20px}
 .app .sidebar .brandDot,.app .sidebar .sideLabel,.app .sidebar .sideNote,.app .sidebar .profile,.app .sidebar .addon-nav-separator{display:none}
 .app .sidebar nav{gap:10px}
 .app .sidebar nav>button{font-size:0;padding:12px;justify-content:center;gap:0}
 .app .sidebar nav>button svg{width:21px;height:21px}
 .app .sidebar nav .addon-nav-button{font-size:0;padding:11px;justify-content:center;gap:0}
 .app .sidebar nav .addon-nav-emoji{font-size:23px;width:auto}
 .app .sidebar nav small{display:none}
 .app .overviewGrid{grid-template-columns:1fr}
 .app .welcome{display:none}
 .authPage:not(.profilePage) .authLayout{grid-template-columns:minmax(0,1fr) minmax(310px,1fr);gap:18px}
 .authPage:not(.profilePage) .authStory{min-height:640px}
 .authPage:not(.profilePage) .authStory h1{font-size:29px}
}
@media(max-width:720px){
 .authPage:not(.profilePage){padding:14px 16px 30px}
 .authPage:not(.profilePage) .authBrand{font-size:22px}
 .authPage:not(.profilePage) .authLayout{grid-template-columns:1fr;gap:16px;margin:11px auto 0}
 .authPage:not(.profilePage) .authStory{min-height:310px;max-height:340px;padding:23px;border-radius:23px;background-position:center,center 31%}
 .authPage:not(.profilePage) .authStory .eyebrow{top:18px;left:19px;font-size:9px;letter-spacing:.6px;padding:7px 10px}
 .authPage:not(.profilePage) .authStory h1{font-size:26px;line-height:1.21;margin:0 0 8px;letter-spacing:-1px}
 .authPage:not(.profilePage) .authStory>p{font-size:11.5px;line-height:1.65}
 .authPage:not(.profilePage) .authCard{max-width:none;border-radius:22px;padding:25px 23px}
 .authPage:not(.profilePage) .authIcon{display:none}
 .authPage:not(.profilePage) .authCard h2{font-size:23px}
 .authPage:not(.profilePage) .authSwitch{margin:20px 0 18px}
}
@media(max-width:620px){
 .app .sidebar{position:fixed;inset:auto 0 0;width:100%;height:75px;background:#2b2939;padding:4px 5px 5px;border-top:1px solid #ffffff20;z-index:40}
 .app .sidebar .brand,.app .sidebar .profile,.app .sidebar .sideNote{display:none}
 .app .sidebar nav{display:flex;justify-content:flex-start;gap:4px;overflow-x:auto;overflow-y:hidden;width:100%;padding-bottom:3px;scrollbar-width:thin}
 .app .sidebar nav>button,.app .sidebar nav .addon-nav-button{flex:0 0 84px;min-width:84px;height:59px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:5px 6px;font-size:10px;line-height:1.2;white-space:nowrap}
 .app .sidebar nav>button svg{height:19px;width:19px}
 .app .sidebar nav .addon-nav-emoji{font-size:18px}
 .app .sidebar nav .addon-nav-separator{display:none}
 .app main{margin-left:0;padding-bottom:78px}
 .app header{height:64px;padding:0 16px}
 .app .content{padding:19px 14px 0}
 .app .pageHead{padding:21px 20px;border-radius:17px;gap:13px;margin-bottom:17px}
 .app .pageHead h1{font-size:24px}
 .app .pageHead p{font-size:12.5px}
 .app .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .app .stat{min-height:141px;border-radius:15px;padding:18px 14px}
 .app .statNumber{font-size:26px}
 .app .statNumber span{font-size:11.5px}
 .app .statIcon{width:31px;height:31px;right:12px;top:12px}
 .app .panel{border-radius:17px}
 .app .panelHead{padding:18px}
 .app .classTile{border-radius:13px}
 #addon-panel,#flex-attendance-overlay,#finance-overlay{padding:19px 14px 88px}
 #addon-panel .addon-head h1,.flex-head h1{font-size:23px}
 #addon-panel .addon-card{border-radius:16px}
 #addon-panel .revenue-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 #addon-panel .revenue-metric{padding:16px 13px;min-height:145px}
 #addon-panel .revenue-metric strong{font-size:19px}
 #addon-panel .revenue-metric>span{font-size:10px}
}
/* Giữ nguyên trang in và phiếu nhận xét: không áp nền bảng điều khiển khi in. */
@media print{
 .authPage:not(.profilePage) .authStory{background-image:none!important}
 body{background:#fff!important}
}


/* Nút học phí trong thanh bên theo cùng quy chuẩn với các mục khác. */
.app .sidebar #finance-launch{background:#ffffff0c!important;color:#e7deec!important;border:1px solid #ffffff18!important;border-radius:12px!important;text-align:left!important;min-height:43px!important;padding:10px 12px!important;font-size:12.5px!important;line-height:1.4!important;font-weight:650!important;margin:6px 0!important;box-shadow:none!important}
.app .sidebar #finance-launch:hover{background:#ffffff24!important;color:#fff!important}
@media(max-width:900px){.app .sidebar #finance-launch{font-size:0!important;padding:9px 4px!important;text-align:center!important;min-height:43px!important}}
@media(max-width:620px){.app .sidebar #finance-launch{font-size:10px!important;width:90px!important;flex:0 0 90px!important;min-width:90px!important;min-height:57px!important;margin:0!important;padding:5px 4px!important;text-align:center!important}}


/* =======================================================================
   SỔ LỚP BLOOM — Hiệu ứng Đăng nhập & Đăng ký
   Màu kem - hồng phấn - tím mận, dành cho giao diện giáo viên tinh tế.
   Chỉ áp dụng tại trang đăng nhập, không ảnh hưởng Sổ Lớp bên trong.
   ======================================================================= */
.authPage:not(.profilePage){
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(circle at 4% 11%,#fce5eb 0%,transparent 33%),
    radial-gradient(circle at 97% 12%,#f5dce7 0%,transparent 25%),
    radial-gradient(circle at 78% 91%,#e9e0fa 0%,transparent 33%),
    linear-gradient(137deg,#fdfbf7 0%,#f9f4f8 48%,#f7f4fb 100%);
}
.authPage:not(.profilePage)::before,
.authPage:not(.profilePage)::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  filter:blur(3px);opacity:.58;
  animation:sl-bloom-orbit 14s ease-in-out infinite alternate;
}
.authPage:not(.profilePage)::before{
  width:390px;height:390px;top:-175px;left:-140px;
  background:radial-gradient(circle,#f0b9d21c 8%,#f7c9d957 46%,transparent 70%);
}
.authPage:not(.profilePage)::after{
  width:490px;height:490px;bottom:-235px;right:-170px;
  background:radial-gradient(circle,#d9c4ef90 0%,#e6cbec3b 55%,transparent 70%);
  animation-delay:-7s;animation-direction:alternate-reverse;
}
.authPage:not(.profilePage) .authBrand{
  position:relative;z-index:3;
  animation:sl-soft-enter .85s cubic-bezier(.2,.72,.3,1) both;
}
.authPage:not(.profilePage) .authBrand svg{
  filter:drop-shadow(0 3px 7px #aa83c448);
  animation:sl-logo-sway 5.5s ease-in-out infinite;
}
.authPage:not(.profilePage) .authLayout{position:relative;z-index:2}
/* Tấm ảnh của giáo viên giữ nguyên - chỉ có ánh sáng lướt qua lớp phủ. */
.authPage:not(.profilePage) .authStory{
  border:1px solid #fff8;
  box-shadow:0 25px 65px #6550692c,0 9px 25px #6e586a1b;
  transform-origin:center;
  animation:sl-portrait-appear 1.1s cubic-bezier(.22,.77,.2,1) both;
  transition:box-shadow .6s ease,transform .6s ease;
  will-change:transform;
}
.authPage:not(.profilePage) .authStory:hover{
  transform:translateY(-4px) scale(1.005);
  box-shadow:0 31px 76px #66516a36,0 11px 28px #6e586a1e;
}
.authPage:not(.profilePage) .authStory::before{
  content:"";position:absolute;inset:-80% -165%;z-index:0;pointer-events:none;
  background:linear-gradient(102deg,transparent 45%,#ffffff00 47%,#ffffff19 49%,#ffffff04 51%,transparent 54%);
  transform:translateX(-55%) rotate(-8deg);
  animation:sl-portrait-shimmer 11s ease-in-out 1.8s infinite;
}
.authPage:not(.profilePage) .authStory .eyebrow{
  box-shadow:0 8px 24px #321d3726;
  animation:sl-fade-down 1s .32s both;
}
.authPage:not(.profilePage) .authStory h1,
.authPage:not(.profilePage) .authStory>p{position:relative;z-index:1}
.authPage:not(.profilePage) .authStory h1{
  animation:sl-soft-enter .85s .38s both;
}
.authPage:not(.profilePage) .authStory>p{
  animation:sl-soft-enter .85s .52s both;
}
/* Khung đăng nhập kính ngọc trai, viền hồng phấn */
.authPage:not(.profilePage) .authCard{
  position:relative;isolation:isolate;
  background:linear-gradient(157deg,#fffffffa 0%,#fffdfef5 63%,#fdf8fcf7 100%);
  border:1px solid #eddee9;border-radius:31px;
  box-shadow:0 25px 65px #7967891b,0 2px 3px #ab829512;
  animation:sl-card-appear 1s .12s cubic-bezier(.2,.76,.21,1) both;
  transition:box-shadow .3s ease;
}
.authPage:not(.profilePage) .authCard:hover{box-shadow:0 29px 74px #79678923,0 2px 4px #ab829515}
.authPage:not(.profilePage) .authCard::before{
  content:"✿";position:absolute;right:24px;top:18px;
  font-family:Arial,sans-serif;font-weight:400;font-size:30px;color:#eab5c9;
  opacity:.52;pointer-events:none;
  filter:drop-shadow(0 3px 10px #edc5d4);
  animation:sl-flower-breathe 5.6s ease-in-out infinite;
}
.authPage:not(.profilePage) .authCard::after{
  content:"";position:absolute;inset:0;border-radius:31px;pointer-events:none;
  border:1px solid #fff9;
  background:radial-gradient(circle at 93% 6%,#f7d7e229 0%,transparent 31%);
  z-index:-1;
}
.authPage:not(.profilePage) .authIcon{
  background:linear-gradient(145deg,#fae5ef,#eee3f7 65%,#e9efdf);
  color:#855b90;
  box-shadow:0 10px 24px #d8b5d338;
  animation:sl-icon-float 5.3s ease-in-out infinite;
}
.authPage:not(.profilePage) .authCard h2{color:#4d3854;letter-spacing:-.7px}
.authPage:not(.profilePage) .authCard>p{color:#837589}
/* Chuyển tab đăng nhập / đăng ký mềm mại, có gạch nhấn */
.authPage:not(.profilePage) .authSwitch{
  background:linear-gradient(105deg,#f8eff5,#f0eafa);
  border:1px solid #f3e6ef;
  box-shadow:inset 0 2px 5px #ddced614;
}
.authPage:not(.profilePage) .authSwitch button{
  transition:transform .23s ease,color .23s ease,background .23s ease,box-shadow .23s ease;
}
.authPage:not(.profilePage) .authSwitch button:hover:not(.chosen){color:#925879;background:#ffffff80}
.authPage:not(.profilePage) .authSwitch button.chosen{
  color:#875476;
  background:linear-gradient(145deg,#fff,#fffafc);
  box-shadow:0 4px 14px #8c527024;
}
/* Ô nhập dễ đọc, rõ ràng, nổi nhẹ khi chọn. */
.authPage:not(.profilePage) .authCard form label{transition:color .22s ease}
.authPage:not(.profilePage) .authCard form label:focus-within{color:#80527f}
.authPage:not(.profilePage) .authCard form input{
  border:1px solid #e9dce8;background:#fff;
  box-shadow:0 1px 2px #6e52620a;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.authPage:not(.profilePage) .authCard form input:hover{border-color:#d5b9d2;background:#fffdfd}
.authPage:not(.profilePage) .authCard form input:focus{
  border-color:#bf8aae;transform:translateY(-1px);
  box-shadow:0 0 0 4px #f6e9f2,0 5px 16px #be92b124;
  background:#fff;
}
/* Nút màu mận, phản chiếu ánh sáng khi rê chuột. */
.authPage:not(.profilePage) .authCard .authLink.primary,
.authPage:not(.profilePage) .authCard button.primary,
.authPage:not(.profilePage) .authCard form button[type="submit"]{
  position:relative;overflow:hidden;
  background:linear-gradient(112deg,#805481 0%,#925f8e 47%,#745a96 100%);
  box-shadow:0 11px 22px #78538135;
  border-color:transparent;
  transition:transform .26s ease,filter .26s ease,box-shadow .26s ease;
}
.authPage:not(.profilePage) .authCard .authLink.primary:hover:not(:disabled),
.authPage:not(.profilePage) .authCard button.primary:hover:not(:disabled),
.authPage:not(.profilePage) .authCard form button[type="submit"]:hover:not(:disabled){
  transform:translateY(-3px);box-shadow:0 16px 28px #78538147;filter:brightness(1.06)
}
.authPage:not(.profilePage) .authCard .authLink.primary:active,
.authPage:not(.profilePage) .authCard button.primary:active{transform:translateY(0) scale(.988)}
.authPage:not(.profilePage) .authCard .authLink.primary::before,
.authPage:not(.profilePage) .authCard button.primary::before,
.authPage:not(.profilePage) .authCard form button[type="submit"]::before{
  content:"";position:absolute;left:-90%;top:-100%;width:52%;height:300%;pointer-events:none;
  transform:rotate(25deg);
  background:linear-gradient(90deg,transparent,#ffffff48,transparent);
  transition:left .65s cubic-bezier(.24,.85,.3,1);
}
.authPage:not(.profilePage) .authCard .authLink.primary:hover::before,
.authPage:not(.profilePage) .authCard button.primary:hover::before,
.authPage:not(.profilePage) .authCard form button[type="submit"]:hover::before{left:145%}
.authPage:not(.profilePage) .offlineNotice,
.authPage:not(.profilePage) .authHint{
  border-color:#efe5ed;background:linear-gradient(145deg,#faf5f9,#f6f2fa);
}
/* Cánh hoa rơi được thêm từ script.js, nằm ngoài vùng React. */
#sl-auth-effects{
  position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden;contain:strict;
}
#sl-auth-effects[hidden]{display:none!important}
#sl-auth-effects .sl-petal{
  position:absolute;top:-42px;left:var(--petal-x);
  width:var(--petal-w);height:calc(var(--petal-w) * .72);
  border-radius:9px 90% 12px 80%;
  background:linear-gradient(125deg,#f6d8e4cc,#e9b7ce9e 50%,#fff7fa80);
  border:1px solid #fff8;
  box-shadow:0 2px 7px #eec0d31d;
  opacity:0;
  transform:rotate(var(--petal-angle));
  animation:sl-petal-fall var(--petal-time) linear var(--petal-delay) infinite;
}
#sl-auth-effects .sl-petal:nth-child(3n){background:linear-gradient(140deg,#eee1f7d6,#d8c2eb9a)}
#sl-auth-effects .sl-petal:nth-child(4n){background:linear-gradient(140deg,#fff2eccb,#efc9c49e)}
/* Khi đổi tab, form hiện dần mà không làm gián đoạn dữ liệu. */
.authPage:not(.profilePage) .authCard.sl-mode-animating form{
  animation:sl-form-bloom .45s cubic-bezier(.18,.74,.25,1) both;
}
@keyframes sl-soft-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes sl-fade-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes sl-portrait-appear{from{opacity:0;transform:translateX(-22px) scale(.975);filter:blur(4px)}to{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}
@keyframes sl-card-appear{from{opacity:0;transform:translateX(28px) translateY(10px) scale(.97)}to{opacity:1;transform:translateX(0) translateY(0) scale(1)}}
@keyframes sl-form-bloom{from{opacity:.15;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes sl-icon-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes sl-logo-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
@keyframes sl-flower-breathe{0%,100%{transform:rotate(-10deg) scale(.93);opacity:.39}50%{transform:rotate(16deg) scale(1.07);opacity:.66}}
@keyframes sl-bloom-orbit{from{transform:translate(0,0) scale(1)}to{transform:translate(28px,20px) scale(1.12)}}
@keyframes sl-portrait-shimmer{0%,31%,100%{transform:translateX(-66%) rotate(-8deg);opacity:0}42%{opacity:1}60%{transform:translateX(66%) rotate(-8deg);opacity:1}64%{opacity:0}}
@keyframes sl-petal-fall{
  0%{opacity:0;transform:translate3d(0,-3vh,0) rotate(0deg)}
  9%{opacity:.46}
  48%{opacity:.34;transform:translate3d(var(--petal-drift),52vh,0) rotate(145deg)}
  92%{opacity:.37}
  100%{opacity:0;transform:translate3d(calc(var(--petal-drift) * -1),110vh,0) rotate(290deg)}
}
@media(max-width:720px){
  .authPage:not(.profilePage) .authCard{border-radius:24px}
  .authPage:not(.profilePage) .authCard::after{border-radius:24px}
  .authPage:not(.profilePage) .authCard::before{font-size:23px;top:13px;right:15px}
  .authPage:not(.profilePage) .authStory:hover{transform:none}
  #sl-auth-effects .sl-petal:nth-child(n+8){display:none}
}
/* Tránh khiến người nhạy cảm với chuyển động bị khó chịu. */
@media(prefers-reduced-motion:reduce){
  .authPage:not(.profilePage),
  .authPage:not(.profilePage) *,
  .authPage:not(.profilePage)::before,.authPage:not(.profilePage)::after,
  .authPage:not(.profilePage) *::before,.authPage:not(.profilePage) *::after,
  #sl-auth-effects .sl-petal{animation:none!important;transition-duration:.01ms!important}
  #sl-auth-effects{display:none!important}
}
@media print{#sl-auth-effects{display:none!important}}


/* HavEducation Cloud status, reset password and account messages */
.formSuccess{border:1px solid #92d9b5;background:#effcf5;color:#176748;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.6}
.hav-forgot{display:block;margin:12px auto 0;background:transparent;border:none;color:#70419e;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit;padding:8px}
.hav-forgot:hover{color:#ac5cb2}
#hav-cloud-status{position:fixed;right:18px;bottom:18px;z-index:2147483000;max-width:min(430px,calc(100vw - 32px));background:#4a3760;color:#fff;box-shadow:0 16px 44px #25163d35;padding:12px 18px;border-radius:14px;font:600 13px/1.5 'Segoe UI',Tahoma,sans-serif;white-space:normal}
#hav-cloud-status[hidden]{display:none!important}
#hav-cloud-status[data-kind="ok"]{background:#24654e}
#hav-cloud-status[data-kind="error"]{background:#892c45}
#hav-conflict-screen,#hav-password-recovery{position:fixed;inset:0;z-index:2147483200;background:rgba(37,25,53,.79);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(7px)}
.hav-conflict-card,.hav-recovery-card,.hav-boot-error{background:#fff9fc;color:#34243f;border-radius:22px;padding:28px;box-shadow:0 22px 80px #1f153860;max-width:540px;width:100%;font-family:'Segoe UI',Tahoma,Arial,sans-serif}
.hav-conflict-card h2,.hav-recovery-card h2,.hav-boot-error h2{margin:0 0 16px;font-size:22px}
.hav-conflict-card p,.hav-recovery-card p,.hav-boot-error p{line-height:1.65}
.hav-conflict-card small{display:block;margin-top:16px;line-height:1.5}
.hav-conflict-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hav-conflict-card button,.hav-recovery-card button,.hav-boot-error button{background:#7844a6;color:white;border:0;border-radius:12px;cursor:pointer;padding:11px 18px;font-family:inherit;font-size:14px;font-weight:600}
.hav-conflict-card button:first-child{background:#295f6a}
.hav-recovery-card label{display:block;font-weight:600;font-size:14px;margin:14px 0}
.hav-recovery-card input{display:block;width:100%;margin-top:8px;padding:12px;border-radius:10px;border:1px solid #d1c6da;box-sizing:border-box}
.hav-recovery-message{margin-top:12px;color:#a3254a}
.hav-boot-error{max-width:610px;margin:11vh auto}
@media(max-width:640px){#hav-cloud-status{right:10px;bottom:10px;font-size:12px}}


/* --- receipt-image-modal: phiếu thu dạng ảnh (theo mẫu: gộp phụ phí vào tiền học, gộp nợ, gộp học sinh khác; lưu thẳng PNG) --- */
#rcp-modal.rcp-backdrop{position:fixed;inset:0;z-index:9999;background:rgba(40,38,34,.45);display:grid;place-items:center;padding:16px}
#rcp-modal .rcp-dialog{width:min(100%,480px);max-height:min(94vh,860px);display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 80px rgba(30,28,24,.32);overflow:hidden;color:#1a1917;font-family:'Inter','Segoe UI',Tahoma,Arial,'Be Vietnam Pro',sans-serif}
#rcp-modal .rcp-top{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #eeece7}
#rcp-modal .rcp-top h2{margin:0;font:600 16px/1.3 'Inter','Segoe UI',Tahoma,Arial,sans-serif;letter-spacing:0;color:#1a1917}
#rcp-modal .rcp-top button{border:0;background:transparent;width:34px;height:34px;border-radius:9px;color:#8a8984;display:grid;place-items:center;padding:0}
#rcp-modal .rcp-top button:hover{background:#f3f2ee}
#rcp-modal .rcp-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 18px}
#rcp-modal .rcp-stage{position:relative;margin:0 calc(-12px*var(--s,1));min-height:120px}
#rcp-modal .rcp-preview{display:block;width:100%;height:auto;border-radius:0;background:#fff}
#rcp-modal .rcp-preview[hidden],#rcp-modal .rcp-status[hidden],#rcp-modal .rcp-check[hidden],#rcp-modal .rcp-panel[hidden]{display:none!important}
#rcp-modal .rcp-status{margin:0;padding:48px 10px;text-align:center;color:#9d9b94;font-size:13px}
#rcp-modal .rcp-fab{position:absolute;top:calc(22px*var(--s,1));right:calc(21px*var(--s,1));display:flex;gap:calc(6px*var(--s,1))}
#rcp-modal .rcp-fab button{width:calc(32px*var(--s,1));height:calc(32px*var(--s,1));border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#7a5ccf;display:grid;place-items:center;padding:0;box-shadow:0 1px 4px rgba(60,40,120,.18)}
#rcp-modal .rcp-fab button:hover:not(:disabled){background:#fff}
#rcp-modal .rcp-fab button:disabled{opacity:.55;cursor:default}
#rcp-modal .rcp-fab svg{width:52%;height:52%}
#rcp-modal .rcp-days{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:14px;color:#1a1917;cursor:pointer;width:max-content;max-width:100%}
#rcp-modal .rcp-days input{width:16px;height:16px;min-width:16px;margin:0;padding:0;accent-color:#2a5d52;border:0;background:none;box-shadow:none}
#rcp-modal .rcp-ico{display:inline-grid;place-items:center;color:#8a8984}
#rcp-modal .rcp-hint{display:block;margin:7px 0 10px;font-size:12px;line-height:1.5;color:#9d9b93}
#rcp-modal .rcp-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#rcp-modal .rcp-opt{display:flex;align-items:center;justify-content:center;gap:6px;min-height:26px;padding:4px 6px;border:1px solid #e2e0d9;border-radius:7px;background:#fff;color:#64625d;font-size:12px;font-weight:600;line-height:1.2;cursor:pointer}
#rcp-modal .rcp-opt span{white-space:nowrap}
#rcp-modal .rcp-opt svg{flex:none}
#rcp-modal .rcp-opt.rcp-wide{grid-column:1/-1}
#rcp-modal .rcp-opt:hover:not(:disabled){background:#faf9f6}
#rcp-modal .rcp-opt.on{background:#f3effc;border-color:#cdbdf0;color:#5b3fb5}
#rcp-modal .rcp-opt.open{box-shadow:0 0 0 3px #ece5fa}
#rcp-modal .rcp-opt:disabled{opacity:.45;cursor:default}
#rcp-modal .rcp-panel{margin-top:10px;padding:12px;border:1px solid #eeece7;border-radius:12px;background:#fcfcfa}
#rcp-modal .rcp-input{display:block;width:100%;border:1px solid #e2e0d9;border-radius:9px;padding:9px 11px;font-size:13px;line-height:1.5;background:#fff;color:#1a1917;min-width:0;resize:vertical}
#rcp-modal .rcp-input:focus{border-color:#a48be0;box-shadow:0 0 0 3px #ece5fa;outline:none}
#rcp-modal .rcp-link{border:0;background:none;color:#6a4fc0;text-decoration:underline;padding:0;font-size:12px;cursor:pointer}
#rcp-modal #rcp-note-fill{margin-top:8px}
#rcp-modal .rcp-students{max-height:210px;overflow-y:auto;margin-top:8px}
#rcp-modal .rcp-check{display:flex;flex-direction:row;gap:10px;align-items:flex-start;padding:8px 10px;margin:0 0 6px;border:1px solid #eeece7;border-radius:10px;background:#fff;cursor:pointer;font-size:13px;color:#1a1917}
#rcp-modal .rcp-check input[type=checkbox]{flex:none;width:16px;height:16px;min-width:16px;margin:2px 0 0;padding:0;border:0;background:none;accent-color:#7a5ccf;box-shadow:none}
#rcp-modal .rcp-check b{display:block;font-size:13px;font-weight:600;color:#1a1917;line-height:1.4}
#rcp-modal .rcp-check small{display:block;margin:2px 0 0;padding:0;background:none;font-size:11.5px;font-weight:400;line-height:1.45;color:#9d9b94}
#rcp-modal .rcp-check:has(input:checked){background:#f7f4fd;border-color:#d9ccf3}
#rcp-modal .rcp-empty{margin:0;font-size:12px;color:#9d9b94}
#rcp-modal .rcp-info{margin:10px 0 0;font-size:12px;line-height:1.55;color:#65645e}
#rcp-modal .rcp-info:empty{display:none}
#rcp-modal .rcp-memo{margin-top:14px}
#rcp-modal .rcp-memo label{display:block;margin:0 0 6px;font-size:12px;font-weight:600;color:#65645e}
#rcp-modal .rcp-memo-row{display:flex;gap:7px;align-items:stretch}
#rcp-modal .rcp-memo-row .rcp-input{font-weight:700;letter-spacing:.2px}
#rcp-modal .rcp-mini{flex:none;border:1px solid #e2e0d9;background:#fff;color:#64625d;border-radius:9px;padding:0 12px;font-size:12px;font-weight:600;cursor:pointer}
#rcp-modal .rcp-toast{margin:10px 0 0;font-size:12px;line-height:1.5;color:#2e7d57}
#rcp-modal .rcp-toast:empty{display:none}
@media(max-width:520px){
 #rcp-modal.rcp-backdrop{padding:8px}
 #rcp-modal .rcp-dialog{max-height:97vh}
 #rcp-modal .rcp-scroll{padding:12px 14px 16px}
 #rcp-modal .rcp-opt{font-size:11.5px;padding:4px 4px;gap:4px}
}

/* Thu phụ phí chung độc lập: không cần chọn học sinh */
.surcharge-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.surcharge-summary-col{display:flex;flex-direction:column;gap:9px;padding:19px!important}
.surcharge-summary-col small{font-size:10px;color:#7b687a;letter-spacing:.3px;font-weight:650}
.surcharge-summary-col strong{font-size:21px;color:#704c77;letter-spacing:-.4px}
.surcharge-summary-col span{font-size:11px;color:#857f88;line-height:1.65}
#addon-extra-form .surcharge-mode-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 4px}
#addon-extra-form .surcharge-mode-picker label{display:flex;flex-direction:row;align-items:flex-start;gap:11px;min-width:0;margin:0;padding:17px;border:1px solid #e8dce9;background:#fcf9fc;border-radius:12px;cursor:pointer;font-weight:400}
#addon-extra-form .surcharge-mode-picker label:has(input:checked){border-color:#a87cad;background:#f9f0f9;box-shadow:0 0 0 2px #efe0ef}
#addon-extra-form .surcharge-mode-picker input[type="radio"]{width:17px;min-width:17px;height:17px;min-height:17px;flex:none;padding:0;margin:1px 0 0;accent-color:#936994}
#addon-extra-form .surcharge-mode-picker span{display:flex;flex-direction:column;gap:6px;min-width:0;line-height:1.6}
#addon-extra-form .surcharge-mode-picker strong{font-size:12px;color:#684e70}
#addon-extra-form .surcharge-mode-picker small{font-size:10.5px;color:#857688;font-weight:400}
#addon-extra-student-wrap[hidden],#addon-extra-custom-wrap[hidden]{display:none!important}
#addon-extra-student-wrap{margin:0 0 4px}
#addon-extra-student-wrap label{display:flex;flex-direction:column;gap:8px}
.surcharge-status{display:inline-block;font-size:10.5px;line-height:1.5;padding:6px 9px;border-radius:8px;font-weight:600;white-space:normal}
.surcharge-status-paid{background:#e8f5ec;color:#2f6b4b}
.surcharge-status-student{background:#f7eef8;color:#875c8c}
@media(max-width:680px){.surcharge-summary-grid,#addon-extra-form .surcharge-mode-picker{grid-template-columns:1fr}.surcharge-form-footer{align-items:stretch}.surcharge-form-footer button{width:100%}}

/* Phụ phí đơn giản — danh mục dùng lại khi lập phiếu thu */
#addon-panel .surcharge-simple-head{margin-bottom:22px}
#addon-panel .surcharge-simple-head h1{font-size:27px;font-weight:700;letter-spacing:-.6px;color:#25382d;margin:0 0 6px}
#addon-panel .surcharge-simple-head p{font-size:13px;color:#8d9690}
#addon-panel .surcharge-simple-card{padding:25px;border-radius:13px;box-shadow:0 2px 4px #172a2110}
#addon-panel .surcharge-simple-fields{display:grid;grid-template-columns:1fr 1fr;gap:17px}
#addon-panel .surcharge-simple-fields label{font-size:13px;font-weight:600;color:#4f5451;display:flex;flex-direction:column;gap:9px}
#addon-panel .surcharge-simple-fields input{height:43px;padding:10px 14px;font-size:14px;border:1px solid #d4d8d0;border-radius:7px;color:#303a33;background:#fff}
#addon-panel .surcharge-simple-fields small{font-size:11px;color:#8b918c;font-weight:400;line-height:1.4}
#addon-panel .surcharge-simple-actions{display:flex;justify-content:flex-end;gap:9px;margin:28px 0 5px}
#addon-panel .surcharge-simple-actions button{font-size:13px;font-weight:700;min-width:145px;padding:11px 18px;border-radius:7px}
#addon-panel .surcharge-simple-actions .primary{background:#2d6a4b}
#addon-panel .surcharge-simple-table{margin-top:7px;min-width:600px}
#addon-panel .surcharge-simple-table th{padding:15px 14px!important;background:#fff!important;color:#9a9c96!important;font-size:12px!important;letter-spacing:.45px;text-transform:uppercase}
#addon-panel .surcharge-simple-table td{padding:15px 14px!important;font-size:14px!important;color:#303a33;border-top:1px solid #e9e9e2}
#addon-panel .surcharge-simple-table td strong{font-weight:600}
#addon-panel .surcharge-simple-table th:first-child,#addon-panel .surcharge-simple-table td:first-child{width:40%}
#addon-panel .surcharge-simple-table th:last-child,#addon-panel .surcharge-simple-table td:last-child{text-align:right;width:120px;white-space:nowrap}
#addon-panel .surcharge-simple-tools button{font-size:17px;line-height:1;border:1px solid #d8dbd3;background:#fff;min-width:37px;height:33px;padding:5px 8px;margin-left:6px;color:#72776f}
#addon-panel .surcharge-simple-tools button:hover{background:#f0f5ed;color:#2d6a4b}
#addon-panel .surcharge-simple-tools button:last-child:hover{background:#fff1f0;color:#b45454}
#addon-panel .surcharge-simple-hint{font-size:12px;line-height:1.7;color:#788377;margin:0 0 15px}
#addon-panel .surcharge-old-records{margin:16px 0 26px;font-size:12px;color:#607c66}
#addon-panel .surcharge-old-records summary{cursor:pointer;padding:8px 0}
#addon-panel .surcharge-old-records .addon-card{margin-top:12px}
#rcp-modal .rcp-catalog-picker{margin-top:10px;padding:10px 11px;border:1px solid #e5e7df;border-radius:10px;background:#fafcf9}
#rcp-modal .rcp-catalog-picker summary{cursor:pointer;color:#376b4e;font-size:12px;font-weight:700}
#rcp-modal .rcp-catalog-list{max-height:190px;overflow:auto;margin:9px 0 6px}
#rcp-modal .rcp-catalog-item{display:flex;gap:9px;align-items:center;padding:9px;border-bottom:1px solid #eef1eb;font-size:12px;cursor:pointer}
#rcp-modal .rcp-catalog-item:last-child{border-bottom:0}
#rcp-modal .rcp-catalog-item input{margin:0;flex:none;width:16px;height:16px;accent-color:#2c754f}
#rcp-modal .rcp-catalog-item span{flex:1;min-width:0}
#rcp-modal .rcp-catalog-item b{font-size:12px;white-space:nowrap}
#rcp-modal .rcp-catalog-item small{display:block;margin-top:3px;color:#839187}
#rcp-modal .rcp-catalog-item:has(input:disabled){opacity:.65;cursor:default}
#rcp-modal .rcp-catalog-actions{display:flex;justify-content:flex-end;margin:10px 0 6px}
#rcp-modal .rcp-catalog-actions button{padding:9px 13px;font-size:12px;font-weight:700}
#rcp-modal .rcp-catalog-picker>small{font-size:11px;color:#7a877d;line-height:1.55;display:block}
#rcp-modal .rcp-catalog-picker .rcp-empty{margin-top:9px}
@media(max-width:650px){#addon-panel .surcharge-simple-fields{grid-template-columns:1fr}#addon-panel .surcharge-simple-card{padding:16px}#addon-panel .surcharge-simple-head h1{font-size:23px}}
#addon-panel #addon-catalog-cancel[hidden]{display:none!important}


/* HavEducation Lite — giao diện mới, nhẹ và tương thích điện thoại. */
:root{
 --ink:#183047;--muted:#6d7e8f;--line:#e4edf0;--green:#087f77;
 --bg:#f4f8f9;--hav-navy:#0d2635;--hav-teal:#087f77;
}
html{scroll-behavior:smooth}
body{background:#f4f8f9;color:#183047;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:13px}
button,input,select,textarea{font-family:inherit}
input,select,textarea{border-radius:10px;border-color:#dbe5ea;color:#193344;background:#fff}
input:focus,select:focus,textarea:focus{border-color:#12a397;box-shadow:0 0 0 3px rgba(18,163,151,.12)}
.primary,.subtle,.textButton{border-radius:10px;font-weight:650}
.primary,.addon-actions .primary,#addon-panel .surcharge-simple-actions .primary{background:#087f77;color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(8,127,119,.13)}
.primary:hover:not(:disabled){background:#086a66;filter:none}
.subtle{background:#fff;color:#1d5961;border-color:#dbe6e8}
.subtle:hover:not(:disabled){background:#f1f9f8;filter:none}
/* Desktop navigation — uncluttered dark sidebar */
.sidebar{width:252px;padding:29px 17px 18px;background:linear-gradient(180deg,#102e3d 0%,#0e2533 100%);border-right:0;color:#d9edf0;overflow-y:auto;box-shadow:5px 0 18px #0b253408}
.sidebar .brand{font-size:24px;color:#fff;margin:0 0 31px;padding:5px 7px;letter-spacing:-1.25px}
.sidebar .brand>span:first-child{width:40px;height:40px;border-radius:12px;background:#13a195;color:#fff;box-shadow:0 7px 16px #042c2b50}
.sidebar .brandDot{color:#f9c873}
.sidebar .sideLabel{color:#7499a9;font-size:10px;font-weight:700;letter-spacing:1.35px;padding-left:15px}
.sidebar nav{display:grid;gap:4px}
.sidebar nav button{color:#bdd2d8;border:1px solid transparent;background:transparent;border-radius:11px;font-size:12px;min-height:43px;padding:12px 14px;line-height:1.25;gap:12px;font-weight:600;transition:background .12s,color .12s}
.sidebar nav button:hover:not(.active){color:#fff;background:#ffffff12;filter:none}
.sidebar nav button.active,.sidebar nav button.addon-selected{background:#1b4a53;color:#fff;border-color:#33747b;box-shadow:inset 3px 0 0 #38c5b3}
.sidebar nav small{color:#0b4d47;background:#b7eae0}
.sidebar .sideNote{margin-top:22px;background:#ffffff0b;border:1px solid #ffffff16;color:#e0f2f1;flex-shrink:0;padding:18px}
.sidebar .sideNote strong{color:#effffc}
.sidebar .sideNote p,.sidebar .sideNote svg{color:#afc7c8}
.sidebar .profile{border-color:#ffffff24;margin-top:22px;padding-top:18px;color:#f6fffc}
.sidebar .profile strong{color:#fff}
.sidebar .profile small{color:#b0c5cb}
.sidebar .profile>span:first-child{background:#2d5562;color:#eafffa}
.sidebar .online{background:#28c6aa}
.sidebar .profileLink:hover strong{color:#9ce6d5}
main{margin-left:252px}
main>header,header{background:rgba(255,255,255,.95);border-bottom:1px solid #e4edf0}
main>header{height:76px;padding:0 clamp(22px,3vw,46px)}
.breadcrumb{color:#82949f}
.breadcrumb b{color:#0d746e}
.content{max-width:1440px;padding:34px clamp(20px,3vw,46px) 0}
h1{color:#193147;font-weight:750;letter-spacing:-.8px}
h2{color:#253b4b}
.eyebrow{color:#0e897f}
p,.pageHead p{color:#73818e}
.stat,.panel,.classDetail,.classTile,.modal,.welcome{background:#fff;border:1px solid #e1ebee;border-radius:17px;box-shadow:0 6px 22px rgba(20,61,72,.035)}
.stat{padding:23px 20px}
.statNumber{color:#142f3c;letter-spacing:-1px}
.stat>small{border-color:#e9eff1;color:#8698a0}
.statIcon{border-radius:13px}
.tone0,.tone3{background:#e5f6f1;color:#087f77}
.tone1{background:#ececfc;color:#6467b4}
.tone2{background:#fff2e2;color:#c0883b}
.panelHead{border-bottom:1px solid #edf1f3}
.pill{background:#e7f5f0;color:#08766d;border-radius:999px;font-weight:650}
.welcome{background:linear-gradient(145deg,#e3f4ee,#f1f8ea)}
.welcome h2{color:#194c4e}
.welcome p,.welcome button{color:#647d77}
.toolbar{border-color:#e7edef}
th{background:#f6f9fa;color:#647a85;font-weight:700;text-transform:uppercase;letter-spacing:.35px}
td{border-color:#edf1f2}
.classTile:hover{border-color:#abd9d1;box-shadow:0 12px 30px #164e4d10}
.modalBackdrop{background:#071c2e8f}
.modal{border-radius:20px}
#hav-cloud-status{background:#115a59}
/* Modern functional workspaces */
#addon-panel{background:radial-gradient(ellipse at top right,#e8f5f2,transparent 46%),#f4f8fa;color:#1b3547;padding:36px clamp(19px,3.9vw,65px) 55px}
#addon-panel .addon-inner{max-width:1340px}
.addon-head{margin-bottom:25px}
.addon-head h1{font-size:30px;color:#153448;font-weight:780;letter-spacing:-.8px}
.addon-head p,.addon-card p{color:#71828e;line-height:1.7}
.addon-kicker{color:#0e8b7f}
.addon-card{border:1px solid #e0e9ed;background:#fff;border-radius:17px;box-shadow:0 7px 22px rgba(10,62,71,.035)}
.addon-card h2{color:#203d50}
.addon-summary>div{border:1px solid #e0e9ed;border-radius:16px;box-shadow:0 5px 20px #15394808}
.addon-summary strong{color:#086f71}
.addon-toolbar label,.addon-form label{color:#415c6b;font-weight:650}
.addon-badge{border-radius:100px;background:#def4ed;color:#0e796e}
.addon-note{background:#eaf6f3;color:#426c68}
.addon-sheet{border-color:#e1eaee;border-radius:14px}
#addon-toast{background:#0d5960}
/* Preserve the user's simple surcharge catalog and clarify its hierarchy */
#addon-panel .surcharge-simple-head h1{color:#183748;font-size:30px}
#addon-panel .surcharge-simple-head p{color:#728592}
#addon-panel .surcharge-simple-card{border:1px solid #dce8ec;border-radius:17px;box-shadow:0 10px 30px #1539480c;padding:27px}
#addon-panel .surcharge-simple-fields label{color:#365463}
#addon-panel .surcharge-simple-fields input{border:1px solid #d6e4e8;border-radius:10px;height:46px}
#addon-panel .surcharge-simple-actions .primary{background:#087f77}
#addon-panel .surcharge-simple-table th{background:#f8fbfb!important;color:#70828b!important}
#addon-panel .surcharge-simple-table td{color:#263d4a}
#addon-panel .surcharge-simple-tools button{border-radius:9px;color:#416c76;border-color:#d7e3e7}
/* Unified finance metrics without interfering with printed receipts */
.revenue-metric{border:1px solid #e2ebec;border-radius:16px;box-shadow:0 7px 22px #143d4608}
.revenue-metric strong{color:#0b706c}
.revenue-two-col .addon-card,.revenue-breakdown,.revenue-trend-panel{border-radius:16px}
#finance-overlay{background:#f4f8fa}
#finance-overlay h1,#finance-overlay h2{color:#183748}
.fin-extra-summary{background:#ecf7f6;border-color:#cdeae4;color:#0c736c}
.fin-extra-summary strong{color:#07574f}
/* Authentication — fully native CSS; no large embedded photo or animated petals */
#sl-auth-effects{display:none!important}
.authPage:not(.profilePage){background:radial-gradient(circle at 10% 10%,#def3ee 0%,transparent 38%),radial-gradient(circle at 96% 92%,#dfe9f4,transparent 45%),#f4f8f9;color:#193748}
.authPage:not(.profilePage) .authBrand{color:#163849}
.authPage:not(.profilePage) .authBrand svg{color:#0a897f}
.authPage:not(.profilePage) .authBrand span{color:#e8ac62}
.authPage:not(.profilePage) .authLayout{max-width:1180px;gap:clamp(20px,4vw,64px);margin:28px auto 0}
.authPage:not(.profilePage) .authStory{background-image:radial-gradient(circle at 83% 19%,#ffffff28 0 10%,transparent 11%),radial-gradient(circle at 20% 12%,#ffffff1c 0 17%,transparent 18%),linear-gradient(135deg,#0f5363 0%,#0b827b 57%,#064e63 100%)!important;background-position:center!important;background-size:cover!important;box-shadow:0 25px 60px rgba(13,68,81,.13);border-radius:27px}
.authPage:not(.profilePage) .authStory:after{border-color:#ffffff35}
.authPage:not(.profilePage) .authStory .eyebrow{color:#16565b;background:#eafff5}
.authPage:not(.profilePage) .authStory h1{color:#fff}
.authPage:not(.profilePage) .authStory>p{color:#e2fffa}
.authPage:not(.profilePage) .authCard{background:#fff;border:1px solid #dfe9ee;border-radius:25px;box-shadow:0 23px 70px #24506112}
.authPage:not(.profilePage) .authIcon{color:#0a877d;background:#e3f5f1}
.authPage:not(.profilePage) .authCard h2{color:#1a3849}
.authPage:not(.profilePage) .authSwitch{background:#ecf5f4}
.authPage:not(.profilePage) .authSwitch button.chosen{color:#077c73}
.authPage:not(.profilePage) .authCard form label{color:#365363}
.authPage:not(.profilePage) .authCard form input{border-color:#dce8ea}
.authPage:not(.profilePage) .offlineNotice,.authPage:not(.profilePage) .authHint{background:#eff8f6;color:#5b7a7d;border-color:#e0eeed}
/* Performance and accessibility: no unnecessary movement */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:1150px){.sidebar{width:225px;padding:23px 12px 18px}.sidebar nav button{padding:11px;font-size:11px}main{margin-left:225px}}
@media(max-width:850px) and (min-width:621px){.sidebar{width:78px;padding:20px 10px}.sidebar .brand{font-size:0;justify-content:center;margin-bottom:34px;padding:0}.sidebar nav button{font-size:0;padding:12px;justify-content:center;min-height:42px}.sidebar .sideNote,.sidebar .profile{display:none}main{margin-left:78px}}
@media(max-width:620px){
 .sidebar{position:fixed;inset:auto 0 0;width:100%;height:73px;padding:6px 7px;background:#0f2d3b;border-top:1px solid #244759;overflow-x:auto;overflow-y:hidden;z-index:100}
 .sidebar nav{display:flex;gap:3px;min-width:max-content;align-items:stretch}
 .sidebar nav button{font-size:9px;min-width:70px;flex:0 0 auto;display:flex;flex-direction:column;gap:5px;justify-content:center;padding:6px 10px;min-height:55px;color:#cde4e7;border-radius:9px}
 .sidebar nav button svg{width:17px;height:17px}
 .sidebar nav button.active,.sidebar nav button.addon-selected{background:#21555b;border-color:#2d807d;box-shadow:inset 0 -3px 0 #4bd1bd}
 .sidebar .brand,.sidebar .sideLabel,.sidebar .profile,.sidebar .sideNote{display:none}
 main{margin-left:0;padding-bottom:80px}
 main>header{height:62px;padding:0 16px}
 .content{padding:23px 16px 0}
 .stats{gap:10px}
 .stat{padding:16px 13px;border-radius:14px}
 .statNumber{font-size:24px}
 .panel,.classDetail,.welcome,.modal{border-radius:14px}
 .pageHead{margin-bottom:24px}
 #addon-panel{padding:23px 15px 100px}
 .addon-head h1,#addon-panel .surcharge-simple-head h1{font-size:24px}
 #addon-panel .surcharge-simple-card{padding:17px}
 #addon-panel .surcharge-simple-fields{grid-template-columns:1fr}
 #addon-panel .surcharge-simple-table{min-width:570px}
 .authPage:not(.profilePage) .authLayout{grid-template-columns:1fr;gap:15px}
 .authPage:not(.profilePage) .authStory{min-height:245px;max-height:315px}
 .authPage:not(.profilePage) .authCard{border-radius:21px}
}
@media print{.sidebar{display:none!important}#addon-panel{background:#fff!important}body{background:#fff!important}}
/* Palette harmonization for legacy selectors with higher specificity. */
.app{background:#f4f8fa}
.app .sidebar{width:252px;padding:28px 16px 21px;background:linear-gradient(168deg,#102e3d,#0e2b37 63%,#0b3c44);color:#d7e9e9;box-shadow:8px 0 25px #123b4509}
.app .sidebar .brand{color:#fff}
.app .sidebar .brand>span:first-child{background:linear-gradient(135deg,#0aa398,#087d78);box-shadow:0 5px 17px #0b696a44}
.app .sidebar .brandDot{color:#f1ba66}
.app .sidebar .sideLabel,.app .sidebar .addon-nav-separator{color:#91b4b8}
.app .sidebar nav>button,.app .sidebar nav .addon-nav-button{color:#bcd3d8;font-weight:600}
.app .sidebar nav>button svg{color:#a0c7cb}
.app .sidebar nav>button.active,.app .sidebar nav .addon-nav-button.addon-selected{background:linear-gradient(110deg,#1c6b70,#1b4e59);border-color:#3a8c87;box-shadow:inset 3px 0 0 #52d5c0;color:#fff}
.app .sidebar nav>button.active svg{color:#d0fff6}
.app .sidebar nav small{background:#c8eee7;color:#09584f}
.app .sidebar .profile>span:first-child{background:#1b6974;color:#ebfffb}
.app .sidebar .profile small{color:#b1d0d4}
.app main{margin-left:252px}
.app header{background:#fff;height:76px;border-color:#e3ebef}
.app header .breadcrumb b{color:#087a76}
.app .content{max-width:1460px;padding:31px clamp(20px,3vw,48px) 0}
.app .pageHead{background:linear-gradient(112deg,#eaf8f4,#f4faf8 58%,#eef5fc);border-color:#dfeee9;box-shadow:0 9px 24px #153c3c0a}
.app .pageHead .eyebrow{color:#0b8e81}
.app .pageHead h1{color:#163949}
.app .pageHead p{color:#72878f}
.app .stat{border-color:#e1ebee;box-shadow:0 10px 22px #14485009}
.app .statNumber{color:#143a47}
.app .statNumber span,.app .stat>small{color:#69828a}
.app .stat:after{background:#32b2a5}
.app .stat:nth-child(2):after{background:#7ba9dd}
.app .stat:nth-child(3):after{background:#e4b26f}
.app .stat:nth-child(4):after{background:#84c7a0}
.app .tone0{background:#e0f6f0;color:#11887c}
.app .tone1{background:#e9f1fc;color:#678fbc}
.app .panel{border-color:#e2ebed;box-shadow:0 8px 23px #14485007}
.app .panelHead{border-color:#e7eff0}
.app .panelHead h2{color:#20424d}
.app .pill{background:#e9f6f2;color:#087f77}
.app .welcome{background:linear-gradient(145deg,#155a67,#0d817c 70%,#4bb49e);box-shadow:0 12px 31px #07565020}
.app .welcome p,.app .welcome .eyebrow{color:#dbf9f4}
.app .toolbar{border-color:#e4edef}
.app th{background:#f5f9fa;color:#63818a}
.app td{color:#304c58;border-color:#eaf1f2}
.app .avatar{background:#e3f5f2;color:#107f75}
.app .emptyIcon{background:#e8f7f3;color:#0a877b}
.app .classTile{border-color:#e3ebed;background:#fff;box-shadow:0 6px 17px #183f4708}
.app .classTile:hover{border-color:#9cd8ce;box-shadow:0 13px 25px #0d6c6711}
#addon-panel,#flex-attendance-overlay,#finance-overlay{background:#f4f8fa;color:#1b3547}
#addon-panel .addon-head h1,.flex-head h1{color:#153b4b}
#addon-panel .addon-kicker,.flex-kicker{color:#087f77}
#addon-panel .addon-head p,.flex-head p{color:#71828e}
#addon-panel .addon-card,.flex-controls,.flex-panel,.flex-summary-card,.flex-fee-card{border-color:#dfebed;box-shadow:0 8px 24px #124b5208}
#addon-panel .addon-card h2,.flex-panel h2{color:#203f4d}
#addon-panel .addon-toolbar label,#addon-panel .addon-form label,.flex-controls label{color:#365563}
#addon-panel .addon-summary>div{border-color:#deebeb;background:#fff}
#addon-panel .addon-summary span{color:#6b858b}
#addon-panel .addon-summary strong{color:#087d75}
#addon-panel .addon-table-scroll th{background:#f6faf9;color:#627e82}
#addon-panel .addon-note{background:#eaf7f3;color:#3b746d}
#addon-panel .addon-btn{color:#226c6e;border-color:#d7e9e8}
#finance-launch{background:#0e807a!important;border-color:#39a69c!important;color:#fff!important}
#finance-overlay h1,#finance-overlay h2{color:#173949}
.authPage:not(.profilePage) .authCard form .authLink,.authPage:not(.profilePage) .authCard .authLink.primary{background:#087f77;color:#fff;border-color:transparent}
.authPage:not(.profilePage) .authCard form .authLink:hover,.authPage:not(.profilePage) .authCard .authLink.primary:hover{background:#086a66}
.authPage:not(.profilePage) .authSecondary,.authPage:not(.profilePage) .hav-forgot{color:#0b7e76}
@media(max-width:1150px){.app .sidebar{width:225px;padding:24px 12px}.app main{margin-left:225px}}
@media(max-width:850px) and (min-width:621px){.app .sidebar{width:78px;padding:20px 10px}.app .sidebar .brand{font-size:0}.app .sidebar nav>button{font-size:0;padding:12px;justify-content:center}.app main{margin-left:78px}}
@media(max-width:620px){
 .app .sidebar{position:fixed;inset:auto 0 0;width:100%;height:73px;padding:6px 7px;background:#0f2d3b;overflow-x:auto;overflow-y:hidden}
 .app .sidebar nav{display:flex;min-width:max-content;gap:3px}
 .app .sidebar nav>button,.app .sidebar nav .addon-nav-button{font-size:9px;min-width:71px;flex:0 0 auto;flex-direction:column;gap:5px;justify-content:center;padding:6px 9px;min-height:55px}
 .app .sidebar nav>button.active,.app .sidebar nav .addon-nav-button.addon-selected{box-shadow:inset 0 -3px 0 #52d5c0}
 .app main{margin-left:0;padding-bottom:80px}
 .app header{height:62px}
 .app .content{padding:23px 15px 0}
 .app .pageHead{padding:20px 18px;border-radius:17px}
 .app .pageHead h1{font-size:25px}
 .app .stat{padding:16px 13px;border-radius:14px}
}
@media print{.app .sidebar{display:none!important}}