/* Reset cơ bản */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Nunito', sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#mainNav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1050;
  background-color: transparent;
  transition: background-color 0.3s ease;
  box-shadow: none;
}

#mainNav .nav-link {
  color: white !important;

  font-weight: 700;
  text-shadow: 1px 1px 2px black;
    color: rgba(255, 255, 255, .9);
  letter-spacing: 0.03em; /* nếu muốn chữ đều và dễ đọc hơn */
}

#mainNav.navbar-shrink {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#mainNav.navbar-shrink .nav-link {
  color: #0f75bd !important;
  text-shadow: none;
}


#mainNav .nav-link:hover,
#mainNav .nav-link:focus{
  color: #0f75bd !important;
  text-shadow: none;
}

/* Style cho link menu đang active */
#mainNav .nav-link.active,
#mainNav .nav-item .nav-link.active {
  color: #0f75bd !important;    /* màu xanh nổi bật */
  text-shadow: none !important;
  border-bottom: 2px solid #0f75bd;  /* gạch chân hoặc viền dưới */
  background-color: rgba(15, 117, 189, 0.1); /* background nhẹ */
  border-radius: 4px;
}

/* Spacer chính giữa body */
main[role="main"] {
  position: relative;
  top: 0;
  margin-top: 0;  /* không đẩy xuống */

  z-index: 1000; /* thấp hơn navbar để navbar đè lên */
  background: transparent; /* hoặc set opacity thấp nếu muốn thấy ảnh nền dưới */
}

/* Footer */
footer {
  flex-shrink: 0;
  background-color: #0f75bd;
  color: white;
  padding: 20px 0;
  font-size: 16px;
  text-align: center;
}

footer a.avl {
  color: white !important;
  font-weight: bold;
  margin: 0 10px;
  text-decoration: none;
}
footer a.avl:hover {
  color: #d5e5ff !important;
}
footer a.disa {
  color: #808080 !important;
  margin: 0 10px;
  pointer-events: none;
  cursor: default;
}

/* Nút primary */
.btn.bg-vl {
  background-color: #0f75bd;
  border: none;
  transition: background-color 0.3s ease;
}
.btn.bg-vl:hover {
  background-color: #0c5c91;
  color: white;
}

/* Header ảnh nền full height */
.masthead {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: calc(100vh); /* trừ nav */
  min-height: 500px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: white;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.masthead img {
  max-width: 100%;
  height: 196px;
}

.masthead h4 {
  text-shadow: 1px 1px 3px black;
  font-weight: bold;
  margin: 1rem 0;
}

/* File: static/css/styles.css */

:root {
  --primary-menu-bg: #0f75bd; /* màu xanh theo ảnh bạn gửi */
}

.navbar.custom-primary {
  background-color: #ffffff !important; /* nền trắng cho navbar */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar.custom-primary .nav-link,
.navbar.custom-primary .navbar-brand span {
  color: #333 !important; /* chữ màu tối cho menu nền trắng */
}


.navbar.custom-primary .nav-link.active {
  background-color: white !important;     /* nền trắng nổi bật */
  color: var(--primary-menu-bg) !important;  /* chữ màu xanh để tương phản */
  font-weight: 600;
  border-radius: 0.25rem;
}

.navbar.custom-primary .nav-link:hover,
.navbar.custom-primary .nav-link:focus {
  color: var(--primary-menu-bg) !important; /* màu xanh khi hover */
  text-decoration: underline;
}

.menu-white-bg {
  background-color: white !important;
  color: #333 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.menu-white-bg .dropdown-item {
  color: #333 !important;
}

.menu-white-bg .dropdown-item:hover,
.menu-white-bg .dropdown-item:focus {
  background-color: #f0f8ff;
  color: #0f75bd !important;
}