.navbar-dark .navbar-brand img.navbar-brand-img-2 {
  display: none;
}

.navbar-dark .navbar-brand img.navbar-brand-img-1:hover, .navbar-dark .navbar-brand img.navbar-brand-img-2:hover {
    transform: scale(1.1);
	transition: background-color 0.2s ease-in-out; /* Hiệu ứng chuyển màu nền mượt mà */
    filter: drop-shadow(2px 4px 6px black);
}

.job-Title-custom:hover::after, #about .title-about:hover::after {
	width: auto;
	transition: background-color 0.2s ease-in-out; /* Hiệu ứng chuyển màu nền mượt mà */
	background: #fed136 !important;
}

@media (min-width: 992px) {
    .dark-green .navbar-shrink {
        background-color: #14b1bb !important;
    }
	.dark-green .navbar-shrink .navbar-brand img.navbar-brand-img-1 {
		display: none;
	}
	.dark-green .navbar-shrink .navbar-brand img.navbar-brand-img-2 {
		display: inline-block;
	}
	
    .pagination li[role="menuitem"] > a, 
    .pagination-sm li[role="menuitem"] > a
    {
        color: #14b1bb ;
    }

    .pagination>.active>a, 
    .pagination>.active>a:focus, 
    .pagination>.active>a:hover, 
    .pagination>.active>span, 
    .pagination>.active>span:focus, 
    .pagination>.active>span:hover{
        background-color: #14b1bb !important;
        border-color: #14b1bb !important;
        color: #fff;
    }
}

@media (min-width: 768px){
    .dark-green .navbar-shrink,
    #share ul li a {
        background-color: #012d45!important;
    }

    .pagination li[role="menuitem"] > a, 
    .pagination-sm li[role="menuitem"] > a {
        color: #012d45 ;
    }

    #about .share-infomation ul li i,
    #recentjobs .jobs a {
        color: #012d45 !important;
    }

    .pagination>.active>a, 
    .pagination>.active>a:focus, 
    .pagination>.active>a:hover, 
    .pagination>.active>span, 
    .pagination>.active>span:focus, 
    .pagination>.active>span:hover {
        background-color: #012d45 !important;
        border-color: #012d45!important;
        color: #fff !important;
    }

    .job-Title-custom::after,
    #about .title-about::after {
        background: #012d45 !important;
    }
}

.btn-primary-search {
    color:white;
    background-color: #0080b7;
    border-color: #0080b7;
}

    .btn-primary-search:hover {
        background-color: #3293c2;
        color: #fff;
       
    }
.online-search-group .button-toggle {
    color: #0080b7;
    position:relative;
}
.online-search-group .button-toggle i.fa{
    font-size: 9pt;
    top: 1px;
    position: absolute;
    left: -18px;
}
.custom--combox-kendo .k-widget.k-combobox {
    padding:0 !important;
}

@media (min-width: 768px) {
    .online-search-group .search-left-p0 {
        padding-left: 0;
    }
    .online-search-group .search-right-p0 {
        padding-right: 0;
    }
    .online-search-group .search-button-control {
        padding-left: 0;
    }
}

/* Định nghĩa màu tùy chỉnh dựa trên ảnh */
:root {
  --custom-border-color: #222; /* Màu xanh tím của border */
  --custom-text-color: #222;   /* Màu xanh tím của text */
  --custom-icon-color: #e65100;   /* Màu cam/đỏ của icon */
  --custom-hover-bg: #f0f0f0;   /* Màu nền xám nhạt khi hover */
}

/* about.html */
.custom-about-journey .custom-link-box {
	display: block; /* Để thẻ <a> chiếm toàn bộ chiều rộng nếu cần */
	transition: background-color 0.2s ease-in-out; /* Hiệu ứng chuyển màu nền mượt mà */
	font-size: 23px;
	text-transform: uppercase;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: "Montserrat", Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 1.1;
}

