/*
Theme Name: Arkhitekton Child
Theme URI: https://neuronthemes.com/arkhitekton
Description: This is a child theme of Arkhitekton
Author: NeuronThemes
Author URI: https://neuronthemes.com
Template: arkhitekton
Version: 1.0.0
*/
/*css cho transparent header*/
/* Transparent header styles */
/* Container chính của header */
 body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}
.about-content, .contact-wrapper {
    flex: 1;
}
.wp-caption {
	    margin: 0 auto;
    text-align: center;
			width: 100% !important
}
.wp-caption-text {
	  font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: #2c2b2f;
	  text-align: left;
		font-style: italic;
}
.antdesign-logo-social-head-page {
    display: block;
    text-align: center;
		margin: 2.778vw 0;
}
.antdesign-logo-social-head-page .logo {
    height: 6.16666667rem;
}
.antdesign-logo-social-head-page .brand {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.41666667rem;
    letter-spacing: -0.04em;
    color: #245E8F;
    padding: 0.83333333rem;
}
.antdesign-logo-social-head-page .social-link {
    font-size: 1.33333333rem;
    line-height: 2.5rem;
}
/*about page*/
.about-content {
    text-align: center;
    padding: 0 8.33vw;
}
.about-content .intro {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8.33333333rem;
} 
.about-content p {
	text-align: center;
}
.about-content .intro p {
    margin: 0;
    font-weight: 700;
    color: #2C2B2F;
}
.about-content h1 {
    padding: 4.16666667rem 0 1.66666667rem 0;
    color: #F56F10;
}
.about-content .about-description p {
    margin: 0;
    font-weight: 500;
    font-size: 1.66666667rem;
    line-height: 2.5rem;
    color: #2C2B2F;
}
.about-content .contact-info-about {
    margin-bottom: 5rem
}
.about-content .contact-info-about p {
    color: #878787;
    margin: 1.66666667rem 0;
    font-weight: 500;
}
/* contact*/
/* Khối chứa toàn bộ */
.antdesign-contact-headline {
	    padding: 4.55vw 3.472222222vw;
}
.antdesign-contact-headline h1, .antdesign-blog-headline h1 {
	  text-transform: none;
    border-bottom: 0.125rem solid #2c2b2f;
    padding-bottom: 0.83333333rem;
    margin: 0;
}
.antdesign-contact-headline p, .antdesign-blog-headline p {
		font-size: 2rem;
    font-weight: 700;
    line-height: 2.41666667rem;
    letter-spacing: -0.04em;
    margin: 0.83333333rem 0 0 0;
    color: #2c2b2f;
}
.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1.66666667rem;
  padding: 0 3.472222222vw 4.55vw;
  align-items: stretch; /* Hai cột cao bằng nhau */
  justify-content: space-between;
}

/* Cột trái: ảnh + info */
.contact-images-info {
  display: flex;
  gap: 1.66666667rem;
  width: 41.66%;
}

.contact-images {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  border-right: 0.08333333rem solid #2C2B2F;
  padding-right: 1.66666667rem;
}

.rectangle-image {
  width: 11.0466018424vw;
  height: 7.77vw;
  object-fit: cover;
}
.m-site-search .m-site-search__content .m-site-search__content__inner .m-site-search__form input[type="search"] {
    border-bottom: 0.125rem solid #ffffff;   
}
.antdesign-contact-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.83333333rem;
  border-right: 0.08333333rem solid #2C2B2F;
  flex: 1;
}

.antdesign-contact-info .text-wrapper,
.contact-details p {
  font-size: 1.66666667rem;
  font-weight: 500;
  color: #2C2B2F;
  margin: 0.41666667rem 0;
}
.antdesign-contact-info p {
	text-align: left;
}
/* Cột phải: form */
.contact-form {
  width: 55%;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* Cao bằng cột trái */
}

.contact-form form {
  display: flex;
  flex-direction: column;
  height: 100%; /* Đảm bảo form chiếm toàn bộ chiều cao */
  flex: 1; /* Cho phép form co giãn */
}

/* Tiêu đề */
.contact-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.41666667rem;
  letter-spacing: -0.04em;
  margin-bottom: 0.83333333rem;
}

/* Hàng input Tên + SĐT */
.form-row {
  display: flex;
  gap: 0.83333333rem;
  margin-bottom: 0.83333333rem;
}

.form-row .form-field {
  flex: 1;
}

/* Textarea chiếm toàn bộ khoảng trống */
.textarea-wrapper {
  flex: 1 1 auto; /* Chiếm toàn bộ không gian còn lại */
  display: flex;
  margin-bottom: 0.83333333rem;
		border: 0.08333333rem solid #2B2C2F;

}

.textarea-wrapper textarea {
  flex: 1 1 auto;
  min-height: 0; 
  resize: none; 
  overflow: hidden;
  width: 100%; 
  margin: 0;
  padding: 0.83333333rem;
  box-sizing: border-box;
}

/* Input chung */
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.83333333rem;
  margin: 0;
}
.form-field input {
	border: 0.08333333rem solid #2B2C2F;
} 
.form-field textarea {
	border: 0.08333333rem solid white;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
font-weight: 400;
font-size: 1.25rem;
line-height: 1.5rem;
color: #878787;
}
/* Nút gửi - Đẩy sang góc phải */
.contact-form .form-field button {
  align-self: flex-end; /* Đẩy sang phải trong container */
  margin-left: auto; /* Đẩy hoàn toàn sang góc phải */
  background: #fff;
  color: #2C2B2F !important;
  font-weight: 600;
  border: 0.08333333rem solid #2B2C2F;
  padding: 0.83333333rem 1.66666667rem;
  font-size: 1.66666667rem;
  cursor: pointer;
  text-transform: none;
	float: right;
}
/* CSS spinner */
.spinner {
  width: 1.33333333rem;
  height: 1.33333333rem;
  border: 0.125rem solid #2C2B2F;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 0.66666667rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Button khi đang loading */
button.submit-btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
}
/* project */
.antdesign-project-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    height: calc(55vh - 5.08333333rem);
		margin-bottom: 0.208333333vw;
    background: url('https://antdesign.vn/logo-icon/antdesign-coming-soon.jpg') center center/cover no-repeat;
	
}
.antdesign-project-container h1 {
    margin-bottom: 3.472vw;
    font-size: 6.667vw;
    font-weight: 500;
    line-height: 9.75rem;
    letter-spacing: 0.02em;
    color: #d8d8d8;
}
/* Tabs titles */
.custom-tabs-titles{
list-style: none;
    margin: 0;
    padding: 0;
    display: flex
;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3.472vw;
    height: 4.861vw;
	  padding-top: 0.347222222vw;
    border-top: 0.125rem solid #2c2b2f;
}
.custom-tabs-titles .tab-title{
		cursor: pointer;
    padding: 0;
    color: #2c2b2f !important;
    font-size: 1.66666667rem;
    font-weight: 500;
    line-height: normal;
    border-bottom: 0.125rem solid transparent;
    margin-bottom: 0;
}
.custom-tabs-titles .tab-title.active{border-color:#2c2b2f;
font-weight: 700;
}
.custom-tabs-titles .tab-title:hover {
	font-weight: 700;
}

