/* VƯỜN NGOẠI NGỮ v6.15.324 — ENGLISH / CHINESE MANAGEMENT ORGANIZATION
   Presentation layer on top of v6.15.323 stable foundation. */

body.v324-ui .v324-directory-groups{
  display:grid;
  gap:16px;
}
body.v324-ui .v324-language-section{
  overflow:hidden;
  border:1px solid #dce8e3;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 22px rgba(18,66,56,.055);
}
body.v324-ui .v324-language-section.english{
  border-top:4px solid #4b78ca;
}
body.v324-ui .v324-language-section.chinese{
  border-top:4px solid #d86655;
}
body.v324-ui .v324-language-section.unassigned,
body.v324-ui .v324-language-section.tester{
  border-top:3px solid #a8b7b1;
}
body.v324-ui .v324-language-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid #e9f0ed;
  background:linear-gradient(180deg,#fbfdfc,#f8fbfa);
}
body.v324-ui .v324-language-title{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
body.v324-ui .v324-language-title>span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:12px;
  background:#eef5f2;
  font-size:22px;
}
body.v324-ui .v324-language-title>div{
  min-width:0;
}
body.v324-ui .v324-language-title strong,
body.v324-ui .v324-language-title small{
  display:block;
}
body.v324-ui .v324-language-title strong{
  color:#183f36;
  font-size:18px;
  line-height:1.3;
}
body.v324-ui .v324-language-title small{
  margin-top:3px;
  color:#6f8079;
  font-size:13px;
  line-height:1.4;
}
body.v324-ui .v324-language-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
body.v324-ui .v324-language-head-actions>b{
  padding:7px 10px;
  border-radius:999px;
  background:#edf7f4;
  color:#216b5c;
  font-size:12.5px;
  white-space:nowrap;
}
body.v324-ui .v324-language-head-actions button{
  min-height:36px;
  padding:7px 10px;
  border:1px solid #d9e5e0;
  border-radius:10px;
  background:#fff;
  color:#587068;
  font-weight:800;
  font-size:12.5px;
}
body.v324-ui .v324-language-section-body{
  padding:14px;
}
body.v324-ui .v324-language-empty{
  padding:22px 14px;
  text-align:center;
  color:#74857e;
  font-size:14px;
}

/* Keep each language section readable even with many students. */
body.v324-ui .v324-language-section .vnn-directory-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:12px!important;
}
body.v324-ui .v324-language-section .vnn-student-card{
  margin:0!important;
}

/* Shared Teacher language hub. */
body.v324-ui .v324-language-hub{
  display:grid;
  gap:12px;
  margin:0 0 16px;
  padding:15px;
  border:1px solid #d8e6e0;
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#f6fbf9);
  box-shadow:0 7px 20px rgba(18,66,56,.05);
}
body.v324-ui .v324-language-hub-copy{
  display:grid;
  gap:3px;
}
body.v324-ui .v324-language-hub-copy>span{
  color:#2b6c5c;
  font-size:11.5px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:.08em;
}
body.v324-ui .v324-language-hub-copy>strong{
  color:#1b473c;
  font-size:19px;
  line-height:1.3;
}
body.v324-ui .v324-language-hub-copy>small{
  color:#6e8079;
  font-size:13px;
  line-height:1.45;
}
body.v324-ui .v324-language-buttons{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:8px;
}
body.v324-ui .v324-language-buttons button{
  min-height:43px;
  padding:8px 10px;
  border:1px solid #d8e5e0;
  border-radius:11px;
  background:#fff;
  color:#4f6961;
  font-size:13.5px;
  font-weight:850;
}
body.v324-ui .v324-language-buttons button b{
  margin-left:4px;
  font-size:12px;
}
body.v324-ui .v324-language-buttons button.active{
  border-color:#167766;
  background:#167766;
  color:#fff;
  box-shadow:0 7px 16px rgba(22,119,102,.14);
}

body.v324-ui .v324-language-overview,
body.v324-ui .v324-league-language-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
body.v324-ui .v324-language-overview article,
body.v324-ui .v324-league-language-summary article{
  min-width:0;
  padding:12px 13px;
  border:1px solid #e0e9e5;
  border-radius:13px;
  background:#fff;
}
body.v324-ui .v324-language-overview article.english{
  border-left:4px solid #4b78ca;
}
body.v324-ui .v324-language-overview article.chinese{
  border-left:4px solid #d86655;
}
body.v324-ui .v324-language-overview span,
body.v324-ui .v324-league-language-summary span{
  display:block;
  color:#64776f;
  font-size:12px;
  font-weight:850;
}
body.v324-ui .v324-language-overview strong,
body.v324-ui .v324-league-language-summary strong{
  display:block;
  margin-top:3px;
  color:#19473d;
  font-size:23px;
  line-height:1.2;
}
body.v324-ui .v324-language-overview small,
body.v324-ui .v324-league-language-summary small{
  display:block;
  margin-top:3px;
  color:#74867f;
  font-size:12.5px;
}
body.v324-ui .v324-league-language-summary article.active{
  border-color:#8fc9bc;
  background:#f1faf7;
  box-shadow:0 0 0 2px rgba(22,119,102,.07);
}
body.v324-ui .v324-league-scope-note{
  margin:0;
  padding:10px 12px;
  border-radius:11px;
  background:#fff8e8;
  color:#6c6044;
  font-size:12.8px;
  line-height:1.5;
}

/* Small context strip at the top of key management panels. */
body.v324-ui .v324-panel-guide{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:-4px 0 14px;
  padding:9px 11px;
  border:1px solid #e1ebe7;
  border-radius:11px;
  background:#fafcfb;
}
body.v324-ui .v324-panel-guide strong{
  color:#2c6658;
  font-size:13px;
  white-space:nowrap;
}
body.v324-ui .v324-panel-guide span{
  color:#71817b;
  font-size:12.5px;
  line-height:1.4;
  text-align:right;
}

/* When language filtering hides progress rows, do not leave huge gaps. */
body.v324-ui #progressTableWrap .progress-evaluation-row[hidden]{
  display:none!important;
}
body.v324-ui .v324-progress-empty{
  margin-top:10px;
  border:1px dashed #d9e5e0;
  border-radius:12px;
  background:#fbfdfc;
}

/* The grouped student directory is the primary view; top tabs become quick focus controls. */
body.v324-ui #teacher-students .vnn-directory-tabs{
  align-items:stretch;
}
body.v324-ui #teacher-students .vnn-directory-tabs button{
  min-height:42px;
  font-size:13.5px;
}

/* Tablet / narrow desktop */
@media(max-width:1180px){
  body.v324-ui .v324-language-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.v324-ui .v324-panel-guide{
    align-items:flex-start;
    flex-direction:column;
  }
  body.v324-ui .v324-panel-guide span{
    text-align:left;
  }
}

/* Mobile */
@media(max-width:700px){
  body.v324-ui .v324-language-section-head{
    align-items:flex-start;
    flex-direction:column;
  }
  body.v324-ui .v324-language-head-actions{
    width:100%;
    justify-content:space-between;
  }
  body.v324-ui .v324-language-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.v324-ui .v324-language-overview,
  body.v324-ui .v324-league-language-summary{
    grid-template-columns:1fr;
  }
  body.v324-ui .v324-language-section-body{
    padding:10px;
  }
}

@media(max-width:390px){
  body.v324-ui .v324-language-buttons{
    grid-template-columns:1fr;
  }
}