.custom-about-journey .custom-link-box .border-custom {
  /*border-color: var(--custom-border-color) !important;*/ /* Ghi đè màu border mặc định */
  border: none !important;
  padding-left: 0px !important;
}

.custom-about-journey .custom-link-box .text-custom {
  color: var(--custom-text-color);
}

.custom-about-journey .custom-link-box .icon-custom {
  color: var(--custom-icon-color);
  font-size: 1.2rem; /* Chỉnh kích thước icon nếu cần */
}

/* CSS mới cho icon mũi tên */
.custom-about-journey .custom-link-box .icon-arrow {
  color: var(--custom-text-color); /* Hoặc màu khác bạn muốn */
  font-size: 1rem; /* Chỉnh kích thước nếu cần */
  opacity: 0.7; /* Làm mờ đi một chút */
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Hiệu ứng hover cho icon mũi tên */
.custom-about-journey .custom-link-box:hover .icon-arrow {
  opacity: 1; /* Rõ hơn khi hover */
  transform: translateX(3px); /* Di chuyển nhẹ sang phải */
}

/* Hiệu ứng Hover */
.custom-about-journey .custom-link-box:hover .border-custom {
  background-color: var(--custom-hover-bg);
  /* Tùy chọn: Giữ màu border hoặc thay đổi */
  /* border-color: darken(var(--custom-border-color), 10%); */
}

/* Đảm bảo text và icon không bị đổi màu không mong muốn khi hover thẻ a */
.custom-about-journey .custom-link-box:hover .text-custom {
    color: var(--custom-text-color);
}

.container img.content-about-img-quymogpg {
  max-width: 30vw;
}

.container img.content-about-img-hstgpg {
/*  max-width: 60vw; */
    max-width: -webkit-fill-available;
}

.container img.content-about-img-quymogpg:hover, .container img.content-about-img-hstgpg:hover {
	transform: scale(1.05);
	transition: background-color 0.3s ease-in-out;
}

.container .custom-about-iframe-urlmap {
  max-width: 45vw;
}

.custom-about-journey .content-about-journey-detail {
	display: grid;
	/* Tạo 2 cột bằng nhau */
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 20px; /* Khoảng cách dọc và ngang giữa các mục */
	flex-wrap: wrap; /* Cho phép xuống hàng nếu không đủ chỗ */
	margin: 0 auto; /* Căn giữa container */
}

.custom-about-journey .content-about-journey-detail img.content-about-img-journey {
	max-width: 30vw;
	border-radius: 5px;
}

.custom-about-journey .content-about-journey-detail img.content-about-img-journey:hover {
	transition: background-color 0.3s ease-in-out;
}

.custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 {
	line-height: 1.6;
}

.custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 .content-about-journey-detail-text {
	margin-bottom: 20px; /* Khoảng cách trước nút CTA */
	margin-top: auto; /* Đẩy phần body xuống nếu header ngắn */
}

.custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 h3
, .custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 h4 {
	margin: 0 auto;
}

.custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 .content-about-journey-detail-text-title {
	font-size: 1.4em; /* Kích thước tiêu đề chính */
	font-weight: 600; /* Độ đậm */
	color: #0d2c5a; /* Màu xanh đậm (ước lượng từ ảnh) */
	margin: 0; /* Bỏ margin mặc định */
}

.custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 .content-about-journey-detail-text-subtitle {
	font-size: 1.05em; /* Kích thước tiêu đề phụ */
	font-weight: bold; /* In đậm */
	color: #212529; /* Màu đen nhạt */
	margin-top: 0;
	margin-bottom: 10px; /* Khoảng cách dưới tiêu đề phụ */
}

.custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 .content-about-journey-detail-text-description {
	font-size: 0.95em; /* Kích thước mô tả */
	line-height: 1.6; /* Giãn dòng cho dễ đọc */
	color: #495057; /* Màu xám cho mô tả */
	margin: 0;
}

@media (max-width: 1400px) {

	.container img.content-about-img-quymogpg {
		max-width: 40vw !important;
	}
	
	.container img.content-about-img-journey {
		max-width: 42vw !important;
	}

	.container img.content-about-img-hstgpg {
		max-width: 80vw !important;
	}
	
	.container .custom-about-iframe-urlmap {
		max-width: 90vw !important;
	}
}

@media (max-width: 1280px) {

	.container img.content-about-img-quymogpg {
		max-width: 38vw !important;
	}
	
	.container img.content-about-img-journey {
		max-width: 40vw !important;
	}

	.container img.content-about-img-hstgpg {
		max-width: 90vw !important;
	}
	
	.container .custom-about-iframe-urlmap {
		max-width: 90vw !important;
	}
}

@media (max-width: 575.98px) {
	.custom-about-journey .custom-link-box .border-custom {
		padding: 0.75rem !important; /* p-2 của Bootstrap */
	}
	.custom-about-journey .custom-link-box .text-custom {
		font-size: 1.1rem; /* Giảm cỡ chữ một chút */
	}
	.custom-about-journey .custom-link-box .icon-custom {
		font-size: 1.1rem; /* Giảm cỡ icon một chút */
	}
  
	.container img.content-about-img-quymogpg {
		max-width: 90vw !important;
	}
	
	.container img.content-about-img-journey {
		max-width: 90vw !important;
	}

	.container img.content-about-img-hstgpg {
		max-width: 90vw !important;
	}
	
	.container .custom-about-iframe-urlmap {
		max-width: 90vw !important;
	}
}

/* Tạo css About */
.content-about-custom-grid {
	display: grid;
	/* Tạo 2 cột bằng nhau */
	grid-template-columns: repeat(2, 1fr);
	gap: 15px; /* Khoảng cách giữa các card */
}

.content-about-custom-grid .group-card {
	background-color: #ffffff; /* Nền trắng cho card */
	border: 1px solid #e0e0e0; /* Viền xám nhạt */
	border-radius: 5px; /* Bo góc nhẹ */
}

.content-about-custom-grid .group-card:hover {
	border-image-source: linear-gradient(145deg, #6f86d6, #48c6ef);
    border-width: 1px;
    border-style: solid;
    border-image-slice: 1;
	transition: background 0.3s ease, transform 0.2s ease;
	transform: scale(1.03); /* Hiệu ứng phóng to nhẹ */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.content-about-custom-grid .card-header {
	display: flex; /* Icon và tiêu đề chính nằm trên 1 hàng */
	align-items: center; /* Căn giữa icon và tiêu đề theo chiều dọc */
	margin-bottom: 10px; /* Khoảng cách dưới header */
}

.content-about-custom-grid .card-icon {
	/* width: 50px; */
	/* height: 50px; */
	flex-shrink: 0; /* Không co icon lại */
	/* Nếu dùng ảnh: */
	/* object-fit: contain; */
}

.content-about-custom-grid .card-icon img {
	/* Đặt kích thước icon mong muốn */
	width: 60px;
	height: 60px;
	margin-right: 15px; /* Khoảng cách giữa icon và tiêu đề */
	flex-shrink: 0; /* Không cho icon bị co lại */
}

.content-about-custom-grid .card-icon svg {
	width: 100%;
	height: 100%;
	fill: #4a5f8a; /* Màu icon tương đối */
}

.content-about-custom-grid .card-icon .icon-placeholder {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: #e0e0e0;
	border: 1px dashed #ccc;
	text-align: center;
	line-height: 50px;
	font-size: 10px;
	color: #888;
	border-radius: 4px;
}

.content-about-custom-grid .card-title {
	font-size: 1.2em; /* Kích thước tiêu đề chính */
	font-weight: 600; /* Độ đậm */
	color: #0d2c5a; /* Màu xanh đậm (ước lượng từ ảnh) */
	margin: 0; /* Bỏ margin mặc định */
}

.content-about-custom-grid .card-title-link {
	text-decoration: none; /* Bỏ gạch chân của link */
	color: #3f51b5; /* Màu xanh tím cho tiêu đề */
	/* Hoặc dùng màu: #4a5f8a; */
}

.content-about-custom-grid .card-title-link:hover {
	text-decoration: underline; /* Thêm gạch chân khi hover */
}

.content-about-custom-grid .card-body {
	/* Phần thân không cần style đặc biệt trừ khi cần */
}

.content-about-custom-grid .card-subtitle {
	font-size: 1.05em; /* Kích thước tiêu đề phụ */
	font-weight: bold; /* In đậm */
	color: #212529; /* Màu đen nhạt */
	margin-top: 0;
	margin-bottom: 10px; /* Khoảng cách dưới tiêu đề phụ */
}

.content-about-custom-grid .card-description {
	font-size: 1em; /* Kích thước mô tả */
	line-height: 1.6; /* Giãn dòng cho dễ đọc */
	color: #495057; /* Màu xám cho mô tả */
	margin: 0;
}

/*Tìm hiểu thêm TCT*/
.content-about-action-more .action-container {
    /* display: flex;*/ /* Đặt các phần tử trên cùng một hàng */
    align-items: center; /* Căn giữa các phần tử theo chiều dọc */
    /* gap: 30px;*/ /* Khoảng cách giữa nút và link */
	text-align: right;
}

/* Định dạng chung cho cả nút và link */
.content-about-action-more .action-container a {
    text-decoration: none; /* Bỏ gạch chân */
    display: inline-flex; /* Để icon và text căn chỉnh tốt */
    align-items: center;
    color: #0d2c5a; /* Màu xanh navy đậm (ước lượng) */
}

/* Định dạng riêng cho nút "Tìm hiểu thêm" */
.content-about-action-more .btn-find-more {
    border: 1.5px solid #0d2c5a; /* Viền màu xanh navy */
    padding: 5px 10px; /* Khoảng đệm bên trong nút */
    background-color: #fff; /* Nền trắng */
    border-radius: 4px; /* Bo góc nhẹ */
    transition: background-color 0.2s ease, color 0.2s ease; /* Hiệu ứng khi hover */
}

.content-about-action-more .btn-find-more span {
    margin-right: 10px; /* Khoảng cách giữa chữ và icon */
}

.content-about-action-more .btn-find-more .icon-arrow {
    font-size: 0.7em; /* Làm icon mũi tên nhỏ hơn */
}

/* Hiệu ứng khi di chuột vào nút */
.content-about-action-more .btn-find-more:hover {
    background-color: #0d2c5a; /* Đổi nền thành màu xanh */
    color: #fff; /* Đổi chữ thành màu trắng */
}

/* Định dạng riêng cho link "Hồ sơ năng lực" */
.content-about-action-more .link-profile {
    font-weight: 500; /* Có thể làm chữ đậm hơn một chút */
}

.content-about-action-more .link-profile .icon-doc {
    margin-right: 8px; /* Khoảng cách giữa icon và chữ */
    font-size: 1em; /* Kích thước icon chuẩn */
}

/* Hiệu ứng khi di chuột vào link */
.content-about-action-more .link-profile:hover {
    text-decoration: underline; /* Thêm gạch chân khi hover */
}

/* Responsive: Cho màn hình nhỏ hơn, chuyển thành 1 cột */
@media (max-width: 768px) {
	.content-about-custom-grid, .custom-about-journey .content-about-journey-detail {
		grid-template-columns: 1fr; /* Chỉ 1 cột */
	}
	.content-about-custom-grid .group-card {
		padding: 10px;
	}
	.content-about-custom-grid .card-title
	, .custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 .content-about-journey-detail-text-title {
		font-size: 1.1em;
	}
	.content-about-custom-grid .card-subtitle
	, .custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 .content-about-journey-detail-text-subtitle {
		font-size: 1.0em;
	}
	.content-about-custom-grid .card-description
	, .custom-about-journey .content-about-journey-detail .content-about-journey-detail-2 .content-about-journey-detail-text-description {
		font-size: 0.9em;
	}
}

/*Recruitment*/
.recruitment-section-subheading, .about-section-subheading {
	color: #2C3690 !important;
	line-height: 1.6; /* Giãn dòng cho dễ đọc */
	/* width: 100vw; */
    /* margin: 4vh -20vw; */
}

#contact {
	height: 100vh;
	padding: 150px 0;
	/* Đảm bảo section có vị trí tương đối để chứa lớp giả tuyệt đối */
    position: relative;
	/* Đảm bảo nội dung chính nằm phía trên lớp giả background */
    z-index: 1;
    /* Cần một màu chữ nổi bật trên nền mờ, ví dụ màu trắng */
    color: #fff; /* Điều chỉnh màu chữ nếu ảnh nền của bạn sáng */
}

#contact::before {
    content: ""; /* Bắt buộc với pseudo-element */
    /* Thiết lập vị trí tuyệt đối để phủ kín phần tử cha #contact */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Đặt ảnh nền */
    background-image: url(../img/map-image-1.png) !important;
    /* Đảm bảo ảnh bao phủ toàn bộ kích thước */
    background-size: cover;
    /* Căn giữa ảnh */
    background-position: center;
    /* Ngăn lặp lại ảnh */
    background-repeat: no-repeat;
    /* Áp dụng hiệu ứng làm mờ */
    filter: blur(2px); /* Điều chỉnh giá trị '8px' để thay đổi mức độ mờ */
    /* Đặt lớp giả background xuống dưới nội dung chính */
    z-index: -1;
}

/* Tạo nền cho phần nội dung text để nó nổi bật hơn trên nền mờ */
/* Áp dụng cho .container hoặc một div bọc nội dung bên trong container nếu cần kiểm soát chặt chẽ hơn */
#contact .container {
    /* Đảm bảo container nằm trên lớp giả */
    position: relative;
    z-index: 2; /* Đảm bảo cao hơn z-index của ::before */
    /* Thêm nền bán trong suốt để nội dung dễ đọc */
    /* Sử dụng RGBA: R, G, B (màu trắng 255,255,255), A là alpha (độ trong suốt 0-1) */
    background-color: rgba(255, 255, 255, 0.8); /* Nền trắng 80% trong suốt */
    /* Hoặc nền đen 80% trong suốt nếu text màu trắng */
    /* background-color: rgba(0, 0, 0, 0.8); */
    /* Thêm padding bên trong container để tạo khoảng trống cho nền */
    padding: 30px; /* Điều chỉnh nếu cần */
    /* Bo góc nhẹ cho nền container (tùy chọn) */
    border-radius: 10px;
    /* Đảm bảo màu chữ bên trong container nổi bật trên nền container */
    color: #333; /* Màu chữ đen trên nền trắng bán trong suốt */
}

/* Đảm bảo các phần tử text cụ thể bên trong container có màu nổi bật */
#contact .container h2,
#contact .container h3 {
     color: #333; /* Đảm bảo tiêu đề có màu sắc phù hợp với nền container */
}

/* Các phần tử form cũng cần màu chữ phù hợp */
#contact .container input,
#contact .container textarea {
     color: #333; /* Màu chữ nhập liệu */
     background-color: rgba(255, 255, 255, 0.9); /* Nền input bán trong suốt */
     border-color: #ccc; /* Viền input */
}

#contact .container input::placeholder,
#contact .container textarea::placeholder {
    color: #666; /* Màu placeholder */
}

#contact .container .help-block {
    color: #a94442; /* Giữ màu đỏ cho lỗi validation nếu cần */
}

#contact .container button {
    /* Tùy chỉnh style nút để nổi bật hơn */
    margin-top: 20px; /* Khoảng cách trên nút */
}

/* Responsive: Cho màn hình nhỏ hơn*/
@media (max-width: 768px) {
	.recruitment-section-subheading, .about-section-subheading {
		width: auto;
		margin: 5vh auto !important;
		font-size: 1em !important;
	}
	#contact {
		padding: 5vh 0px;
		height:  110vh;
	}
}