@font-face {
  font-family: "CustomLED";
  src: url("fonts/pixel.ttf") format("truetype");
}


.custom-input-green {
  --h: 50px;

  height: var(--h);
  font-size: calc(var(--h) * 0.95);
  line-height: var(--h);
  padding: 0;
  width: calc(var(--h) * 2);

  background-color: #003300;
  color: #00ff00;
  border: 2px solid #00ff00;
  text-align: center;
  font-family: "CustomLED", monospace;
  box-sizing: border-box;

  outline: none; /* ẩn viền mặc định */
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Khi được focus */
.custom-input-green:focus {
  border-color: #66ff66;
  box-shadow: 0 0 8px #00ff00;
}



.custom-input-red {
  --h: 50px;

  height: var(--h);
  font-size: calc(var(--h) * 0.95);
  line-height: var(--h);
  padding: 0;
  width: calc(var(--h) * 2);

  background-color: #330000;
  color: #ff4444;
  border: 2px solid #ff4444;
  text-align: center;
  font-family: "CustomLED", monospace;
  box-sizing: border-box;
}