/* Buổi 6 - BTTL: kế thừa toàn bộ CSS từ buổi 2 đến buổi 5 (Box Model, selector, Flexbox, focus) */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #1f2937;
  background: #f2fbf9;
  line-height: 1.6;
}
a { color: #0f766e; }
img { max-width: 100%; }

header#main-header {
  padding: 22px 24px;
  color: #ffffff;
  background: #0f766e;
}
header#main-header h1 { margin: 0 0 6px; font-size: 26px; }
header#main-header p { margin: 0; color: #ccfbf1; }

/* Flexbox: thanh điều hướng */
nav.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 12px 24px;
  list-style: none;
  background: #115e59;
}
nav.main-nav a {
  color: #ecfdf5;
  text-decoration: none;
  font-weight: bold;
}
nav.main-nav a:hover,
nav.main-nav a:focus { text-decoration: underline; }

main { max-width: 980px; margin: 0 auto; padding: 24px; }
section { margin-bottom: 28px; }
h2 { color: #0f766e; border-bottom: 2px solid #99f6e4; padding-bottom: 6px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}
th, td { border: 1px solid #99f6e4; padding: 10px 12px; text-align: left; }
th { background: #0f766e; color: #ffffff; }
tbody tr:nth-child(even) { background: #ecfdf5; }

/* Danh sách nội dung học phần - dùng lại làm hook cho querySelectorAll ở buổi 6 */
ul#danhSachBuoiHoc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.buoi-hoc {
  padding: 12px 16px;
  border-left: 5px solid #0f766e;
  border-radius: 6px;
  background: #ffffff;
}
.buoi-hoc .ten-buoi { font-weight: bold; color: #0f766e; }
.buoi-hien-tai {
  border-left-color: #d97706;
  background: #fffbeb;
}
.buoi-hien-tai .ten-buoi::after {
  content: " (đang học)";
  color: #b45309;
  font-weight: normal;
}

/* Form: bố cục nhiều cột bằng Flexbox (buổi 4) + focus style (buổi 3) */
form { max-width: 760px; }
fieldset {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #ffffff;
}
legend { padding: 0 8px; color: #0f766e; font-weight: bold; }
.hang-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}
.truong {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 6px;
}
.truong.full { flex-basis: 100%; }
label { font-weight: bold; }
input, textarea, select {
  padding: 9px 10px;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25);
}
button[type="submit"] {
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  background: #0f766e;
  font-size: 15px;
  cursor: pointer;
}
button[type="submit"]:hover { background: #115e59; }
button[type="submit"]:focus { outline: 3px solid #99f6e4; }

footer#main-footer {
  padding: 16px 24px;
  color: #ecfdf5;
  background: #115e59;
  text-align: center;
}
footer#main-footer a { color: #ecfdf5; }

.ghi-chu-jsdemo {
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 6px;
  color: #92400e;
  background: #fef3c7;
  font-size: 14px;
}
.tong-so {
  margin-top: 10px;
  font-weight: bold;
  color: #0f766e;
}