:root {
  --color-Black: #000000;
  --color-Oxford-blue: #14213d;
  --color-Orange: #fca311;
  --color-Platinum: #e5e5e5;
  --color-White: #ffffff;
}

body {
  font-family: "Fira Sans", sans-serif;
  background-color: var(--color-Platinum);
  min-height: 100vh;
  margin: 0;
}

h1 {
  color: var(--color-Oxford-blue);
  text-align: center;
  font-size: 40px;
}

#trangChu {
  background-color: var(--color-Orange);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

#trangChu i {
  color: var(--color-Oxford-blue);
}

#button-tao,
#button-xoa,
#button-ve,
#button-themCanh,
#button-reset {
  border-radius: 5px;
  border: none;
  font-size: 20px;
  width: 40px;
  height: 40px;
  transition: transform 0.2s ease;
}

#button-tao,
#button-themCanh {
  background-color: var(--color-Orange);
}

#button-xoa,
#button-ve,
#button-reset {
  background-color: var(--color-Oxford-blue);
  color: var(--color-White);
}

#button-tao:hover,
#button-xoa:hover,
#button-themCanh:hover,
#button-ve:hover,
#trangChu:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#button-tao:active,
#button-xoa:active,
#button-themCanh:active,
#button-ve:active,
#trangChu:active {
  transform: scale(1.4);
}

#ketLuan, #chuTrinh {
  background-color: var(--color-Orange);
  color: var(--color-Black);
  padding: 10px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 700;
  border-radius: 6px;
}

#maTran table {
  border-collapse: separate;
}

#maTran th {
  font-weight: 700;
  color: var(--color-Black);
  background-color: var(--color-Orange);
}

#maTran th,
td {
  border: 2px solid black;
  padding: 12px;
  text-align: center;
}

#button-chonFile {
  display: flex;
  justify-content: center;
  font-size: 30px;
  width: 60px;
  height: 40px;
  border-bottom: var(--color-White) solid 0px;
  transition: all 0.2s ease;
}

#button-chonFile:hover {
  cursor: pointer;
  color: var(--color-Orange);
  border-bottom: var(--color-Oxford-blue) solid 2px;
  transform: translateY(-5px);
}

#button-chonFile:active {
  transform: translateY(-10px);
}

#file-input {
  text-align: center;
}

input[type="file"] {
  display: none;
}