@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

body {
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
  background-color: #0B1E34;
}

footer { 
	background:#0B1E34; 
	color:#fff; 
	text-align:center; 
	padding:15px; 
	margin-top:30px; 
	}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #0B1E34; /* xanh than đậm */
  color: #EAF6FF; /* xanh nhạt cho chữ */
  padding: 12px 60px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 55px;
}

.logo h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #FFA62B; /* cam nổi bật từ logo */
  letter-spacing: 1px;
}

.menu {
  display: flex;
  gap: 28px;
}

.menu a {
  color: #FFE09C;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  transition: color 0.3s, border-bottom 0.3s;
}

.menu a:hover {
  color: #FFA62B;
  border-bottom: 2px solid #FFA62B;
}

.icons {
  display: flex;
  gap: 20px;
  align-items: center;
}


.icons img {
	vertical-align:center;
	transition: transform 0.3s, opacity 0.3s;
	width: 32px;     /* đổi tùy ý */
    height: auto;
    cursor: pointer;
}


.icons img:nth-child(1) {
  width: 33px;
  height: 33px;
}

 Ảnh thứ hai (facebook)
.icons img:nth-child(2) {
  width: 44px;
  height: 44px;
}



.icons img:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

 body {
font-family: sans-serif;
						background-color: #f5f5f5;
						  text-align: center;
						}

						.gallery {
						  display: grid;
						  grid-template-columns: repeat(4, 1fr);
						  gap: 10px;
						  justify-items: center;
						  max-width: 950px;
						  margin: 0 auto;
						}

						.gallery img {
						  width: 100%;
						  max-width: 300px;
						  height: 200px;
						  object-fit: cover;
						  border-radius: 10px;
						  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
						  cursor: pointer;
						  transition: transform 0.2s;
						}

						.gallery img:hover {
						  transform: scale(1.05);
						}
						
						.pagination {
						  margin-bottom: 20px;       /* 👈 khoảng trống với danh sách ảnh */
						  text-align: center;
						}

						.pagination button {
						  margin: 0 6px;
						  padding: 5px 11px;
						  border: 1px solid #ccc;
						  background: #fff;
						  color: #0B1E34;
						  cursor: pointer;
						  font-size: 15px;
						}
						
						/* Hover – đưa chuột vào (chưa click) */
						.pagination button:hover {
						  background: #354559;   /* 👈 đổi màu nền */
						  color: #fff;        /* 👈 đổi màu chữ */
						  border-color: #354559;
						}

						.pagination button.active {
						  background: #0B1E34;
						  color: #FFE09C;
						  font-weight: bold;
						}

						button {
						  margin-top: 20px;
						  padding: 10px 20px;
						  font-size: 16px;
						  border: none;
						  background-color: #0B1E34;
						  color: white;
						  border-radius: 6px;
						  cursor: pointer;
						}

						button:hover {
						  background-color: #0056b3;
						}

						/* Hộp phóng to ảnh */
						.lightbox {
						  display: none;
						  position: fixed;
						  top: 0;
						  left: 0;
						  width: 100%;
						  height: 100%;
						  background: rgba(0,0,0,0.8);
						  justify-content: center;
						  align-items: center;
						  z-index: 999;
						}

						.lightbox img {
						  max-width: 90%;
						  max-height: 80%;
						  border-radius: 10px;
						  box-shadow: 0 0 20px rgba(255,255,255,0.3);
						}

						.close, .prev, .next {
						  position: absolute;
						  top: 50%;
						  transform: translateY(-50%);
						  background: rgba(255,255,255,0.3);
						  color: white;
						  font-size: 40px;
						  border: none;
						  cursor: pointer;
						  padding: 10px;
						  border-radius: 50%;
						  user-select: none;
						}

						.close {
						  top: 40px;
						  right: 40px;
						  transform: none;
						}

						.prev {
						  left: 50px;
						}

						.next {
						  right: 50px;
						}

						.close:hover, .prev:hover, .next:hover {
						  background: rgba(255,255,255,0.6);
						}
						
.tour-list {
				  display: flex;
				  flex-direction: column;
				  gap: 40px;
				  max-width: 1000px;
				  margin: auto;
				}

				.tour-item {
				  background: white;
				  border-radius: 16px;
				  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
				  padding-bottom: 25px;
				  overflow: hidden;
				  transition: transform .3s ease, box-shadow .3s ease;
				}
				.tour-item:hover {
				  transform: translateY(-5px);
				  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
				}

				/* Ảnh 3 cột ngang */
				.tour-images {
				  display: grid;
				  grid-template-columns: repeat(3, 1fr);
				}
				.tour-images img {
				  width: 100%;
				  height: 220px;
				  object-fit: cover;
				}

				/* Phần thông tin */
				.tour-info {
				  text-align: center;
				  padding: 20px;
				}
				.tour-info h3 {
				  color: #0B1E34;
				  margin-bottom: 10px;
				}
				.tour-info p {
				  color: #555;
				  margin-bottom: 8px;
				  font-size: 15px;
				}
				.tour-info .price {
				  color: #e11d48;
				  font-weight: bold;
				}
				.tour-info button {
				  background: #0B1E34;
				  color: white;
				  border: none;
				  padding: 10px 22px;
				  border-radius: 6px;
				  cursor: pointer;
				  transition: background .3s;
				}
				.tour-info button:hover {
				  background: #2563eb;
				}
				
				.gioithieu {
					color:#2C3144; 
				}
				
				.brand-title {
				  font-size: 35px; /* hoặc 3rem, 4rem tùy ý */
				  font-weight: bold;
				  color: #2C3144;
				}
				
				html {
                  scroll-behavior: smooth;
              }