/* Hide inactive tab */
.custom-tabs-content .tab-content{display:none!important;}
.custom-tabs-content .tab-content.active{display:block!important;}

/* Loading */
.loading{padding:3.33333333rem 0;text-align:center;font-style:italic;color:#777;}



.project-posts-grid {
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.684vw;
    padding: 0.684vw 3.472222222vw;
	min-height: 48.244vw;
}
.project-post-link {
	text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
.project-post-item {
  position: relative;
  overflow: hidden;           /* cắt overlay vượt ra ngoài */
}
.project-post-thumbnail img {
		width: 100%;
    height: 23.78vw;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* khi hover bài viết ➜ hiện overlay */
.project-post-item:hover .overlay {
  opacity: 1;
  pointer-events: auto;
}
.project-info-title {
	text-align: center;
}
.project-info-title h3 {
		font-weight: 700;
    color: #fff;
    font-size: 2rem;
    line-height: 2.41666667rem;
    letter-spacing: -0.04em;
}
/* tiêu đề & tag */
.project-title { margin: 0 0 1rem; font-size: 1.25rem; }
.project-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.project-tag  { font-size: .8125rem; background:#fff2; padding:0.16666667rem 0.66666667rem; border-radius:0.25rem; }

/* Blog Posts Container */
.antdesign-blog-headline {
	padding: 8.333vw 3.472vw 0
}
.antdesign-blog-container, .antdesign-single-container {
	    justify-content: space-between;
    display: flex;
    padding: 5.55vw 8.33vw 0;
    gap: 3.472vw;	
}
.antdesign-blog-container{
    padding: 5.55vw 8.33vw 0;
}
.antdesign-single-container {
    padding: 3.472vw 8.33vw 0;
}
.blog-posts-container {
    display: flex;
    justify-content: space-between;
	    gap: 1.389vw;
}
.ant-single-content {
    display: block;
}
.blog-posts-container, .ant-single-content {
    width: 70.83%;
	    margin-bottom: 1.389vw;
}
.column-odd,
.column-even {
    width: 50%;
}

.blog-post-item {
    margin-bottom: 1.389vw;
    border: 0.08333333rem solid #878787;
}
.blog-post-thumbnail {
	 border-bottom: 0.08333333rem solid #878787;
}
.blog-post-thumbnail img {
    display: block;
		width: 100%;
    aspect-ratio: 419 / 300;
    transition: transform 0.3s ease;
}
.ant-blog-post-title {
	    margin: 1.04267vw 1.389vw 0 1.389vw;
    padding-bottom: 0.694vw;
    border-bottom: 0.08333333rem solid #878787;
}
.ant-blog-post-title h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.41666667rem;
    letter-spacing: -0.04em;
    text-transform: none;
    margin-bottom: 0;
}
.ant-blog-post-readmore {
	  margin: 0;
    line-height: 0;
}
.ant-blog-post-readmore a {
		display: block;
		font-size: 1.25rem;
    font-weight: 400;
    color: #878787;
    margin: 0 1.389vw;
    padding: 0.694vw 0; 
}
.ant-blog-post-readmore a:hover {
	color: #245E8F; !important
}
.antdesign-sidebar {
	width: 25%;
	position: -webkit-sticky; 
    position: sticky;
    top: 5.555555556vw; 
    align-self: flex-start;
}
.sidebar-social {
	line-height: 0;
}
.sidebar-search {
    margin: 2.0833vw 0;	
}
.search-field-wrapper {
    display: flex;
    border: solid 0.08333333rem #2c2b2f;	
}
.search-form input[type='search'] {
    padding-right: 0;
}
.search-field-wrapper button {
	    padding: 0.694vw;
    background-color: transparent;
    color: #878787 !important;
}
.search-field-wrapper input {
	  font-size: 1.25rem;
    font-weight: 400;
    border: transparent;
    padding: 0.694vw;
}
.sidebar-heading {
		font-size: 2rem;
    font-weight: 700;
    line-height: 2.41666667rem;
    letter-spacing: -0.04em;
    text-transform: none;
    margin-bottom: 1.389vw;
}
.related-list {
		list-style: none;
    padding-left: 0;
		border-right: 0.08333333rem solid #2c2b2f;
}
.related-list li {
	    margin-bottom: 0.694vw;
}
.related-list li a {
		font-size: 1.25rem;
    font-weight: 400;
    color: #878787;
}
@media(max-width:768px){
    .blog-posts-container {
        flex-direction: column;
    }
    .column-odd,
    .column-even {
        width: 100%;
    }
}

/*Single.php */
.head-single .antdesign-logo-social-head-page .social-link {
	    margin-top: 0.694vw;
}
.ant-head-content{
	    padding: 0 8.33vw;	
}
.ant-title h1 {
	    margin-bottom: 0.594vw;
}
.custom-breadcrumbs p {
	  font-size: 1.25rem;
    font-weight: 400;
}
.custom-breadcrumbs nav p a, .custom-breadcrumbs .separator {
	    color: #2c2b2f;
}
.ant-single-thumbnail .post-thumbnail {
	  margin-bottom: 0;
    margin-top: 3.472vw;
}
.ant-single-thumbnail .post-thumbnail img {
	    display: block;
    width: 100%;
    aspect-ratio: 1200 / 600;
		object-fit: cover;
}
.head-single .contact-form {
	    width: 100%;
}
.ant-single-related {
	    padding: 2.777777778vw 8.333333333vw 4.166666667vw;
}
.ant-single-related .related-title {
	font-size: 2rem;
    line-height: 2.41666667rem;
    letter-spacing: -0.04em;
    margin-bottom: 0.694444444vw;
}
.ant-single-related  .related-posts-list {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    gap: 1.180555556vw;
}
.ant-single-related  .related-posts-list .related-post-item {
display: flex;
    flex-direction: column;	
}

.ant-single-related img {
	  aspect-ratio: 338.67 / 301;
    object-fit: cover;
}
.ant-single-related a {
	    font-weight: 500;
    font-size: 1.33333333rem;
    line-height: 1.66666667rem;
}
/* single-project */
/* Đảm bảo bố cục của dự án với chiều cao cụ thể */
.ant-single-project-content {
    display: flex;
    justify-content: space-between;
    padding: 0 3.472vw;
    gap: 0.694vw;
    position: relative;
    min-height: 100vh; /* Đảm bảo phần tử cha có chiều cao đủ lớn */
}

/* Project info dính khi cuộn */
.project-info {
    width: 26.12%;
    height: 100vh;
    position: sticky;
    top: 5.608vw;
    z-index: 10;
}

/* Các style cho project-info */
.project-info-name {
    font-weight: 700;
    font-size: 3.33333333rem;
    line-height: 4.08333333rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 1.389vw;
}

.project-info-other {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.389vw;
}

.project-info-other p,
.project-info-content {
    font-size: 1.66666667rem;
    line-height: 2.5rem;
    color: #000000;
}
.project-info-content {
    font-weight: 400;
		text-align: justify;
}

.project-info-other p {
    font-weight: 500;
    letter-spacing: 0.02em;
		margin-bottom: 0.694444444vw;
}

/* Hiển thị ảnh với max-height cho .project-image */
.project-image {
    width: 72.388%;
    gap: 0.694vw;
    flex-grow: 1; /* Đảm bảo phần ảnh có thể cuộn */
}

/* Đảm bảo hình ảnh được hiển thị đầy đủ trong vùng cuộn */
.project-image p {
    margin: 0;
		margin-bottom: 0.694vw;
}

.project-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
	  object-fit: cover;
}

.ti-le-11 {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    gap: 0.694vw;
}
.project-image .ti-le-11 img {
    aspect-ratio: 316.67 / 299.25;
}
/* relate project */
.related-single-project {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 24.30555556vw;
    padding: 2.083333333vw 0;
    margin-top: 1.388888889vw;
}

.related-single-project::before,
.related-single-project::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 92.516vw;
    height: 0.08333333rem;
    background-color: #2c2b2f;
}

.related-single-project::before {
    top: 0;
}

.related-single-project::after {
    bottom: 0;
}

.project-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 24.30555556vw;
}

