@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--p:#0f4c81;--bg:#f4f7fb;--b:#d8e1ea;--muted:#667085;--danger:#b42318;--ok:#067647}*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial;color:#17212b;background:var(--bg)}button,input,select,textarea{font:inherit}button{border:1px solid var(--b);border-radius:9px;padding:9px 12px;background:#fff;cursor:pointer}.primary{background:var(--p);color:white;border-color:var(--p)}.hidden{display:none!important}
header{position:sticky;top:0;z-index:10;background:white;border-bottom:1px solid var(--b);padding:9px 16px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:9px;align-items:center}.brand img{width:40px;height:40px;border-radius:9px}.brand small{display:block;color:var(--muted)}.head-actions{display:flex;gap:7px;align-items:center}.wrap{max-width:1150px;margin:20px auto;padding:0 14px}.card{background:white;border:1px solid var(--b);border-radius:13px;padding:16px;margin-bottom:14px}.hero{display:flex;justify-content:space-between;gap:14px;align-items:center}.hero h1{color:var(--p);margin:0}.hero p{color:var(--muted)}.overlay{position:fixed;inset:0;background:#0006;z-index:30;display:grid;place-items:center;padding:16px}.login{width:min(400px,100%);position:relative}.login label,.form label{display:grid;gap:5px;margin:9px 0;font-weight:650}.login input,.form input,.form select,.form textarea,.filters input,.filters select{width:100%;padding:9px;border:1px solid #cbd5e1;border-radius:8px}.x{border:0;font-size:22px;background:transparent}.login>.x{position:absolute;right:8px;top:5px}.error{color:var(--danger);margin-top:8px}.app{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 58px)}aside{background:white;border-right:1px solid var(--b);padding:12px;position:sticky;top:58px;height:calc(100vh - 58px);overflow:auto}#userBox{background:#eef7ff;border-radius:10px;padding:10px;margin-bottom:10px}nav{display:grid;gap:5px}nav button{text-align:left;border:0}nav button.active{background:#e9f3fb;color:var(--p);font-weight:700}.workspace{padding:18px;min-width:0}.pane{display:none}.pane.active{display:block}.title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.title h2,.title h3{margin:0;color:var(--p)}.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.kpi{background:white;border:1px solid var(--b);border-radius:10px;padding:12px}.kpi b{display:block;font-size:25px;color:var(--p)}.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.filters{display:grid;grid-template-columns:2fr 1fr 1fr auto auto;gap:8px;align-items:center}.item{background:white;border:1px solid var(--b);border-radius:10px;padding:12px;margin:8px 0}.item h4{margin:0;color:var(--p)}.meta{font-size:13px;color:var(--muted);margin-top:5px}.badge{display:inline-block;padding:3px 7px;border-radius:99px;background:#eef2f6;font-size:12px}.bad{background:#fee4e2;color:var(--danger)}.ok{background:#dcfae6;color:var(--ok)}#pager{text-align:center;margin:12px}.calendar{display:grid;grid-template-columns:repeat(7,1fr)}.day{min-height:115px;border:1px solid var(--b);padding:6px;background:white}.calitem{font-size:12px;background:#eff8ff;border-left:3px solid var(--p);padding:5px;margin:4px 0;border-radius:5px;cursor:pointer}.calitem.meet{background:#ecfdf3;border-left-color:#0f766e}.tabs{display:flex;gap:6px;margin-bottom:8px}.tabs button.active{background:var(--p);color:#fff}.adminpane{display:none}.adminpane.active{display:block}.table{overflow:auto}.table table{width:100%;border-collapse:collapse}.table th,.table td{padding:8px;border-bottom:1px solid var(--b);text-align:left;font-size:13px}.dlg{width:min(900px,calc(100vw - 24px));max-height:90vh;overflow:auto}.dlghead{position:sticky;top:0;background:white;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--b);padding:10px;z-index:2}.dlghead h3{margin:0;color:var(--p)}dialog{border:0;border-radius:14px;padding:0}.form{padding:12px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.full{grid-column:1/-1}.people{max-height:190px;overflow:auto;border:1px solid var(--b);padding:7px;border-radius:8px}.person{display:flex;gap:7px;padding:5px}.person input{width:auto}.actions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px;flex-wrap:wrap}.att{display:grid;grid-template-columns:1fr 180px 1fr;gap:7px;padding:7px;border-bottom:1px dashed var(--b)}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}.filters{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.app{grid-template-columns:1fr}aside{position:static;height:auto;border-right:0}nav{display:flex;overflow:auto}nav button{white-space:nowrap}.workspace{padding:11px}.cols{grid-template-columns:1fr}.calendar{display:block}.day{min-height:auto;margin:7px 0}.grid{grid-template-columns:1fr}.full{grid-column:auto}.att{grid-template-columns:1fr}.brand small{max-width:55vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:520px){.kpis{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr}.hero,.title{align-items:flex-start;flex-direction:column}}
.checkline{display:flex!important;align-items:center;gap:8px;font-weight:650}
.checkline input[type="checkbox"]{width:auto!important;margin:0}
.admin-actions,.row-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.danger-btn{border-color:#fecdca!important;color:#b42318!important;background:#fff5f4!important}
.picker-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.import-kpis{grid-template-columns:repeat(4,1fr)}
.import-errors{max-height:260px;overflow:auto;border:1px solid var(--b);border-radius:8px;padding:8px;background:#fff}
.import-errors>div{padding:5px;border-bottom:1px dashed var(--b)}
@media(max-width:760px){.admin-actions{width:100%}.admin-actions button{flex:1}.row-actions{min-width:210px}.import-kpis{grid-template-columns:repeat(2,1fr)}}
.evidence-list{display:grid;gap:6px;margin:7px 0}
.evidence-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--b);border-radius:8px;padding:7px 9px;background:#fafcff}
.evidence-item>span{min-width:0;overflow-wrap:anywhere}
.evidence-item .deleteEvidence{flex:0 0 auto;padding:6px 9px;font-size:12px}
@media(max-width:600px){.evidence-item{align-items:flex-start;flex-direction:column}.evidence-item .deleteEvidence{align-self:flex-end}}

.document-filters{grid-template-columns:2fr 1fr auto}
.document-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.document-card-head h4{margin:0}
.document-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.document-detail-grid>div{background:#f8fafc;border:1px solid var(--b);border-radius:8px;padding:9px}
.entity-files{display:grid;gap:6px;margin:8px 0}
.entity-upload{display:flex;gap:8px;align-items:center;margin:8px 0 14px}
.entity-upload input{flex:1;min-width:0}
@media(max-width:760px){
  .document-filters{grid-template-columns:1fr}
  .document-detail-grid{grid-template-columns:1fr}
  .entity-upload{align-items:stretch;flex-direction:column}
}
.scope-policy-note{border:1px solid #b2ddff;background:#eff8ff;color:#1849a9;border-radius:9px;padding:9px 11px;margin:7px 0;line-height:1.45}

.document-filters{grid-template-columns:minmax(280px,2fr) minmax(180px,1fr) minmax(180px,1fr) auto}
.document-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.badge.category{background:#f0f9ff;color:#026aa2;border-color:#b9e6fe}
.calendar-day-head{display:flex;align-items:center;justify-content:space-between;gap:5px}
.cal-add-full{width:25px;height:25px;min-width:25px;padding:0;border-radius:50%;font-weight:800}
.day{cursor:pointer;position:relative}
.calendar-items{display:grid;gap:4px}
.calendar-quick{margin-top:6px;border:1px solid #75e0a7;background:#ecfdf3;border-radius:8px;padding:7px;display:grid;gap:6px;position:relative;z-index:4}
.calendar-quick-head{display:flex;justify-content:space-between;align-items:center;color:#067647}
.calendar-quick-close{border:0;background:transparent;padding:0 4px;font-size:18px}
.calendar-quick select,
.calendar-quick input:not([type="checkbox"]):not([type="radio"]){
  width:100%;
  min-height:34px;
  padding:5px 7px;
}
.calendar-quick-row{display:grid;grid-template-columns:90px 1fr;gap:6px}
.calendar-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.calendar-quick-actions button{padding:7px 8px;font-size:12px}
@media(max-width:760px){
  .document-filters{grid-template-columns:1fr}
  .calendar-quick-row,.calendar-quick-actions{grid-template-columns:1fr}
}

.conclusion-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1px solid var(--b);background:#fff;border-radius:10px;padding:12px;margin-top:10px}
.conclusion-form .full{grid-column:1/-1}
.conclusion-people{border:1px solid var(--b);border-radius:9px;padding:9px;background:#fafcff}
.conclusion-form .people{max-height:240px}
@media(max-width:760px){
  .conclusion-form{grid-template-columns:1fr}
  .conclusion-form .full{grid-column:1}
}

/* v7.0.8 - Phê duyệt gọn, cân đối */
.approval-item{padding:11px 13px}
.approval-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.approval-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.approval-title>b{font-size:15px;color:var(--primary,#0b4f87)}
.approval-content-row{display:flex;align-items:flex-start;gap:12px}
.approval-content{flex:1;min-width:0;padding:8px 10px;background:#f8fafc;border:1px solid var(--b);border-radius:8px;line-height:1.45;overflow-wrap:anywhere}
.approval-inline-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.approval-btn{padding:7px 11px;min-height:34px;white-space:nowrap;font-size:13px}
.approval-evidence{margin-top:7px}
.approval-evidence .evidence-list{margin:0}
@media(max-width:760px){
  .approval-content-row{flex-direction:column}
  .approval-inline-actions{width:100%;justify-content:flex-end}
  .approval-btn{flex:0 0 auto}
}

/* v7.0.9 - Bản quyền nhỏ dưới mục Tìm kiếm */
.sidebar-copyright{
  margin:6px 12px 8px 14px;
  padding:7px 9px;
  border-top:1px solid rgba(11,79,135,.12);
  color:#6b7280;
  font-size:10.5px;
  line-height:1.45;
  letter-spacing:.01em;
}
.sidebar-copyright div+div{margin-top:2px}
.sidebar-copyright a{
  color:#64748b;
  text-decoration:none;
}
.sidebar-copyright a:hover{
  color:var(--primary,#0b4f87);
  text-decoration:underline;
}
@media(max-width:760px){
  .sidebar-copyright{
    font-size:10px;
    margin:5px 10px 7px 12px;
    padding:6px 8px;
  }
}

/* v7.0.10 - Meeting list fix + copyright bottom */
.app>aside{
  display:flex;
  flex-direction:column;
}
.app>aside nav{
  flex:0 0 auto;
}
.sidebar-copyright{
  margin-top:auto;
  margin-left:4px;
  margin-right:4px;
  margin-bottom:2px;
  padding:8px 6px 4px;
  border-top:1px solid rgba(11,79,135,.12);
  font-size:10px;
  line-height:1.4;
  color:#7b8794;
}
.meeting-list{display:grid;gap:8px}
.meeting-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
}
.meeting-card:hover{border-color:#98a2b3;background:#fbfdff}
.meeting-card-main{min-width:0;flex:1}
.meeting-card-title{font-weight:700;color:var(--p);font-size:15px;overflow-wrap:anywhere}
.meeting-card-stats{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap;flex:0 0 auto}
.meeting-empty,.meeting-load-error{text-align:left}
@media(max-width:760px){
  .meeting-card{align-items:flex-start;flex-direction:column}
  .meeting-card-stats{justify-content:flex-start}
  .sidebar-copyright{margin-top:14px}
}

/* v7.0.11 - Sắp xếp gần nhất + bản quyền neo đáy sidebar */
@media(min-width:761px){
  .app>aside{
    height:calc(100vh - 74px);
    min-height:calc(100vh - 74px);
    max-height:calc(100vh - 74px);
    position:sticky;
    top:74px;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .app>aside nav{
    flex:0 0 auto;
  }
  .app>aside .sidebar-copyright{
    margin-top:auto !important;
    flex:0 0 auto;
    position:relative;
    bottom:auto;
    padding:8px 6px 6px;
    margin-left:4px;
    margin-right:4px;
  }
}

/* v7.0.13 - Báo cáo điều hành */
.management-report-card{margin-top:14px}
.management-report-title{margin-bottom:10px}
.management-report-title h3{margin:0}
.management-report-filters{
  display:grid;
  grid-template-columns:repeat(4,minmax(160px,1fr));
  gap:9px;
  align-items:end;
}
.management-report-filters label{
  display:grid;
  gap:5px;
  font-weight:600;
  font-size:13px;
}
.management-report-actions{
  display:flex;
  align-items:end;
}
.management-report-actions button{width:100%}
.management-report-result{margin-top:12px}
.management-report-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:8px;
}
.management-kpi-alert{
  background:#fff7ed;
  border-color:#fed7aa;
}
.management-report-preview-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.management-report-preview-cols>div{
  border:1px solid var(--b);
  border-radius:9px;
  padding:10px;
  background:#fff;
}
.management-report-preview-cols h4{margin:0 0 8px}
.management-report-person{
  display:grid;
  grid-template-columns:minmax(160px,1.2fr) minmax(120px,.8fr) minmax(230px,1.5fr);
  gap:8px;
  align-items:center;
  padding:7px 0;
  border-top:1px solid #eef2f6;
}
.management-report-person:first-of-type{border-top:0}
.management-report-person span,.management-report-person small{color:#667085}
.management-report-person.alert b{color:#b42318}
.management-report-person.good b{color:#067647}
@media(max-width:1000px){
  .management-report-filters{grid-template-columns:repeat(2,minmax(160px,1fr))}
  .management-report-kpis{grid-template-columns:repeat(2,minmax(120px,1fr))}
}
@media(max-width:760px){
  .management-report-title{align-items:flex-start}
  .management-report-filters{grid-template-columns:1fr}
  .management-report-kpis{grid-template-columns:1fr 1fr}
  .management-report-preview-cols{grid-template-columns:1fr}
  .management-report-person{grid-template-columns:1fr}
}

/* v7.0.14 - Tài liệu & Văn bản dạng bảng cột */
.document-table-wrap{
  margin-top:10px;
  overflow-x:auto;
  border:1px solid #cfd8e3;
  border-radius:8px;
  background:#fff;
}
.document-table{
  width:100%;
  min-width:1240px;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:13px;
}
.document-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:8px 8px;
  background:#1f78d1;
  color:#fff;
  border-right:1px solid rgba(255,255,255,.25);
  text-align:center;
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
}
.document-table thead th:last-child{border-right:0}
.document-table tbody td{
  padding:8px 8px;
  border-right:1px solid #d7dee8;
  border-bottom:1px solid #d7dee8;
  vertical-align:top;
  line-height:1.35;
  background:#fff;
}
.document-table tbody tr:nth-child(even) td{background:#f5f9fd}
.document-table tbody tr:hover td{
  background:#eaf4ff;
  cursor:pointer;
}
.document-table tbody tr:focus td{
  outline:none;
  background:#e3f1ff;
}
.document-table tbody td:last-child{border-right:0}

.document-width-index{width:44px}
.document-width-number{width:135px}
.document-width-title{width:370px}
.document-width-category{width:125px}
.document-width-level{width:125px}
.document-width-date{width:95px}
.document-width-agency{width:190px}
.document-width-effective{width:95px}
.document-width-resource{width:85px}

.document-col-index,
.document-col-date,
.document-col-effective,
.document-col-resource{text-align:center}
.document-col-number{overflow-wrap:anywhere;color:#173f67}
.document-col-title{font-weight:500}
.document-title-main{
  font-weight:700;
  color:#173f67;
  margin-bottom:3px;
  overflow-wrap:anywhere;
}
.document-title-sub{
  display:flex;
  flex-wrap:wrap;
  gap:5px 10px;
  color:#667085;
  font-size:11px;
  font-weight:400;
}
.document-note-preview{
  max-width:100%;
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.document-col-category .badge{
  white-space:normal;
  text-align:center;
  line-height:1.25;
}
.document-col-level,
.document-col-agency{overflow-wrap:anywhere}
.document-resource{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  min-height:24px;
  padding:2px 5px;
  border-radius:6px;
  background:#eef4fa;
  font-weight:600;
  color:#344054;
}
.document-resource.link{
  background:#ecfdf3;
  color:#067647;
}
.document-pager-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding:4px 2px;
}
.document-pager-actions{
  display:flex;
  align-items:center;
  gap:4px;
}
.document-pager-actions button{
  min-width:34px;
  padding:6px 9px;
}

/* Điện thoại/tablet: mỗi dòng bảng thành thẻ, vẫn giữ đủ trường dữ liệu */
@media(max-width:760px){
  .document-table-wrap{
    border:0;
    overflow:visible;
    background:transparent;
  }
  .document-table{
    min-width:0;
    width:100%;
    border-collapse:separate;
    border-spacing:0 9px;
  }
  .document-table colgroup,
  .document-table thead{display:none}
  .document-table tbody,
  .document-table tr,
  .document-table td{
    display:block;
    width:100%;
  }
  .document-table tbody tr{
    border:1px solid #d7dee8;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
  }
  .document-table tbody tr:nth-child(even) td,
  .document-table tbody tr td{
    background:#fff;
  }
  .document-table tbody td{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:8px;
    padding:7px 9px;
    border:0;
    border-bottom:1px solid #edf1f5;
    text-align:left;
  }
  .document-table tbody td:last-child{border-bottom:0}
  .document-table tbody td::before{
    content:attr(data-label);
    font-weight:700;
    color:#475467;
  }
  .document-col-title{
    display:block !important;
    padding:10px 9px !important;
    background:#f8fbff !important;
  }
  .document-col-title::before{
    display:block;
    margin-bottom:5px;
  }
  .document-title-main{font-size:14px}
  .document-note-preview{white-space:normal}
  .document-pager-bar{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* ============================================================
   v7.0.15 - Public Calendar To Do List chuyên nghiệp
   ============================================================ */
.public-mode>header{display:none}
.public-mode main{background:linear-gradient(180deg,#f7fbff 0%,#eef5fb 100%);min-height:100vh}
.public-shell{max-width:1500px;margin:0 auto;padding:22px 28px 34px}
.public-topbar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 22px;border:1px solid #dbe7f2;border-radius:18px;background:linear-gradient(135deg,#fff 0%,#f5faff 100%);box-shadow:0 8px 30px rgba(15,76,129,.07)}
.public-brand{display:flex;align-items:center;gap:15px}
.public-brand-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,#0f4c81,#1976c9);color:#fff;font-size:28px;font-weight:900;box-shadow:0 8px 20px rgba(15,76,129,.2)}
.public-eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;color:#667085}
.public-brand h1{margin:2px 0 1px;font-size:25px;color:#0f4c81}
.public-brand p{margin:0;color:#667085;font-size:12px}
.public-top-actions{display:flex;align-items:center;gap:12px}
.public-status{display:flex;align-items:center;gap:7px;color:#475467;font-size:12px}
.status-dot{width:8px;height:8px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 4px #ecfdf3}
.public-login-btn{border-radius:10px;box-shadow:0 5px 16px rgba(15,76,129,.15)}
.public-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px;padding:26px 28px;border-radius:18px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.16),transparent 28%),linear-gradient(135deg,#0f4c81,#1769aa 56%,#2387d9);box-shadow:0 12px 32px rgba(15,76,129,.18)}
.public-month-label{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12px;font-weight:700}
.public-hero h2{margin:9px 0 5px;font-size:27px}.public-hero p{margin:0;max-width:760px;color:rgba(255,255,255,.84)}
.public-today-card{min-width:180px;padding:15px 18px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.public-today-card small,.public-today-card span{display:block;color:rgba(255,255,255,.78)}.public-today-card b{display:block;font-size:20px;margin:3px 0}
.public-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.public-kpi{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #dbe7f2;border-radius:14px;background:#fff;box-shadow:0 5px 20px rgba(16,24,40,.045)}
.public-kpi>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#eef6ff}.public-kpi small{display:block;color:#667085}.public-kpi b{display:block;font-size:20px;color:#173f67}
.public-calendar-card,.public-agenda-card{margin-top:14px;padding:16px;border:1px solid #dbe7f2;border-radius:16px;background:#fff;box-shadow:0 6px 22px rgba(16,24,40,.05)}
.public-calendar-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.public-calendar-toolbar h3{margin:0 0 6px;color:#173f67}.public-calendar-note{font-size:12px;color:#98a2b3}
.public-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#667085}.public-legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.legend-dot.task{background:#12b76a}.legend-dot.meeting{background:#7f56d9}.legend-dot.today{background:#f79009}
.public-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid #e4e7ec;border-left:1px solid #e4e7ec}
.public-weekday{padding:8px;text-align:center;font-weight:800;font-size:11px;color:#667085;background:#f8fafc;border-right:1px solid #e4e7ec;border-bottom:1px solid #e4e7ec}
.public-day{min-height:126px;padding:7px;border-right:1px solid #e4e7ec;border-bottom:1px solid #e4e7ec;background:#fff}.public-day.muted{background:#fafbfc}.public-day.is-today{background:linear-gradient(180deg,#fffaf0,#fff);box-shadow:inset 0 0 0 2px rgba(247,144,9,.35)}
.public-day-number{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.public-day-number>span{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;font-weight:800;color:#344054}.public-day.is-today .public-day-number>span{background:#f79009;color:#fff}.public-day-number small{min-width:20px;text-align:center;padding:2px 5px;border-radius:999px;background:#f2f4f7;color:#667085}
.public-day-events{display:grid;gap:4px}.public-cal-event{display:grid;grid-template-columns:15px 36px minmax(0,1fr);align-items:center;gap:4px;padding:5px 6px;border-radius:6px;font-size:10px;line-height:1.2;overflow:hidden}.public-cal-event b{font-size:9px}.public-cal-event em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.public-cal-event.task{background:#ecfdf3;color:#067647;border-left:3px solid #12b76a}.public-cal-event.meeting{background:#f4f3ff;color:#5925dc;border-left:3px solid #7f56d9}.public-more{font-size:10px;color:#667085;padding:2px 4px}
.public-agenda-head h3{margin:0;color:#173f67}.public-agenda-head p{margin:3px 0 8px}.public-agenda-item{display:grid;grid-template-columns:54px 38px minmax(0,1fr) 90px;gap:10px;align-items:center;padding:10px 4px;border-top:1px solid #edf1f5}.public-agenda-item:first-child{border-top:0}
.public-agenda-date{text-align:center;border-radius:9px;overflow:hidden;border:1px solid #dbe7f2}.public-agenda-date b{display:block;padding:4px;font-size:18px;color:#173f67}.public-agenda-date span{display:block;padding:3px;background:#eef6ff;font-size:9px;color:#475467}
.public-agenda-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px}.public-agenda-icon.task{background:#ecfdf3}.public-agenda-icon.meeting{background:#f4f3ff}
.public-agenda-main b{display:block;color:#173f67}.public-agenda-main span{display:block;font-size:11px;color:#667085;margin-top:2px}.public-agenda-type{justify-self:end;padding:5px 8px;border-radius:999px;background:#f2f4f7;font-size:10px;color:#475467}
.public-empty{padding:22px;text-align:center;color:#667085;background:#f8fafc;border-radius:10px}.public-footer{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid #dbe7f2;color:#7b8794;font-size:10px}.public-footer a{color:#667085;text-decoration:none}

/* v7.0.15 - Trạng thái đã hoàn thành */
.completed-item{opacity:.78;border-style:dashed}
.meeting-filters{grid-template-columns:minmax(240px,1.3fr) minmax(180px,.8fr) minmax(170px,.7fr) auto}
#taskCompletion,#meetingCompletion{font-weight:600}

/* v7.0.15 - Báo cáo điều hành health/error */
.management-report-ready{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px;padding:9px 11px;border:1px solid #abefc6;border-radius:9px;background:#ecfdf3;color:#067647}.management-report-ready span{font-weight:700}.management-report-ready small{color:#027a48}
.management-report-loading{padding:14px;border-radius:9px;background:#f8fafc;color:#475467}
.management-report-error{display:grid;gap:7px;padding:13px;border:1px solid #fecdca;border-radius:10px;background:#fef3f2;color:#b42318}.management-report-error small{color:#912018}.management-report-error button{justify-self:start;background:#fff}

@media(max-width:900px){
  .public-shell{padding:12px}.public-topbar,.public-hero{align-items:flex-start;flex-direction:column}.public-top-actions{width:100%;justify-content:space-between}.public-kpis{grid-template-columns:repeat(2,1fr)}
  .public-calendar-card{overflow-x:auto}.public-calendar-grid{min-width:900px}.public-agenda-item{grid-template-columns:50px 34px minmax(0,1fr)}.public-agenda-type{display:none}
}
@media(max-width:560px){
  .public-brand h1{font-size:20px}.public-brand-icon{width:44px;height:44px}.public-top-actions{align-items:stretch;flex-direction:column}.public-login-btn{width:100%}.public-hero h2{font-size:22px}.public-kpis{grid-template-columns:1fr 1fr}.public-kpi{padding:10px}.meeting-filters{grid-template-columns:1fr}
}

/* ==========================================================
   v7.1.0 - UI foundation / Command Center / Help Center
   ========================================================== */

/* Sidebar groups */
nav .nav-section-label{
  margin:14px 12px 5px;
  color:#98a2b3;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1.2;
  user-select:none;
}
nav .nav-section-label:first-child{margin-top:4px}
nav button{
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
nav button:hover{transform:translateX(2px)}
nav button.active{
  box-shadow:inset 3px 0 0 var(--p);
}

/* Page / command header */
.command-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
  padding:18px 20px;
  border:1px solid #dbe7f2;
  border-radius:14px;
  background:linear-gradient(135deg,#ffffff 0%,#f7fbff 100%);
  box-shadow:0 5px 18px rgba(16,24,40,.045);
}
.command-header h2{margin:3px 0 3px;color:#0f4c81}
.command-header p{margin:0;color:#667085;max-width:760px}
.page-eyebrow{
  font-size:9px;
  letter-spacing:.13em;
  color:#667085;
  font-weight:800;
}
.command-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.icon-button{min-width:38px;font-size:18px;padding:7px 10px}

.dashboard-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:4px 0 8px;
}
.dashboard-section-title h3{margin:0;color:#344054;font-size:15px}
.dashboard-section-title span{display:block;margin-top:2px;color:#98a2b3;font-size:10px}

/* KPI as action buttons */
.command-kpis{gap:9px}
.command-kpi{
  position:relative;
  display:block;
  text-align:left;
  min-height:82px;
  padding:12px 13px;
  border:1px solid #e1e8f0;
  border-radius:12px;
  background:#fff;
  color:inherit;
  box-shadow:0 3px 12px rgba(16,24,40,.035);
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.command-kpi:hover{
  transform:translateY(-1px);
  border-color:#b9d6ef;
  box-shadow:0 7px 18px rgba(15,76,129,.09);
}
.command-kpi small{display:block;color:#667085;font-size:10px}
.command-kpi b{display:block;margin-top:5px;font-size:23px;color:#173f67}
.command-kpi>span{
  position:absolute;
  right:10px;
  bottom:9px;
  color:#98a2b3;
  font-weight:700;
}

/* Help center */
.guide-header{margin-bottom:10px}
.guide-search{
  position:sticky;
  top:8px;
  z-index:6;
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding:10px;
  box-shadow:0 6px 18px rgba(16,24,40,.05);
}
.guide-search input{
  min-height:42px;
  font-size:13px;
}
.guide-shortcuts{
  display:flex;
  gap:5px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.guide-shortcuts button{
  padding:7px 9px;
  border-radius:999px;
  font-size:10px;
}
.guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
.guide-card{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:15px;
  border:1px solid #dbe7f2;
  border-radius:13px;
  background:#fff;
  box-shadow:0 3px 14px rgba(16,24,40,.035);
  scroll-margin-top:90px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.guide-card:hover{
  border-color:#b9d6ef;
  box-shadow:0 7px 20px rgba(15,76,129,.07);
}
.guide-card.guide-highlight{
  border-color:#2e90fa;
  box-shadow:0 0 0 3px rgba(46,144,250,.13);
  transform:translateY(-1px);
}
.guide-card-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#eef6ff;
  font-size:21px;
}
.guide-featured{
  grid-column:1/-1;
  background:linear-gradient(135deg,#f7fbff,#fff);
  border-color:#b9d6ef;
}
.guide-wide{grid-column:1/-1}
.guide-kicker{
  display:block;
  margin-bottom:3px;
  color:#667085;
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}
.guide-card h3{margin:0 0 8px;color:#173f67;font-size:15px}
.guide-list,.guide-steps{
  margin:0;
  padding-left:18px;
  color:#475467;
  font-size:12px;
  line-height:1.55;
}
.guide-list li+li,.guide-steps li+li{margin-top:4px}
.guide-open{
  margin-top:10px;
  padding:6px 9px;
  border:0;
  background:transparent;
  color:#0f4c81;
  font-weight:700;
  font-size:11px;
}
.guide-open:hover{text-decoration:underline;background:#eef6ff}
.guide-role-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.guide-role-grid>div,
.guide-troubleshoot>div{
  padding:10px;
  border-radius:9px;
  background:#f8fafc;
  border:1px solid #edf1f5;
}
.guide-role-grid b,.guide-troubleshoot b{display:block;color:#344054;font-size:12px}
.guide-role-grid span,.guide-troubleshoot span{display:block;margin-top:3px;color:#667085;font-size:11px;line-height:1.4}
.guide-troubleshoot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

/* Consistent internal spacing */
.pane>.title{
  margin-bottom:12px;
}
.pane>.title h2{color:#0f4c81}
.card{
  border-color:#dbe3ec;
}

/* Print only guide */
@media print{
  body.print-guide header,
  body.print-guide #publicView,
  body.print-guide #loginLayer,
  body.print-guide aside,
  body.print-guide .workspace>.pane:not(#guide),
  body.print-guide #guide .guide-search,
  body.print-guide #guide .command-header-actions{
    display:none !important;
  }
  body.print-guide #appView{
    display:block !important;
  }
  body.print-guide .workspace{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
  }
  body.print-guide #guide{
    display:block !important;
  }
  body.print-guide .guide-grid{
    display:block;
  }
  body.print-guide .guide-card{
    break-inside:avoid;
    margin-bottom:10px;
    box-shadow:none;
  }
}

/* Responsive */
@media(max-width:980px){
  .command-header{flex-direction:column}
  .command-header-actions{justify-content:flex-start}
  .guide-grid{grid-template-columns:1fr}
  .guide-featured,.guide-wide{grid-column:1}
  .guide-role-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  nav .nav-section-label{margin-left:10px}
  .command-header{padding:13px}
  .command-header-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .command-header-actions button{width:100%}
  .guide-search{
    position:static;
    grid-template-columns:1fr;
  }
  .guide-shortcuts{justify-content:flex-start}
  .guide-card{
    grid-template-columns:38px minmax(0,1fr);
    padding:12px;
  }
  .guide-card-icon{width:36px;height:36px;font-size:18px}
  .guide-troubleshoot{grid-template-columns:1fr}
}


/* ==========================================================
   v7.2.1 - Chấm công & Giờ giấc + Hồ sơ thực hiện
   ========================================================== */
.user-quick-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.user-quick-actions button{font-size:10px;padding:6px 8px}

.warn{background:#fff7d6;color:#9a6700}

.command-overview-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.attendance-dashboard-item{padding:9px;margin:6px 0}

.attendance-header h2,.performance-header h2{margin:3px 0}
.attendance-filters{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:9px;
  align-items:end;
}
.attendance-filters label{
  display:grid;
  gap:5px;
  font-size:11px;
  font-weight:700;
  color:#475467;
}
.attendance-filters input,.attendance-filters select{width:100%}
.attendance-filter-action{display:flex;align-items:end}
.attendance-filter-action button{width:100%}

.attendance-kpis{
  display:grid;
  grid-template-columns:repeat(8,minmax(105px,1fr));
  gap:8px;
  margin:11px 0;
}
.attendance-kpi{
  padding:10px 11px;
  border:1px solid #dbe3ec;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 8px rgba(16,24,40,.035);
}
.attendance-kpi small{display:block;color:#667085;font-size:9px}
.attendance-kpi b{display:block;margin-top:4px;font-size:20px;color:#173f67}
.attendance-kpi.good{background:#f0fdf4;border-color:#bbf7d0}
.attendance-kpi.warn{background:#fffbeb;border-color:#fde68a}
.attendance-kpi.bad{background:#fef2f2;border-color:#fecaca}
.attendance-kpi.muted{background:#f8fafc}

.attendance-table-wrap{
  overflow:auto;
  border:1px solid #dbe3ec;
  border-radius:11px;
  background:#fff;
}
.attendance-table{
  width:100%;
  min-width:1320px;
  border-collapse:collapse;
  table-layout:auto;
}
.attendance-table th{
  position:sticky;
  top:0;
  z-index:2;
  padding:8px 7px;
  background:#173f67;
  color:#fff;
  font-size:10px;
  text-align:center;
  white-space:nowrap;
}
.attendance-table td{
  padding:8px 7px;
  border-bottom:1px solid #edf1f5;
  vertical-align:top;
  font-size:11px;
}
.attendance-table tbody tr:nth-child(even){background:#f9fbfd}
.attendance-table tbody tr:hover{background:#eef6ff}
.attendance-table td small{display:block;margin-top:2px;color:#98a2b3}
.attendance-table .row-actions{display:flex;gap:4px}
.attendance-table .row-actions button{padding:5px 7px;font-size:10px}
.attendance-empty{color:#667085;text-align:center}

.performance-month-label{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 8px;
  border:1px solid #dbe3ec;
  border-radius:9px;
  background:#fff;
  color:#475467;
  font-size:10px;
  font-weight:700;
}
.performance-month-label input{border:0;padding:2px;background:transparent}

.performance-shell{display:grid;gap:10px}
.performance-person{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
.performance-avatar{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#0f4c81,#2387d9);
  color:#fff;
  font-size:24px;
  font-weight:800;
}
.performance-person h3{margin:0;color:#173f67}
.performance-person p{margin:3px 0;color:#667085}
.performance-person span{font-size:10px;color:#98a2b3}
.performance-view-note{
  padding:6px 9px;
  border-radius:999px;
  background:#eef6ff;
  color:#0f4c81;
  font-size:10px;
  font-weight:700;
}

.performance-indicators{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.performance-indicator{
  padding:14px;
  border:1px solid #dbe3ec;
  border-radius:12px;
  background:linear-gradient(135deg,#fff,#f8fbff);
}
.performance-indicator small{display:block;color:#667085;font-size:10px}
.performance-indicator b{display:block;margin:4px 0;font-size:27px;color:#0f4c81}
.performance-indicator span{display:block;color:#98a2b3;font-size:10px}

.performance-kpi-note{margin:0}
.performance-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.performance-section h3{margin:0 0 9px;color:#173f67;font-size:14px}
.performance-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7px;
}
.performance-stat-grid>div{
  padding:8px;
  border-radius:8px;
  background:#f8fafc;
  border:1px solid #edf1f5;
}
.performance-stat-grid span{display:block;color:#667085;font-size:9px}
.performance-stat-grid b{display:block;margin-top:3px;font-size:18px;color:#344054}
.performance-timeline{grid-column:1/-1}
.performance-timeline-item{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:8px 0;
  border-top:1px solid #edf1f5;
}
.performance-timeline-item:first-of-type{border-top:0}
.performance-timeline-icon{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:9px;
  background:#f2f4f7;
}
.performance-timeline-item b{display:block;color:#344054;font-size:11px}
.performance-timeline-item span{display:block;margin-top:2px;color:#667085;font-size:10px}
.performance-timeline-item time{font-size:9px;color:#98a2b3;white-space:nowrap}

.management-report-group-title{
  margin:12px 0 6px;
  color:#344054;
  font-size:12px;
  font-weight:800;
}
.management-report-kpis{grid-template-columns:repeat(4,minmax(110px,1fr))}

.import-errors{
  max-height:240px;
  overflow:auto;
  margin-top:8px;
  font-size:11px;
  color:#b42318;
}
.import-errors>div{padding:4px 0;border-bottom:1px solid #fee4e2}

/* Responsive */
@media(max-width:1180px){
  .attendance-kpis{grid-template-columns:repeat(4,1fr)}
  .attendance-filters{grid-template-columns:repeat(3,minmax(150px,1fr))}
  .command-overview-cols{grid-template-columns:1fr 1fr}
  .command-overview-cols>.card:last-child{grid-column:1/-1}
  .performance-grid{grid-template-columns:1fr 1fr}
  .performance-timeline{grid-column:1/-1}
}
@media(max-width:760px){
  .attendance-filters{grid-template-columns:1fr}
  .attendance-kpis{grid-template-columns:repeat(2,1fr)}
  .command-overview-cols{grid-template-columns:1fr}
  .command-overview-cols>.card:last-child{grid-column:auto}
  .performance-indicators{grid-template-columns:1fr}
  .performance-grid{grid-template-columns:1fr}
  .performance-timeline{grid-column:auto}
  .performance-person{grid-template-columns:48px minmax(0,1fr)}
  .performance-view-note{grid-column:1/-1;justify-self:start}
  .performance-avatar{width:44px;height:44px;font-size:20px}

  .attendance-table-wrap{border:0;overflow:visible}
  .attendance-table{min-width:0;width:100%;border-collapse:separate;border-spacing:0 8px}
  .attendance-table thead{display:none}
  .attendance-table tbody,.attendance-table tr,.attendance-table td{display:block;width:100%}
  .attendance-table tr{
    border:1px solid #dbe3ec;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
  }
  .attendance-table td{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:8px;
    border-bottom:1px solid #edf1f5;
  }
  .attendance-table td::before{
    content:attr(data-label);
    font-weight:700;
    color:#475467;
  }
  .attendance-table td:last-child{border-bottom:0}
  .attendance-table .row-actions{justify-content:flex-start}
  .management-report-kpis{grid-template-columns:1fr 1fr}
}


/* ==========================================================
   v7.2.2 - Nhập liệu Chấm công & Giờ giấc hàng ngày
   ========================================================== */
.attendance-subtabs{
  display:flex;
  gap:6px;
  margin:0 0 10px;
  padding:5px;
  border:1px solid #dbe3ec;
  border-radius:11px;
  background:#f8fafc;
}
.attendance-subtabs button{
  flex:0 0 auto;
  padding:8px 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#667085;
  font-weight:700;
}
.attendance-subtabs button.active{
  background:#fff;
  color:#0f4c81;
  box-shadow:0 2px 8px rgba(16,24,40,.08);
}

.attendance-entry-toolbar{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
}
.attendance-entry-date-group,.attendance-entry-actions{
  display:flex;
  align-items:end;
  gap:7px;
  flex-wrap:wrap;
}
.attendance-entry-date-group label{
  display:grid;
  gap:4px;
  font-size:10px;
  font-weight:700;
  color:#475467;
}
.attendance-entry-date-group input{min-width:150px}
.attendance-entry-note{margin:9px 0}

.attendance-entry-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:8px;
  margin:10px 0;
}
.attendance-entry-stat{
  padding:10px 12px;
  border:1px solid #dbe3ec;
  border-radius:10px;
  background:#fff;
}
.attendance-entry-stat small{display:block;color:#667085;font-size:9px}
.attendance-entry-stat b{display:block;margin-top:3px;font-size:20px;color:#173f67}
.attendance-entry-stat b.date{font-size:15px}
.attendance-entry-stat.changed{
  background:#fff7ed;
  border-color:#fed7aa;
}
.attendance-entry-stat.changed b{color:#b54708}

.attendance-daily-table-wrap{
  overflow:auto;
  border:1px solid #dbe3ec;
  border-radius:11px;
  background:#fff;
}
.attendance-daily-table{
  width:100%;
  min-width:1450px;
  border-collapse:collapse;
}
.attendance-daily-table th{
  position:sticky;
  top:0;
  z-index:3;
  padding:8px 7px;
  background:#0f4c81;
  color:#fff;
  text-align:center;
  font-size:10px;
  white-space:nowrap;
}
.attendance-daily-table td{
  padding:6px 6px;
  border-bottom:1px solid #edf1f5;
  vertical-align:middle;
  font-size:10px;
}
.attendance-daily-table tbody tr:nth-child(even){background:#fbfcfe}
.attendance-daily-table tbody tr.has-data{box-shadow:inset 3px 0 0 #b9d6ef}
.attendance-daily-table tbody tr.dirty{
  background:#fffaf0;
  box-shadow:inset 4px 0 0 #f79009;
}
.attendance-daily-table td:nth-child(1){text-align:center;width:42px}
.attendance-daily-table td:nth-child(2){min-width:220px}
.attendance-daily-table td:nth-child(3){min-width:150px}
.attendance-daily-table td:nth-child(4),
.attendance-daily-table td:nth-child(5),
.attendance-daily-table td:nth-child(6),
.attendance-daily-table td:nth-child(7){min-width:120px}
.attendance-daily-table td:nth-child(8){min-width:210px}
.attendance-daily-table td:nth-child(9){min-width:150px}
.attendance-daily-table td:nth-child(10){min-width:210px}
.attendance-daily-table td b{display:block;color:#344054;font-size:11px}
.attendance-daily-table td small{display:block;margin-top:2px;color:#98a2b3}
.attendance-daily-table input,
.attendance-daily-table select{
  width:100%;
  min-height:34px;
  padding:5px 6px;
  font-size:10px;
}
.attendance-daily-table .daily-focus{
  border-color:#98c5ec;
  background:#f7fbff;
}
.dailyPreview{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.dailyPreview small{color:#b54708}

@media(max-width:900px){
  .attendance-entry-toolbar{align-items:stretch;flex-direction:column}
  .attendance-entry-date-group,.attendance-entry-actions{width:100%}
  .attendance-entry-summary{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .attendance-subtabs{overflow-x:auto}
  .attendance-subtabs button{white-space:nowrap}
  .attendance-entry-summary{grid-template-columns:1fr 1fr}
  .attendance-daily-table-wrap{border:0;overflow:visible}
  .attendance-daily-table{min-width:0;width:100%;border-collapse:separate;border-spacing:0 9px}
  .attendance-daily-table thead{display:none}
  .attendance-daily-table tbody,
  .attendance-daily-table tr,
  .attendance-daily-table td{display:block;width:100%}
  .attendance-daily-table tr{
    border:1px solid #dbe3ec;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
  }
  .attendance-daily-table td{
    display:grid;
    grid-template-columns:125px minmax(0,1fr);
    gap:8px;
    border-bottom:1px solid #edf1f5;
  }
  .attendance-daily-table td::before{
    content:attr(data-label);
    font-weight:700;
    color:#475467;
  }
  .attendance-daily-table td:last-child{border-bottom:0}
}


/* ==========================================================
   v7.3.0 - UI polish: nhập liệu dày đặc + KPI Engine
   ========================================================== */

/* Focus/accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid rgba(46,144,250,.28);
  outline-offset:2px;
}
button{transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
button:not(:disabled):active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:not-allowed}

/* Attendance daily filter + batch action */
.attendance-entry-filterbar{
  display:grid;
  grid-template-columns:minmax(240px,1.4fr) minmax(160px,.8fr) minmax(170px,.8fr) auto;
  gap:8px;
  align-items:end;
  margin:9px 0;
  padding:9px 10px;
}
.attendance-entry-filterbar label{
  display:grid;
  gap:4px;
  color:#475467;
  font-size:9px;
  font-weight:700;
}
.attendance-entry-filterbar input,
.attendance-entry-filterbar select{width:100%;min-height:36px}
.attendance-entry-keyboard{
  align-self:center;
  padding:6px 9px;
  border-radius:7px;
  background:#f2f4f7;
  color:#667085;
  font-size:9px;
  white-space:nowrap;
}

.attendance-batch-bar{
  position:sticky;
  top:8px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:8px 0;
  padding:8px 10px;
  border:1px solid #98c5ec;
  border-radius:10px;
  background:#eef6ff;
  box-shadow:0 8px 22px rgba(15,76,129,.11);
}
.attendance-batch-count{
  padding-right:9px;
  border-right:1px solid #c9ddf1;
  color:#0f4c81;
  font-size:10px;
}
.attendance-batch-count b{font-size:16px}
.attendance-batch-action{
  display:flex;
  align-items:center;
  gap:4px;
}
.attendance-batch-action input[type=time]{width:105px;min-height:34px}
.attendance-batch-status-action{flex:1 1 420px}
.attendance-batch-status-action select{min-width:165px;max-width:220px}
.attendance-batch-status-action input{flex:1 1 160px;min-width:130px}

.attendance-error-summary{
  margin:9px 0;
  padding:12px 14px;
  border:2px solid #d92d20;
  border-radius:10px;
  background:#fef3f2;
  color:#912018;
}
.attendance-error-summary>b{display:block;margin-bottom:5px}
.attendance-error-summary ul{margin:0;padding-left:18px}
.attendance-error-summary li+li{margin-top:3px}
.attendance-error-summary button{
  padding:0;
  border:0;
  background:transparent;
  color:#b42318;
  text-align:left;
  text-decoration:underline;
  font-size:10px;
}

/* Summary now has 5 cards */
.attendance-entry-summary{grid-template-columns:repeat(5,minmax(110px,1fr))}
.attendance-entry-stat.selected{
  background:#eef6ff;
  border-color:#b9d6ef;
}
.attendance-entry-stat.selected b{color:#0f4c81}

/* Dense daily entry table */
.attendance-daily-table{min-width:1530px}
.attendance-daily-table th,
.attendance-daily-table td{padding:6px 6px}
.attendance-daily-table th:first-child,
.attendance-daily-table td:first-child{width:42px;min-width:42px;text-align:center}
.attendance-daily-table .dailySelect{width:16px;height:16px}
.attendance-daily-table tbody tr.selected-row{
  background:#eef6ff;
  box-shadow:inset 4px 0 0 #2e90fa;
}
.attendance-daily-table tbody tr.dirty{
  background:#fffaf0;
  box-shadow:inset 4px 0 0 #f79009;
}
.attendance-daily-table tbody tr.selected-row.dirty{
  background:linear-gradient(90deg,#eef6ff,#fffaf0);
}
.attendance-daily-table tbody tr.daily-row-error-focus{
  box-shadow:inset 5px 0 0 #d92d20,0 0 0 2px rgba(217,45,32,.2);
}
.daily-filtered-out{display:none!important}

/* Frozen selection / index / staff columns */
.attendance-daily-table .daily-sticky-select{
  position:sticky;
  left:0;
  z-index:4;
  background:inherit;
}
.attendance-daily-table .daily-sticky-index{
  position:sticky;
  left:42px;
  z-index:4;
  width:46px;
  min-width:46px;
  background:inherit;
}
.attendance-daily-table .daily-sticky-name{
  position:sticky;
  left:88px;
  z-index:4;
  min-width:220px;
  background:inherit;
  box-shadow:6px 0 8px -8px rgba(16,24,40,.45);
}
.attendance-daily-table thead .daily-sticky-select,
.attendance-daily-table thead .daily-sticky-index,
.attendance-daily-table thead .daily-sticky-name{
  z-index:7;
  background:#0f4c81;
}
.attendance-daily-table td:nth-child(4){min-width:145px}

/* KPI personal scorecard */
.kpi-score-panel{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  border-left:5px solid #f79009;
}
.kpi-score-panel.finalized{border-left-color:#12b76a;background:linear-gradient(135deg,#f6fef9,#fff)}
.kpi-score-panel.live{background:linear-gradient(135deg,#fffaeb,#fff)}
.kpi-score-panel.nodata{border-left-color:#98a2b3;background:#f8fafc}
.kpi-score-main{padding-right:14px;border-right:1px solid #e4e7ec}
.kpi-score-label{
  display:block;
  color:#667085;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em
}
.kpi-score-main>b{display:block;margin:2px 0;font-size:36px;line-height:1;color:#0f4c81}
.kpi-score-main small{color:#667085;font-size:9px}
.kpi-score-copy h3{margin:0 0 4px;color:#173f67}
.kpi-score-copy p{margin:0;color:#667085;font-size:10px;line-height:1.45}

.kpi-source-strip{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 10px;
  border:1px solid #e4e7ec;
  border-radius:9px;
  background:#f8fafc;
  color:#667085;
  font-size:9px;
}
.kpi-source-strip b{margin-left:auto;color:#344054}

.kpi-breakdown-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.kpi-breakdown-item{
  padding:11px;
  border:1px solid #dbe3ec;
  border-radius:11px;
  background:#fff;
  min-width:0;
}
.kpi-breakdown-item.bonus{
  background:linear-gradient(135deg,#f5f3ff,#fff);
  border-color:#d9d6fe;
}
.kpi-breakdown-name b{display:block;color:#344054;font-size:10px}
.kpi-breakdown-name span{display:block;margin-top:2px;color:#98a2b3;font-size:8.5px}
.kpi-breakdown-score{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:7px;
  margin-top:8px;
}
.kpi-breakdown-score>b{font-size:22px;color:#0f4c81}
.kpi-breakdown-score small{color:#667085;font-size:8.5px;text-align:right}
.kpi-rule-events,.kpi-adjustments-mini{
  display:grid;
  gap:3px;
  margin-top:7px;
  padding-top:6px;
  border-top:1px dashed #e4e7ec;
}
.kpi-rule-events span,.kpi-adjustments-mini span{
  font-size:8px;
  line-height:1.35;
  color:#667085;
}
.kpi-adjustments-mini span{color:#5925dc}

/* KPI admin */
.kpi-admin-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:10px;
  padding:16px 18px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#0f4c81,#1769aa);
}
.kpi-admin-hero h3{margin:2px 0 4px;font-size:18px}
.kpi-admin-hero p{margin:0;color:rgba(255,255,255,.8);font-size:10px}
.kpi-admin-hero .page-eyebrow{color:rgba(255,255,255,.7)}
.kpi-admin-hero-note{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-size:10px;
  white-space:nowrap;
}
.kpi-admin-card{margin-bottom:11px}
.kpi-config-validation{margin-bottom:8px}
.kpi-weight-summary{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:8px;
  font-size:10px;
}
.kpi-weight-summary.ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.kpi-weight-summary.bad{background:#fef3f2;color:#b42318;border:1px solid #fecdca}
.kpi-weight-summary b{font-size:16px}
.kpi-weight-summary small{margin-left:auto}

.kpi-config-categories{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.kpi-config-category{
  padding:11px;
  border:1px solid #dbe3ec;
  border-radius:10px;
  background:#fdfefe;
}
.kpi-config-category-title{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:8px;
}
.kpi-config-category-title b{display:block;color:#173f67}
.kpi-config-category-title span{display:block;margin-top:2px;color:#98a2b3;font-size:8.5px}
.kpi-config-row{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:7px;
}
.kpi-config-row label,
.kpi-adjust-form label,
.kpi-period-filters label{
  display:grid;
  gap:4px;
  color:#667085;
  font-size:8.5px;
  font-weight:700;
}
.kpi-rules-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  margin:14px 0 6px;
}
.kpi-rules-title h4{margin:0;color:#344054}
.kpi-rules-title span{font-size:8.5px;color:#98a2b3}
.kpi-rules-table td small{display:block;margin-top:3px;color:#98a2b3}
.kpi-rules-table input[type=number]{width:95px}
.kpi-rules-table code{font-size:8.5px;color:#475467}

.kpi-adjust-form{
  display:grid;
  grid-template-columns:1.15fr 1.15fr .8fr .7fr 1.45fr 1.45fr auto;
  gap:7px;
  align-items:end;
  margin-bottom:10px;
}
.kpi-period-filters{
  display:grid;
  grid-template-columns:150px 160px 150px 145px 145px minmax(220px,1fr);
  gap:8px;
  align-items:end;
  margin-bottom:10px;
}
.kpi-finalize-note{min-width:210px}
.kpi-summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  margin-bottom:6px;
  border-radius:8px;
  background:#f8fafc;
  color:#475467;
  font-size:9px;
}
.kpi-summary-head b{font-size:13px;color:#0f4c81}
.kpi-table-score{font-size:16px;color:#0f4c81}
.kpi-source-mini{font-size:9px;color:#667085;white-space:nowrap}
.kpi-detail-dialog-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  color:#475467;
}
.kpi-detail-dialog-head>b{font-size:16px;color:#173f67}

@media(max-width:1180px){
  .attendance-entry-filterbar{grid-template-columns:repeat(2,minmax(180px,1fr))}
  .attendance-entry-summary{grid-template-columns:repeat(3,1fr)}
  .kpi-breakdown-grid{grid-template-columns:repeat(3,1fr)}
  .kpi-adjust-form{grid-template-columns:repeat(3,1fr)}
  .kpi-period-filters{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .attendance-entry-filterbar{grid-template-columns:1fr}
  .attendance-entry-summary{grid-template-columns:1fr 1fr}
  .attendance-batch-bar{position:static;align-items:stretch;flex-direction:column}
  .attendance-batch-count{border-right:0;border-bottom:1px solid #c9ddf1;padding:0 0 6px}
  .attendance-batch-action,.attendance-batch-status-action{width:100%;flex:1 1 auto}
  .attendance-batch-action input,.attendance-batch-action select{flex:1}
  .attendance-daily-table .daily-sticky-select,
  .attendance-daily-table .daily-sticky-index,
  .attendance-daily-table .daily-sticky-name{
    position:static;
    left:auto;
    min-width:0;
    box-shadow:none;
  }

  .kpi-score-panel{grid-template-columns:1fr}
  .kpi-score-main{border-right:0;border-bottom:1px solid #e4e7ec;padding:0 0 10px}
  .kpi-source-strip b{margin-left:0;width:100%}
  .kpi-breakdown-grid{grid-template-columns:1fr}
  .kpi-config-categories{grid-template-columns:1fr}
  .kpi-config-row{grid-template-columns:1fr 1fr}
  .kpi-adjust-form,.kpi-period-filters{grid-template-columns:1fr}
  .kpi-admin-hero{align-items:flex-start;flex-direction:column}
}


/* v7.3.1 - Hồ sơ thực hiện: trạng thái tải/lỗi rõ ràng */
.performance-loading{
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.performance-load-error{
  display:grid;
  gap:9px;
  border-left:4px solid #d92d20;
  background:#fff;
}
.performance-load-error>b{color:#b42318;font-size:13px}
.performance-load-error .meta{white-space:normal;line-height:1.5}
.performance-load-error button{justify-self:start}
.performance-kpi-warning{
  margin:0 0 10px;
  border-color:#fde68a;
  background:#fffbeb;
}

/* v7.3.3 - Update Center + Fast startup */
.release-header-btn{border-color:#d9d6fe;background:#f4f3ff;color:#5925dc;font-weight:800}.release-nav-btn{display:flex!important;align-items:center;gap:6px}.nav-version-pill{margin-left:auto;padding:2px 6px;border-radius:999px;background:#f4f3ff;color:#5925dc;font-size:8px;font-weight:800}.app-version-line{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.app-version-line button{padding:1px 4px;border:0;background:transparent;color:#0f4c81;font-size:9px;text-decoration:underline}
.startup-layer{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#f5f8fc,#eef6ff);transition:opacity .25s ease}.startup-layer.startup-hidden{opacity:0;pointer-events:none}.startup-card{width:min(620px,96vw);display:grid;grid-template-columns:66px minmax(0,1fr);gap:18px;padding:24px;border:1px solid #dbe3ec;border-radius:18px;background:#fff;box-shadow:0 20px 55px rgba(16,24,40,.12)}.startup-logo{width:60px;height:60px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#0f4c81,#2387d9);color:#fff;font-size:30px;font-weight:900}.startup-kicker{color:#0f4c81;font-size:9px;font-weight:900;letter-spacing:.08em}.startup-copy h2{margin:5px 0;color:#173f67;font-size:22px}.startup-copy p{margin:0;color:#667085;font-size:11px;line-height:1.5}.startup-progress{height:8px;margin:15px 0 7px;border-radius:999px;overflow:hidden;background:#edf2f7}.startup-progress span{display:block;width:12%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0f4c81,#2e90fa);transition:width .35s ease}.startup-meta{display:flex;align-items:center;justify-content:space-between;color:#667085;font-size:9px}.startup-error{margin-top:10px;padding:8px 10px;border:1px solid #fecdca;border-radius:8px;background:#fef3f2;color:#b42318;font-size:10px}.startup-actions{display:flex;gap:7px;margin-top:10px}
.release-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:10px}.release-main-card{display:grid;grid-template-columns:100px minmax(0,1fr);gap:15px;align-items:center;background:linear-gradient(135deg,#f8fbff,#fff)}.release-version-mark{display:grid;place-items:center;height:82px;border-radius:15px;background:linear-gradient(135deg,#0f4c81,#2387d9);color:#fff;font-size:24px;font-weight:900}.release-main-card h3{margin:3px 0 5px;color:#173f67}.release-main-card p{margin:0;color:#667085;font-size:10px;line-height:1.5}.release-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.release-status-card h3,.release-changes-card h3{margin:0 0 8px;color:#173f67}.release-status-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid #edf1f5;font-size:10px}.release-status-row:first-of-type{border-top:0}.good-text{color:#067647}.bad-text{color:#b42318}.release-changes-card{grid-column:1/-1}.release-changes-card ol{display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;margin:0;padding-left:20px}.release-changes-card li{padding:4px 0;color:#475467;font-size:10px;line-height:1.45}
@media(max-width:760px){.startup-card{grid-template-columns:1fr;padding:18px}.startup-logo{width:50px;height:50px}.release-grid{grid-template-columns:1fr}.release-main-card{grid-template-columns:76px minmax(0,1fr)}.release-version-mark{height:68px;font-size:18px}.release-changes-card{grid-column:auto}.release-changes-card ol{grid-template-columns:1fr}.release-header-btn{padding:6px 8px;font-size:9px}}


/* ==========================================================
   v7.3.4 - Tinh chỉnh bảng nhập liệu + Dashboard
   Chỉ tác động các vùng được yêu cầu.
   ========================================================== */

/* 1) Nhập liệu Chấm công & Giờ giấc: cân lại cột, dòng và chữ */
.attendance-daily-table{
  min-width:1365px;
  table-layout:fixed;
}
.attendance-daily-table th{
  padding:7px 5px;
  font-size:10.5px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.01em;
}
.attendance-daily-table td{
  padding:5px 5px;
  font-size:10.5px;
  line-height:1.28;
}
.attendance-daily-table tbody tr{
  height:43px;
}
.attendance-daily-table td b{
  font-size:11.5px;
  line-height:1.25;
  color:#263b52;
}
.attendance-daily-table td small{
  font-size:8.8px;
  line-height:1.2;
  color:#8a98a8;
}
.attendance-daily-table input,
.attendance-daily-table select{
  min-height:32px;
  height:32px;
  padding:4px 6px;
  font-size:10px;
  border-radius:6px;
}
.attendance-daily-table input[type="time"]{
  padding-left:5px;
  padding-right:4px;
}

/* 11 cột thực tế: chọn, TT, tên, tổ, 4 cột giờ, trạng thái, kết quả, ghi chú */
.attendance-daily-table th:nth-child(1),
.attendance-daily-table td:nth-child(1){width:38px;min-width:38px}
.attendance-daily-table th:nth-child(2),
.attendance-daily-table td:nth-child(2){width:44px;min-width:44px}
.attendance-daily-table th:nth-child(3),
.attendance-daily-table td:nth-child(3){width:210px;min-width:210px}
.attendance-daily-table th:nth-child(4),
.attendance-daily-table td:nth-child(4){width:125px;min-width:125px}
.attendance-daily-table th:nth-child(5),
.attendance-daily-table td:nth-child(5){width:105px;min-width:105px}
.attendance-daily-table th:nth-child(6),
.attendance-daily-table td:nth-child(6){width:105px;min-width:105px}
.attendance-daily-table th:nth-child(7),
.attendance-daily-table td:nth-child(7){width:112px;min-width:112px}
.attendance-daily-table th:nth-child(8),
.attendance-daily-table td:nth-child(8){width:105px;min-width:105px}
.attendance-daily-table th:nth-child(9),
.attendance-daily-table td:nth-child(9){width:162px;min-width:162px}
.attendance-daily-table th:nth-child(10),
.attendance-daily-table td:nth-child(10){width:142px;min-width:142px}
.attendance-daily-table th:nth-child(11),
.attendance-daily-table td:nth-child(11){width:205px;min-width:205px}

.attendance-daily-table .daily-sticky-index{left:38px;width:44px;min-width:44px}
.attendance-daily-table .daily-sticky-name{left:82px;min-width:210px;width:210px}
.attendance-daily-table tbody tr:nth-child(even){background:#fcfdff}
.attendance-daily-table tbody tr:hover{background:#f6faff}
.attendance-daily-table tbody tr.dirty{background:#fffaf0}
.attendance-daily-table tbody tr.selected-row{background:#eef6ff}

/* 2) Dashboard: ba khối chính rõ hơn nhưng vẫn nhẹ */
.dashboard-focus-card{
  position:relative;
  overflow:hidden;
  padding:14px 14px 11px;
  border:1px solid #dfe7ef;
  box-shadow:0 3px 12px rgba(16,24,40,.035);
}
.dashboard-focus-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  border-radius:4px 0 0 4px;
}
.dashboard-focus-card>h3{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid #edf1f5;
  color:#243b53;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.005em;
}
.dashboard-focus-card>h3>span{
  display:inline-grid;
  place-items:center;
  width:24px;height:24px;
  border-radius:7px;
  font-size:13px;
  background:#f5f7fa;
}
.dashboard-overdue-card{background:linear-gradient(180deg,#fffdfb 0%,#fff 52%)}
.dashboard-overdue-card::before{background:#e9a23b}
.dashboard-overdue-card>h3>span{background:#fff5e8}

.dashboard-meeting-card{background:linear-gradient(180deg,#fbfcff 0%,#fff 52%)}
.dashboard-meeting-card::before{background:#7f8cdf}
.dashboard-meeting-card>h3>span{background:#f1f3ff}

.dashboard-attendance-card{background:linear-gradient(180deg,#f9fdfc 0%,#fff 52%)}
.dashboard-attendance-card::before{background:#36a184}
.dashboard-attendance-card>h3>span{background:#edf9f5}

.dashboard-focus-item{
  margin:0;
  padding:8px 7px;
  border:0;
  border-bottom:1px solid #eef2f6;
  border-radius:0;
  background:transparent;
}
.dashboard-focus-item:last-child{border-bottom:0}
.dashboard-focus-item:hover{background:rgba(247,250,252,.8)}
.dashboard-focus-item>b,
.dashboard-focus-item .item-title,
.dashboard-focus-item strong{
  color:#263b52;
  font-size:10.8px;
  line-height:1.35;
  font-weight:750;
}
.dashboard-focus-item .meta{
  margin-top:3px;
  color:#738295;
  font-size:9.2px;
  line-height:1.35;
}
.dashboard-overdue-item>b{color:#8b4b12}
.dashboard-meeting-item>b{color:#3f4d86}
.dashboard-attendance-item>b{color:#276b5a}

/* Điểm KPI >100 nhờ thưởng vẫn hiển thị cân đối */
.kpi-score-main>b{font-variant-numeric:tabular-nums}
.kpi-breakdown-item.bonus .kpi-breakdown-score>b{color:#5925dc}
.kpi-breakdown-item.bonus{
  box-shadow:inset 0 0 0 1px rgba(89,37,220,.04);
}

/* ==========================================================
   v7.4.0 - INSPIRED WORKSPACE
   Navy sidebar · Teal accent · Mobile-first Calendar
   ========================================================== */
:root{
  --p:#0f4f78;
  --navy:#123d5d;
  --navy-deep:#0d344f;
  --navy-soft:#1d5777;
  --teal:#13a899;
  --teal-soft:#eafaf7;
  --violet:#7657d6;
  --violet-soft:#f2efff;
  --amber:#e99a3a;
  --amber-soft:#fff6e8;
  --blue:#367cc9;
  --blue-soft:#edf6ff;
  --surface:#ffffff;
  --surface-soft:#f8fbfd;
  --bg:#f3f7fa;
  --b:#dce6ed;
  --text:#17324a;
  --muted:#6e8192;
  --danger:#b42318;
  --ok:#067647;
  --shadow:0 8px 28px rgba(28,61,86,.07);
  --shadow-soft:0 3px 12px rgba(28,61,86,.05);
}
html{background:var(--bg)}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 82% 4%,rgba(19,168,153,.055),transparent 24%),
    linear-gradient(180deg,#f7fafc 0,#f3f7fa 100%);
}
button,input,select,textarea{font-family:inherit}
button{
  border-color:#d5e1e9;
  color:#263f54;
  font-weight:650;
}
button:hover{border-color:#b9cedc}
.primary{
  background:linear-gradient(135deg,#0f4f78,#11678b);
  border-color:#0f4f78;
  box-shadow:0 4px 11px rgba(15,79,120,.16);
}
.card{
  border-color:#dfe8ee;
  border-radius:16px;
  box-shadow:var(--shadow-soft);
}
.meta{color:var(--muted)}

/* Header */
header{
  min-height:62px;
  padding:8px 18px;
  border-bottom:1px solid #dfe7ed;
  box-shadow:0 2px 12px rgba(28,61,86,.045);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
}
.brand img{
  width:42px;height:42px;
  border-radius:11px;
  box-shadow:0 4px 12px rgba(15,79,120,.13);
}
.brand b{color:#133b59;letter-spacing:.01em}
.brand small{font-size:11px;color:#75889a}
.release-header-btn{
  border-color:#dcd6fa;
  background:linear-gradient(135deg,#f7f4ff,#f0ecff);
  color:#6548c4;
}
#netBadge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#547083;
  font-size:12px;
}
#netBadge::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:#18b77b;
  box-shadow:0 0 0 3px rgba(24,183,123,.12);
}

/* Main workspace shell */
.app{
  grid-template-columns:252px minmax(0,1fr);
  min-height:calc(100vh - 62px);
}
.app>aside{
  top:62px;
  height:calc(100vh - 62px);
  padding:18px 14px 12px;
  background:
    linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 68%,#0d4859 100%);
  border-right:0;
  box-shadow:8px 0 30px rgba(18,61,93,.08);
  color:#fff;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:11px;
  padding:5px 8px 16px;
  margin-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sidebar-brand-icon{
  width:44px;height:44px;
  flex:0 0 44px;
  display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(145deg,#16b8aa,#0f988c);
  color:#fff;
  font-size:22px;
  box-shadow:0 7px 18px rgba(10,197,179,.18);
}
.sidebar-brand b{display:block;font-size:13px;letter-spacing:.025em}
.sidebar-brand small{
  display:block;
  margin-top:3px;
  color:#b9d3e1;
  font-size:10px;
}
#userBox{
  margin:0 2px 12px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.075);
  color:#fff;
}
#userBox b{color:#fff}
#userBox .meta,#userBox small{color:#bcd2df}
#userBox button{
  background:rgba(255,255,255,.09);
  color:#fff;
  border-color:rgba(255,255,255,.13);
}
.app>aside nav{gap:4px}
.app>aside nav .nav-section-label{
  margin:15px 10px 5px;
  color:#83aabd;
  font-size:8px;
  letter-spacing:.15em;
}
.app>aside nav button{
  min-height:42px;
  padding:9px 11px;
  border-radius:10px;
  color:#dbe9f0;
  background:transparent;
  font-size:11.5px;
  font-weight:650;
}
.app>aside nav button:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.07);
  color:#fff;
}
.app>aside nav button.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  box-shadow:inset 3px 0 0 #23c4b5;
}
.app>aside .nav-version-pill{
  background:rgba(118,87,214,.25);
  color:#dcd4ff;
}
.sidebar-copyright{
  color:#8fb1c1;
  border-color:rgba(255,255,255,.11);
  font-size:8.5px;
}
.sidebar-copyright a,.sidebar-copyright button{color:#b9d8e5}
.sidebar-copyright .app-version-line{color:#9ebdca}

/* Workspace */
.workspace{
  padding:22px 24px 32px;
  background:transparent;
}
.pane>.title,
.calendar-page-head{
  margin-bottom:16px;
}
.title h2,.title h3,.command-header h2,.calendar-page-head h2{
  color:#153f5f;
}
.command-header{
  padding:18px 20px;
  border-color:#dfe9ef;
  border-radius:18px;
  background:
    radial-gradient(circle at 93% 12%,rgba(19,168,153,.08),transparent 22%),
    linear-gradient(135deg,#fff,#f8fbfd);
  box-shadow:var(--shadow);
}
.page-eyebrow{color:#0e8e84;font-weight:900}
.command-kpi{
  border:1px solid #e1e9ef;
  border-radius:14px;
  box-shadow:var(--shadow-soft);
}
.command-kpi:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(28,61,86,.08);
}
.kpi b{color:#124c73}
.filters.card{
  box-shadow:none;
  background:#fbfdfe;
}

/* Dashboard color hierarchy */
.dashboard-focus-card{
  border-radius:16px;
  box-shadow:var(--shadow-soft);
}
.dashboard-overdue-card::before{background:var(--amber)}
.dashboard-meeting-card::before{background:var(--violet)}
.dashboard-attendance-card::before{background:var(--teal)}
.dashboard-overdue-card>h3>span{background:var(--amber-soft)}
.dashboard-meeting-card>h3>span{background:var(--violet-soft)}
.dashboard-attendance-card>h3>span{background:var(--teal-soft)}

/* ==========================================================
   Calendar - desktop/tablet/mobile
   ========================================================== */
.calendar-pane{position:relative}
.calendar-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border:1px solid #dfe8ee;
  border-radius:18px;
  background:
    linear-gradient(120deg,#ffffff 0%,#f7fbfd 72%,#edf9f7 100%);
  box-shadow:var(--shadow);
}
.calendar-page-head h2{
  margin:2px 0 4px;
  font-size:21px;
}
.calendar-page-head .meta{margin:0;font-size:11px}
.calendar-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
}
.calendar-toolbar button{
  min-width:38px;
  min-height:38px;
  padding:7px 10px;
  border-radius:10px;
  background:#fff;
}
.calendar-toolbar input{
  width:150px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid #d5e1e9;
  border-radius:10px;
  color:#234158;
  background:#fff;
}
#calendarTodayBtn{
  color:#0e746c;
  border-color:#bce7df;
  background:#effbf8;
}
.calendar-shell{
  overflow:hidden;
  margin-bottom:16px;
  border:1px solid #dce7ed;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
}
.calendar-loading,.calendar-load-error{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex-direction:column;
  color:#718797;
}
.calendar-loading span{
  width:22px;height:22px;border-radius:50%;
  border:3px solid #d9e7ed;
  border-top-color:var(--teal);
  animation:calendarSpin .7s linear infinite;
}
@keyframes calendarSpin{to{transform:rotate(360deg)}}
.calendar-month-board{background:#fff}
.calendar-month-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  border-bottom:1px solid #e7eef3;
  background:linear-gradient(180deg,#fff,#fbfdfe);
}
.calendar-month-title>div{text-align:center}
.calendar-month-title b{
  display:block;
  color:#163e5b;
  font-size:15px;
}
.calendar-month-title span{
  display:block;
  margin-top:2px;
  color:#8a99a6;
  font-size:9px;
}
.calendar-board-nav{
  width:34px;height:34px;padding:0;
  border-radius:50%;
  color:#47657a;
  background:#f8fbfd;
}
.calendar-week-header{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid #e5edf2;
  background:#f7fafc;
}
.calendar-week-header span{
  padding:8px 4px;
  text-align:center;
  color:#6d8191;
  font-size:9px;
  font-weight:800;
}
.calendar-month-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.calendar-month-cell{
  position:relative;
  min-width:0;
  min-height:116px;
  padding:7px;
  border-right:1px solid #e7edf2;
  border-bottom:1px solid #e7edf2;
  background:#fff;
  cursor:pointer;
  transition:background .14s ease,box-shadow .14s ease;
}
.calendar-month-cell:nth-child(7n){border-right:0}
.calendar-month-cell:nth-last-child(-n+7){border-bottom:0}
.calendar-month-cell:hover{background:#fbfdff}
.calendar-month-cell.outside{
  background:#fafcfd;
  color:#a9b5bf;
}
.calendar-month-cell.selected{
  z-index:1;
  background:#f0fbf9;
  box-shadow:inset 0 0 0 2px rgba(19,168,153,.55);
}
.calendar-month-cell.today .calendar-date-number{
  display:grid;place-items:center;
  width:25px;height:25px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#173f61,#116b7c);
  box-shadow:0 3px 8px rgba(23,63,97,.18);
}
.calendar-cell-head{
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.calendar-date-number{
  color:#415d70;
  font-size:10.5px;
  font-weight:800;
}
.outside .calendar-date-number{color:#b9c4cc}
.calendar-today-dot{
  width:6px;height:6px;border-radius:50%;background:#14ae9f;
}
.calendar-cell-events{
  display:grid;
  gap:3px;
  margin-top:3px;
}
.calendar-event{
  min-width:0;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 5px;
  border:0;
  border-left:3px solid;
  border-radius:5px;
  font-size:8.5px;
  line-height:1.25;
  cursor:pointer;
}
.calendar-event span{
  flex:0 0 auto;
  font-size:7.5px;
  opacity:.72;
}
.calendar-event b{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-weight:750;
}
.calendar-event-task{
  color:#16665f;
  border-left-color:#19aa9c;
  background:#eaf9f6;
}
.calendar-event-meeting{
  color:#57429c;
  border-left-color:#8066dd;
  background:#f0edff;
}
.calendar-more-count{
  padding-left:5px;
  color:#708493;
  font-size:8px;
  font-weight:800;
}
.calendar-mobile-count{display:none}

/* Agenda */
.calendar-agenda-section{
  scroll-margin-top:150px;
  margin-bottom:20px;
  padding:0;
  border:1px solid #dce7ed;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.calendar-agenda-head{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #e7eef2;
  background:linear-gradient(120deg,#fff,#fbfdfe);
}
.calendar-agenda-datebox{
  width:54px;height:54px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:13px;
  background:linear-gradient(145deg,#133f60,#175f78);
  color:#fff;
}
.calendar-agenda-datebox b{font-size:21px;line-height:1}
.calendar-agenda-datebox span{
  margin-top:3px;
  color:#cde1eb;
  font-size:8px;
  font-weight:800;
}
.calendar-agenda-heading small{
  color:#0d8f84;
  font-size:9px;
  font-weight:800;
}
.calendar-agenda-heading h3{
  margin:3px 0 0;
  color:#213f56;
  font-size:14px;
}
.calendar-agenda-add{
  width:38px;height:38px;padding:0;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#0f8f84,#16b4a4);
  border:0;
  font-size:22px;
  box-shadow:0 5px 12px rgba(19,168,153,.18);
}
.calendar-agenda-list{padding:5px 14px 10px}
.calendar-agenda-item{
  display:grid;
  grid-template-columns:62px 34px minmax(0,1fr) 18px;
  align-items:center;
  gap:9px;
  padding:11px 4px;
  border-bottom:1px solid #edf2f5;
  cursor:pointer;
}
.calendar-agenda-item:last-child{border-bottom:0}
.calendar-agenda-time{
  color:#496577;
  font-size:10px;
  font-weight:800;
}
.calendar-agenda-icon{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:9px;
  font-size:13px;
}
.calendar-agenda-item.calendar-event-task .calendar-agenda-icon{
  background:var(--teal-soft);color:#09766d;
}
.calendar-agenda-item.calendar-event-meeting .calendar-agenda-icon{
  background:var(--violet-soft);color:#6247c1;
}
.calendar-agenda-body{min-width:0}
.calendar-agenda-body b{
  display:block;
  overflow:hidden;
  color:#263f54;
  font-size:11px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.calendar-agenda-body span{
  display:block;
  margin-top:3px;
  color:#8898a5;
  font-size:8.5px;
}
.calendar-agenda-arrow{color:#9babba;font-size:18px}
.calendar-agenda-empty{
  min-height:160px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:4px;
  color:#8293a1;
  text-align:center;
}
.calendar-empty-icon{font-size:30px}
.calendar-agenda-empty b{color:#4b6578}
.calendar-agenda-empty span{font-size:9px}

/* Compact sticky week shown while scrolling on tablet/mobile */
.calendar-sticky-week{
  display:none;
}

/* App-like bottom navigation */
.mobile-bottom-nav,
.mobile-more-sheet,
.mobile-more-backdrop{display:none}

/* ==========================================================
   Tablet
   ========================================================== */
@media(max-width:1100px) and (min-width:761px){
  .app{grid-template-columns:88px minmax(0,1fr)}
  .app>aside{padding:14px 8px}
  .sidebar-brand{
    justify-content:center;
    padding:4px 0 13px;
  }
  .sidebar-brand-icon{width:46px;height:46px;flex-basis:46px}
  .sidebar-brand>div:last-child{display:none}
  #userBox{
    padding:8px 5px;
    text-align:center;
    overflow:hidden;
  }
  #userBox>div,#userBox .meta,#userBox small{font-size:0}
  #userBox b{
    display:block;
    font-size:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #userBox button{
    width:100%;
    padding:6px 3px;
    font-size:0;
  }
  #userBox button::before{content:"👤";font-size:14px}
  .app>aside nav .nav-section-label{display:none}
  .app>aside nav button{
    min-height:50px;
    padding:6px 3px;
    text-align:center;
    font-size:0;
  }
  .app>aside nav button::first-letter{font-size:18px}
  .sidebar-copyright{display:none}
  .workspace{padding:18px 16px 28px}
  .calendar-page-head{padding:14px}
  .calendar-month-cell{min-height:98px;padding:5px}
  .calendar-event{font-size:7.5px}
  .calendar-event span{display:none}
}

/* ==========================================================
   Phone + small tablet
   ========================================================== */
@media(max-width:760px){
  body{padding-bottom:74px}
  header{
    min-height:58px;
    padding:7px 10px;
  }
  .brand{gap:7px;min-width:0}
  .brand img{width:36px;height:36px;border-radius:9px}
  .brand>div{min-width:0}
  .brand b{
    display:block;
    max-width:46vw;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:11px;
  }
  .brand small{display:none}
  .head-actions{gap:5px}
  .head-actions #netBadge{
    width:8px;height:8px;
    overflow:hidden;
    font-size:0;
  }
  .head-actions #netBadge::before{width:8px;height:8px}
  .release-header-btn{padding:6px 8px;font-size:9px}
  #logoutBtn{padding:6px 8px;font-size:9px}
  #installBtn{display:none!important}

  .app{display:block;min-height:calc(100vh - 58px)}
  .app>aside{display:none!important}
  .workspace{
    padding:10px 8px 24px;
  }
  .command-header{
    padding:13px 12px;
    border-radius:15px;
  }
  .command-header h2{font-size:18px}
  .command-header p{font-size:10px}
  .card{border-radius:14px}
  .kpis{gap:7px}

  /* Bottom navigation matching native mobile app rhythm */
  .mobile-bottom-nav{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:55;
    height:66px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding:5px 4px max(5px,env(safe-area-inset-bottom));
    border-top:1px solid #dce5eb;
    background:rgba(255,255,255,.97);
    box-shadow:0 -8px 24px rgba(24,56,80,.08);
    backdrop-filter:blur(14px);
  }
  .mobile-bottom-nav button{
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    padding:2px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#7b8d9a;
  }
  .mobile-bottom-nav button>span{
    font-size:18px;
    line-height:1;
    font-weight:850;
  }
  .mobile-bottom-nav button>small{
    font-size:8px;
    font-weight:750;
  }
  .mobile-bottom-nav button.active{
    color:#0c8f84;
    background:#eefaf8;
  }
  .mobile-more-backdrop{
    position:fixed;
    inset:0;
    z-index:56;
    display:block;
    opacity:0;
    pointer-events:none;
    background:rgba(7,35,54,.32);
    transition:opacity .2s ease;
  }
  .mobile-more-backdrop.open{opacity:1;pointer-events:auto}
  .mobile-more-sheet{
    position:fixed;
    left:8px;right:8px;bottom:72px;
    z-index:57;
    display:block;
    padding:8px 12px 15px;
    border:1px solid #dce6ed;
    border-radius:20px;
    background:#fff;
    box-shadow:0 18px 45px rgba(15,50,75,.22);
    transform:translateY(125%);
    opacity:0;
    pointer-events:none;
    transition:transform .22s ease,opacity .22s ease;
  }
  .mobile-more-sheet.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .mobile-more-handle{
    width:36px;height:4px;
    margin:2px auto 8px;
    border-radius:99px;
    background:#d7e0e7;
  }
  .mobile-more-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 3px 9px;
    color:#26445a;
  }
  .mobile-more-title button{
    width:30px;height:30px;padding:0;border:0;background:#f4f7f9;
  }
  .mobile-more-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
  }
  .mobile-more-grid button{
    display:grid;
    gap:4px;
    place-items:center;
    min-height:65px;
    padding:8px 4px;
    border:1px solid #e2e9ee;
    background:#fbfdfe;
    font-size:18px;
  }
  .mobile-more-grid button span{
    font-size:8.5px;
    font-weight:700;
    color:#557082;
  }

  /* Calendar page like the supplied mobile examples */
  .calendar-page-head{
    display:grid;
    gap:10px;
    margin-bottom:8px;
    padding:11px 12px;
    border-radius:15px;
  }
  .calendar-page-head .page-eyebrow{font-size:7.5px}
  .calendar-page-head h2{font-size:18px}
  .calendar-page-head .meta{display:none}
  .calendar-toolbar{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 34px 70px;
    gap:5px;
  }
  .calendar-toolbar input{
    width:100%;
    min-width:0;
    min-height:34px;
    padding:5px 7px;
    font-size:10px;
  }
  .calendar-toolbar button{
    min-width:0;
    min-height:34px;
    padding:5px;
    font-size:11px;
  }
  .calendar-shell{
    margin:0 0 9px;
    border-radius:13px;
    box-shadow:0 3px 12px rgba(28,61,86,.05);
  }
  .calendar-month-title{
    padding:8px 8px;
  }
  .calendar-month-title b{font-size:12px}
  .calendar-month-title span{font-size:7px}
  .calendar-board-nav{width:28px;height:28px}
  .calendar-week-header span{
    padding:6px 1px;
    font-size:7px;
  }
  .calendar-month-cell{
    min-height:76px;
    padding:3px;
  }
  .calendar-cell-head{min-height:20px}
  .calendar-date-number{font-size:8px}
  .calendar-month-cell.today .calendar-date-number{
    width:20px;height:20px;font-size:8px;
  }
  .calendar-cell-events{
    gap:2px;
    margin-top:1px;
  }
  .calendar-event{
    display:block;
    padding:2px 3px;
    border-left-width:2px;
    border-radius:3px;
    font-size:6.9px;
    line-height:1.15;
  }
  .calendar-event span{display:none}
  .calendar-event b{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .calendar-cell-events .calendar-event:nth-child(n+3){display:none}
  .calendar-more-count{
    display:block;
    padding-left:2px;
    font-size:6.5px;
  }
  .calendar-mobile-count{display:none}

  .calendar-agenda-section{
    scroll-margin-top:132px;
    margin-bottom:10px;
    border-radius:14px;
  }
  .calendar-agenda-head{
    grid-template-columns:48px minmax(0,1fr) 34px;
    gap:9px;
    padding:10px 11px;
  }
  .calendar-agenda-datebox{
    width:46px;height:46px;border-radius:11px;
  }
  .calendar-agenda-datebox b{font-size:18px}
  .calendar-agenda-heading small{font-size:7.5px}
  .calendar-agenda-heading h3{font-size:11px}
  .calendar-agenda-add{width:32px;height:32px;font-size:19px}
  .calendar-agenda-list{padding:3px 9px 8px}
  .calendar-agenda-item{
    grid-template-columns:45px 30px minmax(0,1fr) 14px;
    gap:7px;
    padding:10px 2px;
  }
  .calendar-agenda-time{font-size:8px}
  .calendar-agenda-icon{width:27px;height:27px}
  .calendar-agenda-body b{font-size:9.5px}
  .calendar-agenda-body span{font-size:7.5px}

  /* Sticky week replaces month when user scrolls into agenda */
  .calendar-sticky-week{
    position:sticky;
    top:58px;
    z-index:24;
    display:block;
    max-height:0;
    margin:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    border:0;
    border-radius:0 0 13px 13px;
    background:rgba(255,255,255,.98);
    box-shadow:0 6px 16px rgba(21,58,83,.08);
    transition:max-height .18s ease,opacity .18s ease,padding .18s ease;
  }
  .calendar-pane.calendar-scrolled .calendar-sticky-week{
    max-height:110px;
    padding:6px 6px 7px;
    opacity:1;
    pointer-events:auto;
    border:1px solid #dce6ed;
    border-top:0;
  }
  .calendar-sticky-row{
    display:grid;
    grid-template-columns:28px 1fr 28px;
    align-items:center;
    gap:5px;
    margin-bottom:3px;
  }
  .calendar-sticky-row>b{
    text-align:center;
    color:#426075;
    font-size:8px;
  }
  .calendar-week-nav{
    width:27px;height:24px;padding:0;border:0;background:transparent;color:#5f7586;
  }
  .calendar-week-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:2px;
  }
  .calendar-week-day{
    position:relative;
    min-height:46px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    padding:3px 1px;
    border:0;
    background:transparent;
    color:#667d8d;
  }
  .calendar-week-day span{font-size:6.5px;font-weight:750}
  .calendar-week-day b{
    width:26px;height:26px;
    display:grid;place-items:center;
    border-radius:50%;
    font-size:9px;
  }
  .calendar-week-day.selected b{
    color:#fff;
    background:linear-gradient(135deg,#173f61,#0f8d84);
    box-shadow:0 3px 8px rgba(17,94,110,.16);
  }
  .calendar-week-day.today:not(.selected) b{
    box-shadow:inset 0 0 0 1.5px #16aa9c;
    color:#0e7b72;
  }
  .calendar-week-day i{
    position:absolute;
    right:5px;bottom:2px;
    min-width:13px;height:13px;
    display:grid;place-items:center;
    padding:0 2px;
    border-radius:99px;
    background:#f0edff;
    color:#674ec0;
    font-size:5.5px;
    font-style:normal;
  }
}

/* Very narrow phones */
@media(max-width:390px){
  .workspace{padding-left:5px;padding-right:5px}
  .calendar-month-cell{min-height:70px;padding:2px}
  .calendar-event{font-size:6.2px;padding:2px}
  .calendar-toolbar{grid-template-columns:31px minmax(0,1fr) 31px 62px}
  .mobile-more-grid{grid-template-columns:repeat(4,1fr);gap:5px}
}

/* Landscape phone / small tablet calendar keeps month readable */
@media(min-width:561px) and (max-width:980px){
  .calendar-month-cell{min-height:90px}
  .calendar-event{font-size:7.5px}
  .calendar-agenda-section{max-width:none}
}



/* ==========================================================
   v7.4.1 - Readability & Dashboard priority order
   Phông chữ rõ, thân thiện với người dùng lớn tuổi.
   ========================================================== */
html,body{
  font-family:"Be Vietnam Pro","Segoe UI",Tahoma,Arial,sans-serif;
}
body{
  font-size:15px;
  line-height:1.5;
  font-weight:500;
  letter-spacing:.002em;
}
button,input,select,textarea{
  font-family:inherit;
  font-size:14px;
  line-height:1.4;
}
button{font-weight:650}
.meta{
  font-size:12.5px;
  line-height:1.48;
}
.badge{
  font-size:11.5px;
  font-weight:650;
}
.title h2,
.command-header h2,
.calendar-page-head h2{
  font-weight:800;
  letter-spacing:-.015em;
}
.command-header h2{font-size:25px}
.page-eyebrow{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.115em;
}

/* Sidebar: tăng độ đọc nhưng không làm menu nặng */
.sidebar-brand b{font-size:14px;font-weight:800}
.sidebar-brand small{font-size:11px}
#userBox>b{font-size:17px;line-height:1.35}
#userBox .meta{font-size:11.5px}
.app>aside nav button{
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;
}
.app>aside nav .nav-section-label{
  font-size:9.5px;
  font-weight:800;
}

/* KPI cards trên đầu Dashboard */
.command-kpi small{
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}
.command-kpi b{
  margin-top:5px;
  font-size:28px;
  line-height:1.05;
  font-weight:800;
}
.dashboard-section-title h3{
  font-size:18px;
  font-weight:800;
}
.dashboard-section-title span{font-size:11.5px}

/* Ba khối ưu tiên của Bảng điều hành */
.dashboard-today-task-card{
  background:linear-gradient(180deg,#f9fcff 0%,#fff 52%);
}
.dashboard-today-task-card::before{background:#367cc9}
.dashboard-today-task-card>h3>span{background:#edf6ff}
.dashboard-today-task-card>h3{color:#244d70}

.dashboard-focus-card>h3{
  font-size:15.5px;
  line-height:1.35;
  font-weight:800;
}
.dashboard-focus-item{
  padding-top:11px;
  padding-bottom:11px;
}
.dashboard-focus-item>b,
.dashboard-focus-item .item-title,
.dashboard-focus-item strong{
  font-size:14px;
  line-height:1.42;
  font-weight:750;
}
.dashboard-focus-item .meta{
  margin-top:5px;
  font-size:11.5px;
  line-height:1.5;
}
.dashboard-today-task-item>b{color:#245b84}
.dashboard-empty-note{
  padding:12px 4px;
  font-size:12px;
  color:#7d8f9d;
}

/* Bảng biểu và form: chữ dễ đọc hơn */
.table th,.table td{
  font-size:13.5px;
  line-height:1.45;
}
.table th{
  font-weight:800;
  color:#39566b;
}
.filters label,
.form label{
  font-size:13px;
  line-height:1.4;
}
input::placeholder,textarea::placeholder{
  color:#8c9aa6;
  opacity:1;
}

/* Calendar giữ mật độ thông tin nhưng không quá nhỏ */
.calendar-month-title b{font-size:16px}
.calendar-week-header span{font-size:10px}
.calendar-date-number{font-size:11.5px}
.calendar-event{font-size:9px}
.calendar-event span{font-size:8px}
.calendar-agenda-body b{font-size:12px}
.calendar-agenda-body span{font-size:9.5px}
.calendar-agenda-time{font-size:10.5px}

/* Tablet: icon rail vẫn giữ gợi ý tên qua title/browser, chữ nội dung tăng */
@media(max-width:1100px) and (min-width:761px){
  .workspace{font-size:14.5px}
  .dashboard-focus-card>h3{font-size:14.5px}
  .dashboard-focus-item>b{font-size:13px}
  .dashboard-focus-item .meta{font-size:10.8px}
}

/* Điện thoại: ưu tiên chữ to, rõ; calendar giữ cân đối 7 cột */
@media(max-width:760px){
  body{font-size:14.5px}
  button,input,select,textarea{font-size:13.5px}
  .command-header h2{font-size:20px}
  .meta{font-size:11.5px}
  .command-kpi small{font-size:10.5px}
  .command-kpi b{font-size:23px}
  .dashboard-focus-card>h3{font-size:14px}
  .dashboard-focus-item>b{font-size:12.5px}
  .dashboard-focus-item .meta{font-size:10px}
  .calendar-week-header span{font-size:8px}
  .calendar-date-number{font-size:9.5px}
  .calendar-event{font-size:7.6px}
  .calendar-agenda-body b{font-size:10.5px}
  .calendar-agenda-body span{font-size:8px}
  .calendar-agenda-time{font-size:8.5px}
  .mobile-bottom-nav button>small{font-size:9px}
  .mobile-more-grid button span{font-size:9.5px}
}


/* ==========================================================
   v7.4.2 - Navigation cleanup
   ========================================================== */
.user-quick-actions{
  margin-top:10px;
}
.user-quick-actions button{
  width:100%;
}
#changePassNav{
  color:#dbe9f0;
}
#changePassNav:hover{
  color:#fff;
  background:rgba(255,255,255,.07);
}
.mobile-more-section-label{
  display:none;
}

@media(max-width:760px){
  .mobile-more-section-label{
    display:block;
    margin:11px 3px 5px;
    color:#7b8f9d;
    font-size:8px;
    font-weight:800;
    letter-spacing:.14em;
  }
  .mobile-more-system-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ==========================================================
   v7.4.3 - Admin password reset via Gmail
   ========================================================== */
.user-admin-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.user-admin-actions .sendResetUser{
  color:#0d6f68;
  border-color:#bfe3de;
  background:#effaf8;
}
.user-admin-actions .sendResetUser:hover{
  background:#e5f7f4;
}
.password-reset-admin-box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin-top:8px;
  padding:12px 13px;
  border:1px solid #cfe6e2;
  border-radius:12px;
  background:#f3fbfa;
}
.password-reset-admin-box b{
  display:block;
  color:#17665f;
}
.password-reset-admin-box span{
  display:block;
  margin-top:3px;
  color:#637c8a;
  font-size:11px;
  line-height:1.45;
}
.password-reset-admin-box button{
  color:#fff;
  border-color:#0e8177;
  background:#0e8177;
}
@media(max-width:760px){
  .password-reset-admin-box{grid-template-columns:1fr}
  .password-reset-admin-box button{width:100%}
}


/* ==========================================================
   v7.4.4 - Calendar Quick Entry
   ========================================================== */
.calendar-quick{
  gap:7px;
  padding:9px;
  border-color:#9adfcf;
  background:linear-gradient(180deg,#f0fdf9 0%,#f8fffd 100%);
  box-shadow:0 8px 22px rgba(17,94,89,.10);
}
.calendar-quick.calendar-quick-meeting{
  border-color:#c9bef5;
  background:linear-gradient(180deg,#f7f5ff 0%,#fbfaff 100%);
}
.calendar-quick-head{
  min-height:28px;
  padding-bottom:2px;
}
.calendar-quick-head b{
  font-size:12px;
  font-weight:800;
}
.calendar-quick-close{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  display:grid!important;
  place-items:center;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:50%!important;
  color:#526a78!important;
  background:transparent!important;
  font-size:18px!important;
  line-height:1!important;
  cursor:pointer;
}
.calendar-quick-close:hover{
  border-color:#d4e2e8!important;
  background:#fff!important;
  color:#b42318!important;
}
.calendar-quick>select#cqType{
  border:1px solid #bcd5df;
  background:#fff;
  font-weight:700;
  color:#23485f;
}
.calendar-quick.calendar-quick-meeting>select#cqType{
  border-color:#c9bef5;
  color:#5d49a8;
}
.calendar-quick-people{
  min-width:0;
  padding:7px;
  border:1px solid #dce9e7;
  border-radius:9px;
  background:rgba(255,255,255,.84);
}
.calendar-quick-meeting .calendar-quick-people{
  border-color:#e0daf6;
}
.calendar-quick .picker-heading{
  margin:0 0 6px;
  gap:6px;
}
.calendar-quick .picker-heading b{
  min-width:0;
  font-size:10.5px;
  line-height:1.3;
}
.calendar-quick .picker-heading .badge{
  flex:0 0 auto;
  padding:3px 6px;
  font-size:8px;
  white-space:nowrap;
}
.calendar-quick #cqpQ{
  min-height:31px;
  margin-bottom:5px;
  padding:5px 7px;
  border-radius:7px;
  font-size:10px;
}
.calendar-quick #cqpList.people{
  max-height:156px;
  padding:2px 4px;
  border:1px solid #e3ebef;
  border-radius:7px;
  background:#fff;
  scrollbar-width:thin;
}
.calendar-quick #cqpList .person{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  gap:7px;
  min-height:38px;
  margin:0;
  padding:5px 4px;
  border-bottom:1px solid #eef3f5;
  cursor:pointer;
}
.calendar-quick #cqpList .person:last-child{border-bottom:0}
.calendar-quick #cqpList .person:hover{background:#f7fbfc}
.calendar-quick #cqpList .person input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:checkbox;
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  margin:0!important;
  padding:0!important;
  align-self:center;
  accent-color:#0f8f84;
  cursor:pointer;
}
.calendar-quick-meeting #cqpList .person input[type="checkbox"]{
  accent-color:#7657d6;
}
.calendar-quick #cqpList .person span{
  min-width:0;
  display:block;
  line-height:1.25;
}
.calendar-quick #cqpList .person b{
  display:block;
  overflow:hidden;
  color:#26465a;
  font-size:10.5px;
  line-height:1.3;
  font-weight:750;
  white-space:normal;
  overflow-wrap:anywhere;
}
.calendar-quick #cqpList .person br{display:none}
.calendar-quick #cqpList .person small{
  display:block;
  margin-top:2px;
  color:#778c99;
  font-size:8.5px;
  line-height:1.25;
}
.calendar-quick-row{
  grid-template-columns:minmax(82px,96px) minmax(0,1fr);
}
.calendar-quick-actions button{
  min-height:34px;
  font-size:10px;
  line-height:1.25;
}
.calendar-quick-meeting .calendar-quick-actions .primary{
  background:linear-gradient(135deg,#6751bd,#7c65d8);
  border-color:#6751bd;
}
@media(max-width:760px){
  .calendar-quick{padding:8px}
  .calendar-quick-row{grid-template-columns:1fr}
  .calendar-quick-actions{grid-template-columns:1fr 1fr}
  .calendar-quick #cqpList.people{max-height:170px}
  .calendar-quick #cqpList .person{
    grid-template-columns:18px minmax(0,1fr);
    min-height:40px;
  }
}
@media(max-width:390px){
  .calendar-quick-actions{grid-template-columns:1fr}
}


/* ==========================================================
   v7.4.5 - Dashboard period filters
   ========================================================== */
.dashboard-focus-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:2px;
  padding-bottom:8px;
  border-bottom:1px solid #e8eef2;
}
.dashboard-focus-head h3{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  border-bottom:0!important;
  padding-bottom:0!important;
  font-size:15.5px;
  line-height:1.3;
}
.dashboard-focus-head h3>b{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-weight:800;
}
.dashboard-period-filter{
  flex:0 0 auto;
  min-width:104px;
  min-height:32px;
  padding:5px 28px 5px 9px;
  border:1px solid #d5e2e9;
  border-radius:999px;
  background:#fff;
  color:#466276;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
}
.dashboard-today-task-card .dashboard-period-filter{
  border-color:#cfe1f0;
  background:#f5faff;
  color:#255d87;
}
.dashboard-meeting-card .dashboard-period-filter{
  border-color:#ded7f8;
  background:#f7f5ff;
  color:#6049ab;
}
.dashboard-card-loading{
  padding:14px 4px;
  color:#80919e;
}

@media(max-width:760px){
  .dashboard-focus-head{
    align-items:flex-start;
  }
  .dashboard-focus-head h3{
    font-size:13.5px;
  }
  .dashboard-period-filter{
    min-width:96px;
    min-height:30px;
    padding:4px 24px 4px 8px;
    font-size:9.5px;
  }
}


/* ==========================================================
   v7.4.6 - Attendance responsive overhaul
   Mobile/tablet: mỗi nhân sự là một card, tên luôn hiển thị.
   ========================================================== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Tablet portrait + phone */
@media(max-width:980px){
  /* Header Chấm công gọn hơn */
  #attendance .attendance-header{
    gap:12px;
    padding:15px 16px;
  }
  #attendance .attendance-header h2{
    margin:3px 0 5px;
    font-size:22px;
    line-height:1.25;
  }
  #attendance .attendance-header p{
    margin:0;
    font-size:12px;
    line-height:1.5;
  }
  #attendance .attendance-header .command-header-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:7px;
  }
  #attendance .attendance-header .command-header-actions button{
    width:100%;
    min-height:40px;
    padding:7px 8px;
    font-size:11px;
  }

  /* Tabs */
  #attendance .attendance-subtabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:visible;
  }
  #attendance .attendance-subtabs button{
    min-width:0;
    white-space:normal;
    font-size:11px;
    line-height:1.3;
  }

  /* Chọn ngày / thao tác */
  #attendance .attendance-entry-toolbar{
    display:grid;
    gap:10px;
    padding:12px;
  }
  #attendance .attendance-entry-date-group{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:end;
    width:100%;
    gap:7px;
  }
  #attendance .attendance-entry-date-group>button,
  #attendance .attendance-entry-date-group>label{
    width:100%;
    min-width:0;
  }
  #attendance .attendance-entry-date-group label{
    font-size:11px;
  }
  #attendance .attendance-entry-date-group input{
    width:100%;
    min-width:0;
    min-height:40px;
  }
  #attendance .attendance-entry-date-group>button{
    min-height:40px;
    font-size:11px;
  }
  #attendance .attendance-entry-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    gap:7px;
  }
  #attendance .attendance-entry-actions button{
    width:100%;
    min-height:40px;
    font-size:11px;
  }
  #attendance #attendanceEntrySave{
    grid-column:1/-1;
  }

  #attendance .attendance-entry-note{
    padding:10px 12px;
    font-size:11px;
    line-height:1.55;
  }
  #attendance .attendance-entry-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  #attendance .attendance-entry-stat{
    padding:10px;
  }
  #attendance .attendance-entry-stat small{
    font-size:10px;
  }
  #attendance .attendance-entry-stat b{
    font-size:22px;
  }
  #attendance .attendance-entry-stat b.date{
    font-size:14px;
  }

  /* Bộ lọc */
  #attendance .attendance-entry-filterbar{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:10px;
  }
  #attendance .attendance-entry-filterbar label{
    min-width:0;
    font-size:10px;
  }
  #attendance .attendance-entry-filterbar label:first-child{
    grid-column:1/-1;
  }
  #attendance .attendance-entry-filterbar input,
  #attendance .attendance-entry-filterbar select{
    min-width:0;
    min-height:40px;
    font-size:12px;
  }
  #attendance .attendance-entry-keyboard{
    grid-column:1/-1;
    font-size:9px;
  }

  /* Batch actions */
  #attendance .attendance-batch-bar{
    position:static;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  #attendance .attendance-batch-action,
  #attendance .attendance-batch-status-action{
    display:grid;
    grid-template-columns:minmax(105px,.7fr) minmax(0,1fr);
    width:100%;
    min-width:0;
  }
  #attendance .attendance-batch-status-action{
    grid-template-columns:1fr;
  }
  #attendance .attendance-batch-action input,
  #attendance .attendance-batch-action select,
  #attendance .attendance-batch-action button{
    width:100%;
    max-width:none;
    min-width:0;
    min-height:38px;
  }

  /* ---------- Bảng nhập liệu -> card nhân sự ---------- */
  #attendance .attendance-daily-table-wrap{
    overflow:visible!important;
    border:0;
    background:transparent;
  }
  #attendance .attendance-daily-table{
    display:block;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate;
    border-spacing:0;
  }
  #attendance .attendance-daily-table thead{
    display:none!important;
  }
  #attendance .attendance-daily-table tbody{
    display:grid!important;
    width:100%;
    gap:10px;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row{
    position:relative;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr);
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    overflow:hidden;
    border:1px solid #dbe5ec;
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 10px rgba(25,55,76,.045);
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row.has-data{
    box-shadow:inset 4px 0 0 #8ebce0,0 3px 10px rgba(25,55,76,.045);
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row.dirty{
    background:#fffdf7;
    box-shadow:inset 4px 0 0 #f79009,0 3px 10px rgba(25,55,76,.045);
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row.selected-row{
    background:#f3f8ff;
    box-shadow:inset 4px 0 0 #2e90fa,0 3px 10px rgba(25,55,76,.045);
  }

  /* Reset TOÀN BỘ width/min-width desktop để không đẩy tên ra khỏi màn hình */
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td{
    position:static!important;
    left:auto!important;
    z-index:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box;
    margin:0;
    box-shadow:none!important;
    background:transparent;
  }

  /* Checkbox: cột trái, chiếm phần đầu card */
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(1){
    grid-column:1;
    grid-row:1/3;
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:48px!important;
    min-width:48px!important;
    padding:10px 6px;
    border:0;
    border-right:1px solid #edf1f4;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(1)::before{
    display:none!important;
    content:none!important;
  }
  #attendance .attendance-daily-table .dailySelect{
    appearance:auto;
    -webkit-appearance:checkbox;
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    min-height:20px!important;
    margin:0!important;
    padding:0!important;
    accent-color:#0f7cad;
  }

  /* TT: badge nhỏ dưới checkbox, không chiếm một dòng ngang */
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(2){
    position:absolute!important;
    left:5px!important;
    top:42px!important;
    width:38px!important;
    min-width:38px!important;
    padding:2px 0;
    border:0;
    color:#8293a0;
    text-align:center;
    font-size:9px;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(2)::before{
    content:"#";
    display:inline;
    margin-right:1px;
    color:#a0adb7;
    font-size:8px;
  }

  /* TÊN NHÂN SỰ: luôn hiển thị ở đầu card */
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(3){
    grid-column:2;
    grid-row:1;
    display:block!important;
    padding:10px 11px 2px;
    border:0;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(3)::before{
    display:none!important;
    content:none!important;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(3)>b{
    display:block!important;
    color:#153f5f!important;
    font-size:14px!important;
    line-height:1.35!important;
    font-weight:800!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(3)>small{
    display:block!important;
    margin-top:2px;
    color:#788c9a!important;
    font-size:9px!important;
    line-height:1.35!important;
  }

  /* Tổ/Bộ phận ngay dưới tên */
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(4){
    grid-column:2;
    grid-row:2;
    display:block!important;
    padding:2px 11px 10px;
    border:0;
    color:#4a7187;
    font-size:10px;
    font-weight:700;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(4)::before{
    content:"🏷 ";
    display:inline;
    color:#8a9ca8;
    font-size:9px;
  }

  /* Các trường nhập còn lại full-width dưới header nhân sự */
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(n+5){
    grid-column:1/-1;
    display:grid!important;
    grid-template-columns:132px minmax(0,1fr)!important;
    align-items:center;
    gap:9px;
    width:100%!important;
    min-width:0!important;
    padding:7px 10px;
    border-top:1px solid #edf1f4;
    border-bottom:0;
    font-size:10px;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(n+5)::before{
    content:attr(data-label);
    display:block;
    min-width:0;
    color:#5d7383;
    font-size:10px;
    line-height:1.3;
    font-weight:750;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row input.daily-entry-input,
  #attendance .attendance-daily-table tbody tr.daily-entry-row select.daily-entry-input{
    width:100%!important;
    min-width:0!important;
    height:38px!important;
    min-height:38px!important;
    padding:6px 8px;
    font-size:12px!important;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row .dailyPreview{
    min-width:0;
  }
}

/* Phone */
@media(max-width:600px){
  #attendance .attendance-header{
    padding:13px 12px;
  }
  #attendance .attendance-header h2{
    font-size:20px;
  }
  #attendance .attendance-header p{
    font-size:11px;
  }
  #attendance .attendance-header .command-header-actions{
    grid-template-columns:1fr 1fr;
  }
  #attendance .attendance-header .command-header-actions button:last-of-type{
    grid-column:1/-1;
  }

  #attendance .attendance-entry-date-group{
    grid-template-columns:1fr 1fr;
  }
  #attendance .attendance-entry-date-group label{
    min-width:0;
  }
  #attendance .attendance-entry-date-group input{
    font-size:13px;
  }
  #attendance .attendance-entry-note{
    font-size:10.5px;
  }
  #attendance .attendance-entry-stat b{
    font-size:20px;
  }

  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(n+5){
    grid-template-columns:112px minmax(0,1fr)!important;
    gap:7px;
    padding:7px 9px;
  }
}

/* Very narrow phone */
@media(max-width:390px){
  #attendance .attendance-entry-date-group,
  #attendance .attendance-entry-actions,
  #attendance .attendance-entry-filterbar{
    grid-template-columns:1fr;
  }
  #attendance .attendance-entry-date-group>*,
  #attendance .attendance-entry-actions>*,
  #attendance .attendance-entry-filterbar>*{
    grid-column:1!important;
  }
  #attendance .attendance-daily-table tbody tr.daily-entry-row>td:nth-child(n+5){
    grid-template-columns:100px minmax(0,1fr)!important;
  }
}


/* ==========================================================
   v7.4.7 - Mobile attendance quick-search visibility fix
   ========================================================== */
/* Phải có độ ưu tiên cao hơn card rule `display:grid!important`
   của v7.4.6, nếu không mobile vẫn hiện dòng đã lọc. */
#attendance .attendance-daily-table tbody tr.daily-entry-row.daily-filtered-out{
  display:none!important;
}

.attendance-search-empty{
  margin:10px 0;
  padding:16px 14px;
  border:1px dashed #c9d8e1;
  border-radius:12px;
  background:#f8fbfc;
  color:#627886;
  text-align:center;
  font-size:12px;
  line-height:1.5;
}

#attendance #attendanceEntryQ{
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
#attendance #attendanceEntryQ:not(:placeholder-shown){
  border-color:#65a9d3;
  background:#f8fcff;
  box-shadow:0 0 0 2px rgba(46,144,250,.08);
}

@media(max-width:980px){
  #attendance .attendance-daily-table tbody tr.daily-entry-row.daily-filtered-out{
    display:none!important;
  }
  #attendance .attendance-search-empty{
    font-size:11px;
  }
}


/* ==========================================================
   v7.4.9 - Admin UX, KPI, approvals, compact navigation
   ========================================================== */

/* Logged-in user moves from sidebar to main header */
header{
  gap:12px;
}
.header-user-btn{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width:280px;
  margin-left:auto;
  margin-right:4px;
  padding:7px 11px;
  border:1px solid #d8e5ec;
  border-radius:11px;
  background:#f7fbfd;
  color:#214d69;
  text-align:left;
}
.header-user-btn:hover{
  background:#eef7fb;
  border-color:#bdd6e3;
}
.header-user-btn>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12.5px;
  line-height:1.2;
  font-weight:800;
}
.header-user-btn>small{
  flex:0 0 auto;
  color:#718798;
  font-size:9px;
  line-height:1.2;
  white-space:nowrap;
}

/* Sidebar: desktop compact enough to keep the full menu visible */
@media(min-width:1101px){
  .app{
    grid-template-columns:240px minmax(0,1fr);
  }
  .app>aside{
    padding:12px 10px 8px;
    overflow-y:auto;
  }
  .sidebar-brand{
    gap:9px;
    padding:3px 6px 10px;
    margin-bottom:5px;
  }
  .sidebar-brand-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:11px;
    font-size:18px;
  }
  .sidebar-brand b{font-size:12px}
  .sidebar-brand small{font-size:9px}
  .app>aside nav{gap:2px}
  .app>aside nav .nav-section-label{
    margin:8px 9px 3px;
    font-size:8px;
    line-height:1.2;
  }
  .app>aside nav button{
    min-height:35px;
    padding:6px 9px;
    font-size:11.5px;
    line-height:1.25;
    border-radius:9px;
  }
  .sidebar-copyright{
    margin:5px 6px 2px;
    padding:6px 5px 2px;
    font-size:7.5px;
    line-height:1.35;
  }
}

/* Approval rows: content left, exactly two compact actions at row end */
.approval-content-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.approval-inline-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  align-self:center;
  gap:7px;
  width:auto!important;
}
.approval-inline-actions .approval-btn{
  width:auto!important;
  min-width:84px;
  min-height:34px;
  padding:7px 11px!important;
  flex:0 0 auto!important;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}
.approval-inline-actions .requestRevision{
  min-width:126px;
  background:#fff;
  color:#8a4b00;
  border-color:#f0c98a;
}
.approval-content{
  min-height:38px;
}

/* Staff admin search */
.admin-staff-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.admin-inline-search{
  width:220px;
  min-height:38px;
  padding:8px 10px;
  border:1px solid #cbdce6;
  border-radius:9px;
  background:#fff;
  font:inherit;
}
.admin-inline-search:focus{
  outline:none;
  border-color:#5ba2cf;
  box-shadow:0 0 0 3px rgba(46,144,250,.09);
}
.admin-filter-count{
  margin:0 0 5px;
  padding:0 2px;
}
.staff-code-cell{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
  color:#496779;
  white-space:nowrap;
}
.staff-admin-table-wrap,
.kpi-summary-table-wrap{
  min-width:0;
  overflow:auto;
}

/* KPI explicit month/year controls */
.kpi-month-selector{
  display:grid;
  grid-template-columns:112px 112px;
  gap:7px;
  align-items:end;
}
.kpi-month-selector label{
  display:grid;
  gap:4px;
  color:#667085;
  font-size:8.5px;
  font-weight:700;
}
.kpi-month-selector select{
  width:100%;
  min-height:36px;
  padding:7px 8px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  font:inherit;
}
.kpi-summary-toolbar{
  display:flex;
  justify-content:flex-end;
  margin:-1px 0 8px;
}
.kpi-summary-toolbar label{
  display:grid;
  gap:4px;
  width:min(360px,100%);
  color:#667085;
  font-size:9px;
  font-weight:700;
}
.kpi-summary-toolbar input{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  font:inherit;
}
.kpi-staff-cell{
  display:grid;
  gap:2px;
  min-width:150px;
}
.kpi-staff-cell>b{
  display:block;
  line-height:1.3;
}
.kpi-staff-cell>small{
  display:block;
  color:#81919e;
  font-size:9px;
  line-height:1.25;
  letter-spacing:.02em;
}

/* General mobile/tablet overflow protection */
.workspace,
.pane,
.card,
.title,
.filters,
.adminpane{
  min-width:0;
  max-width:100%;
}

/* Tablet */
@media(max-width:1100px) and (min-width:761px){
  .header-user-btn{
    max-width:180px;
    padding:6px 8px;
  }
  .header-user-btn>span{font-size:10px}
  .header-user-btn>small{display:none}
  .admin-staff-actions{
    width:100%;
  }
  .admin-inline-search{
    flex:1 1 210px;
  }
  .kpi-month-selector{
    grid-template-columns:1fr 1fr;
  }
}

/* Phone re-audit */
@media(max-width:760px){
  header{
    gap:5px;
  }
  .brand{
    flex:1 1 auto;
    min-width:0;
  }
  .brand b{
    max-width:34vw;
  }
  .header-user-btn{
    flex:0 1 86px;
    max-width:86px;
    min-width:0;
    padding:5px 7px;
    border-radius:9px;
  }
  .header-user-btn>span{
    font-size:9px;
  }
  .header-user-btn>small{
    display:none;
  }
  .head-actions{
    flex:0 0 auto;
  }

  .approval-item{
    padding:10px;
  }
  .approval-title{
    display:grid;
    gap:3px;
  }
  .approval-title>b{
    font-size:12.5px;
    line-height:1.35;
  }
  .approval-content-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .approval-content{
    font-size:11px;
    line-height:1.45;
  }
  .approval-inline-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%!important;
  }
  .approval-inline-actions .approval-btn{
    width:100%!important;
    min-width:0;
    font-size:10.5px;
  }

  #admin>.tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:3px;
  }
  #admin>.tabs button{
    flex:0 0 auto;
    white-space:nowrap;
  }
  #staff>.title{
    align-items:stretch;
    flex-direction:column;
  }
  .admin-staff-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .admin-inline-search{
    grid-column:1/-1;
    width:100%;
    min-height:40px;
  }
  .admin-staff-actions .primary{
    grid-column:1/-1;
  }
  .staff-admin-table-wrap,
  .kpi-summary-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .staff-admin-table-wrap table,
  .kpi-summary-table-wrap table{
    min-width:760px;
  }

  .kpi-period-filters{
    grid-template-columns:1fr!important;
  }
  .kpi-month-selector{
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .kpi-finalize-note{
    min-width:0;
  }
  .kpi-summary-toolbar{
    justify-content:stretch;
  }
  .kpi-summary-toolbar label{
    width:100%;
  }
  .kpi-summary-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
    line-height:1.45;
  }

  /* Task list: status labels wrap cleanly instead of exposing/overflowing codes */
  #taskList .item .meta{
    line-height:1.55;
  }
  #taskList .badge{
    white-space:normal;
  }
}

@media(max-width:390px){
  .header-user-btn{
    max-width:70px;
  }
  .release-header-btn{
    padding-left:6px;
    padding-right:6px;
  }
  .admin-staff-actions{
    grid-template-columns:1fr;
  }
  .admin-inline-search,
  .admin-staff-actions .primary{
    grid-column:1;
  }
  .kpi-month-selector{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   v7.5.0 - Nhân sự mở rộng + Nhóm chuyên môn + phân quyền
   ========================================================== */
.scope-legend{
  display:grid;
  gap:5px;
  padding:10px 12px;
  border:1px solid #d9e7ef;
  border-radius:10px;
  background:#f8fbfd;
  color:#597184;
  font-size:11px;
  line-height:1.45;
}
.scope-legend span{
  display:block;
}
.scope-legend b{
  color:#224e69;
}

.staff-homeroom-box{
  display:grid;
  grid-template-columns:auto minmax(180px,1fr);
  gap:10px;
  align-items:end;
  padding:9px 10px;
  border:1px solid #e1eaf0;
  border-radius:10px;
  background:#fbfdfe;
}
.staff-homeroom-box>.checkline{
  margin:0;
  min-height:38px;
  align-items:center;
}
.staff-group-editor{
  background:#fbfefd;
}
.staff-groups-cell{
  display:block;
  max-width:300px;
  color:#41677c;
  line-height:1.35;
  white-space:normal;
}

.unit-picker{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:10px;
}
.unit-picker-section{
  min-width:0;
  padding:8px;
  border:1px solid #e0e9ee;
  border-radius:10px;
  background:#fff;
}
.unit-picker-section .picker-heading{
  margin-bottom:7px;
}
.unit-picker-section .picker-heading small{
  color:#80919d;
  font-size:9px;
}
.unit-department-list,
.unit-group-list{
  display:grid;
  gap:4px;
  max-height:210px;
  overflow:auto;
  padding:2px;
  scrollbar-width:thin;
}
.unit-group-search{
  width:100%;
  min-height:34px;
  margin-bottom:6px;
  padding:6px 8px;
  border:1px solid #d6e2e9;
  border-radius:8px;
  background:#fff;
}
.unit-group-item{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:5px 6px;
  border:1px solid transparent;
  border-radius:8px;
  cursor:pointer;
}
.unit-group-item:hover{
  background:#f5fafb;
  border-color:#e1ecef;
}
.unit-group-item input[type="checkbox"]{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  margin:0!important;
  padding:0!important;
  accent-color:#0f8379;
}
.unit-group-item span{
  min-width:0;
}
.unit-group-item b{
  display:block;
  color:#234d64;
  font-size:11px;
  line-height:1.3;
}
.unit-group-item small{
  display:block;
  margin-top:1px;
  color:#8495a0;
  font-size:8.5px;
  line-height:1.25;
}

/* Calendar quick: phần đơn vị/nhóm phải gọn hơn form đầy đủ */
.calendar-quick .unit-picker{
  grid-template-columns:1fr;
  gap:6px;
}
.calendar-quick .unit-picker-section{
  padding:5px;
}
.calendar-quick .unit-department-list,
.calendar-quick .unit-group-list{
  max-height:110px;
}
.calendar-quick .unit-group-item{
  min-height:32px;
  padding:4px 5px;
}
.calendar-quick .unit-group-item b{
  font-size:9.5px;
}
.calendar-quick .unit-group-item small{
  display:none;
}
.calendar-quick .unit-group-search{
  min-height:30px;
  font-size:9px;
}

/* Admin staff expanded table */
.staff-admin-table-wrap table{
  min-width:1220px;
}
.staff-admin-table-wrap td{
  vertical-align:middle;
}

/* Account form */
#ufRole:not(:disabled),
#ufScope:not(:disabled){
  background:#fff;
  color:#173f59;
  font-weight:700;
}
#ufRole:disabled,
#ufScope:disabled{
  opacity:.72;
}

/* Tablet/mobile */
@media(max-width:980px){
  .unit-picker{
    grid-template-columns:1fr;
  }
  .unit-department-list,
  .unit-group-list{
    max-height:180px;
  }
  .staff-homeroom-box{
    grid-template-columns:1fr;
  }
  .scope-legend{
    font-size:10px;
  }
}

@media(max-width:600px){
  .unit-picker-section{
    padding:6px;
  }
  .unit-group-item{
    min-height:40px;
  }
  .unit-group-item b{
    font-size:10.5px;
  }
  .staff-group-editor .picker-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .staff-group-editor .picker-heading .row-actions{
    width:100%;
    justify-content:space-between;
  }
  .scope-legend{
    padding:9px 10px;
  }
}


/* ==========================================================
   v7.5.1 - Báo cáo quyền xuất, KPI căn hàng, Backup an toàn
   ========================================================== */

/* Báo cáo điều hành: nhân viên nhìn thấy nhưng không thể xuất */
#managementReportExport.role-locked{
  cursor:not-allowed;
  opacity:.58;
  filter:saturate(.55);
  box-shadow:none;
}
#managementReportExport.role-locked:hover{
  transform:none;
}

/* KPI: căn tất cả trường theo cùng baseline trên desktop */
#kpi .kpi-period-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
  margin-bottom:10px;
}
#kpi .kpi-period-filters>label,
#kpi .kpi-month-selector>label{
  display:grid;
  gap:5px;
  margin:0;
  min-width:0;
  color:#667085;
  font-size:9px;
  font-weight:700;
}
#kpi .kpi-period-filters>label>input,
#kpi .kpi-period-filters>label>select,
#kpi .kpi-month-selector>label>select{
  height:38px;
  min-height:38px;
  box-sizing:border-box;
  margin:0;
  padding:7px 9px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  font-size:11px;
  line-height:1.2;
}
#kpi #kpiPeriodType{
  width:165px;
}
#kpi .kpi-month-selector{
  display:flex;
  align-items:flex-end;
  gap:10px;
  width:auto;
}
#kpi .kpi-month-selector>label:first-child{
  width:125px;
}
#kpi .kpi-month-selector>label:last-child{
  width:125px;
}
#kpi #kpiSchoolYearWrap,
#kpi #kpiSemesterWrap,
#kpi #kpiFromWrap,
#kpi #kpiToWrap{
  width:150px;
}
#kpi .kpi-finalize-note{
  flex:1 1 300px;
  min-width:260px;
}
#kpi .kpi-finalize-note input{
  width:100%;
}
#kpi .kpi-summary-toolbar{
  margin-top:2px;
}

/* Backup */
.backup-title{
  align-items:center;
}
.backup-storage-note{
  margin-bottom:10px;
}
.backup-empty{
  padding:14px 2px;
}
.downloadBackupBtn{
  white-space:nowrap;
}
.backup-missing-text{
  color:#b42318;
}
.backup-error-text{
  color:#b42318;
  white-space:normal;
}

/* Tablet */
@media(max-width:1180px){
  #kpi .kpi-period-filters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:end;
  }
  #kpi .kpi-period-filters>label,
  #kpi .kpi-month-selector,
  #kpi .kpi-finalize-note{
    width:100%!important;
    min-width:0!important;
  }
  #kpi .kpi-month-selector{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #kpi .kpi-month-selector>label{
    width:100%!important;
  }
  #kpi .kpi-finalize-note{
    grid-column:1/-1;
  }
}

/* Phone */
@media(max-width:760px){
  #kpi .kpi-period-filters{
    grid-template-columns:1fr;
  }
  #kpi .kpi-month-selector{
    grid-template-columns:1fr 1fr;
  }
  #kpi .kpi-finalize-note{
    grid-column:1;
  }
  #managementReportExport.role-locked{
    width:100%;
  }
  .backup-title{
    align-items:stretch;
    flex-direction:column;
  }
  .backup-title #backupNow{
    width:100%;
  }
}

@media(max-width:390px){
  #kpi .kpi-month-selector{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   v7.5.2 - Lọc Tài khoản + Khôi phục Backup + Chủ đề 4 rõ
   ========================================================== */

/* Tài khoản */
.admin-user-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.admin-user-actions .admin-inline-search{
  width:240px;
}

/* Giao diện công khai - Nguyên tắc 4 rõ */
.public-principle{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 12px;
  margin-top:10px;
  color:rgba(255,255,255,.96);
}
.public-principle>span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#dff8f4;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.14em;
  white-space:nowrap;
}
.public-principle>strong{
  font-size:16px;
  line-height:1.45;
  font-weight:500;
  letter-spacing:.015em;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.08);
}

/* Backup & Khôi phục */
.backup-main-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.danger-outline{
  color:#b42318;
  border-color:#f2b8b5;
  background:#fff;
}
.danger-outline:hover{
  color:#8f1f17;
  border-color:#e99a95;
  background:#fff7f6;
}

.backup-restore-form{
  gap:12px;
}
.backup-restore-warning{
  padding:13px 14px;
  border:1px solid #f3b5b0;
  border-left:4px solid #d92d20;
  border-radius:10px;
  background:#fff7f6;
}
.backup-restore-warning>b{
  display:block;
  margin-bottom:5px;
  color:#9b251c;
  font-size:13px;
}
.backup-restore-warning>p{
  margin:0;
  color:#6e342f;
  font-size:11px;
  line-height:1.5;
}
.backup-restore-steps{
  display:grid;
  gap:6px;
  padding:10px 12px;
  border:1px solid #dce7ed;
  border-radius:10px;
  background:#f8fbfd;
}
.backup-restore-steps>div{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:6px;
  align-items:start;
  color:#526b7b;
  font-size:10.5px;
  line-height:1.4;
}
.backup-restore-steps b{
  color:#0f6f67;
}
.backup-restore-form input[type="file"]{
  min-height:42px;
  padding:7px;
}
.backup-restore-form .danger-btn{
  background:#b42318;
  border-color:#b42318;
  color:#fff;
}
.backup-restore-form .danger-btn:hover{
  background:#8f1f17;
  border-color:#8f1f17;
}

@media(max-width:760px){
  .admin-user-actions{
    display:grid;
    grid-template-columns:1fr auto;
    width:100%;
  }
  .admin-user-actions .admin-inline-search{
    width:100%;
  }

  .public-principle{
    display:grid;
    gap:7px;
    margin-top:9px;
  }
  .public-principle>span{
    justify-self:start;
    font-size:8px;
  }
  .public-principle>strong{
    font-size:13.5px;
    line-height:1.5;
  }

  .backup-main-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .backup-main-actions button{
    width:100%;
  }
}

@media(max-width:420px){
  .admin-user-actions{
    grid-template-columns:1fr;
  }
  .public-principle>strong{
    font-size:12.5px;
  }
  .backup-main-actions{
    grid-template-columns:1fr;
  }
}