* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #f2fbf9;
  color: #173b3b;
}

/* Yêu cầu 2: chế độ tối áp cho toàn bộ trang qua class trên thẻ body */
body.che-do-toi {
  background: #0f1f1e;
  color: #d9f0ec;
}

.dau-trang {
  background: #ffffff;
  border-bottom: 1px solid #cfe0dd;
  padding: 18px 0;
}
body.che-do-toi .dau-trang { background: #123230; border-color: #1c4a46; }

.dau-trang-noi-dung,
.khung-trang {
  width: min(900px, 92%);
  margin: 0 auto;
}

.dau-trang-noi-dung {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dau-trang-noi-dung h1 { margin: 0; color: #0f766e; font-size: 22px; }
body.che-do-toi .dau-trang-noi-dung h1 { color: #5eead4; }
.dau-trang-noi-dung p { margin: 4px 0 0; font-size: 14px; }
.dau-trang-noi-dung > div:nth-child(2) { flex: 1; }

.nut-menu, .nut-theme {
  background: #0f766e;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}
.nut-menu:hover, .nut-theme:hover { background: #115e59; }

/* Yêu cầu 3: menu điều hướng thu gọn, mặc định ẩn bằng class "an" */
.menu-dieu-huong {
  width: min(900px, 92%);
  margin: 10px auto 0;
}
.menu-dieu-huong.an { display: none; }
.menu-dieu-huong ul {
  list-style: none;
  display: flex;
  gap: 16px;
  padding: 10px 0 0;
  margin: 0;
  flex-wrap: wrap;
}
.menu-dieu-huong a { color: #0f766e; text-decoration: none; font-weight: bold; }
body.che-do-toi .menu-dieu-huong a { color: #5eead4; }

.khung-trang { padding: 24px 0; }
.khung-trang section { margin-bottom: 28px; }

.o-tim-kiem {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #99b7b3;
  border-radius: 6px;
  font-size: 14px;
}
.thong-bao-nho { color: #64748b; font-size: 13px; margin: 6px 0 0; }

.hang-tieu-de-danh-sach {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
#tong-so { color: #0f766e; font-weight: bold; }
body.che-do-toi #tong-so { color: #5eead4; }

.danh-sach-noi-dung {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.the-noi-dung {
  background: #ffffff;
  border: 1px solid #cfe0dd;
  border-radius: 10px;
  padding: 16px 18px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
body.che-do-toi .the-noi-dung { background: #123230; border-color: #1c4a46; }

/* Yêu cầu 4 (đối chứng CSS thuần): hiệu ứng hover bằng pseudo-class, chỉ
   phản ứng khi chuột đang ở trên phần tử, KHÔNG lưu lại trạng thái. */
.the-noi-dung.hover-css:hover {
  border-color: #0f766e;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.15);
}

/* Class do JavaScript (mouseover/mouseout) thêm/bớt - có thể giữ trạng thái,
   kết hợp logic tùy ý, không chỉ đơn thuần đổi kiểu khi con trỏ đang ở trên. */
.the-noi-dung.noi-bat-js {
  background-color: #ecfdf5;
  transform: translateX(4px);
}
body.che-do-toi .the-noi-dung.noi-bat-js { background-color: #164e46; }

.the-noi-dung.buoi-hien-tai { border-left: 4px solid #f59e0b; }
.the-noi-dung.an-vi-loc { display: none; }

.hang-tieu-de {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.hang-tieu-de h3 { margin: 4px 0 0; }

.nut-chi-tiet {
  padding: 8px 12px;
  border: 1px solid #0f766e;
  border-radius: 6px;
  background: #ffffff;
  color: #0f766e;
  cursor: pointer;
  white-space: nowrap;
}
.nut-chi-tiet:hover { background: #ecfdf5; }
body.che-do-toi .nut-chi-tiet { background: #123230; color: #5eead4; border-color: #5eead4; }

.mo-ta-chi-tiet {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px;
}
.mo-ta-chi-tiet.hien { display: block; }

.hang-nut-mang { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.hang-nut-mang button {
  background: #0f766e;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
}
.hang-nut-mang button:hover { background: #115e59; }

.chan-trang {
  text-align: center;
  padding: 18px 0;
  color: #64748b;
  font-size: 13px;
}