.layout-wrapper {
    position: relative;
    max-width: 1440px;
    min-height: 100vh;
    height: auto;
    margin: 0 auto;    /* Đẩy xuống giữa + canh giữa ngang */
    width: 100%;
  }

  .nen2{
    position:absolute;
    top:40px;
    left:30px;
    width:400px;
    height: auto;
    border-radius: 10px;
    z-index:10px;
  }


.header{
    position:absolute;
    top:80px;
    left:320px;
    width:923px;
    height: auto;
    z-index: 30px;
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; /* tuỳ chọn: bo góc nhẹ */
}
  
.main-container {
  position: absolute;
  top: 195px;
  left: 320px;
  width: 920px; /* tăng từ 910 lên 920 */
  height: 600px;
  z-index: 30;
  background-color: rgba(127, 197, 255, 0.5);
  box-shadow: inset 4px 4px 15px 20px rgba(216, 235, 255, 0.3);
  border: 2px solid #419cca;
  overflow-y: scroll;
}

#gallery {
  display: flex;
  gap: 15px;
  padding: 25px;
  box-sizing: border-box;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.column img {
  width: 100%;       /* chiều ngang theo cột */
  height: auto;      /* giữ đúng tỉ lệ */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  display: block;
}


.navigation-container{
    position:absolute;
     display: flex;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  gap: 0;
    top:148px;
    left:320px;
    width:920px;
    height: 45px;
    z-index: 29px;
    background-color: rgba(127, 197, 255, 0.5); /* #B9E9FB với opacity 50% */
    border: 2px solid #419cca;
 
}

.nav-button {
  background-color: rgba(127, 197, 255, 0.5);
  border: 1px solid #419cca;
  border-radius: 0; /* Bo góc nếu cần đồng đều */
  padding: 6px 10px;
  height: 45px;
  font-size: 16px;
  color: #0d4e7d;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.6); /* ánh sáng bên trong */
}

.nav-button:hover {
  background-color: rgba(127, 197, 255, 0.8);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.8);
}

.stamps-container{
    position:absolute;
    top:796px;
    left:320px;
    width:920px;
    height: 92px;
    z-index: 30px;
    background-color: rgba(127, 197, 255, 0.5); /* #B9E9FB với opacity 50% */
    box-shadow: inset 4px 4px 15px 20px rgba(216, 235, 255, 0.3); /* inner shadow với #E8F3FF và opacity 30% */
    
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 2px solid #419cca;
    overflow: hidden;
    display: flex;
    white-space: nowrap; /* Đảm bảo các stamps không xuống dòng */
}

.stamp-marquee {
    width: 100%;
    overflow: hidden;
    height: 90px; /* Chiều cao của các hình ảnh */
    position: relative;
  }
  
  .stamp-track {
    display: flex;
    animation: scroll-stamp 8s linear infinite; /* Tốc độ cuộn */
    width: max-content; /* Đảm bảo chiều dài tự động điều chỉnh */
  }
  
  .stamp {
    height: 90px; /* Chiều cao của mỗi hình ảnh */
    margin-right: 5px; /* Khoảng cách giữa các hình */
    flex-shrink: 0; /* Ngăn hình ảnh co lại */
  }

  @keyframes scroll-stamp {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

.dolphin{
    position:absolute;
    top:400px;
    left:30px;
    width:280px;
    height: auto;
    z-index: 30px;
}

.computer{
    position:absolute;
    top:670px;
    left:60px;
    width:330px;
    height: auto;
    z-index: 30px;
}

.goldfish{
    position:absolute;
    top:800px;
    left:20px;
    width:160px;
    height: auto;
    z-index: 30px;
}

.nemo{
    position:absolute;
    top:740px;
    left:260px;
    width:60px;
    height: auto;
    z-index: 40px;
}