.project-slider {
position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: auto;
    height: 100%;
    transition: transform 0.3s ease; 
    touch-action: pan-y pinch-zoom; 
    z-index: 1;
}

.single-project-item {
    width: 24.47916667vw; /* Độ rộng của ảnh */
    margin-right: 0.694444444vw; /* Khoảng cách giữa các bài viết */
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
    height: 100%; /* Đảm bảo chiều cao khớp */
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-project-item a {
    display: block;
}

.single-project-item img {
    display: block;
		width: 100%;
    height: 100%; 
    object-fit: cover; 
    aspect-ratio: 352.5 / 350; 
}

.single-project-title {
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    position: absolute;
    bottom: 0.83333333rem;
    left: 0.83333333rem;
    padding: 0.83333333rem;
}

.single-project-item:hover .single-project-title {
    display: block;
}

.controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 1004;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.project-slider-wrapper:hover .controls {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.controls .prev,
.controls .next {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 0.83333333rem;
    cursor: pointer;
    border: none;
    opacity: 1; /* Đảm bảo nút luôn hiển thị khi controls hiện */
}

#single-project-footer .slogan p {
    border-top: none;
    margin-top: 2.083333333vw;
}
/*footer.php*/
.footer-container {
    margin: 1.25vw 8.333333333vw 4.166666667vw;
    padding: 0.694444444vw 0 0 0;
    border-top: 0.125rem solid;
    display: flex;
    justify-content: space-between;
}
.footer-company-info {
    display: flex;
    gap: 4.861111111vw;
}
.footer-company-info p {
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: #878787;
    margin: 0 0 0.41666667rem 0;
}

/*homepage*/
/* Slider container */
.antdesign-homepage-hero {
    position: relative; /* Làm tham chiếu cho các phần tử absolute */
    width: 100%;
    overflow: hidden; /* Ngăn nội dung tràn ra ngoài */
}
.antdesign-homepage-title {
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
		pointer-events: none;
	    opacity: 0.7;
}
.antdesign-homepage-title h1 {
	  font-size: 8rem;
    line-height: 9.75rem;
    letter-spacing: 0.02em;
    /*color: #2C2B2F;*/
    margin-bottom: 0.347222222vw;
}
.antdesign-homepage-title p {
    font-weight: 400;
    /*color: #2C2B2F;*/
		text-align: center;
}
.antdesign-homepage-slider {
    position: relative;
    width: 100%;
		height: calc(55vh - 5.08333333rem);
    overflow: hidden;
		touch-action: pan-y;
}
/* Các slide */
.slide-img {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; 
    transform: scale(1); 
    transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 2s ease-in-out; 
    will-change: opacity, transform;
}

.slide-img.active {
opacity: 1; 
    transform: scale(1.05);
    z-index: 1;
}

/* Đảm bảo hình ảnh chiếm toàn bộ chiều rộng của slide */
.slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: inherit;
}

/* Các chấm tròn dưới slider */
.slider-dots {
    position: absolute;
    bottom: 1.66666667rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.83333333rem;
    z-index: 10; /* Đảm bảo hiển thị trên slider */
}

.dot {
    width: 0.83333333rem;
    height: 0.83333333rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
}

.dot.active {
    opacity: 1;
    transform: scale(1.2); /* Phóng to chấm khi slide đang hoạt động */
}

/* Hover hiệu ứng cho chấm */
.dot:hover {
    opacity: 1;
    transform: scale(1.4);
}
.antdesign-homepage-section {
	height: 6.944444443vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 0.125rem solid #2c2b2f;
    border-top: 0.125rem solid #2c2b2f;
    margin-top: 0.684vw;
}
.antdesign-homepage-section h2 {
    font-size: 4rem;
    letter-spacing: -0.02em;
		margin-bottom: 0;
}
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
		height: 100%;
    text-shadow: 1px 1px 1px rgb(0 0 0 / .5);
    display: flex
;
		background: rgba(0, 0, 0, 0.75);
	
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 40px;
	    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.project-info-title p {
	    position: relative;
    display: inline-block;
	color: white;
}
.homepage-readmore-button {
    height: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.homepage-readmore-button a {
    border: 0.08333333rem solid #878787;
    border-radius: 0.25rem;
    padding: 0.694444444vw 2.5vw;
}
.antdesign-homepage-service p {
    padding: 1.388888889vw 20.83333333vw;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #000000;
    margin-bottom: 0;	
}
.antdesign-homepage-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.388888889vw;
    padding: 0 3.472222222vw;
    margin: 0 auto;
}

.service-item {
    position: relative;
    width: 100%;
    aspect-ratio: 453.33 / 400;
    overflow: hidden;
}

