/* CSS Cơ bản cho bố cục */
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.6;
	color: #333;
}
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 50px;
	background-color: #f2f3f5;
	border-bottom: 1px solid #e7e7e7;
}
nav ul {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
}
nav ul li a {
	text-decoration: none;
	color: #555;
	font-weight: bold;
	font-size: 14px;
}
.header-right {
	display: flex;
	align-items: center;
	gap: 15px;
}
.lang-switch a {
	text-decoration: none;
	color: #007bff;
	font-weight: bold;
}
section {
	padding-top: 24px;
	padding-right: 50px;
	padding-bottom: 8px;
	padding-left: 50px;
	border-bottom: 1px solid #eee;
}
#hero {
	background-color: #e3f2fd;
	text-align: center;
	padding: 0px 0px;
}
#hero h1 {
	color: #d32f2f;
	font-size: 2.5em;
}
.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}
footer {
	background-color: #BFDCE5;
	color: black;
	padding: 24px 32px;
}
.footer-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
}
.footer-col {
	flex: 1;
	min-width: 200px;
}
.footer-bottom {
	text-align: center;
	margin-top: 16px;
	padding-top: 10px;
	border-top: 0.5px solid #fff;
}

/* CSS cho thẻ bọc menu (container) */
.main-menu {
  display: flex;             /* Kích hoạt Flexbox */
  justify-content: center;   /* Canh giữa toàn bộ menu ra giữa trang */
  align-items: center;       /* Canh giữa theo chiều dọc (nếu cần) */
  gap: 50px;                 /* Tạo khoảng cách chính xác 50px giữa các item */
  
  /* Reset các style mặc định của thẻ ul */
  list-style-type: none;     
  padding: 0;
  margin: 0;
}

/* CSS cho các link bên trong (tùy chọn thêm để đẹp hơn) */
.main-menu li a {
  text-decoration: none;
  color: #333; /* Màu chữ tùy chỉnh */
  font-weight: normal; /* Kiểu chữ tùy chỉnh */
}

.hotline-number {
  color: red;           /* Đổi màu chữ thành đỏ */
  font-weight: bold;    /* In đậm chữ */
  text-decoration: none; /* Bỏ gạch chân nếu bạn đang dùng thẻ <a> */
}

/* Tùy chọn: Thêm hiệu ứng khi hover (rê chuột vào) nếu dùng thẻ <a> */
.hotline-number:hover {
  color: darkred; 
}

/* Khung chứa banner chính */
.banner-container {
  width: 1024;         /* Chiều rộng cố định theo yêu cầu */
  height: 648px;         /* Chiều cao cố định theo yêu cầu */
  margin: 0px auto;     /* Canh giữa banner trên trang và cách top/bottom 20px */
  overflow: hidden;      /* Ẩn các hình ảnh bị tràn ra ngoài khung 1200px */
  position: relative;
}

/* Thanh trượt chứa các hình ảnh */
.banner-track {
  display: flex;
  width: 200%;           /* Bằng 200% vì có 2 hình (mỗi hình 100%) */
  height: 100%;
  /* Thời gian chạy 1 vòng là 8 giây, lặp lại vô hạn (infinite) */
  animation: autoScroll 8s infinite; 
}

/* Từng khung hình bên trong */
.banner-slide {
  width: 50%;            /* Chiếm 50% của banner-track (tương đương 1200px) */
  height: 100%;
  flex-shrink: 0;
}

/* Đảm bảo hình ảnh hiển thị đẹp, không bị méo */
.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;     
}

/* Hiệu ứng tự động cuộn */
@keyframes autoScroll {
  0%, 40% {
	transform: translateX(0%); /* Hiển thị hình 1 (dừng lại một chút) */
  }
  50%, 90% {
	transform: translateX(-50%); /* Trượt sang hình 2 (dừng lại một chút) */
  }
  100% {
	transform: translateX(0%); /* Trượt lùi về hình 1 để lặp lại */
  }
}

