/* class.css | หน้าหลักสูตรทั้ง 4 หน้า (class, class1, class2, class3) ใช้ไฟล์นี้ร่วมกัน */

/* ===== หัวข้อหน้า ===== */
.page-head { margin: 2.5rem 0 1.25rem; }
.page-head h1 { color: #800000; font-weight: 700; }
.page-head p  { color: #6c757d; margin-bottom: 0; }

/* แท็บสลับระหว่างหน้าระดับ */
.level-tabs a {
  display: inline-block;
  border: 2px solid #800000;
  border-radius: 2rem;
  padding: .4rem 1.4rem;
  font-weight: 600;
  color: #800000;
  text-decoration: none;
  transition: all .2s;
}
.level-tabs a:hover { background: #f6eaea; }
.level-tabs a.active { background: #800000; color: #fff; }
.level-tabs a:focus-visible { outline: 3px solid #ffd966; outline-offset: 2px; }

/* กล่องแนะนำระดับ */
.level-intro {
  background: #f6eaea;
  border-left: 5px solid #ffd966;
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
}

/* กล่องข้อมูลการเรียนโดยสรุป */
.info-box {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  height: 100%;
  border: 1px solid #e6dcdc;
  border-radius: .75rem;
  padding: 1rem 1.15rem;
}
.info-box > .bi { font-size: 1.6rem; color: #800000; line-height: 1.2; }
.info-box strong { display: block; color: #800000; font-weight: 600; }
.info-box span { color: #555; }

/* ===== หัวข้อแผนกวิชา ===== */
.dept-section { margin-top: 2.5rem; }
.dept-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #800000;
  margin-bottom: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid #f0e0e0;
}
.dept-title::before {
  content: "";
  width: 6px;
  height: 1.8rem;
  background: #ffd966;
  border-radius: 3px;
}
.dept-count {
  margin-left: auto;
  font-size: .85rem;
  font-weight: 500;
  color: #6c757d;
}

/* ===== การ์ดสาขา ===== */
.major-card {
  border: 1px solid #e6dcdc;
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.major-card:hover {
  box-shadow: 0 .5rem 1.25rem rgba(128, 0, 0, .15);
  transform: translateY(-3px);
}

.cover-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #efe6e6;
  cursor: pointer;
  overflow: hidden;
}
.cover-btn img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  transition: transform .3s;
}
.cover-btn:hover img { transform: scale(1.04); }
.cover-btn:focus-visible { outline: 3px solid #ffd966; outline-offset: -3px; }
.cover-badge {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  border-radius: 2rem;
  padding: .25rem .75rem;
  font-size: .85rem;
}

.major-card .card-title { color: #800000; font-weight: 600; font-size: 1.1rem; }
.major-card .card-text  { color: #555; line-height: 1.75; font-size: .95rem; }

/* ป้ายระดับในการ์ด */
.level-tag {
  display: inline-block;
  border-radius: .4rem;
  padding: .1rem .6rem;
  font-size: .8rem;
  font-weight: 700;
  margin-right: .35rem;
}
.level-tag.vc  { background: #800000; color: #fff; }
.level-tag.hvc { background: #ffd966; color: #5c0000; }