.service-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-name {
    position: absolute;
    top: 75%;
    width: 100%;
    height: 2.777777778;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-name h3 {
    margin: 0;
	  font-weight: 500;
    font-size: 1.33333333rem;
    line-height: 1.66666667rem;
    color: #d8d8d8;
}

.service-name a {
    padding: 0.694444444vw 2.5vw;
    background-color: #245e8f;
	border-radius: 0.5rem;
}
#portfolio a {
	  border: none;
    background-color: #d8d8d8;
    color: #565656;
	  font-weight: 500;
    font-size: 1.33333333rem;
}

.mfp-ready .mfp-figure {
    opacity: 1;
}

/* =========================================
   FIX MENU DROPDOWN ANTDESIGN (Đã chỉnh khoảng cách an toàn)
   ========================================= */

/* 1. Định vị menu cha */
.antdesign-main-menu .menu-item-has-children {
    position: relative;
    /* Bỏ padding-bottom ảo đi để tránh dính sang thằng bên cạnh */
    padding-bottom: 0; 
    margin-bottom: 0;
}

/* Mũi tên nhỏ */
.antdesign-main-menu .menu-item-has-children > a::after {
    content: "\25BE"; 
    font-size: 12px;
    margin-left: 6px;
    display: inline-block;
    transition: transform 0.3s ease;
}
.antdesign-main-menu .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* 2. ẨN TUYỆT ĐỐI menu con khi chưa hover */
.antdesign-main-menu .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    
    position: absolute;
    top: 100%; /* Bắt đầu từ đáy menu cha */
    left: 0;
    
    /* ĐẨY XUỐNG 15PX TẠO KHOẢNG CÁCH */
    margin-top: 15px !important; 
    
    background-color: #ffffff;
    min-width: 260px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    padding: 0;
    margin-left: 0;
    z-index: 99999;
    list-style: none;
    border-top: 3px solid #000000;
}

/* 3. LỚP ĐỆM (CẦU NỐI) - Chỉ nằm trong khoảng hở 15px */
.antdesign-main-menu .sub-menu::before {
    content: "";
    display: block;
    position: absolute;
    
    /* Lớp đệm nằm ngay trên đỉnh của menu con */
    bottom: 100%; 
    left: 0;
    width: 100%;
    
    /* Chiều cao đúng bằng khoảng cách đã đẩy xuống (15px) + dư 5px để bắt dính tốt hơn */
    height: 20px; 
    
    background-color: transparent; 
    /* background-color: rgba(255,0,0,0.3);  <-- Bật dòng này nếu muốn nhìn thấy vùng đệm để test */
}

/* 4. HIỆN menu con khi Hover */
.antdesign-main-menu .menu-item-has-children:hover > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: antFadeIn 0.3s ease forwards;
}

/* 5. Chỉnh lại MÀU CHỮ */
.antdesign-main-menu .sub-menu li {
    display: block;
    margin: 0;
    border-bottom: 1px solid #eeeeee;
}