#backToTop {
    position: fixed;           /* Neo cố định trên màn hình */
    bottom: 30px;              /* Cách mép dưới 30px */
    right: 30px;               /* Cách mép phải 30px */
    z-index: 9999;             /* Luôn nằm trên cùng các phần tử khác */
    
    /* Giao diện nút */
    width: 45px;
    height: 45px;
    background-color: #AEC6CF; /* Màu xanh (bạn có thể đổi theo màu chủ đạo web) */
    color: white;              /* Màu mũi tên mũi tên */
    border: none;
    border-radius: 50px;       /* Làm nút hình tròn */
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Tạo bóng đổ nhẹ */
    
    /* Hiệu ứng ẩn/hiện mượt mà */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Hiệu ứng khi di chuột vào nút */
#backToTop:hover {
    background-color: #A8DADC; /* Tối màu hơn một chút */
    transform: translateY(-3px); /* Nhấc nhẹ nút lên tạo hiệu ứng tương tác */
}

/* Lớp này sẽ được JS tự động thêm vào khi cuộn chuột */
#backToTop.show {
    opacity: 1;
    visibility: visible;
}

/* Advisory board horizontal list */
.advisory-board,
#ban_lanh_dao {
	padding: 10px 0 20px;
	text-align: center;
}
.advisory-board p,
#ban_lanh_dao p {
	margin: 0 auto;
}
.advisory-list {
	display: flex;
	gap: 20px;
	/* allow wrap and center when needed */
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	padding-bottom: 8px;
}

/* center the whole advisory-list block on the page */
.advisory-list {
	max-width: 1400px; /* width for 6 items with gaps */
	margin: 0 auto;
}
.advisor-card {
	/* subtract total gaps (5 * 20px = 100px) then divide remaining width by 6 */
	flex: 0 0 calc((100% - 100px) / 6);
	min-width: 0; /* allow shrinking */
	box-sizing: border-box;
	text-align: center;
	padding: 12px;
}
.advisor-card img,
.leader-avatar {
	width: 60%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid #f1f1f1;
	display: inline-block;
}
#ban_lanh_dao .leader-avatar {
	width: 120px;
}
.advisor-card h4 {
	margin: 10px 0 4px;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.advisor-card .role {
	margin: 0;
	color: #666;
	font-size: 0.95rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.advisor-card:hover img,
.leader-card:hover .leader-avatar,
.leader:hover .leader-avatar {
	transform: scale(1.03);
	transition: transform 0.25s ease;
}
#ban_lanh_dao .leader-card:hover,
#ban_lanh_dao .leader:hover {
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.note {
	margin-top: 8px;
	color: #666;
	font-size: 13px;
}
#ban_lanh_dao {
	text-align: center;
}
#ban_lanh_dao .leadership-structure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: 16px;
}
#ban_lanh_dao .leader {
	max-width: 360px;
	width: 100%;
}
#ban_lanh_dao .leader-role {
	margin: 0;
	color: #666;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#ban_lanh_dao .leader-name {
	margin: 0;
	color: #666;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#ban_lanh_dao .vice-leaders {
	display: flex;
	gap: 20px;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	overflow: hidden;
	padding-bottom: 8px;
	max-width: 1400px;
	width: 100%;
	margin: 8px auto 0;
}
#ban_lanh_dao .leader-card {
	flex: 0 0 calc((100% - 80px) / 5);
	min-width: 0;
	box-sizing: border-box;
	padding: 14px 12px;
	text-align: center;
}
#ban_lanh_dao .leader-card .leader-role {
	font-size: 0.95rem;
}
#ban_lanh_dao .leader-card .leader-name {
	font-size: 0.95rem;
}

@media (max-width: 1200px) {
	.advisor-card { flex: 0 0 calc((100% - 80px) / 5); }
}
@media (max-width: 1000px) {
	.advisor-card { flex: 0 0 calc((100% - 60px) / 4); }
	#ban_lanh_dao .vice-leaders {
		flex-wrap: wrap;
		justify-content: center;
	}
	#ban_lanh_dao .leader-card {
		flex: 0 0 calc((100% - 80px) / 4);
	}
}
@media (max-width: 800px) {
	.advisor-card { flex: 0 0 calc((100% - 40px) / 3); }
	#ban_lanh_dao .vice-leaders {
		flex-direction: column;
		align-items: center;
	}
}
@media (max-width: 600px) {
	.advisor-card { flex: 0 0 calc((100% - 20px) / 2); }
	.advisor-card img { width: 50%; }
}