/* ===== HEADER ===== */
/* HEADER */
.main-header {
    flex: 0 0 50px;
    max-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #007bff, #00c4ff);
    color: white;
    font-size: 20px;
    font-weight: 600;
    padding: 0 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.header-logo {
    max-height: 38px;
    border-radius: 50%;
    border: 2px solid #ffffff88;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.header-logo:hover {
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.header-title {
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
}

.header-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	max-width: 200px; /* giới hạn vùng logo */
}

/* ===== ĐẨY NỘI DUNG XUỐNG DƯỚI HEADER ===== */
body {
	margin: 0;
	padding-top: 50px;
	padding-bottom: 45px; /* chừa chỗ cho footer */
	box-sizing: border-box;
}

/* ===== FOOTER ===== */
.footer-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(90deg, #1a1a1a, #002244);
	color: #f0f0f0;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	padding: 10px 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 999;
}

.footer-left {
	opacity: 0.9;
}

.footer-right {
	margin-right: 30px; /* tùy chỉnh lùi */
}

.footer-right .footer-email {
	color: #66ccff;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-right .footer-email:hover {
	color: #ffffff;
	text-shadow: 0 0 8px #66ccff;
}

.searchable-select {
  position: absolute; /* sẽ được override bằng computed style nếu cần */
  cursor: pointer;
  width: 228px;
  user-select: none;
  box-sizing: border-box;
}

.searchable-select .selected-display {
  display: flex;
  align-items: center;
  height: var(--control-height, 32px);
  width: 228px;
  padding: 6px 8px;
  margin-bottom: var(--control-gap, 10px);
  box-sizing: border-box;
  border: 1px solid gray;
  background: white;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.searchable-select .caret { margin-left: auto; padding-left: 8px; }

.searchable-dropdown { position: absolute; width: 228px; background: white; border: 1px solid #ccc; box-shadow: 0 6px 18px rgba(0,0,0,0.12); z-index: 20000; border-radius: 4px; overflow: hidden; }
.searchable-dropdown .search-input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: none; border-bottom: 1px solid #eee; outline: none; font-size: 13px; }
.searchable-dropdown .options-list { max-height: 240px; overflow-y: auto; padding: 6px 0; margin: 0; list-style: none; }
.searchable-dropdown .options-list li { padding: 6px 10px; cursor: pointer; font-size: 13px; }
.searchable-dropdown .options-list li:hover, .searchable-dropdown .options-list li.active { background: #f0f6ff; }
.searchable-dropdown .option-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.searchable-dropdown .option-row input { margin: 0; flex: 0 0 auto; }
.searchable-dropdown .option-row span { flex: 1 1 auto; }
.hidden-native-select { display: none !important; }