html, body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  background: #000;  
  color: #fff;       
  text-align: center;
  position: relative;
  background-color: transparent;
  cursor: default;
  user-select: none;
  top: 0;
  font-size: 16px;
}

.container {
  width: 100vw;
  max-width: 1200px;
  position: absolute;
}

h1 {
  margin-bottom: 20px;
  font-size: 3em;
  letter-spacing: 1px;
}

/* .sketch-container {
  margin-bottom: 40px;
  position: absolute;
  top: 0px;
} */

.sketch-container {
/*   position: absolute; */
  width: 100%; /* Chiếm toàn bộ chiều rộng */
  margin: 0 auto; /* Canh giữa */
}


canvas {
  position: absolute;
  top: 0;  /* Đặt canvas ở sát mép trên */
  left: 0;  /* Đặt canvas ở sát mép trái */
  z-index: -1;  /* Đảm bảo canvas nằm dưới các phần tử khác */
  width: 100%;  /* Canh ngang chiều rộng */
  height: 100%; /* Canh chiều cao */
}



/* CSS cho phần tử #info-1 chứa hình ảnh Info-1.png */

.headers {
  width: 100vw;
  height: 100vh; /* Chiều cao toàn màn hình */
  position: absolute;
  top: 0;
}

.headers img {
/*   width: 100%; 
  height: auto;
  max-width: 57.55%; 
  display: absolute;  
  top: 3.7%;
  left: 4.17%; */
/*   display: block; */
/*   margin: calc(3.7%) calc(4.17%) 0; */
  
    width: 100%;
  max-width: 57.55%; /* Đặt giới hạn chiều rộng */
  height: auto; /* Duy trì tỷ lệ hình ảnh */
  position: absolute;
  top: 3.7%;
  left: 4.17%;
}

/* Giảm khoảng cách giữa các phần tử trong .info */
.info {
  margin-top: 0px;
  width: 100vw;
  height: 100vh; /* Chiều cao toàn màn hình */
  position: absolute;
  top: 0;
}

#info-1 {
  margin-top: 0;
  width: 100vw;
  height: 100vh; /* Chiều cao toàn màn hình */
  position: absolute;
  top: 0;
}

#info-1 img {
  width: 100%;     
  max-width: 24.58%;
  height: auto;        
  margin: 0;    
  top: 22.22%;
  right: 3.28%;
  position: absolute;
  z-index: 100;
}

#info-2 {
  width: 100%;
  height: 100vh; /* Chiều cao khung bao phủ toàn bộ màn hình */
  padding: 0;
  position: relative; /* Đặt làm tham chiếu */
  bottom: 0;
  left: 0;
}


#info-2 img {
  width: 100%;
  max-width: 25.20%; /* Đặt giới hạn chiều rộng */
  height: auto; /* Duy trì tỷ lệ hình ảnh */
  position: absolute;
  bottom: 3.7%; /* Đẩy sát mép dưới cha */
  left: 4.17%;
  z-index: 100;
}


#info-3 img {
  width: 100%;
  max-width: 25.20%; /* Đặt giới hạn chiều rộng */
  height: auto; /* Duy trì tỷ lệ hình ảnh */
  position: absolute;
  bottom: 3.7%; /* Đẩy sát mép dưới cha */
  right: 3.28%;
  z-index: 100;
}

#button-left {
  width: 100%;
  max-width: 3.125%; /* Đặt giới hạn chiều rộng */
  height: auto; /* Duy trì tỷ lệ hình ảnh */

  position: absolute;
  bottom: 3.7%; /* Đẩy sát mép dưới cha */
  left: 39.58%;
  z-index: 100;
  cursor: pointer;  
}

#button-left img {
  width: 100%;
  cursor: pointer;
}

#button-right img {
  width: 100%;
  max-width: 3.125%; /* Đặt giới hạn chiều rộng */
  height: auto; /* Duy trì tỷ lệ hình ảnh */
  position: absolute;
  bottom: 3.7%; /* Đẩy sát mép dưới cha */
  right: 39.58%;
  z-index: 100;
  cursor: pointer;
}