/* ===== RESET & CƠ BẢN ===== */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #ffffff; /* Nền trắng */
}

header {
  background: #e63946;
  color: white;
  text-align: center;
  padding: 1rem;
}

header .logo {
  font-size: 2rem; /* Kích thước logo */
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Thêm max-width để footer canh cùng chiều ngang với main */
footer {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  color: #000000;
}

main {
  max-width: 800px; /* Giới hạn chiều rộng nội dung */
  margin: 0 auto;   /* Căn giữa nội dung */
  padding: 1rem;   /* Thêm khoảng cách */
}

/* ===== TIMER SECTION ===== */
.timer-section {
  text-align: center;
  padding: 2rem;
}

/* Ba nút chế độ (giữ nguyên ID, script.js sẽ add .active-mode) */
.mode-buttons button {
  margin: 0 0.5rem;
  padding: 0.5rem 1rem;
  border: none;       /* Loại bỏ viền */
  border-radius: 4px; /* Góc bo tròn */
  cursor: pointer;
  color: #fff;
  display: inline-flex; /* Để icon và text trên 1 dòng */
  align-items: center;
  gap: 0.3rem;         /* Khoảng cách icon - text */
}

#work {
  background: #e63946; /* Đỏ */
}
#short-break {
  background: #f4a261; /* Cam nhạt */
}
#long-break {
  background: #7209b7; /* Tím đậm */
}

/* Hiệu ứng nhấp nháy khi nút được script.js gán .active-mode */
@keyframes blink {
  50% { opacity: 0; }
}
.active-mode i {
  animation: blink 1s infinite;
}

/* ===== TIMER HIỂN THỊ ===== */
#timer {
  font-size: 3rem;
  margin: 1rem 0;
  color: #000000;
}

/* ===== CONTROL BUTTONS ===== */
.control-buttons button {
  margin: 0 0.5rem;
  font-size: 1.5rem;
  width: 50px;  /* Kích thước cố định để tròn */
  height: 50px; /* Kích thước cố định để tròn */
  border-radius: 50%;
  border: none;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#start {
  background: #28a745; /* Xanh lá cho Start */
}
#pause {
  background: #007bff; /* Xanh dương cho Pause */
}
#reset {
  background: #6c757d; /* Xám cho Reset */
}

/* ===== TASK SECTION ===== */
.task-section {
  padding: 2rem;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.task-input {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.task-input input[type="text"],
.task-input input[type="number"] {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 1rem;
}

.task-input input[type="number"] {
  width: 50px;
  text-align: center;
}

#add-task {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.5rem;
  cursor: pointer;
}

/* Danh sách công việc */
.task-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  border-bottom: 1px solid #ddd;
}

/* Task đang thực hiện (script.js gán class .active-task) */
.active-task {
  background-color: #f0f8ff; /* Xanh nhạt */
}

/* Icon cho task */
.task-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 10;
}
.task-icons i {
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
  pointer-events: auto;
}
.task-icons i:hover {
  color: #e63946;
}

/* Task đã hoàn thành (script.js gán class .completed) */
.completed {
  text-decoration: line-through;
  color: #888;
}

/* Ẩn task khi toggleCompleted */
.hidden {
  display: none;
}

/* Nút Ẩn/Hiện Task, Cài đặt */
#toggle-completed,
#open-settings {
  background: #ccc;
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  cursor: pointer;
}

/* ===== MODAL ===== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.modal-content {
  background: white;
  margin: 15% auto;
  padding: 2rem;
  width: 80%;
  max-width: 500px;
}

/* Icon trong label modal */
.modal-content label {
  display: block;
  margin: 0.5rem 0;
  font-weight: normal;
  color: #333;
}
.modal-content label i {
  margin-right: 0.3rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  main {
    padding: 0.5rem;
  }
  .task-section {