body {
          font-family: Arial, sans-serif;
          /* Đặt font chữ chung */
          background-color: #f4f4f9;
          /* Màu nền của trang */
          display: flex;
          /* Sử dụng Flexbox để căn chỉnh nội dung */
          justify-content: center;
          /* Căn giữa nội dung theo chiều ngang */
          align-items: center;
          /* Căn giữa nội dung theo chiều dọc */
          height: 100vh;
          /* Chiều cao bằng 100% chiều cao màn hình */
          margin: 0;
          /* Bỏ lề mặc định của body */
      }

      /* ----- KHUNG CHỨA CHÍNH CỦA ỨNG DỤNG ----- */
      .container {
          background: white;
          /* Nền màu trắng */
          padding: 25px;
          /* Khoảng cách từ viền vào trong */
          border-radius: 8px;
          /* Bo tròn các góc */
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          /* Tạo hiệu ứng đổ bóng mờ */
          width: 90%;
          /* Chiều rộng chiếm 90% trang */
          max-width: 500px;
          /* Nhưng không rộng quá 500px để giao diện không bị vỡ */
      }

      /* ----- TIÊU ĐỀ "Todo List" ----- */
      h1 {
          text-align: center;
          /* Căn chữ ra giữa */
      }

      /* ----- FORM NHẬP LIỆU (chứa ô input và nút Add) ----- */
      #todo-form {
          display: flex;
          /* Sắp xếp ô input và nút nằm trên cùng một hàng */
          margin-bottom: 20px;
          /* Khoảng cách với danh sách công việc ở dưới */
      }

      /* ----- Ô ĐỂ NHẬP CÔNG VIỆC MỚI ----- */
      #task-input {
          flex-grow: 1;
          /* Tự động lấp đầy không gian còn trống trên hàng */
          padding: 10px;
          /* Đệm bên trong cho chữ dễ đọc */
          border: 1px solid #ddd;
          /* Viền màu xám nhạt */
          border-radius: 4px;
          /* Bo tròn góc nhẹ */
      }

      /* ----- NÚT "Add" ----- */
      #todo-form button {
          padding: 10px 15px;
          /* Kích thước của nút */
          border: none;
          /* Bỏ viền mặc định */
          background-color: #28a745;
          /* Nền màu xanh lá */
          color: white;
          /* Chữ màu trắng */
          border-radius: 4px;
          /* Bo tròn góc */
          cursor: pointer;
          /* Biến con trỏ thành hình bàn tay khi di chuột vào */
          margin-left: 10px;
          /* Khoảng cách với ô input bên trái */
      }

      /* ----- DANH SÁCH HIỂN THỊ CÁC CÔNG VIỆC (thẻ <ul>) ----- */
      #task-list {
          list-style-type: none;
          /* Bỏ dấu chấm đầu dòng mặc định của danh sách */
          padding: 0;
          margin: 0;
      }

      /* ----- MỖI DÒNG CÔNG VIỆC (thẻ <li>) ----- */
      #task-list li {
          padding: 12px;
          border-bottom: 1px solid #eee;
          /* Đường kẻ ngăn cách giữa các công việc */
          display: flex;
          /* Sắp xếp chữ và nút Delete trên cùng một hàng */
          justify-content: space-between;
          /* Đẩy chữ và nút Delete ra hai phía */
          align-items: center;
          /* Căn giữa chúng theo chiều dọc */
          cursor: pointer;
          /* Hiệu ứng con trỏ khi di chuột vào */
      }

      /* ----- ĐỊNH DẠNG CHO CÔNG VIỆC KHI ĐƯỢC ĐÁNH DẤU LÀ "completed" ----- */
      #task-list li.completed {
          text-decoration: line-through;
          /* Tạo hiệu ứng gạch ngang chữ */
          color: #888;
          /* Chuyển chữ thành màu xám */
      }

      /* ----- NÚT "Delete" ----- */
      .delete-btn {
          background-color: #dc3545;
          /* Nền màu đỏ */
          color: white;
          /* Chữ màu trắng */
          border: none;
          padding: 8px 12px;
          border-radius: 4px;
          cursor: pointer;
      }