/* Global Styles */

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #f9f9f9;
}

/* Header Styles */
.header {
  background-color: #017E03;
  color: #fff;
  padding: 5px;
  font-size: 12px;
  text-align: center;
}

/* Main Content Styles */
.input-wrapper input[type="text"] {
  font-size: 16px; /* Tăng kích thước font chữ */
  padding: 10px; /* Thêm padding để tăng kích thước và cảm giác khi nhập liệu */
  height: 100px; /* Đặt chiều cao cụ thể cho ô nhập liệu */
  width: 100%; /* Ô nhập liệu sẽ chiếm đầy đủ chiều rộng của container của nó */
  margin-bottom: 10px; /* Thêm khoảng cách dưới ô nhập liệu nếu cần */
  border: 1px solid #ccc; /* Đặt viền cho ô nhập liệu */
  border-radius: 5px; /* Làm tròn góc nếu bạn thích */
}

.instruction-box {
  border: 2px solid #017E03; /* Viền xanh với màu đã được định nghĩa */
  padding: 15px; /* Padding bên trong hộp */
  margin-top: 20px; /* Khoảng cách từ phần tử trên cùng */
  border-radius: 5px; /* Làm tròn góc của hộp */
  background-color: #f9f9f9; /* Màu nền cho hộp, có thể điều chỉnh hoặc bỏ qua */
}

.instruction-box p {
  color: #017E03; /* Màu chữ cho hướng dẫn, phù hợp với viền */
  font-size: 12px; /* Kích thước font cho hướng dẫn */
  text-align: left; /* Căn lề văn bản */
}

.canvas-container {
  width: 70%; /* Hoặc chiều rộng cụ thể nếu bạn muốn */
}

.hw-canvas {
  width: 400px; /* Canvas sẽ chiếm đầy đủ chiều rộng của container */
  height: 300px; /* Canvas sẽ chiếm đầy đủ chiều cao của container */
  border: 5px solid #ccc;
  border-radius: 5px;
}