/*---------quick-style---------*/
.text-justify{text-align:justify!important}
/*---------footer---------*/
.main-footer_copyright{
    text-align: center;
}
/*=====================*/
.service-one_title .service-one_arrow{
    transform: unset;
}
.service-one_images_outer {
    position: relative; /* Container để các ảnh con làm mốc */
}
.service-one_image {
    position: absolute; /* Xếp chồng lên nhau */
    top: 0;
    left: 0;
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.3s; /* Hiệu ứng mờ dần */
}
.service-one_image.active {
    position: relative; /* HOẶC opacity: 1; */
    opacity: 1; /* Hiện ảnh đang active */
    z-index: 10; /* Đảm bảo nó nằm trên cùng */
}
.about-sidebar_list li a {
    color: inherit; /* Kế thừa màu chữ của phần tử cha */
    text-decoration: none;
}
.about-sidebar_list li a:hover {
    color: inherit;
    text-decoration: none;
}
.loading-bar-contact {
    /* Đảm bảo nó nằm trên form và căn giữa */
    position: absolute; /* Hoặc relative tùy thuộc vào container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Nền mờ */
    display: flex; /* Dùng flexbox để căn giữa nội dung */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100; /* Đảm bảo nó nằm trên form */
}
.spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid rgb(0, 145, 247); /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite; /* Áp dụng animation quay */
    margin-bottom: 10px; /* Khoảng cách với chữ */
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.main-header .main-menu .navigation > li > ul {
    width: max-content;
}
.news-block_one-date {
    right:4px;
}
.blog-detail_date {
    right: 0PX;
    padding: 9px 20px;
}
.title-relaterposts-1 a{
    color: black !important;
    font-weight:bold;
}
.text-hoverss{
    color: rgb(255, 255, 255);
}
.project-block_three-overlay{
        bottom: -20px;
}
.project-block_three_button {
    margin-top:20px;
}
.project-block_three_button a{
    color: #fff;
    text-decoration: none;
}
.project-block_three-image::before {
    top: 77%;
}
.infor-company{
    color: black;
}
.infor-company:hover{
    text-decoration:underline;
    color: var(--main-color);
}
.news-detail_image:before{
    background: none;
}
#cookieConsent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #222; /* Màu nền tối */
    color: #fff;            /* Màu chữ trắng */
    padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 9999;          /* Đảm bảo nằm trên các thành phần khác */
    /* Căn chỉnh bố cục ngang */
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    gap: 20px; /* Khoảng cách giữa chữ và nút */
    box-sizing: border-box;
}
.text-cookie {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    flex: 1; /* Chiếm hết không gian còn trống */
    color: #fff;
    text-align: center;
}
.cookie-actions {
    display: flex;
    gap: 10px; /* Khoảng cách giữa 2 nút */
    flex-shrink: 0; /* Không cho khu vực này bị co lại quá nhỏ */
}
.btn-cookies {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
#acceptCookies {
    background-color: var(--main-color);
    color: white;
}
#acceptCookies:hover {
    background-color: black;
    border:1px solid #fff;
}
#rejectCookies {
    background-color: transparent;
    border: 1px solid #777;
    color: #ccc;
}
#rejectCookies:hover {
    background-color: var(--main-color);
    color: #fff;
    border:1px solid #fff;
}
#menuNav li a.active {
    color: var(--main-color); /* Màu đỏ hoặc màu chủ đạo của web */
    font-weight: bold;
}
#menuNav li.dropdown > a.active {
    color: var(--main-color);
}
#lang_top {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#lang_top a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;       /* Độ rộng vùng bấm */
    height: 40px;      /* Độ cao vùng bấm */
    border-radius: 50%; /* Bo tròn thành hình tròn */
    background-color: rgba(0, 0, 0, 0.05); /* Màu nền xám mờ nhẹ */
    border: 1px solid rgba(0, 0, 0, 0.1);  /* Viền mỏng tinh tế */
    text-decoration: none;
    transition: all 0.3s ease; /* Hiệu ứng mượt mà */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Đổ bóng nhẹ */
}
#lang_top .flag-icon {
    font-size: 20px;   /* Kích thước lá cờ */
    line-height: 1;
    width: 24px;       /* Ép chiều rộng nếu font-icon không đều */
    height: auto;
    border-radius: 2px; /* Bo nhẹ góc lá cờ cho mềm mại */
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); /* Bóng đổ cho lá cờ nổi lên */
}
#lang_top a:hover {
    background-color: #fff; /* Nền chuyển sang trắng */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Bóng đổ đậm hơn */
    transform: translateY(-2px); /* Nút bay lên nhẹ 2px */
    border-color: var(--main-color, #007bff); /* Đổi màu viền theo màu chủ đạo web */
}
#lang_top a:active {
    transform: translateY(0); /* Nút lún xuống lại */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.counter-one {
    padding: 40px 0px 40px;
}
.counter-block_one-outline{
    height: 276px;
}
.outer-container {
    position: relative; 
    width: 100%;        
    height: 100%;       
    overflow: hidden;   
    padding: 10px 0px 30px;
}
.overlay {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 145, 247, 20%); 
    z-index: 1; 
}
.animation_mode, 
.animation_mode-two {
    position: relative; 
    z-index: 2;         
}
.clients-box_one.style-two{
    margin-bottom:40px;
}
.clients-box_one{
    margin-top: 40px;
}
/*============================PADDING - SECTION=================================*/
.news-one {
    padding: 40px 0px 40px;
}
.project-one{
    padding: 50px 0px 50px;
    border-radius: unset;
}
.service-one{
    padding: 10px 0px 40px;
}
/*==============================================================================*/
.project-style-one-items {
    display: block !important; /* Bắt buộc để Sticky hoạt động */
    position: relative;
    padding-bottom: 50px;
}
/* Các khối Project */
.project-block_one {
    position: -webkit-sticky;
    position: sticky;
    top: 120px; 
    z-index: 1;
    width: 100%;    
    margin-bottom: 20px; 
    border-radius: 20px;
    overflow: hidden;
}
.project-block_one-image {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;    
    background-color: #f0f0f0; 
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}
/* 2. Ép cái ảnh to ra để che lấp viền */
.project-block_one-image img {
    display: block;
    width: 101% !important;  /* Rộng hơn khung 1 tí */
    height: 101% !important; /* Cao hơn khung 1 tí */
    max-width: unset !important; /* Bỏ giới hạn chiều rộng */
    margin-left: -1px; /* Kéo sang trái lấp kẽ hở */
    margin-top: -1px;  /* Kéo lên trên lấp kẽ hở */
    object-fit: cover; /* Đảm bảo ảnh không bị méo khi kéo giãn */
    border-radius: unset;
}
.project-block_one.style-two .project-block_one-image:before{
    left:-1px;
    right:auto;
    background:url('../content/images/icons/share-22.png');
}
.project-block_one-image:before {
    position: absolute;
    content: '';
    right: 0px;
    top: -1px;
    width: 393px;
    height: 111px;
    z-index: 1;
    background: url(../content/images/icons/share-11.png);
    background-repeat: no-repeat;
}
::-webkit-scrollbar {
    width: 10px; /* Độ rộng dọc */
    height: 10px; /* Độ cao ngang (nếu có cuộn ngang) */
}
/* 2. Phần nền của thanh cuộn (Track) */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Màu nền xám nhạt */
    border-radius: 5px;  /* Bo góc cho mềm */
}
/* 3. Phần thanh trượt (Thumb) - Cái cục để kéo */
::-webkit-scrollbar-thumb {
    background: #888; /* Màu của thanh kéo (chỉnh theo màu chủ đạo của web ní) */
    border-radius: 5px; /* Bo tròn nhìn cho hiện đại */
    border: 2px solid #f1f1f1; /* Tạo viền trắng xung quanh để nó tách biệt với track */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--main-color); /* Đậm hơn xíu khi hover */
    cursor: pointer;
}
.btn-style-threes{
    position: relative;
    font-weight:700;
    font-size: 14px;
    overflow: hidden;
    text-align:center;
    border-radius:50px;
    display:inline-block;
    padding:8px 8px 8px 28px;
    color: var(--white-color);
    text-transform: uppercase;
    font-family: "Lexend Deca", sans-serif;
    background-color: var(--main-color);
}
.btn-style-threes:before{
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    position: absolute;
    width: 200%;
    height: 200%;
    content: "";
    top: -200%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
    background-color:var(--black-color);
}
.btn-style-threes:hover:before{
    top: 0%;
}
.btn-style-threes:hover i{
    background-color:var(--main-color);
}
.btn-style-threes i{
    position: relative;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    margin-left:15px;
    border-radius:50px;
    display:inline-block;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    background-color:var(--black-color);
}
.btn-style-threes .btn-wrap{
    position:relative;
    z-index:1;
    float:left;
    overflow: hidden;
    display: inline-block;
}
.btn-style-threes .btn-wrap .text-one{
    position: relative;
    display: block;
    color: var(--white-color);
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.btn-style-threes:hover .btn-wrap  .text-one:first-child{
    -webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%);
}
.btn-style-threes .btn-wrap .text-two{
    position: absolute;
    top: 100%;
    display: block;
    color: var(--white-color);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn-style-threes:hover .btn-wrap .text-two{
    top: 50%;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-style-threes:hover .btn-wrap .text-two{
    color:var(--white-color);
}
.btn-style-threes:hover{
}
.btn-style-threes:hover:before{
    top: -40%;
}
.gioihantu{
  display: -webkit-box;
  -webkit-line-clamp: 8;    /* Số dòng muốn hiển thị */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slider-one_title{
    display: none;
}
.counter-one_pattern {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-position: 0px bottom; /* Bắt đầu từ 0 */
    background-repeat: repeat-x;
    /* Thêm will-change để trình duyệt tối ưu render, mượt hơn */
    will-change: background-position; 
    animation: slideBackground 20s linear infinite;
}
@keyframes slideBackground {
    from {
        background-position: 0px bottom;
    }
    to {
        /* Chỗ này quan trọng: Thay 1920px bằng chiều rộng THỰC TẾ của ảnh */
        /* Dấu âm (-) để nó chạy từ phải sang trái (kiểu xe đang chạy tới) */
        background-position: -1920px bottom; 
    }
}
.main-footer_text {
    max-width: 404px;
    margin-bottom: unset;
}
.main-footer_logo{
    margin-bottom: unset;
}
.gioihantu1{
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* Số dòng muốn hiển thị */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-widget .post {
    min-height: 110px;
    margin-bottom: unset;
}
.about-one_pattern-layer {
    animation: slideBackground 20s linear infinite;
}
.blog-detail_content table {
    width: 100%;
    border-collapse: collapse; /* Gom các đường viền lại cho liền mạch */
    margin-bottom: 20px;
}
.blog-detail_content table td, 
.blog-detail_content table th {
    border: 1px solid #ddd; /* Kẻ đường viền màu xám */
    padding: 8px 12px;      /* Tạo khoảng thở cho chữ */
    vertical-align: top;
}
/* Thêm màu nền cho tiêu đề cột (nếu có) để nhìn xịn hơn */
.blog-detail_content table th {
    background-color: #f4f4f4;
    font-weight: bold;
}
/* Thiết lập cho thẻ bao quanh (UL) */
.contentulli ul {
    list-style-type: disc;      /* Bắt buộc hiển thị dấu chấm tròn */
    list-style-position: outside; /* Đẩy dấu chấm ra ngoài lề văn bản cho thẳng hàng */
    padding-left: 20px;         /* Tạo khoảng trống bên trái để chứa dấu chấm */
    margin-left: 20px;          /* Căn lề cả khối danh sách so với văn bản xung quanh */
    margin-bottom: 15px;        /* Khoảng cách dưới cùng của cả danh sách */
}
/* Thiết lập cho từng dòng (LI) */
.contentulli li {
    margin-bottom: 5px;         /* Tạo khoảng thoáng giữa các dòng */
    /* Không cần padding-left hay margin-left ở đây nữa để tránh bị thụt vào quá sâu */
}
.project-block_one-overlay_inner{
    background-color: rgb(0 0 0 / 50%);
    border-radius: 0% 10% 0% 10%;
}
.project-block_one-text{
    color: #ffffff;
}
.project-block_one-overlay_inners{
    position: relative;
    width: 100%;
    max-width: 478px;
    min-height: 332px;
    padding: 42px 45px 42px;
    background-size: cover;
    background-color: rgb(0 0 0 / 50%);
    border-radius: 10% 0% 10% 0%;
}
.project-block_one-heading a {
    color: var(--white-color);
}
.project-block_one-title {
    color: rgb(161 216 255);
}
.feature-block_two_text{
    width: max-content;
}
.about-one_button{
    margin-top: 40px
}
.text-btn-post{
    width: max-content;
}
.section--padding{
    padding: 40px;
}
.error-code{
    margin-bottom: 10px;
}