.antdesign-main-menu .sub-menu li a {
    display: block;
    padding: 15px 20px;
    color: #333333 !important;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}

.antdesign-main-menu .sub-menu li a:hover {
    background-color: #f5f5f5;
    color: #000000 !important;
    padding-left: 25px;
}

/* Animation */
@keyframes antFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   MOBILE & TABLET: MENU DỊCH VỤ (Phẳng hóa)
   ========================================= */

@media (max-width: 1199px) { 
    /* 1. Ẩn luôn chữ "Dịch Vụ" cha */
    .antdesign-main-menu .menu-item-has-children > a {
        display: none !important;
    }

    /* 2. Hiện menu con luôn & Reset toàn bộ style Dropdown cũ */
    .antdesign-main-menu .sub-menu {
        display: block !important;       /* Luôn hiện */
        position: static !important;     /* Không trôi nổi, nằm đúng vị trí */
        opacity: 1 !important;
        visibility: visible !important;
        
        /* Reset giao diện về trong suốt */
        background-color: transparent !important; 
        box-shadow: none !important;
        border-top: none !important;
        
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: unset !important;
        transform: none !important; /* Bỏ animation trượt lên */
    }

    /* 3. Bỏ lớp đệm vô hình (không cần thiết trên mobile) */
    .antdesign-main-menu .sub-menu::before {
        display: none !important;
    }

    /* 4. Style lại các link con cho giống hệt menu chính (Trang chủ, Dự án...) */
    .antdesign-main-menu .sub-menu li {
        border-bottom: none !important; /* Bỏ gạch chân mờ */
        text-align: center; /* Căn giữa theo style menu mobile của bạn */
        margin-bottom: 0 !important;
    }

    .antdesign-main-menu .sub-menu li a {
        color: #d8d8d8 !important; /* Lấy theo màu chữ của menu mobile (thường là Trắng) */
        padding: 10px 0 !important; /* Khoảng cách trên dưới */
        padding-left: 0 !important; /* Bỏ padding trái của desktop */
        font-size: 16px !important; /* Chỉnh kích thước chữ cho dễ bấm trên điện thoại */
        background-color: transparent !important;
        font-weight: 400;
    }

    /* Hiệu ứng khi chạm vào trên mobile */
    .antdesign-main-menu .sub-menu li a:active,
    .antdesign-main-menu .sub-menu li a:hover {
        background-color: transparent !important;
        color: #ff6900 !important; /* Màu highlight khi chạm (nếu muốn) */
        padding-left: 0 !important;
    }
}

/*css mobile*/
@media (max-width: 768px) {
    h1, .h1 {
        font-size: 3.2rem;
        line-height: 3.9333rem;
        letter-spacing: -0.016em;
    }

    h2, .h2 {
        font-size: 2.6667rem;
        line-height: 3.2667rem;
        letter-spacing: -0.008em;
    }

    h3, .h3 {
        font-size: 2.1333rem;
        line-height: 2.6rem;
        letter-spacing: 0em;
    }

    h4, .h4 {
        font-size: 1.6rem;
        line-height: 1.9333rem;
        letter-spacing: -0.032em;
    }

    h5, .h5 {
        font-size: 1.2rem;
        line-height: 1.0667rem;
        letter-spacing: 0.1333rem;
    }

    h6, .h6 {
        font-size: 1rem;
        line-height: 1.0667rem;
        letter-spacing: 0.0667rem;
    }

    p {
        font-size: 1.3333rem;
        line-height: 2rem;
        letter-spacing: 0rem;
    }

    blockquote {
        font-size: 1rem;
        line-height: 1.8667rem;
        letter-spacing: 0.0667rem;
    }

    cite {
        font-size: 0.9333rem;
        letter-spacing: 0rem;
    }

    small {
        font-size: 0.8rem;
    }

    table td, table th {
        font-size: 0.9333rem;
    }

    pre {
        line-height: 1.3867rem;
    }
}
@media (max-width: 768px) {
    .wp-caption-text {
        font-size: 1rem !important;
        line-height: 1.2rem;
    }

    .antdesign-logo-social-head-page .brand {
        font-size: 1.6rem;
        line-height: 1.9333rem;
        letter-spacing: -0.032em;
    }

    .antdesign-logo-social-head-page .social-link {
        font-size: 1.0667rem;
        line-height: 2rem;
    }

    .about-content .about-description p {
        font-size: 1.3333rem;
        line-height: 2rem;
    }

    .about-content .contact-info-about p {
        font-size: 1.25rem;
        line-height: 1.2rem;
        margin: 1.333333336rem 0;
    }

    .antdesign-contact-headline p,
    .antdesign-blog-headline p {
        font-size: 1.6rem;
        line-height: 1.9333rem;
        letter-spacing: -0.032em;
    }

    .antdesign-contact-info .text-wrapper,
    .contact-details p {
        font-size: 1.3333rem;
        line-height: 2rem;
    }

    .contact-title {
        font-size: 1.6rem;
        line-height: 1.9333rem;
        letter-spacing: -0.032em;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
        font-size: 1rem;
        line-height: 1.2rem;
    }

    .contact-form .form-field button {
        font-size: 1.3333rem;
    }

    .antdesign-project-container h1 {
        font-size: 5rem;
        line-height: 7.8rem;
        letter-spacing: 0.016em;
    }

    .custom-tabs-titles .tab-title {
        font-size: 1.3333rem;
    }

    .project-info-title h3 {
        font-size: 1.6rem;
        line-height: 1.9333rem;
        letter-spacing: -0.032em;
    }

    .project-title {
        font-size: 1rem;
    }

    .project-tag {
        font-size: 0.65rem;
    }

    .ant-blog-post-title h2 {
        font-size: 1.6rem;
        line-height: 1.9333rem;
        letter-spacing: -0.032em;
    }

    .ant-blog-post-readmore a {
        font-size: 1rem;
    }

    .sidebar-heading {
        font-size: 1.6rem;
        line-height: 1.9333rem;
        letter-spacing: -0.032em;
    }

    .search-field-wrapper input {
        font-size: 1rem;
    }

    .related-list li a {
        font-size: 1rem;
    }

    .custom-breadcrumbs p {
        font-size: 1rem;
    }

    .ant-single-related .related-title {
        font-size: 1.6rem;
        line-height: 1.9333rem;
        letter-spacing: -0.032em;
			margin-bottom: 0.83333333rem;
    }

    .ant-single-related a {
        font-size: 1.0667rem;
        line-height: 1.3333rem;
    }

    .project-info-name {
        font-size: 2.6667rem;
        line-height: 3.2667rem;
        letter-spacing: -0.008em;
    }

    .project-info-other p,
    .project-info-content {
        font-size: 1.3333rem;
        line-height: 2rem;
    }

    .antdesign-homepage-title h1 {
        font-size: 3.2rem;
        line-height: 7.8rem;
        letter-spacing: 0.016em;
				padding: 0 20px;
    }
	.antdesign-homepage-title p {
		padding: 0 20px;
	}
	..slider-dots {
        display: none;
	}
    .antdesign-homepage-section h2 {
        font-size: 3.2rem;
        letter-spacing: -0.016em;
    }

    .service-name h3 {
        font-size: 1.3333rem;
        line-height: 1.3333rem;
    }

    #portfolio a {
        font-size: 1.0667rem;
    }
	
	/*css mobile homepage*/

	.antdesign-homepage-slider {
    height: calc(27.5vh - 5.08333333rem);
    }
	.antdesign-project-container  {
        height: calc(20.5vh - 5.08333333rem);
    }
	.slide-img {
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.5s ease-in-out;
    }
	.slide-img.active {
        transform: scale(1.03);
    }
	.antdesign-homepage-section h2 {
    padding: 0.83333333rem 1.66666667rem;
}
	.antdesign-homepage-service-grid, .project-posts-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 0.83333333rem;
    padding: 0 1.66666667rem 0.83333333rem;
    margin-top: 0.555555556vw;
}
.antdesign-homepage-section {
	  height: 100%;
	}
.project-post-thumbnail img {
    height: 100%;
	aspect-ratio: 1 / 1;
}
.project-post-item .overlay {
		align-items: end;
    height: 50%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
}
.homepage-readmore-button {
    margin-bottom: 0.83333333rem;;
}
.service-name a {
    padding: 1.694444444vw 2.5vw;
}
.antdesign-homepage-service p {
    padding: 0.83333333rem 1.66666667rem;
}
/*css footer mobile */
.footer-container {
    display: block;
    margin-top: 4.16666667rem;
    padding-top: 1.66666667rem;
}
.footer-company-info {
    display: block;
}
.footer-company-info p {
    text-align: center;
    margin: 0 0 0.83333333rem 0;
}
.antdesign-footer .social-button-list {
    margin-bottom: 0;
    margin-top: 1.25rem;
    display: flex;
    gap: 0.83333333rem;
    justify-content: center;
}
/*css project mobile */
	.custom-tabs-titles {
   padding: 1.66666667rem;
   border-top: none;
   justify-content: space-between;
}
/*css blog mobile */
.antdesign-blog-container {
	display: block;
}
.blog-posts-container {
	width: 100%;
}
.ant-blog-post-readmore {
	line-height: 1;	
}
.antdesign-sidebar {
	width: 100%;
    margin-top: 5.55vw;
}
.related-list {
	border-right: none;
}
/*css single.php mobile */
.antdesign-single-container {
		display: block;
	}
	.ant-single-content {
		width: 100%;
	}
	.sidebar-search .search-form input[type='search'] {
    width: 100%;
		padding-right: 0;
}
	.head-single .contact-form {
		    padding: 0 8.33vw;
	}
	.sidebar-social, .sidebar-search {
		display: none;
	}
	.ant-single-related .related-posts-list {
		grid-template-columns: repeat(1, 1fr);
		gap: 0.83333333rem;
	}
	.related-post-item {
		position: relative;
	}
	.related-post-item img {
		display: block;
	}
	.overlay-post {
		    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    display: flex
;
    align-items: center;
    justify-content: center;
	}
	.related-post-item a {
		 color: white;
	}
/*css contact mobile */
	.contact-wrapper {
flex-direction: column;
	}
.contact-images-info {
        width: 100%;
        order: 2;
        display: flex;
        flex-direction: column;
}
.contact-images {
    border-right: none;
    padding-right: 0;
    gap: 1rem;
	  order: 2;
}
.contact-images img {
    width: 100%;
    height: 100%;
}
	#contact-img-2, #contact-img-3 {
		display:none;
	}
