body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
}
@media screen and (max-width: 600px) {
  .action-bar {
  position: fixed;
  bottom: 0;              /* nằm sát mép dưới màn hình */
  left: 0;
  width: 100%;            /* chiếm toàn bộ chiều ngang */
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #fff;       /* nền trắng nổi bật */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* bóng nhẹ */
  z-index: 999;
}

.action-bar .btn {
  font-size: 12px;
}
}
@media screen and (min-width: 768px) {
.action-bar {
  position: fixed;
  top: 50%;              /* giữa theo chiều dọc */
  right: 20px;           /* sát mép phải */
  transform: translateY(-50%); /* căn giữa */
  display: flex;
  flex-direction: column; /* xếp nút theo cột */
  gap: 10px;
  z-index: 999;
}

.action-bar .btn {
  min-width: 140px;
}
}
/* Tô đậm tiêu đề loại */
h4.text-primary {
  font-weight: bold;
  padding: 8px;
  border-left: 5px solid #0d6efd;
}
header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    gap: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a.active {
    text-decoration: underline;
}

main {
    padding: 20px;
    background-color: white;
    min-height: 400px;
}

footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 10px;
}

@media (max-width: 576px) {
  .table th, .table td {
    font-size: 13px;
    padding: 6px;
  }
  .badge {
    font-size: 12px;
  }
  h4 {
    font-size: 18px;
  }
}
/* Card chung */
.card.task-card {
  border-radius: 8px;
  overflow: hidden;
}

/* Trạng thái: nền nhạt theo status */
.card.task-card.chua-xong {
  background-color: #ffe5e5; /* đỏ nhạt */
  border-left: 5px solid #dc3545; /* đỏ */
}

.card.task-card.dang-lam {
  background-color: #fff3cd; /* vàng nhạt */
  border-left: 5px solid #ffc107; /* vàng */
}

.card.task-card.hoan-thanh {
  background-color: #e6ffed; /* xanh nhạt */
  border-left: 5px solid #28a745; /* xanh */
}

/* Tiêu đề công việc */
.card.task-card .card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

/* Nội dung chi tiết */
.card.task-card .card-text {
  font-size: 14px;
  margin-bottom: 8px;
}

/* Badge trạng thái */
.card.task-card .badge {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}

/* Nút hành động */
.card.task-card .btn {
  font-size: 14px;
  padding: 6px;
}