/* =====================================================================
   PHẦN MÔN HỌC – giao diện
   Bảng tra cứu cấp học → môn → thầy cô.
   ===================================================================== */

.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.level__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--muc); }
.level__head h3 { font-family: var(--font-sign); font-weight: 700; font-size: 30px; }
.level__head span { color: var(--xam); font-size: 15px; }
.level__row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ke); align-items: baseline; }
.level__subject { display: flex; align-items: center; gap: 10px; font-family: var(--font-sign); font-weight: 700; font-size: 24px; }
.level__subject::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--mon, var(--muc)); flex-shrink: 0; }
.level__teachers { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.level__teachers a { font-weight: 500; text-decoration: underline; text-decoration-color: rgba(200, 35, 43, 0.4); text-underline-offset: 4px; }
.level__teachers a:hover { color: var(--do); text-decoration-color: var(--do); }
.level__muted { color: var(--xam); font-size: 15px; }

@media (max-width: 1000px) {
  .levels { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 640px) {
  .level__row { grid-template-columns: 1fr; gap: 4px; }
}