.antdesign-contact-info {
    border-left: 0.08333333rem solid #2C2B2F;
    padding: 0 1.66666667rem;
    margin: 3.33333333rem 0;
	  order: 1;
}
.contact-form {
    width: 100%;
	  order: 1;
}
/*css single project mobile */
.ant-single-project-content {
	display: block;
    padding: 0 8.33vw;
}
.project-info {
	width: 100%;
    position: relative;
    height: 100%;
    top: 0;
    margin: 1.66666667rem 0;
}

.project-image {
    display: block;
    width: 100%;
}
.project-image img {
	margin-bottom: 0.83333333rem;
	aspect-ratio: 316.67 / 299.25 !important;
}
	/* css about page */
	#ant-about-head-page {
	margin: 9.778vw 0 2.778vw;
	}
	/* css single project */
	.project-slider-wrapper {
	    height: 49.31vw;
	}
	.single-project-item {
	    width: 49.31vw;
			margin-right: 1.38vw;
	}
}


.bao-gia-content, .bao-gia-content .custom-breadcrumbs p, .ant-pricing-intro p {
    text-align: center;
}

.antdesign-main-menu .l-menu-desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Khôi phục width để bao phủ toàn bộ */
    padding: 0.694444444vw 3.472222222vw;
    background-color: #2C2B2F; /* Đảm bảo màu nền đồng nhất */
}
/* Logo */
.antdesign-main-menu .l-logo {
    display: flex;
}
.antdesign-main-menu .l-logo img {
    height: 41px;
    display: block;
    object-fit: contain;
}

/* Menu */
.antdesign-main-menu .l-menu-desktop .container {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.antdesign-main-menu .l-menu-desktop ul {
    display: flex;
    gap: 30px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.antdesign-main-menu .l-menu-desktop li {
    margin-bottom: 0;
    padding: 5px 0px;
}
.antdesign-main-menu .l-menu-desktop li a {
    font-size: 16px;
    color: #D8D8D8;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.antdesign-main-menu #bao-gia {
    padding-left: 20px;
    padding-right: 20px;
    background-color: #245E8F;
    border-radius: 6px;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.m-header-default-menu .current-menu-item a {
    color: #F56F10;
}
.antdesign-main-menu .l-menu-desktop li a:hover {
    color: #F56F10;
}
.antdesign-main-menu #bao-gia:hover {
    background-color: #F56F10;
}
.antdesign-main-menu #bao-gia a:hover {
    color: #D8D8D8;
}

/* Nút tìm kiếm */
.antdesign-main-menu .l-search {
    flex: 0 0 auto;
}
.antdesign-main-menu .l-search .a-site-search-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin-left: 20px;
}
.antdesign-main-menu .a-site-search-icon svg {
    color: #D8D8D8;
}

/* Mobile menu styles - Override cho mobile */
.menu-toggle {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 24px;
    color: #D8D8D8;
    z-index: 1001;
}
.bao-gia-mobile, .mobile-search {
    display: none;
}
.menu-toggle:hover,
.menu-toggle:focus {
    color: #F56F10;
}

@media (max-width: 768px) {
    .antdesign-main-menu .l-menu-desktop {
        padding: 3px 20px;
    }

    .menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 1px;
    }
    .bao-gia-mobile {
        display: block;
        position: absolute;
        left: 60%;
        background-color: #245E8F;
        padding: 2px 15px;
        border-radius: 4px;
        width: fit-content;
        margin: 0 auto;
    }
    .bao-gia-mobile a {
        color: white;
    }
    .mobile-search {
        display: block;
        margin: 15px auto;
    }
    .mobile-search button {
        background-color: white !important;
    }
    #bao-gia {
        display: none;
    }
    .menu-toggle .hamburger-icon {
        color: white;
        font-weight: 100;
    }

    .m-header-default-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #2C2B2F;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
        flex-direction: column;
        padding: 60px 20px;
    }

    .m-header-default-menu.active {
        display: flex;
        transform: translateX(0);
    }
    .antdesign-main-menu .l-menu-desktop ul {
        gap: 10px;
        padding-top: 100px;
    }
    .antdesign-main-menu .l-menu-desktop li {
        margin-bottom: 0;
        padding: 5px 10px;
        text-align: center;
        margin-top: 0;
    }
    .m-header-default-menu #bao-gia {
            background-color: #245E8F;
            padding: 10px 20px;
            border-radius: 6px;
            width: fit-content;
            margin: 0 auto;
        }

    .menu-toggle:hover {
        background-color: transparent;
    }
    body.menu-open {
        overflow: hidden;
    }

    .antdesign-main-menu .l-primary-header__icons {
        /* Tùy chỉnh nếu cần ẩn/hiện icon trên mobile */
    }
}

/* Sticky header styles */
.antdesign-main-menu.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background: #2C2B2F;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 999;
}



body > header > div > div.l-primary-header__icons.d-inline-flex.align-items-stretch.justify-content-end > div > div > div.container {
    display: block;
}
/* Sticky Header */
header.antdesign-main-menu {
    position: relative;
    width: 100%;
    z-index: 9999;
    transition: all 0.3s ease;
}

header.antdesign-main-menu.sticky {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease;
}
header.antdesign-main-menu.sticky .l-header-container {
    padding: 0 2.66667rem;
	background-color: rgba(255, 255, 255, 0.95); 
    transition: padding 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Responsive Rules */
@media (min-width: 992px) {
    .main-header-desktop {
        display: flex;
    }

    .main-header-mobile {
        display: none;
    }
}

@media (max-width: 991px) {
    .main-header-mobile {
        display: flex;
    }

    .main-header-desktop {
        display: none;
    }

    .menu-toggle {
        font-size: 3.6rem;
        padding: 0;
        color: #222 !important;
        background-color: transparent;
    }
		.l-header-container {
            padding: 0 2.66667rem;	
	}
	.slider-dots {
        display: none;
    }
    .ti-le-11 {
        grid-template-columns: 1fr 1fr;
    }   
}
@media (max-width: 768px) {
	.l-header-container {
		padding: 0 1.66667rem;
	}
	.ti-le-11 {
        grid-template-columns: 1fr;
    }  
}
/*css footer*/
/* Footer chính */
.antdesign-footer {
    text-align: center;
    padding-bottom: 40px;
}
.antdesign-footer .slogan p {
    font-size: 48px;
    font-weight: 700;
    line-height: 59px;
    letter-spacing: -0.02em;
    padding: 50px 0 0 0;
    border-top: 3px solid #2c2b2f;
}
.antdesign-footer p {
    color: #878787;
    margin: 0 0 20px 0;
}
.antdesign-footer .social-button-list {
    margin-bottom: 20px;
}
/* Responsive */
@media (max-width: 768px) {
    .antdesign-footer-container {
        flex-direction: column;
        text-align: center;
    }

    .antdesign-footer-contact li,
    .antdesign-footer-menu li {
        justify-content: center;
    }

    .antdesign-social-icons {
        justify-content: center;
    }
}


/* =========================================
   WIDGET LIÊN HỆ (TRÒN 45PX, TRÊN BACK-TO-TOP)
   ========================================= */

/* 1. Nút tròn Toggle */
.contact-button-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d8d8d8;
    right: 2.08333rem;
    bottom: calc(2.08333rem + 48px);
    width: 45px;  /* Kích thước 45px theo yêu cầu */
    height: 45px; /* Kích thước 45px theo yêu cầu */
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: fixed;
    z-index: 10000;
    border: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
    padding: 0; /* Bỏ padding mặc định của button */
}

