#teachers #tblTeachers .hg-teacher-link{
  appearance:none;
  display:inline;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--hg-ui-primary);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
#teachers #tblTeachers .hg-teacher-link:focus-visible{
  outline:2px solid var(--hg-ui-primary);
  outline-offset:3px;
}
#teachers #tblTeachers .hg-teacher-empty{
  display:block;
  padding:20px 10px;
  color:var(--hg-ui-muted);
  text-align:center;
  white-space:normal;
}

@media(max-width:900px){
  body.hg-mobile-task-shell #teachers .hg-teacher-list>.hg1734-section-head h2{font-size:20px}
  body.hg-mobile-task-shell #teachers .hg-teacher-list>.hg1734-section-head p{margin-top:4px}
  body.hg-mobile-task-shell #teachers .teacher-list-tools{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:stretch;
    margin-bottom:14px;
  }
  body.hg-mobile-task-shell #teachers .teacher-list-tools #qTeacher{
    width:100%;
    min-width:0;
    min-height:44px;
    margin:0;
    font-size:16px;
  }
  body.hg-mobile-task-shell #teachers .teacher-list-tools [data-teacher-export]{
    width:auto;
    max-width:112px;
    min-height:44px;
    margin:0;
    padding:6px 10px;
    font-size:12px;
    line-height:1.35;
    white-space:normal;
  }
  body.hg-mobile-task-shell #teachers .hg1734-table-wrap:has(>#tblTeachers){
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)){
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0;
    border:0;
    background:transparent;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) thead{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    clip-path:inset(50%);
    white-space:nowrap!important;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) tbody{
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) tbody tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 56px 52px;
    grid-template-areas:"name name id" "phone phone salary" "classes classes classes" "contract edit delete";
    align-items:start;
    gap:10px 8px;
    min-width:0;
    padding:12px!important;
    border:1px solid var(--hg-ui-border)!important;
    border-radius:12px;
    background:var(--hg-ui-surface)!important;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) tbody td{
    display:block!important;
    min-width:0;
    padding:0!important;
    border:0;
    color:var(--hg-ui-text);
    font-size:14px;
    line-height:1.45;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) tbody td::before{
    display:block!important;
    color:var(--hg-ui-muted);
    font-size:11px;
    font-weight:600;
    line-height:1.4;
    margin-bottom:3px;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(1){grid-area:id;text-align:right!important}
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(2){grid-area:name}
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(3){grid-area:phone}
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(4){grid-area:salary}
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(5){grid-area:classes}
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(6){grid-area:edit}
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(7){grid-area:delete}
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(8){grid-area:contract}
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) tbody td:nth-child(3)::before{content:"SĐT"!important}
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) tbody td:nth-child(4)::before{content:"% lương"!important}
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) tbody td:nth-child(5)::before{content:"Lớp phụ trách"!important}
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(3):empty::after{content:"Chưa có SĐT";color:var(--hg-ui-muted)}
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(5):empty::after{content:"Chưa có lớp";color:var(--hg-ui-muted)}
  body.hg-mobile-task-shell #teachers #tblTeachers .hg-teacher-link{
    display:block;
    min-width:44px;
    min-height:44px;
    width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers .hg-teacher-name{
    color:var(--hg-ui-text);
    font-size:17px;
    font-weight:700;
    line-height:1.35;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(1) .hg-teacher-link{
    color:var(--hg-ui-muted);
    font-size:12px;
    text-align:right;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers tbody td:nth-child(1) .hg-teacher-link::before{content:"ID ";font-size:10px}
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) tbody td:nth-child(n+6){
    align-self:end;
    padding-top:10px!important;
    border-top:1px solid var(--hg-ui-border);
  }
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) .btn{
    width:100%;
    min-width:44px;
    min-height:44px;
    margin:0;
    padding:6px;
    border-radius:8px;
    font-size:12px;
    line-height:1.3;
    white-space:normal;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers .hg17424-contact{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers .hg17424-contact-actions{
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) .hg17424-contact-action.btn{
    width:44px;
    height:44px;
    padding:4px;
  }
  body.hg-mobile-task-shell #teachers #tblTeachers tbody tr:has(.hg-teacher-empty){
    display:block!important;
    grid-column:1/-1;
  }
}
@media(min-width:601px) and (max-width:900px){
  body.hg-mobile-task-shell #teachers #tblTeachers:has(thead th:nth-child(5)) tbody{grid-template-columns:repeat(2,minmax(0,1fr))}
}