* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

li {
  display: inline-block; 
}
.top-bar {
  display: flex;
  justify-content: space-between; /* Đẩy Logo sang trái, cụm menu + đồng hồ + nút sang phải */
  align-items: center;
  padding: 0 20px;

  background-color: #333;
  

  background-image: linear-gradient(
    to bottom, 
    rgba(255, 255, 255, 0.3) 0%,  
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(0, 0, 0, 0.1) 50%,       
    rgba(0, 0, 0, 0.2) 100%
  );

  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); 
  
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.nav-link {
  color: #eee;
  text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  padding: 0 15px;

  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); 
}


.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
}
.nav-right-group {
  display: flex;
  align-items: center;
  gap: 20px; /* Khoảng cách giữa menu, đồng hồ và nút */
}
.logo-text {
  color: #ffffff;
  text-decoration: none;
  font-family: "Trebuchet MS", Helvetica, sans-serif; 
  font-size: 20px; 
  font-weight: bold;
  padding: 0 20px;
  

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 5px rgba(255, 255, 255, 0.2);

  display: flex;
  align-items: center;
}



/* Button */

.glossy-button {

  background-color: #2e8ece;
  

  background-image: linear-gradient(
    to bottom, 
    rgba(255, 255, 255, 0.5) 0%,  
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(0, 0, 0, 0.1) 50%,       
    rgba(0, 0, 0, 0.2) 100%        
  );


  border-radius: 8px;
  border: 1px solid #1a5a8a;
  

  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    0 2px 4px rgba(0, 0, 0, 0.3);           


  color: white;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
  padding: 10px 20px;
  cursor: pointer;
}

.glossy-button:hover {
  background-color: #3ca0e6;
  filter: brightness(1.1);
}



.vintage-clock-container {
  color: #ffff00; 
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 5px 15px;
  
 
  text-shadow: 2px 2px 0px #000, 0 0 8px rgba(255, 255, 0, 0.6);
  
  background: rgba(0, 0, 0, 0.4);
  border-radius: 15px; 
  border: 1px inset rgba(255, 255, 255, 0.2);
  display: inline-block;
}

#clock-text {
  color: #ffffff; 
}



/* Welcome to my site text */

.container {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

img {
    display: inline-block;
    margin: 5px;
}

h1 {
    font-size: 48px;
    color: yellow;
    text-shadow: 3px 3px 5px red;
}

h2, h3, h4, h5, h6 {
  color: yellow;
  text-shadow: 3px 3px 5px red;
}

p {
  color: #ffd800;
  text-shadow: 1px 1px 0 #ff0000;
  font-size: 14px;
  line-height: 1.5;
}