.contact-button-circle:hover {
    background-color: #ffffff;
    transform: scale(1.1);
}

/* Icon Chat bên trong nút */
.contact-button-circle svg {
    width: 24px;  /* Kích thước icon bên trong */
    height: 24px;
    fill: #2c2b2f; /* Màu icon */
    transition: transform 0.3s ease;
}

/* 2. Bảng Menu chứa các nút chat (Ẩn/Hiện) */
.contact-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 145px; /* 90px (bottom nút) + 45px (cao nút) + 10px (gap) */
    right: 20px;
    z-index: 9999;
    gap: 10px;
    
    /* Mặc định ẩn */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Khi có class active (được click) */
.contact-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 3. Style cho các nút con (Zalo, Facebook, Phone) */
.contact-menu .contact-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    padding: 8px 15px; /* Gọn hơn xíu */
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
    min-width: 180px;
    white-space: nowrap;
}

.contact-menu .contact-button:hover {
    transform: translateX(-5px);
}

.contact-menu .contact-button svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.contact-menu .contact-button span {
    font-size: 14px;
    font-weight: 600;
    color: #2c2b2f;
}

/* Màu icon */
.messenger-button svg { stroke: #0084FF; }
.zalo-button svg { stroke: #0068FF; }
.phone-button svg { stroke: #F56F10; }

.a-to-top {
    background-color: #d8d8d8;
}
/*css page*/
.antdesign-page-content {
    margin-top: 40px;
padding: 40px;
}
.antdesign-page-content-2 {
	    padding: 0 3px 10px 3px;
	    min-height: 400px;
}

/* Grid Container */
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 cột */
gap: 3px;
}

/* Grid Items */
.grid-item {
position: relative;
overflow: hidden;
cursor: pointer;
}

.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}

.grid-item:hover img {
transform: scale(1.1);
}

/* Project Info */
.project-info-title h3 {
margin-bottom: 10px;
font-size: 1.2em;
color: #ffffff;
}

.project-info-title a {
color: #ffffff !important;
text-decoration: none;
letter-spacing: 0.2rem;
}


.project-info-title p {
font-size: 14px;
margin: 0;
}

/* Big and Small Items */
.grid-item.big {
grid-column: span 1; 
grid-row: span 1;
}

.antdesign-intro-container {
     display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 4% 0% 4% 0%;
    align-items: center;
    align-content: center;
}
.antdesign-text {
    padding: 30px;
    font-size: 15px;
}
.antdesign-text h2, .antdesign-services-title h2 {
    font-size: 2.16667rem;
    line-height: normal;
    letter-spacing: .1111rem;
}
.antdesign-buttons {
    margin-top: 32px;
    display: flex;
    justify-content: space-evenly;
}
.antdesign-buttons .btn {
    display: inline-block;
    padding: 5px 20px;
    color: #666666;
    border: 2px solid #666666;
    transition: background-color .3s, color .3s;
    width: 25%;
    text-align: center;
    font-weight: 600;
}
.antdesign-buttons .btn:hover {
    color: #000000;
    border: 2px solid #000000;
}
.antdesign-intro-image {
    padding: 30px;
}

/* Phần dịch vụ */
.antdesign-services {
    padding: 4% 0 0 0;
    text-align: center;
    background: #f9f9f9;
}

.services-container {
    display: flex;
    padding: 30px 0 0 0;
}
.antdesign-services-title h2 {
    margin-bottom: 30px 0;    
}
/* Hộp dịch vụ */
.service-box {
    flex: 1;
    position: relative;
    transition: transform 0.3s ease-in-out;
}

.service-box:hover {
    transform: translateY(-5px);
}

/* Nội dung dịch vụ */
.service-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
    width: 80%;
    background: #ffffff;
    padding: 15px;
    text-align: left;
}

/* Tiêu đề dịch vụ */
.service-content h3 {
    font-size: 1.46667rem;
    line-height: 1.38462;
    letter-spacing: .11111rem;
    margin-bottom: 10px;
}

/* Mô tả dịch vụ */
.service-content p {
    font-size: 14px;
    margin-bottom: 0px;
}
.service-box .btn {
    text-decoration: underline;
    font-size: 12px;
}
/* Phần Blog & Chính sách chung */
.antdesign-info-section {
    padding: 4% 10% 0;
}

.antdesign-info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

/* Hộp chung cho Blog & Chính sách */
.antdesign-info-box {
    display: flex;
    align-items: center;
    width: 48%;
    padding: 20px;
    transition: transform 0.3s ease-in-out;
}

.antdesign-info-box:hover {
    transform: translateY(-5px);
}

/* Hình ảnh icon */
.antdesign-info-box img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

/* Tiêu đề */
.antdesign-info-content h3 {
    font-size: 1.25rem;
    line-height: 1.33333;
    letter-spacing: .08333rem;
    margin-bottom: 10px;
}
.antdesign-info-content {
    margin-bottom: 0;    
}

/* Liên kết */
.antdesign-info-content a {
    text-decoration: none;
    color: #000;
}
.antdesign-info-content p {
    margin: 0;
}
/*project css*/
/* header - breadcrumb */
.antdesign-container {
    display: block;
    text-align: center;
    padding: .66667rem 2.66667rem;
    background-color: #f5f5f5;
}
.antdesign-title h1 {
    margin-bottom: 0;
font-size: 1.83333rem;
}
.custom-breadcrumbs nav p {
margin: 0;
}
.custom-breadcrumbs nav p a {
color: #666666;
}
.custom-breadcrumbs .separator
{
padding: 10px;
}
.custom-breadcrumbs .last {
color: #2c2b2f;
font-weight: 500;
}
.custom-breadcrumbs nav p a:hover {
color: #222222;
}
/* Grid Container */
/*css blog page*/
.antdesign-blog-content {
    padding: 40px;
    display: flex;
}
.blog-content{
display: flex;
gap: 50px;
justify-content: space-around;
}
.blog-posts-grid { 
display: grid;
grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding-right: 30px;
}


