*{box-sizing:border-box}
body{margin:0;font:14px K2D,'Segoe UI',sans-serif;color:#263247;background:#f6f7fb}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.55}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #c279a2;outline-offset:2px}
.app{display:flex;min-height:100vh}
.sidebar{width:246px;flex-shrink:0;background:#fff;border-right:1px solid #e8eaf0;display:flex;flex-direction:column;padding:30px 18px 20px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;font-weight:bold;color:#26344d;font-size:15px;padding:0 8px}
.brand small{display:block;font-size:10px;font-weight:normal;color:#788296;margin-top:5px}
.brand-mark{position:relative;display:grid;place-items:center;width:42px;height:46px;border-radius:12px;background:#26344d;color:#fff;font-size:15px}
.brand-mark span{position:absolute;right:-4px;bottom:-4px;border:3px solid white;border-radius:50%;background:#f2d8e5;color:#704b65;font-size:19px;line-height:20px;width:23px;text-align:center}
.workspace-label{font-size:10px;letter-spacing:1.3px;color:#96a0b0;margin:43px 10px 14px}
nav{display:flex;flex-direction:column;gap:8px}
nav button{border:0;background:none;text-align:left;padding:13px 11px;border-radius:8px;color:#737e91;font-size:12px;display:flex;align-items:center;gap:12px}
nav button span{font-size:19px;width:20px;text-align:center}
nav button.active{background:#f6e7ef;color:#8c486b;font-weight:bold}
nav button:hover{background:#faf1f5}
.sidebar-bottom{margin-top:auto;padding-top:30px}
.demo-label{font-size:12px;color:#764c67;display:flex;align-items:center;gap:8px}
.demo-label span{height:7px;width:7px;border-radius:50%;background:#b77c9d}
.sidebar-bottom p{font-size:11px;color:#8992a0;line-height:1.8}
.text-button{border:0;background:none;padding:6px 0;color:#68758a;display:block;font-size:11px}
.profile{display:flex;gap:9px;border-top:1px solid #eceef3;padding-top:20px;margin-top:20px;align-items:center;font-size:10px}
.profile>span,.avatar{background:#f4e3ec;color:#966383;border-radius:50%;display:grid;place-items:center;width:32px;height:32px;font-weight:bold}
.profile small{display:block;color:#96a0af;font-size:10px;margin-top:3px}
.workspace{min-width:0;flex:1}
.topbar{height:76px;background:#fff;border-bottom:1px solid #e9ebf1;padding:0 36px;display:flex;align-items:center;gap:20px}
.crumb{font-size:12px;color:#738094;flex:1}
.crumb span{padding:0 14px;color:#c6cbd4}
.term{display:flex;align-items:center;gap:8px;font-size:12px;color:#5f6d81}
.dot{width:6px;height:6px;background:#ab7192;border-radius:50%}
main{padding:32px 36px;min-height:calc(100vh - 112px)}
h1{font-size:26px;letter-spacing:-.6px;margin:0 0 9px;color:#243149}
h2{font-size:18px;margin:0;color:#29364e}
h3{font-size:14px;margin:0}
.subtitle{color:#8992a3;font-size:12px;margin:0;line-height:1.8}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.button{border:1px solid #dfe3eb;background:#fff;border-radius:7px;color:#59677b;padding:10px 14px;font-size:12px;display:inline-flex;gap:8px;align-items:center;justify-content:center;white-space:nowrap}
.button:hover{background:#f5f6f9}
.button.primary{background:#9b5c7e;color:#fff;border-color:#9b5c7e}
.button.primary:hover{background:#854969}
.button.small{padding:7px 11px;font-size:11px}
.button-group{display:flex;gap:9px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:25px}
.stat{background:#fff;border:1px solid #e8eaf1;border-radius:10px;padding:17px 20px;display:flex;align-items:center;gap:15px}
.stat-icon{height:40px;width:40px;background:#f8eef3;color:#a77492;border-radius:10px;display:grid;place-items:center;font-size:22px}
.stat b{display:block;font-size:23px;color:#38465e}
.stat small{display:block;color:#8b94a4;font-size:11px;margin-top:3px}
.board{display:grid;grid-template-columns:216px minmax(0,1fr);gap:18px;align-items:start}
.class-panel{background:#fff;border:1px solid #e6e9f0;border-radius:10px;overflow:hidden}
.class-search{padding:16px;border-bottom:1px solid #eff0f5}
.class-search input{width:100%;padding:9px 10px;border:1px solid #e6e9f0;border-radius:7px;font-size:11px;background:#f9fafc}
.class-search h3{margin-bottom:12px;font-size:12px}
.class-list{max-height:720px;overflow:auto;padding:7px}
.class-item{border:0;background:none;text-align:left;width:100%;padding:12px 11px;border-radius:7px;display:block;color:#4c5c71}
.class-item strong{font-size:11px}
.class-item small{display:block;color:#94a0ae;font-size:9px;margin-top:5px;line-height:1.5}
.class-item.active{background:#f8edf3;color:#975a7b}
.class-item:hover{background:#f6f6fa}
.content-panel{background:#fff;border:1px solid #e7eaf0;border-radius:11px;overflow:hidden}
.panel-head{padding:22px 24px 18px;border-bottom:1px solid #eef0f5}
.title-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{display:inline-block;border-radius:5px;padding:4px 7px;font-size:10px;background:#f0f2f6;color:#6e7c91}
.badge.pink{background:#f9eaf2;color:#995c7e}
.badge.yellow{background:#fff4ca;color:#8a7130}
.badge.green{background:#eaf5ee;color:#527f65}
.meta{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:12px;color:#8893a3;font-size:11px}
.meta b{font-weight:normal;color:#596a80}
.tabs{display:flex;gap:26px;margin-top:20px}
.tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:0 0 11px;color:#9aa3b2;font-size:11px}
.tabs button.active{color:#965677;border-color:#a46486}
.panel-body{padding:18px 24px 24px}
.legend{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:10px;color:#8c96a6}
.swatch{display:inline-block;width:10px;height:10px;background:#fff0a3;border-radius:2px;margin-right:6px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:11px}
th{background:#f7f8fb;color:#8793a5;font-weight:normal;text-align:left;padding:12px 13px;white-space:nowrap}
td{padding:10px 13px;border-bottom:1px solid #edf0f5;line-height:1.7}
td.week{width:44px;color:#92a0b2;text-align:center}
td.range{width:134px;font-size:10px;color:#8a96a7;white-space:pre-line}
.schedule{table-layout:fixed}
.schedule th:nth-child(1){width:44px}
.schedule th:nth-child(2){width:134px}
.slot{border:0;background:none;color:#45576e;text-align:left;width:100%;padding:5px 7px;border-radius:4px;font-size:11px;line-height:1.65;min-height:32px}
.slot:hover{background:#f8eff4}
.slot.empty{color:#c6ccd6}
.slot.changed,td.changed{background:#fff4ba}
.slot small{display:block;color:#8a7960;font-size:9px}
.source-note{font-size:10px;color:#9ba3b0;margin-top:15px;line-height:1.8;overflow-wrap:anywhere}
.notice{background:#fff9e8;border:1px solid #f0e6c5;border-radius:7px;padding:12px 14px;font-size:11px;line-height:1.9;color:#877448;margin-bottom:18px}
.notice.info{background:#f9edf3;border-color:#ecd7e3;color:#8e6480}
.filter-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;align-items:end}
.filter-row label{min-width:200px;max-width:100%}
label{display:flex;flex-direction:column;gap:7px;font-size:11px;color:#7b8798;margin:0 0 15px}
input,select,textarea{border:1px solid #dfe4ed;background:#fff;border-radius:7px;padding:10px;color:#40516a;min-width:0;font-size:12px}
textarea{resize:vertical}
.filter-row label{margin-bottom:0}
.empty-state{text-align:center;padding:55px 22px;color:#8a96a6;line-height:2}
.empty-state h3{color:#55647b;font-size:16px;margin-bottom:8px}
.eyebrow{font-size:10px;letter-spacing:1px;color:#ad7b98;margin-bottom:6px}
.muted{color:#8f9aaa;font-size:11px;line-height:1.8}
.history-row{padding:18px 20px;border-bottom:1px solid #edf0f5;display:flex;gap:15px;align-items:center}
.history-row .history-info{flex:1}
.history-row h3{font-size:12px}
.history-row p{font-size:10px;color:#929cac;line-height:1.7;margin:5px 0}
.history-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.import-panel{max-width:820px}
.dropzone{padding:36px;border:1px dashed #d7b2c7;border-radius:10px;background:#fdf8fb;text-align:center}
.dropzone .upload-symbol{font-size:32px;color:#b989a4;margin-bottom:10px}
.dropzone h3{font-size:15px;margin-bottom:8px}
.dropzone p{font-size:12px;line-height:1.9;color:#97a0ad}
.dropzone input{max-width:100%;background:white}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.import-preview{margin-top:22px}
dialog{border:0;border-radius:14px;padding:26px;width:min(620px,calc(100vw - 28px));color:#3c4b62;box-shadow:0 20px 90px #23314833;max-height:90vh;overflow:auto}
dialog::backdrop{background:#1c253c66;backdrop-filter:blur(3px)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.icon-button{border:0;background:none;color:#929cac;font-size:26px;padding:3px 8px}
.dialog-actions{border-top:1px solid #eceef3;padding-top:18px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.dialog-actions>div{display:flex;gap:8px}
.danger-ghost{border:0;background:none;font-size:11px;color:#b07684}
.preview-card{padding:14px;background:#f7f8fb;border-radius:8px;font-size:12px;line-height:2;margin-bottom:14px}
#toast{position:fixed;right:25px;bottom:24px;max-width:calc(100vw - 50px);padding:14px 20px;background:#344158;color:white;border-radius:9px;font-size:12px;box-shadow:0 8px 35px #2833482a;z-index:10;display:none}
#toast.visible{display:block}
footer{padding:0 36px 16px;text-align:right;font-size:10px;color:#adb4c0}
.loading{padding:60px;text-align:center;color:#9b6e87}
.pending-dot{height:6px;width:6px;border-radius:50%;display:inline-block;background:#d0a048;margin-left:7px}
.checkline{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:12px;color:#57677d}
.checkline input{width:15px;height:15px}
.center-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.help-list{font-size:12px;color:#7c899d;line-height:2}
.teacher-name{font-size:12px;color:#3f5068}
.table-note{font-size:10px;color:#9a8290}
.countline{font-size:11px;color:#929cac;margin-bottom:14px}

@media(min-width:1550px){
  main{max-width:1560px;margin:auto}
  .class-list{max-height:900px}
}

@media(max-width:1100px){
  .sidebar{width:210px;padding-left:12px;padding-right:12px}
  .brand{font-size:13px}
  .topbar{padding:0 22px}
  main{padding:24px 22px}
  .board{grid-template-columns:180px minmax(0,1fr)}
  .panel-body,.panel-head{padding-left:16px;padding-right:16px}
  .stat{padding:14px}
  .schedule th:nth-child(2){width:114px}
  td.range{width:114px}
  td,th{padding:8px}
  .page-heading{align-items:start}
  .button{padding:9px 11px}
}

@media(max-width:800px){
  .app{display:block}
  .sidebar{position:static;width:100%;height:auto;padding:14px 18px;border-right:0;border-bottom:1px solid #e4e7ee}
  .brand{padding:0}
  .brand-mark{height:35px;width:34px}
  .brand small{font-size:9px}
  .workspace-label,.sidebar-bottom{display:none}
  nav{flex-direction:row;overflow-x:auto;gap:4px;margin-top:15px}
  nav button{white-space:nowrap;padding:9px;font-size:10px;gap:6px}
  nav button span{font-size:15px;width:auto}
  .topbar{height:54px;padding:0 18px}
  .crumb{display:none}
  .term{flex:1;font-size:11px}
  main{padding:22px 16px}
  h1{font-size:23px}
  .stats{gap:8px}
  .stat{padding:12px 10px;gap:8px}
  .stat-icon{display:none}
  .stat b{font-size:21px}
  .stat small{font-size:9px}
  .board{display:block}
  .class-panel{margin-bottom:14px}
  .class-search{padding:12px;display:flex;align-items:center;gap:12px}
  .class-search h3{margin:0;white-space:nowrap}
  .class-list{display:flex;max-height:130px;overflow:auto}
  .class-item{min-width:155px;max-width:180px}
  .page-heading{flex-direction:column;gap:16px}
  .meta{gap:8px 16px}
  .schedule{min-width:550px}
  .panel-head{padding:18px 14px}
  .panel-body{padding:16px 12px}
  .history-row{display:block}
  .history-actions{justify-content:flex-start;margin-top:12px}
  .form-row{grid-template-columns:1fr}
  .legend{font-size:9px;align-items:start}
  .dropzone{padding:24px 12px}
  footer{padding:0 18px 15px}
  .filter-row label{min-width:100%;width:100%}
  .dialog-actions{flex-wrap:wrap}
}

/* Cỡ chữ dễ đọc */
.subtitle{font-size:13px;color:#748196}
nav button{font-size:13px}
.button{font-size:13px}
.class-item strong{font-size:12px}
.class-item small{font-size:10px;color:#7d899a}
.meta{font-size:12px;color:#768398}
.legend{font-size:11px;color:#7c899b}
table{font-size:12px}
th{color:#718095}
.slot{font-size:13px;color:#40516a}
.slot.empty{color:#a2adbd}
.slot small{font-size:10px}
.schedule td.range{font-size:12px;color:#6c7b91}
.source-note{font-size:11px;color:#7c889b}
.muted{font-size:12px;color:#7d899b}
.stat small{color:#768398}
.history-row p{font-size:11px;color:#7c899b}

@media(max-width:800px){
  nav button{font-size:11px}
  .schedule td.range{font-size:11px}
  .slot{font-size:12px}
  .meta{font-size:11px}
}

/* Màu sắc và nhập lịch trực tiếp */
body{color:#121212;background:#e7e8e4}
.sidebar,.topbar{background:#efefeb;border-color:#b8bdb9}
.sidebar{overflow-y:auto}
.brand,.brand small,.workspace-label,nav button,.crumb,.term,.profile,.profile small,.sidebar-bottom p,.text-button,.demo-label,.subtitle,.meta,.meta b,.legend,.muted,.source-note,.teacher-name,.table-note,.stat small,.stat b,.history-row p,.filter-row label,label{color:#191919}
.sidebar .profile{margin-top:25px;padding:16px 0;border-top:1px solid #b7bcb8;border-bottom:1px solid #b7bcb8;align-items:flex-start;font-size:14px;line-height:1.6}
.profile>span{flex-shrink:0}
.profile small{font-size:12px;line-height:1.7;margin-top:5px}
.workspace-label{margin-top:22px;margin-bottom:7px}
.sidebar-bottom{margin-top:0;padding-top:10px;padding-bottom:16px}
.sidebar-bottom p{line-height:1.7;margin:8px 0;font-size:11px}
.text-button{font-size:12px}
nav button{color:#171717;font-size:13px}
nav button.active{background:#e5bed0;color:#111}
nav button:hover{background:#e4d3dc}
.content-panel,.class-panel,.stat{background:#f3f3ef;border-color:#b9bfba}
.class-search,.panel-head,.class-search input{border-color:#bfc5bf}
.class-search input,input,select,textarea{background:#f5f5f1;color:#111;border-color:#8b938d}
.panel-head h2,h1,h2,h3{color:#111}
.class-item{color:#171717}
.class-item strong{font-size:13px}
.class-item small{color:#303530;font-size:11px}
.class-item.active{background:#e5bfd0;color:#111}
.class-item.needs-schedule{background:#f2dfb5;border-left:4px solid #a56300}
.class-item.needs-schedule.active{background:#eacb8c;box-shadow:inset 0 0 0 1px #93691d}
.missing-tag{display:block;width:max-content;margin-top:5px;font-size:10px;color:#633900;font-weight:bold}
.badge{color:#171717;background:#dedfda}
.badge.pink{color:#20131a;background:#e8c8d9}
.badge.yellow{color:#533400;background:#efd89e}
.badge.green{color:#143f23;background:#c3dfca}
.button{color:#111;background:#e7e9e3;border-color:#969f96;font-size:13px}
.button.primary{background:#884461;color:#fff;border-color:#884461}
.button:disabled{cursor:default;opacity:.55}
.tabs button{color:#2b2b2b;font-size:12px}
.tabs button.active{color:#4d1632;border-color:#7d3257}
.notice{color:#382c0a;background:#ede0ba;border-color:#bca66c}
.notice.info{color:#32222a;background:#e8dce2;border-color:#b5a3ad}
.slot-input{display:block;width:100%;min-height:54px;resize:vertical;border:1px solid #9da69f;border-radius:3px;padding:9px 10px;font-size:14px;line-height:1.7;color:#101010;background:#f8f8f4;white-space:pre-wrap}
.slot-input:focus{border-color:#743c5a;outline:2px solid #b888a1}
.schedule-cell{vertical-align:top;padding:6px;border:1px solid #b1b9b2}
.schedule-cell.changed,.schedule-cell.changed .slot-input{background:#ffe68a}
.slot-meta{font-size:11px;color:#232723;padding:5px 4px}
.unmatched-label{display:block;font-size:10px;color:#734b00;padding-top:4px}
.slot-detail-fields{display:grid;grid-template-columns:1fr;gap:5px;padding-top:8px}
.slot-detail-fields label{margin:0;gap:3px;font-size:10px}
.slot-detail-fields input{padding:6px;font-size:11px;width:100%}
.schedule{table-layout:fixed}
.schedule th{background:#daddd5;color:#111;font-size:13px;font-weight:bold;border:1px solid #aeb6ad}
.schedule td.range,.schedule td.week{color:#111;background:#eeeeea}
.schedule td.range{font-size:12px}
.slot-readonly{padding:8px;font-size:13px;line-height:1.8;color:#111}
.inline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px;flex-wrap:wrap}
.inline-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}
.inline-toolbar>span{font-size:12px;color:#242a24}
.sync-hint{font-size:12px;line-height:1.8;color:#2f3930;background:#dde5db;padding:9px 12px;margin-bottom:12px;border-radius:5px}
.conflict-notice{background:#f2d9cf;border:1px solid #a95537;border-radius:6px;padding:14px;margin-bottom:14px;color:#4c1c0b;font-size:12px;line-height:1.8}
.conflict-notice ul{margin:9px 0;padding-left:22px}
.conflict-notice label{color:#32190f;font-size:12px;flex-direction:row;align-items:flex-start}
.checkline input{flex-shrink:0}
.required-input{width:58px;padding:6px;font-size:12px}
.missing-course{background:#f0dfb6}
.missing-text,.complete-text{display:block;font-size:11px;margin-top:5px}
.missing-text{color:#6b3c00;font-weight:bold}
.complete-text{color:#19462b}
.semester-controls{display:flex;gap:15px;align-items:end;flex-wrap:wrap;padding:16px 18px;background:#daddd4;border:1px solid #aab3a9;border-radius:8px;margin-bottom:24px}
.semester-controls label{margin:0;min-width:140px;font-size:12px;font-weight:bold}
.semester-controls select{font-size:14px;min-width:140px}
.semester-controls .dataset-choice{max-width:360px}
.semester-controls .dataset-choice select{max-width:100%}
.semester-controls p{font-size:11px;line-height:1.7;margin:0 0 1px;color:#222}
.semester-controls .text-button{font-size:11px;padding:2px 0;font-weight:bold}
.dropzone{background:#e6dcdf;border-color:#9c758a}
.dropzone p{color:#272727}
.source-note{color:#323832}
.legend{color:#202520}
footer{color:#333}
.table-wrap>table:not(.schedule) th{background:#dde0d8;color:#111}
.table-wrap>table:not(.schedule) td{border-color:#b6bdb5}
.empty-state{color:#282e28}
.pending-dot{background:#8b5300}
.stat-icon{background:#dfcbd5;color:#632143}

@media(max-width:1100px){
  .semester-controls .dataset-choice{max-width:260px}
  .semester-controls select{min-width:100px}
  .profile small{font-size:11px}
  .sidebar .profile{font-size:12px}
  .slot-input{font-size:13px;padding:7px}
}

@media(max-width:800px){
  .sidebar{overflow:visible;height:auto}
  .sidebar .profile{display:flex;margin-top:15px;padding:12px 0;font-size:13px}
  .sidebar-bottom{display:block;padding:8px 0}
  .sidebar-bottom p{margin:5px 0}
  .sidebar-bottom .text-button{display:inline-block;margin-right:12px}
  .workspace-label{display:none}
  .semester-controls{padding:12px;gap:12px}
  .semester-controls label{min-width:calc(50% - 8px);flex:1}
  .semester-controls .dataset-choice{min-width:100%;max-width:100%}
  .semester-controls p{width:100%}
  .slot-input{font-size:14px}
  .slot-detail-fields input{font-size:16px}
}

[hidden]{display:none!important}

/* Bố cục thời khóa biểu trên màn hình máy tính */
.sidebar .profile:first-child{margin-top:0;border-top:0;padding-top:0}
.teacher-filters label:first-child{min-width:280px}
.teacher-filters label:nth-child(2){min-width:320px}
.teacher-filters input{font-size:14px}

@media(min-width:1100px){
  .calendar-page .topbar{height:40px;padding:0 20px}
  .calendar-page .avatar{width:25px;height:25px}
  .calendar-page .sidebar{width:224px;padding:20px 14px}
  .calendar-page main{padding:12px 18px;min-height:calc(100vh - 40px)}
  .calendar-page footer{display:none}
  .calendar-page .semester-controls{padding:8px 12px;margin-bottom:10px;gap:10px}
  .calendar-page .semester-controls label{font-size:10px;gap:3px;min-width:110px}
  .calendar-page .semester-controls select{padding:5px 8px;font-size:12px;min-width:110px}
  .calendar-page .semester-controls p{font-size:10px;line-height:1.4}
  .calendar-page .semester-controls .text-button{font-size:10px}
  .calendar-page .page-heading{margin-bottom:10px;align-items:center}
  .calendar-page h1{font-size:20px;margin:0}
  .calendar-page .page-heading>.subtitle,.calendar-page .page-heading p.subtitle{display:none}
  .calendar-page .stats{display:none}
  .calendar-page .board{grid-template-columns:184px minmax(0,1fr);gap:12px}
  .calendar-page .class-search{padding:9px}
  .calendar-page .class-search h3{font-size:11px;margin-bottom:7px}
  .calendar-page .class-search input{padding:6px}
  .calendar-page .class-list{max-height:calc(100vh - 238px)}
  .calendar-page .class-item{padding:8px}
  .calendar-page .class-item strong{font-size:11px}
  .calendar-page .class-item small{font-size:10px;margin-top:3px}
  .calendar-page .panel-head{padding:9px 12px 0}
  .calendar-page .title-line{gap:7px}
  .calendar-page h2{font-size:15px}
  .calendar-page .panel-head>p.muted{margin:3px 0 0!important;font-size:10px}
  .calendar-page .meta{font-size:10px;gap:6px 16px;margin-top:5px}
  .calendar-page .tabs{margin-top:8px;gap:20px}
  .calendar-page .tabs button{font-size:10px;padding-bottom:6px}
  .calendar-page .panel-body{padding:7px 10px}
  .calendar-page .legend{font-size:10px;margin-bottom:5px}
  .calendar-page .swatch{height:8px;width:8px}
  .calendar-page .inline-toolbar{margin:5px 0 7px;gap:6px}
  .calendar-page .inline-toolbar>span{font-size:10px}
  .calendar-page .button{font-size:11px;padding:5px 9px}
  .calendar-page .button.small{padding:4px 7px;font-size:10px}
  .calendar-page .badge{font-size:9px;padding:3px 5px}
  .calendar-page .source-note{font-size:9px;line-height:1.5;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .calendar-page .center-toolbar{gap:5px;margin-top:6px}
  .calendar-page .notice{padding:6px 9px;font-size:10px;line-height:1.5;margin-bottom:7px}
  .calendar-page .center-toolbar .button{font-size:10px}
  .calendar-page .schedule th{font-size:11px;padding:5px 6px}
  .calendar-page .schedule td.week{font-size:10px;padding:2px 5px}
  .calendar-page .schedule td.range{font-size:10px;line-height:1.35;padding:2px 5px}
  .calendar-page .schedule th:nth-child(1){width:35px}
  .calendar-page .schedule th:nth-child(2){width:116px}
  .calendar-page .schedule-cell{position:relative;padding:2px}
  .calendar-page .slot-input{height:calc(var(--schedule-row-height,32px) - 6px);min-height:18px;max-height:none;padding:3px 6px;font-size:12px;line-height:1.25;resize:none;overflow:auto;border-radius:2px}
  .calendar-page .slot-input:focus{position:relative;z-index:1}
  .calendar-schedule .unmatched-label{font-size:0;position:absolute;right:4px;top:4px;width:5px;height:5px;border-radius:50%;background:#9a5d00;padding:0}
  .calendar-page .slot-meta{font-size:9px;padding:1px 3px;line-height:1.2}
  .calendar-page .slot-detail-fields{padding-top:4px}
  .calendar-page .sync-hint{font-size:10px;padding:5px 8px;margin-bottom:6px}
  .calendar-page .conflict-notice{font-size:11px;padding:8px;margin-bottom:7px}
}

/* Phông chữ và thông tin phân công */
body{font-family:K2D,'Segoe UI',sans-serif}
.course-assignments .contact-cell{font-size:14px;color:#000;font-variant-numeric:tabular-nums;white-space:nowrap}
.course-assignments td{font-size:14px}
.course-assignments .teacher-name{font-size:14px}
.course-assignments .muted{font-size:12px}

@media(min-width:1100px){
  .calendar-page main{max-width:1420px}
  .calendar-page .semester-controls,.calendar-page .page-heading,.calendar-page .board{max-width:1210px;margin-left:auto;margin-right:auto}
  .calendar-page .board{grid-template-columns:196px minmax(0,1fr)}
  .calendar-page .schedule th:nth-child(1){width:42px}
  .calendar-page .schedule th:nth-child(2){width:170px}
  .calendar-page .schedule td.range{font-size:14px;line-height:1.25;color:#000;white-space:pre-line}
  .calendar-page .schedule td.week{font-size:12px}
  .calendar-page .slot-input{font-size:13px}
  .calendar-page .panel-head h2{font-size:20px;font-weight:700}
  .calendar-page .panel-head>p.muted{font-size:14px!important;margin-top:6px!important}
  .calendar-page .meta{font-size:14px;color:#000;gap:6px 18px;margin-top:7px}
  .calendar-page .meta b{color:#000}
  .calendar-page .tabs button{font-size:12px}
  .calendar-page .course-assignments .teacher-name{font-size:14px}
  .calendar-page .course-assignments td{padding-top:12px;padding-bottom:12px}
}

/* Khung cuộn lịch sử phiên bản */
.history-scroll{max-height:min(58vh,620px);overflow-y:scroll;overscroll-behavior-y:contain;scrollbar-gutter:stable;border:1px solid #8d9790;border-radius:10px;scrollbar-width:auto;scrollbar-color:#68776e #e1e5df}
.history-scroll:focus-visible{outline:2px solid #83415c;outline-offset:3px}
.history-scroll::-webkit-scrollbar{width:12px}
.history-scroll::-webkit-scrollbar-track{background:#e1e5df}
.history-scroll::-webkit-scrollbar-thumb{background:#68776e;border:3px solid #e1e5df;border-radius:8px}
.history-scroll .history-row{padding:17px 20px}
.history-actions{flex-wrap:wrap;justify-content:flex-end}
.history-info{min-width:0}
.history-info p{overflow-wrap:anywhere}
.history-info .badge{margin-bottom:3px}
.log-scroll{max-height:250px}
.history-archive{margin-top:14px}
.history-archive summary{cursor:pointer;padding:8px 0}
.history-archive .history-scroll{max-height:300px}

@media(max-width:700px){
  .history-scroll{max-height:60vh}
  .history-scroll .history-row{padding:14px}
  .history-actions{justify-content:flex-start}
}

.topbar .term{margin-left:auto}

/* Trạng thái đồng bộ */
.sync-notice{margin:12px 24px 0;padding:12px 16px;border:1px solid #b38934;background:#fff0bd;color:#171915;border-radius:8px;font-size:13px}
.sync-notice p{margin:0 0 8px}
.sync-notice>div{display:flex;gap:8px;flex-wrap:wrap}
.demo-label strong{font-weight:400}
.demo-label [data-phase=saved],.demo-label [data-phase=empty]{background:#38754e}
.demo-label [data-phase=offline],.demo-label [data-phase=conflict]{background:#b2671c}
.demo-label [data-phase=saving]{background:#83415c}
.sidebar-bottom #cloud-detail{color:#252d27;line-height:1.6}
.sidebar-bottom #cloud-retry{color:#8d3e18}
.sidebar-bottom button{display:block}
.calendar-page .sync-notice{margin:8px 18px 0;padding:8px 12px;font-size:12px}
.calendar-page .sync-notice p{margin-bottom:6px}

/* Đăng nhập và đổi mật khẩu */
.access-screen{min-height:100vh;display:grid;place-items:center;padding:30px;background:#e9e8e5;color:#111}
.access-card{width:min(100%,450px);padding:38px;background:#f8f7f4;border:1px solid #b9b8b2;border-radius:18px;box-shadow:0 14px 40px #17231912}
.access-mark{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#e8cadc;color:#6d314f;font-weight:700}
.eyebrow{font-size:11px;letter-spacing:1.4px;margin:22px 0 10px}
.access-card h1{font-size:29px;color:#111;margin-bottom:4px}
.access-subtitle{margin:0 0 28px;font-size:16px}
.access-card form{display:grid;gap:17px}
.access-card label,.password-form label{display:grid;gap:7px;font-size:14px;color:#111}
.access-card input,.password-form input{width:100%;padding:12px;font-size:15px;background:#fff;border:1px solid #8b938b;border-radius:6px}
.access-card .button{padding:12px;font-size:15px}
.access-card small{display:block;margin-top:26px;font-size:11px;color:#555}
.access-card [role=status]{min-height:20px;font-size:13px;margin:0}
.password-form{padding:22px;display:grid;gap:16px}
.sidebar-bottom #account-email{font-size:10px;overflow-wrap:anywhere;display:block;margin-bottom:8px}