/* ============================================================
   PATH2CAMPUS — DIEM CHUAN (TRA CỨU ĐIỂM CHUẨN) STYLES
   Phụ thuộc: variables.css, base.css, components.css
   ============================================================ */


/* ------------------------------------------------------------
   HERO + SEARCH
   ------------------------------------------------------------ */
.diem-chuan-hero {
  padding-block: var(--space-9) var(--space-6);
  background-color: var(--color-bg-alt);
}


/* ------------------------------------------------------------
   DANH SÁCH KẾT QUẢ TÌM TRƯỜNG
   ------------------------------------------------------------ */
.school-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 720px;
  margin-inline: auto;
}

/* .school-card đã định nghĩa layout cơ bản ở components.css —
   bổ sung thêm phần con số/mũi tên cho ngữ cảnh riêng trang này */
.school-card {
  cursor: pointer;
  background-color: var(--color-bg);
  justify-content: space-between;
}

.school-card__info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

.school-card__text {
  min-width: 0;
}

.school-card__arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.school-card:hover .school-card__arrow {
  color: var(--color-crimson);
  transform: translateX(4px);
}


/* ------------------------------------------------------------
   HEADER BẢNG ĐIỂM (tên trường đã chọn + nút quay lại)
   ------------------------------------------------------------ */
.score-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.score-header h2 {
  margin-bottom: var(--space-1);
}

@media (max-width: 639px) {
  .score-header {
    flex-direction: column;
  }

  .score-header .btn {
    align-self: flex-start;
  }
}


/* ------------------------------------------------------------
   BẢNG ĐIỂM — điều chỉnh riêng cho trang này
   (cột bị ẩn động bằng JS thông qua thuộc tính data-col-hidden,
   không cần class CSS riêng — logic nằm ở diem-chuan.js)
   ------------------------------------------------------------ */
.score-table th[data-hidden],
.score-table td[data-hidden] {
  display: none;
}

.score-table__year-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-navy-tint-90);
  color: var(--color-navy);
  border-radius: var(--radius-sm);
}

/* Badge "Dự kiến" gắn cạnh năm — dùng .badge--du-kien có sẵn ở
   components.css, style riêng cho vị trí trong bảng */
.score-table .badge--du-kien {
  margin-left: var(--space-2);
  font-size: 10px;
  padding: 1px var(--space-2);
}


/* ------------------------------------------------------------
   TRẠNG THÁI RỖNG / LOADING — canh giữa toàn khối
   ------------------------------------------------------------ */
#loadingState,
#emptyState {
  padding-block: var(--space-8);
}