/* Grid Item */
.blog-post-item {
background-color: #fff;
overflow: hidden;
}
.project-post-item {
    position: relative;
    overflow: hidden;
}
.project-post-item:hover .overlay {
    opacity: 1;
}

.blog-post-thumbnail img {
width: 100%;
aspect-ratio: 4 / 3;
transition: transform 0.3s ease;
}
.blog-post-thumbnail img:hover, .project-post-thumbnail img:hover {
transform: scale(1.1);
}
/* Title */
.blog-post-title, .project-post-title {
font-size: 1.2em;
margin: 45px 15px 15px 15px;
color: #333;
letter-spacing: 0.2rem;
}

/* Excerpt */
.blog-post-excerpt {
font-size: 0.95em;
margin: 0 15px 15px;
color: #666;
}
.project-tag {
	margin-right: 10px;
}

/* Link */
.blog-post-link, .project-post-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}


.blog-post-title, .project-post-title, .project-info-title a, .project-info-title p, .antdesign-info-content a {
position: relative;
display: inline-block;
}

.blog-post-title::after, .project-post-title::after, 
.project-info-title a::after, 
.project-info-title p::after, .antdesign-info-content a::after {
content: '';
position: absolute;
left: 50%;
width: 0;
background-color: currentColor;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.blog-post-title::after,
.project-post-title::after, .project-info-title a::after, .antdesign-info-content a::after {
bottom: -3px;
	height: 2px;
}

.project-info-title p::after {
bottom: -1px;
	height: 1px;
}

.blog-post-title:hover::after, .project-post-title:hover::after, 
.project-info-title a:hover::after, 
.project-info-title p:hover::after, .antdesign-info-content a:hover::after {
width: 100%;
}
.project-tag {
    position: relative;
    display: inline-block;
}

.project-tag::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    bottom: -1px;
    height: 1px !important;
    background-color: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.project-tag:hover::after {
    width: 100%;
}

/*singlephp*/
.antdesign-post-content {
	display: flex;
	    padding: 30px 45px 30px 30px;
}
.ant-entry-content {
	    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
	    padding-right: 15px;
    padding-left: 15px;
}
.ant-main-sidebar {
	    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
	        margin-top: 0;
        padding-left: 3.66667rem;
}
.col-lg-4 .ant-main-sidebar {
    padding-left: 0;
    padding-right: 30px;
    max-width: 100%;
}
.post-thumbnail {
	margin-bottom: 2.66667rem;
}
/* Sidebar heading (h3) */
.sidebar-content h3, .lead-form h3 {
    font-size: 1.25rem;
    line-height: 1.33333;
    letter-spacing: .08333rem;
}

/* Search form */
.sidebar-content .search-bar {
    border: solid 1px #e2e2e2;
	margin-bottom: 4.66667rem;
}

.sidebar-content .search-bar input[type="search"] {
    border-style: none;
}
/* tag */
.tags ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; 
}

.tags ul li {
    display: inline-block;
	    margin-bottom: 0;
}

.tags ul li a {
    display: inline-block;
    padding: 5px 10px;
    font-size: 11px;
    text-transform: uppercase;
    color: #222;
    background-color: #f5f6f7;
    transition: all 0.3s ease;
}

.tags ul li a:hover {
    background-color: #222; 
    color: #fff; 
}

/* Lead form sticky */
.ant-main-sidebar .lead-form {
    position: sticky;
    top: 8.66667rem;
    z-index: 5;
}

/* Form layout */
.ant-main-sidebar .lead-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Input, select, textarea styling */
.ant-main-sidebar .lead-form input,
.ant-main-sidebar .lead-form select,
.ant-main-sidebar .lead-form textarea {
    width: 100%;
    padding: 10px;
    font-size: 12px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

/* Focus styling */
.ant-main-sidebar .lead-form input:focus,
.ant-main-sidebar .lead-form select:focus,
.ant-main-sidebar .lead-form textarea:focus {
    border-color: #0073aa;
    box-shadow: 0 0 4px rgba(0, 115, 170, 0.4);
}

/* Button styling */
.ant-main-sidebar .lead-form button {
    padding: 12px;
    font-size: 14px;
}

/* Textarea styling */
.ant-main-sidebar .lead-form textarea {
    min-height: 100px;
    resize: none;
}

/* Result message styling */
.ant-main-sidebar #formResult {
    margin-top: 15px;
    font-size: 14px;
    color: green;
    text-align: center;
}


/* Responsive Design */
@media (max-width: 1200px) {
.grid-container {
    grid-template-columns: repeat(3, 1fr);
}
.grid-item.big {
    grid-column: span 2;
        grid-row: span 2 ;
}


@media (max-width: 768px) {
.grid-container {
    grid-template-columns: repeat(2, 1fr);
}
.grid-item.big {
    grid-column: span 2;
}

.project-post-item .overlay {
        opacity: 1; /* Hiển thị overlay mặc định */
}
/*css blog mobile*/
.antdesign-blog-content{
        display: block;
    padding: 10px;
}
.blog-posts-grid {
        display: block;
    padding-right: 0;
}
.blog-post-title {
        margin: 10px;
}
.blog-post-excerpt {
    margin: 0 10px 30px;
}
.ant-main-sidebar {
    max-width: 100%;
    padding-left: 0;
    margin-top: 3.66667rem;
}
/*css about mobile*/
.about-container{
    padding: 30px;
}
.row-about {
    display: block;
    margin: 0;
}
.row-about .col-8, .row-about .col-4 {
    max-width: 100%;
        padding: 0;
}
.row-about .col-4 h2 {
    margin: 1.33333rem 0;
}
/*css contact mobile*/
.contact-row {
        display: block;
    padding: 40px 30px;
}
.contact-col-1, .contact-col-2 {
    width: 100%;
    padding: 0;
}
.contact-map-form {
    display: block;
    padding: 10px;
}
.contact-map {
        width: 100%;
    padding: 0;
}
.contact-form {
    width: 100%;
    padding: 15px;
}
/*css single post */
.antdesign-post-content {
 display: block;
    padding: 20px;   
}
.ant-entry-content {
        max-width: 100%;
    padding: 0;
}
}

@media (max-width: 480px) {
.grid-container {
    grid-template-columns: 1fr;
}

.grid-item.big {
    grid-column: span 1;
}
}