* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; color: #164e45; background: #f2fbf9; }
a { color: #0f766e; }

/* Header + nav ngang bằng Flexbox, dính khi cuộn (positioning: sticky) */
header#trang-header {
  background: #0f766e; color: #fff; padding: 18px 28px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
header#trang-header h1 { margin: 0; font-size: 1.3rem; }
nav.menu-chinh {
  position: sticky; top: 0; z-index: 10;
  background: #115e59; display: flex; justify-content: center; gap: 22px;
  padding: 10px 16px; flex-wrap: wrap;
}
nav.menu-chinh a { color: #ecfdf5; text-decoration: none; font-weight: 600; }
nav.menu-chinh a:hover { text-decoration: underline; }

main { max-width: 1000px; margin: 0 auto; padding: 26px 20px 50px; }
section { margin-bottom: 30px; }
section > h2 { color: #0f766e; border-bottom: 2px solid #a7f3d0; padding-bottom: 6px; }

/* Khu vực nội dung: lưới thẻ bằng Flexbox, kích thước không đều nhau */
.danh-sach-the { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }
.the {
  position: relative; /* làm gốc cho nhãn absolute bên trong */
  background: #fff; border: 1px solid #a7f3d0; border-radius: 10px;
  padding: 16px 18px; flex: 1 1 220px;
}
.the.the-lon { flex: 2 1 320px; }
.nhan-goc {
  position: absolute; top: -10px; right: -10px;
  background: #f97316; color: #fff; font-size: 0.75rem; font-weight: bold;
  padding: 4px 10px; border-radius: 999px;
}

table.lich-trinh { width: 100%; border-collapse: collapse; background: #fff; }
table.lich-trinh th, table.lich-trinh td { border: 1px solid #a7f3d0; padding: 8px 10px; text-align: left; }
table.lich-trinh th { background: #0f766e; color: #fff; }
table.lich-trinh tr:nth-child(even) td { background: #ecfdf5; }

.khu-vuc-phu { display: flex; gap: 20px; flex-wrap: wrap; }
.khu-vuc-phu > .noi-dung-chinh { flex: 3 1 500px; }
.khu-vuc-phu > aside.khu-vuc-phu-ben { flex: 1 1 260px; }
aside.khu-vuc-phu-ben iframe { width: 100%; border: 1px solid #a7f3d0; border-radius: 8px; }

footer#trang-footer {
  background: #0f766e; color: #ecfdf5; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 20px; padding: 24px 28px;
}
footer#trang-footer .cot-footer { flex: 1 1 200px; }
footer#trang-footer h3 { margin-top: 0; font-size: 1rem; }


form.form-dang-ky, form.form-lien-he {
  background: #fff; border: 1px solid #a7f3d0; border-radius: 10px;
  padding: 20px; max-width: 700px; margin: 0 auto;
}
fieldset { border: 1px solid #99f6e4; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
legend { font-weight: bold; color: #0f766e; padding: 0 6px; }
.truong { margin-bottom: 14px; display: flex; flex-direction: column; }
.truong label { margin-bottom: 5px; font-weight: 600; }
.truong input, .truong textarea { padding: 8px 10px; border: 1px solid #6ee7b7; border-radius: 6px; font-family: inherit; }
.truong input[type="range"] { padding: 0; }
.truong input[type="color"] { padding: 2px; height: 40px; }
.nut-gui { background: #0f766e; color: #fff; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 1rem; }
.nut-gui:hover { background: #115e59; }


/* Buoc 3: bố trí form nhiều cột bằng Flexbox (Buổi 4) */
.form-nhieu-cot { display: flex; flex-wrap: wrap; gap: 20px; max-width: 900px; margin: 0 auto; }
.form-nhieu-cot fieldset { flex: 1 1 260px; }