@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Huninn&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libertinus+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');



body
{
    font-family: 'Onest',sans-serif;
}
img {
    max-width: 100%;
}
/* --- TỐI ƯU LAYOUT: ẢNH TO PHÍA TRÊN - CHỮ PHÍA DƯỚI --- */
:root {
    --gold-color: #d3a719;       /* Tông màu Vàng Gold Hoàng Gia mờ dịu */
    --gold-hover: #fcd218;       /* Vàng Gold đậm khi hover */
    --dark-matte: #111111;       /* Đen sâu tinh tế */
    --primary-color:#fff;
}
/*new header*/
/* Tiện ích khoảng cách chữ */
.tracking-wider { letter-spacing: 1.5px; }
.tracking-widest { letter-spacing: 3px; }

/* 1. TOP ANNOUNCEMENT BAR */
.top-announcement {
    background: linear-gradient(90deg, #111 0%, #1c1c1c 50%, #111 100%);
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1050;
}
.small-close {
    padding: 0.5rem;
    font-size: 0.6rem;
}

/* 2. HERO CONTENT SECTION */
.hero-section {
    position: relative;
    z-index: 30;
    display: block;
    height: 100%;
}

/* --- TỐI ƯU VIDEO YOUTUBE LÀM NỀN TRÀN MÀN HÌNH VÀ SỬA LỖI ĐÈ CHỮ --- */
.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ngăn người dùng click chuột phải hoặc bấm dừng trên video */
    z-index: -1; /* QUAN TRỌNG: Đẩy video xuống dưới cùng để không đè chữ */
}

.youtube-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height:100vh; /* Tỷ lệ 16:9 dựa trên chiều rộng màn hình */
    min-height: 100vh;
    min-width: 177.77vh; /* Tỷ lệ 16:9 dựa trên chiều cao màn hình */
    transform: translate(-50%, -50%); /* Căn giữa hoàn hảo */
}
.hero-main-heading.display-2 {
    color: #fff;
    font-size: 37px;
}
.hero-main-heading.display-2 p:nth-child(2n) {
    font-weight: 600;
    font-size: 34px;
}
/* Trên các màn hình cực rộng, tính toán lại tỷ lệ để không lộ viền đen */
@media (min-aspect-ratio: 16/9) {
    .youtube-background {
        height: 100%;
/*        height: 56.25vw;*/
    }
}
@media (max-aspect-ratio: 16/9) {
    .youtube-background {
/*        width: 177.77vh;*/
        width: 177.77vh;
    }
}

/* Lớp phủ màu Gradient & Pattern điện ảnh */
.hero-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 0%) 50%, rgb(11 11 11 / 0%) 100%);
    z-index: 2;
}

/* 3. PREMIUM FIXED NAVIGATION BAR */
.fixed-top-custom {
/*    position: absolute;*/
/*    top: 40px; */
    left: 0;
    width: 100%;
    z-index: 1000;
/*    padding: 20px 0;*/
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Trạng thái biến đổi khi cuộn trang xuống (Glassmorphism) */
.fixed-top-custom.navbar-scrolled {
    position: fixed;
    top: 0 !important;
    padding: 12px 0;
    background:#fff;
/*    background: rgba(15, 15, 15, 0.75);*/
/*    backdrop-filter: blur(15px);*/
/*    -webkit-backdrop-filter: blur(15px);*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Định dạng Logo */

/* --- ĐỊNH DẠNG LOGO HÌNH ẢNH --- */
.logo-image-link {
    display: inline-block;
    padding: 0;
    margin: 0;
}

.logo-img {
    height: 70px; /* Thay đổi chiều cao này để tăng/giảm kích thước logo theo ý bạn */
    width: auto;  /* Tự động tính chiều rộng theo tỷ lệ của ảnh để không bị méo */
    object-fit: contain;
    transition: transform 0.3s ease; /* Tạo hiệu ứng mượt khi cuộn trang */
}

/* Thêm hiệu ứng thu nhỏ logo một chút khi cuộn màn hình xuống (Nếu thích) */
.fixed-top-custom.navbar-scrolled .logo-img {
    height: 75px; 
}

.logo-text .main-title {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 2px;
    color: #fff;
}
.logo-text .sub-title {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 0.65rem;
    letter-spacing: 5.5px;
    color: var(--primary-color);
    line-height: 1.2;
}

/* Thanh Menu Links */
.navbar-nav .nav-link {
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
/*    color: rgba(255,255,255,0.7) !important;*/
    color: #000 !important;
    position: relative;
    transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #009165!important;
}
/* Đường gạch chân hiệu ứng chạy khi Hover */
.navbar-nav .nav-link:not(.nav-btn-contact)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 80%;
}

/* Nút Contact bo tròn cao cấp */
.nav-btn-contact {
    border: 1.5px solid var(--primary-color) !important;
    color: #fff !important;
    background: transparent;
    transition: all 0.3s ease !important;
}
.nav-btn-contact:hover {
    background: var(--primary-color) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(127, 205, 19, 0.4);
}

/* 4. HERO CORE TEXT TYPOGRAPHY */
.hero-content-wrapper {
    z-index: 10; /* QUAN TRỌNG: Đẩy toàn bộ nội dung text lên trên video */
    position: relative;
}
.hero-main-heading {
    font-family: var(--heading-font);
    font-weight: 100;
    letter-spacing: -0.5px;
    line-height: 1.25;
    text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.text-gradient {
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 30%, #b3b3b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-main-heading p:last-child {
    margin-bottom: 0;
/*    font-weight: bold;*/
    letter-spacing: 2px;
}
.padd_top {
    padding-top: 35em;
}
/* Review Badge */
.review-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.badge-text {
    font-size: 0.75rem;
}

/* 5. MOUSE WHEEL SCROLL DOWN INDICATOR */
.mouse-icon {
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}
.mouse-icon .wheel {
    width: 4px;
    height: 8px;
    background-color: #fff;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 1.6s infinite ease-in-out;
}
@keyframes scrollWheel {
    0% { top: 6px; opacity: 0; }
    30% { opacity: 1; }
    100% { top: 18px; opacity: 0; }
}
.scroll-link:hover .mouse-icon {
    border-color: var(--primary-color);
}
.scroll-text {
    font-size: 0.65rem;
}

/* Khống chế độ rộng text bổ sung */
.max-w-600 { max-width: 600px; }


/* --- CSS DROPDOWN GIỐNG HỆT HÌNH MẪU (ĐÃ SỬA LỖI KHÓ RÊ CHUỘT) --- */

/* Khống chế vị trí để căn đều mũi tên đỉnh */
.dropdown-custom {
    position: relative;
}

/* Định dạng hộp Dropdown chính */
.premium-dropdown-menu {
    background: rgba(45, 45, 45, 0.65) !important; /* Tăng nhẹ độ đậm nền để rõ chữ như hình */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Viền bao quanh hộp */
    border-radius: 0px !important; /* Ép vuông góc hoàn toàn, không bo tròn */
    padding: 0 !important; /* Xóa khoảng trống mặc định trên dưới */
    min-width: 260px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    
    /* Đẩy vị trí menu xuống cách chữ 15px */
    left: 50% !important;
    top: 100% !important;
    transform: translateX(-50%) translateY(15px) !important;
    margin: 0 !important;
}

/* 🌟 MẸO FIX LỖI: Tạo vùng đệm vô hình kết nối giữa nút Services và Menu */
.dropdown-custom::after {
    content: '';
    position: absolute;
    bottom: -20px; /* Phủ kín khoảng hở 15px */
    left: 0;
    width: 100%;
    height: 25px;
    display: none;
    z-index: 1;
}
@media (min-width: 992px) {
    .dropdown-custom:hover::after {
        display: block; /* Chỉ kích hoạt khi hover */
    }
}

/* Tạo mũi tên nhọn ở đỉnh menu chỉ lên chữ SERVICES */
.premium-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent rgba(255, 255, 255, 0.15) transparent;
    z-index: 10;
}

/* Cấu trúc từng dòng dịch vụ bên trong */
.premium-dropdown-menu .dropdown-item {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: 1px;
    white-space: normal; /* Cho phép tự xuống hàng nếu chữ dài giống chữ PPF */
    border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* Đường gạch phân cách giữa từng dòng */
    transition: background 0.2s ease, color 0.2s ease;
}

/* Xóa đường gạch dưới cho dòng cuối cùng */
.premium-dropdown-menu li:last-child .dropdown-item {
    border-bottom: none;
}

/* Hiệu ứng khi rê chuột vào từng dòng */
.premium-dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Tự động kích hoạt thả menu khi hover chuột trên Desktop (Không cần click) */
@media (min-width: 992px) {
    .dropdown-custom:hover .premium-dropdown-menu {
        display: block !important;
    }
}

/* Ẩn mũi tên tam giác mặc định thô của Bootstrap */
.dropdown-toggle::after {
    display: none !important;
}

/*new header*/

/*index*/
/* --- HIỆU ỨNG NỀN CỐ ĐỊNH KHI SCROLL (PARALLAX) --- */
.parallax-section {
    height: 60vh; /* Chiều cao của section (bằng 60% màn hình, bạn có thể tăng giảm tùy ý) */
    min-height: 400px;
    
    /* Thiết lập ảnh nền */
    /* Thay bằng link ảnh thật của bạn */
/*    background-position: center center;*/
    background-position:center 25%;
    background-size: cover;
    background-repeat: no-repeat;
    
    /* 🌟 THUỘC TÍNH QUAN TRỌNG: Giữ ảnh nền đứng yên khi cuộn trang */
    background-attachment: fixed; 
    z-index: 0;
}

/* Lớp phủ tối (Overlay) che mờ ảnh nền */
.parallax-overlay {
/*    background-color: rgba(11, 11, 11, 0.45); */
    z-index: 1;
}

/* Kiểu chữ siêu mỏng và thanh lịch */
.parallax-heading {
/*    font-family: 'Montserrat', sans-serif;*/
font-weight: 300; /* Font weight mỏng */
letter-spacing: 0.5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5); /* Đổ bóng nhẹ cho chữ sắc nét */
}

/* Lớp z-index để đẩy chữ lên trên lớp phủ tối */
.z-3 {
    z-index: 3;
}

/* TỐI ƯU TRÊN ĐIỆN THOẠI: 
   Một số trình duyệt trên Mobile (iOS/Safari) không hỗ trợ tốt `background-attachment: fixed`. 
   Đoạn code dưới sẽ tự động chuyển về dạng cuộn bình thường trên mobile để tránh lỗi vỡ ảnh. */
   @media (max-width: 991px) {
    .parallax-section {
        background-attachment: scroll;
        height: 45vh;
    }
    .padd_top 
    {
        padding-top: 20em;
    }
    .hero-main-heading.display-2
    {
        font-size: 30px;
    }
    .hero-main-heading.display-2 p:nth-child(2n)
    {
        font-size: 31px;
    }


}
.z-0
{
    z-index: 0;
}



/* Tiêu đề chính */
.services-main-heading {
/*    font-family: 'Montserrat', sans-serif;*/
color: var(--dark-matte);
letter-spacing: 1px;
font-size: 2.3rem;
font-weight: 500;
}

.services-sub-text {
    font-size: 0.92rem;
    max-width: 800px;
    color: #666;
}

/* Thanh phân cách mỏng vàng Gold */
.gold-divider {
    width: 50px;
    height: 1.5px;
    background-color: var(--gold-color);
}

/* Thẻ bọc ngoài - Loại bỏ bo tròn tạo khối góc cạnh cao cấp */
.service-card-premium {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 0px !important; 
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column; /* Đảm bảo xếp dọc chuẩn: Ảnh trước -> Chữ sau */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 🌟 KHUNG ẢNH TO RA: Tăng chiều cao lên 280px để ảnh trông bề thế và rõ nét */
.service-img-wrapper {
    position: relative;
    width: 100%;
    height: 280px; 
    overflow: hidden;
    background-color: #000;
}

.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giữ nguyên tỉ lệ ảnh không bị móp méo */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 🌟 KHỐI CHỮ NẰM HOÀN TOÀN BÊN DƯỚI ẢNH */
.service-card-body {
    padding: 30px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Tự động đẩy phần body khít với chiều cao các cột bên cạnh */
    background: #ffffff;
}

/* Số thứ tự dịch vụ góc trên bên phải của phần body chữ */
.service-num {
/*    font-family: 'Montserrat', sans-serif;*/
font-size: 2.2rem;
font-weight: 300;
color: rgba(191, 161, 95, 0.18); /* Màu vàng gold trong suốt đặt tinh tế */
position: absolute;
top: 20px;
right: 24px;
line-height: 1;
}

/* Tiêu đề dịch vụ chữ in hoa */
.service-card-title {
/*    font-family: 'Montserrat', sans-serif;*/
font-size: 0.95rem;
font-weight: 600;
letter-spacing: .5px;
color: var(--dark-matte);
margin-bottom: 12px;
line-height: 1.4;
padding-right: 40px; /* Tránh đè lên số thứ tự */
}

/* Mô tả ngắn dịch vụ */
.service-card-desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    letter-spacing: .3px;
    flex-grow: 1; /* Đẩy nút Discover More luôn nằm thẳng hàng sát đáy card */
}

/* Nút bấm chữ Vàng Gold kèm icon mũi tên */
.service-gold-btn {
/*    font-family: 'Montserrat', sans-serif;*/
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
color: var(--gold-color) !important;
text-decoration: none;
letter-spacing: 1.5px;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
width: fit-content;
}

.service-gold-btn i {
    transition: transform 0.3s ease;
}

/* --- HIỆU ỨNG HOVER ĐIỆN ẢNH --- */
.service-card-premium:hover {
    transform: translateY(-6px); /* Card nhấc nhẹ lên tạo chiều sâu */
    border-color: rgba(191, 161, 95, 0.3);
    box-shadow: 0 20px 40px rgba(191, 161, 95, 0.06); /* Đổ bóng mịn màng sắc vàng kim */
}

/* Ảnh phóng to nhẹ chầm chậm bên trong khung khi hover */
.service-card-premium:hover .service-card-img {
    transform: scale(1.06);
}

/* Nút bấm đổi màu đậm hơn và mũi tên chuyển động */
.service-card-premium:hover .service-gold-btn {
    color: var(--gold-hover) !important;
}

.service-card-premium:hover .service-gold-btn i {
    transform: translateX(5px);
}
.catchuoi3
{
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 3;
/*    height: 95px;*/
display: -webkit-box;
-webkit-box-orient: vertical;
}
/* Khi hover vào toàn bộ card (hoặc link stretched) */
.service-card-premium:hover {
    transform: translateY(-6px);
    border-color: rgba(191, 161, 95, 0.3);
    box-shadow: 0 20px 40px rgba(191, 161, 95, 0.06);
}

/* Ảnh tự động phóng to khi rê vào bất cứ đâu trên card */
.service-card-premium:hover .service-card-img {
    transform: scale(1.06);
}

/* Chữ và mũi tên tự động đổi màu / nhích nhẹ */
.service-card-premium:hover .service-gold-btn {
    color: var(--gold-hover) !important;
}

.service-card-premium:hover .service-gold-btn i {
    transform: translateX(5px);
}
/* --- HIỆU ỨNG NỀN CỐ ĐỊNH KHI SCROLL (PARALLAX) --- */
.parallax-section1 {
    height: 60vh; /* Chiều cao khối hiển thị (60% màn hình) */
    min-height: 420px;
    
    /* 🌟 ĐỔ HÌNH NỀN MỚI CỦA BẠN VÀO ĐÂY */
   
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    
    /* Giữ ảnh nền đứng yên khi cuộn trang */
    background-attachment: fixed; 
}
.parallax-section2 {
    height: 60vh; /* Chiều cao khối hiển thị (60% màn hình) */
    min-height: 420px;
    
    /* 🌟 ĐỔ HÌNH NỀN MỚI CỦA BẠN VÀO ĐÂY */
   
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    
    /* Giữ ảnh nền đứng yên khi cuộn trang */
    background-attachment: fixed; 
}
/* Lớp phủ mờ giúp chữ trắng nổi bật lên trên nền ảnh */
.parallax-overlay {
/*    background-color: rgba(15, 15, 15, 0.45);*/
    z-index: 1;
}

/* Kiểu chữ thanh mảnh */
.parallax-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200 !important; /* Ép font mảnh tối đa cực sang */
    letter-spacing: 2px;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.6);
}

.z-3 {
    z-index: 3;
}

/* Tự động ngắt dòng tinh tế trên mobile */
@media (max-width: 991px) {
    .parallax-section {
        background-attachment: scroll; /* Tối ưu mượt mà trên iPhone/Safari */
        height: 45vh;
    }
    .parallax-heading {
        font-size: 2.2rem !important;
    }
}


.testimonial {
    padding: 80px 0;
}

.testimonial__heading {
    margin: 0 0 60px;
    text-align: center;
    font-size: 40px;
    line-height: 1.3;
    letter-spacing: .5px;
    font-weight: 200;
}

.testimonial__heading strong {
    font-weight: 600;
}

.testimonial__item {
    padding: 60px 0;
    border-top: 1px solid #d8d8d8;

    opacity: 0;
    transform: translateY(40px);
}

.testimonial__content {
    width: 85%;
    margin: 0 auto;
}

.testimonial__content p {
    margin: 0 0 25px;
    color: #333;
    font-size: 15px;
    font-style: italic;
    line-height: 1.8;

}

.testimonial__author {
    margin-top: 40px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
}

.testimonial__item.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: all .8s ease;
}

@media (max-width:991px){

    .testimonial{
        padding:50px 0;
    }

    .testimonial__heading{
        font-size:36px;
    }

    .testimonial__content{
        width:100%;
    }

    .testimonial__content p{
        font-size:18px;
    }

    .testimonial__author{
        font-size:18px;
    }

}

.project-home{
    padding:90px 0;
    background:#fff;
}

.project-home__header{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

.project-home__sub{
    display:inline-block;
    margin-bottom:12px;
    color:#c49a4b;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.project-home__title{
    margin:0;
    font-size:42px;
    font-weight:700;
    line-height:1.2;
    color:#111;
}

.project-home__desc{
    margin:18px auto 0;
    max-width:650px;
    color:#666;
    font-size:17px;
    line-height:1.8;
}

.project-home__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.project-home__item{
    transition:.35s;
}

.project-home__item:hover{
    transform:translateY(-8px);
}

.project-home__image{
    display:block;
    overflow:hidden;
/*    border-radius:10px;*/
background:#f5f5f5;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.project-home__image img{
    display:block;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    transition:transform .6s ease;
}

.project-home__item:hover .project-home__image img{
    transform:scale(1.08);
}

.project-home__name{
    margin:18px 0 0;
    font-size:19px;
    font-weight:600;
    line-height:1.5;
    text-align:center;
}

.project-home__name a{
    color:#222;
    text-decoration:none;
    transition:.3s;
}

.project-home__name a:hover{
    color:#c49a4b;
}

/* Responsive */

@media (max-width:1200px){

    .project-home__grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (max-width:991px){

    .project-home{
        padding:70px 0;
    }

    .project-home__title{
        font-size:34px;
    }

    .project-home__grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

}

@media (max-width:576px){

    .project-home__title{
        font-size:28px;
    }

    .project-home__desc{
        font-size:15px;
    }

    .project-home__grid{
        grid-template-columns:1fr;
    }

}

.partner-contact{
    padding:100px 0;
    background:#f8f8f8;
}

.partner-contact__wrap{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;

}

.partner-contact__brands{

   flex:1;
   display:flex;
   flex-direction:column;
   justify-content:center;

}

.partner-contact__form{

 flex:1;

}
.partner-contact__brands h2{

    font-size:42px;
    font-weight:700;
    color:#111;
    margin-bottom:20px;

}

.partner-contact__brands p{

    color:#666;
    line-height:1.9;
    margin-bottom:40px;

}

.partner-contact__logo-list{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

}

.partner-contact__logo{

    height:120px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.35s;

}

.partner-contact__logo img{

    max-width:120px;
    max-height:60px;

    filter:grayscale(100%);
    opacity:.6;

    transition:.35s;

}

.partner-contact__logo:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

    border-color:#c89b3c;

}

.partner-contact__logo:hover img{

    filter:none;
    opacity:1;
    transform:scale(1.05);

}
.partner-contact__form{

    background:#fff;

    padding:50px;

/*    border-radius:18px;*/

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    border:1px solid #eee;

}

.partner-contact__form h2{

    margin-bottom:30px;

    font-size:34px;

    font-weight:700;

}

.partner-contact__form form{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.partner-contact__form .full{

    grid-column:1/-1;

}

.partner-contact__form input,
.partner-contact__form select{

    height:56px;

}

.partner-contact__form textarea{

    min-height:150px;

}

.partner-contact__form input,
.partner-contact__form select,
.partner-contact__form textarea{

    width:100%;

    border:1px solid #ddd;

/*    border-radius:8px;*/

padding:15px;

transition:.3s;

}

.partner-contact__form input:focus,
.partner-contact__form select:focus,
.partner-contact__form textarea:focus{

    border-color:#c89b3c;

    box-shadow:0 0 0 4px rgba(200,155,60,.12);

    outline:none;

}

.partner-contact__form button{

    grid-column:1/-1;

    height:58px;

    background:#111;

    color:#fff;

    border:0;

/*    border-radius:8px;*/

font-size:15px;

font-weight:700;

letter-spacing:1px;

transition:.35s;

}

.partner-contact__form button:hover{

    background:#c89b3c;

    transform:translateY(-2px);

}
@media (max-width:991px){

    .partner-contact{
        padding:70px 0;
    }

    .partner-contact__wrap{
        grid-template-columns:1fr;
        gap:40px;
    }

}


.consult-form{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
}

.form-group.full{
    grid-column:1 / -1;
}

.consult-form textarea{
    min-height:170px;
}

.consult-form button{
    width:100%;
}


.partner-contact__logos a{

    background:#fff;

    border:1px solid #ececec;

/*    border-radius:12px;*/

transition:.35s;

}

.partner-contact__logos img{

    filter:grayscale(100%);
    opacity:.55;

    transition:.35s;

}

.partner-contact__logos a:hover{

    transform:translateY(-6px);

    border-color:#c89b3c;

    box-shadow:0 20px 35px rgba(0,0,0,.08);

}

.partner-contact__logos a:hover img{

    filter:none;
    opacity:1;
    transform:scale(1.05);

}
.partner-contact__logos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
}
.partner-contact__logos a {
    overflow: hidden;
    padding: 20px;
}
/*index*/
/*footer*/
.footer{
    background:#1d1d1d;
    padding:70px 0 50px;
    color:#fff;
}

.footer__services{

    text-align:center;

}

.footer__heading{

    font-size:24px;
    font-weight:700;

    margin-bottom:25px;

}

.footer__service-list{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;

    list-style:none;

    padding:0;
    margin:0;

}

.footer__service-list li{

    position:relative;

}

.footer__service-list li:not(:last-child)::after{

    content:"•";

    color:#777;

    margin-left:12px;

}

.footer__service-list a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.footer__service-list a:hover{

    color:#c89b3c;

}

.footer__line{

    width:100%;
    height:1px;

    background: rgb(255 255 255 / 81%);

    margin:60px 0;

}

.footer__info{

    text-align:center;

}

.footer__company{

    font-size:28px;

    font-weight:700;

    margin-bottom:25px;

    letter-spacing:1px;

}

.footer__address{

    color:#d2d2d2;

    font-size:17px;

    margin-bottom:20px;

}

.footer__phone{

    margin-bottom:18px;

}

.footer__phone a{

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.footer__phone a:hover{

    color:#c89b3c;

}

.footer__policy{

    margin-bottom:40px;

}

.footer__policy a{

    color:#d2d2d2;

    text-decoration:none;

    transition:.3s;

}

.footer__policy a:hover{

    color:#c89b3c;

}

.footer__social{

    display:flex;

    justify-content:center;

    gap:15px;

}

.footer__social a{

    width:52px;
    height:52px;

    background:#fff;

    color:#222;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

/*    border-radius:6px;*/

font-size:22px;

transition:.35s;

}

.footer__social a:hover{

    background:#c89b3c;

    color:#fff;

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(0,0,0,.3);

}

@media(max-width:768px){

    .footer{

        padding:60px 0 40px;

    }

    .footer__heading{

        font-size:20px;

    }

    .footer__company{

        font-size:24px;

    }

    .footer__service-list{

        flex-direction:column;
        gap:15px;

    }

    .footer__service-list li::after{

        display:none;

    }

}

.footer__info a {
    color: #fff;
}

.footer__social img {
    padding: 10px;
}

/*footer*/



.fixed-top-pc
{
/*    position: fixed;*/
}

.banner_tcon:before {
    position: absolute;
    content: "";
    background: #00000078;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.nen_trangcon {
    position: relative;
    overflow: hidden;
/*    max-height: 40vh;*/
}

.banner_tcon {
    position: relative;
}
























































#loading-overlay {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loading-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loading-logo img {
  width: 100px;
  height: auto;
  animation: pulse 1.8s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}


/*Header*/
.headers_opp
{
    position: sticky;
    z-index: 999;
    top:0;
    background: #0f100a;
}
.header-content
{   
    ;
    box-shadow: 0px 5px 5px 0px rgb(147 147 147 / 10%);
    /*background: #010133;*/
    /*color: #fff;*/
}
/*.logo_congty img 
{
    height: 120px;
}*/
.total_headers 
{
    display: flex;
    justify-content:end;
    align-items: center;
    position: relative;
    padding: 10px 0;
}

.menu_headertop {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tatpc
{
    display: none;
}
/*.logo_congty {
    width: 15%;
    position: absolute;
}*/
.khung_thongtinphai {
    width: 90%;
}/*
.name_ctytop {
    text-align: center;
    line-height: 37px;
    color: #efc034;
    font-size: 35px;
    font-family: 'Black Ops One','Mulish',sans-serif;
    padding-bottom: 5px;
}*/
/*.slogan_top {
    text-align: center;
    font-family: 'Lobster','Mulish',sans-serif;
    font-size: 17px;
}*/
/*.ttphaicuoi {
    display: flex;
    margin-top: -30px;
    justify-content: end;
    height: 30px;
    align-items: center;
}*/
/*.menu_headertop {
    padding: 8px 0 0 0;
}*/
/*.hotline_ttp a {
    text-decoration: none;
    color: #fff;
}

.hotline_ttp a strong {
    color: #38de1c;
}*/



.khungtts_rights {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav.menubottom ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

ul.cap1 li {
    display: inline-block;
    padding: 0px 15px;
    position: relative;
}

ul.cap2 {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    background: #000;
    display: block;
    position: absolute;
    z-index: 999;
    top:100%;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .1);
}

ul.cap1 a {
    text-decoration: none;
}

nav.menubottom {
    /*padding: 10px 0;*/
/*    text-align: center;*/
}

.logo_congty {
    width: 12%;
}

ul.cap1 li a {
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
/*    font-family: 'Nunito Sans';*/
}
ul.cap2 li:last-child
{
    border:none;
}
ul.cap1 li:hover > .cap2 {
 opacity: 1;
 visibility: visible;
 position: absolute;
 background: #000;
 top: 100%;
 z-index: 999;
/*    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .1);*/
box-shadow: 0px 0px 10px 4px rgb(255 255 255 / 9%);
}

ul.cap2 li {
    text-align: center;
    width: 290px;
    border-bottom: solid 1px #fff;
    padding: 10px 10px;
}

ul.cap2 li a {
    display: block;
    text-align: left;
    font-size: 18px;
    /*color: #fff;*/
    text-transform: none;
    font-weight: 400;
}

ul.cap3
{
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    background: #fff;
/*    display: block;*/
position: absolute;
z-index: 999;
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .1);
left: 100%;
}

ul.cap2 li:hover > ul.cap3 {
    opacity: 1;
    visibility: visible;
    position: absolute;
    top:0;
    z-index: 999;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .1);
    left: 100%;
}

.khungtimkiem_tts {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.datlichbtn a:hover {
    color: #ecd218;
}

.active_a
{
    color: #fcd218!important;
}
li a.active_a {
/*    border: 2px solid #265fa7;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 7px 10px;*/
}

.total_righttts {
    display: flex;
    color: #fff;
    justify-content: flex-end;
}

.box_phaithongtins {
    width: 14%;
}

.datlichbtn a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 17px;
}

.datlichbtn {
    padding-right: 15px;
}




.bottom_header {
    background: #4177bc;
}

#baivietmoinhat {
    padding: 30px 0;
}

#khungdautien_main
{
    padding:5em 0;
}

.items_khunggtphai {
    max-width: 60%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}


#hinhanh_khungchinh {
    padding: 30px 0 60px 0;
}


.item_bvchinh  a {
    text-decoration: none;
}

.item_bvchinh h4 {
    line-height: 25px;
    color: #333;
    padding: 15px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 700;
}
.item_bvchinh {
    text-align: center;
    margin: 2px;
    box-shadow: 0 0 10px 0 #eaeaea;
}
.tieude_baivietchinh {
    margin-bottom: 20px;
    position: relative;
    text-align: center;
}
.tieude_baivietchinh h4 {
    display: inline-block;
    padding: 0 15px;
    background: #ffffff;
    text-transform: uppercase;
    font-weight: 700;    font-weight: 700;
}
.tieude_baivietchinh:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background: red;
    left: 0;
    top: 15px;
    z-index: -1;
}
.item_bvchinh:hover h4 {
    color: #4177bc;
}
.banner_vbplchinh
{
    padding-bottom: 30px;
}
.noidung_baivietchinh {
    /*margin-bottom: 20px;*/
}
.total_ndgt {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px 0px;

}
.item_gthieumain {
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
}

.khung_mota_gtmain {
    color: #fff;
    font-size: 15px;
    margin-bottom: 10px;
}
.item_traigt {
    /*padding: 0 50px 0 0;*/
}
.item_gthieumain h3 a {
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}
.xemthem_gtmain {
    text-align: right;
}

.xemthem_gtmain a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}
.item_gthieumain h3:hover a {
    color: #4177bc;
} 
.tieude_gt {
    color: rgb(239 192 52);
    font-weight: 700;
    font-style: normal;
    font-size: 1.8em;
    margin-bottom: .5em;
    line-height: 1.3 !important;
}

.mota_gts {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.8;
}
/*.nutxemthem_gts a {
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #0A54A8;
}*/
#khungdautien_main {
/*    padding: 0 0 150px 0;*/
/*    background: url(../../images/background.png) no-repeat center center;*/
/*    background-size: cover;*/
}

.khung_itemss {
    background: rgba(79, 79, 79, .6);
    padding: 10px;
    border-radius: 10px;
}

.khung_itemss {
    width: 48%;
}

/*.nutxemthem_gts {
    line-height: 1;
    margin-top: 30px;
}

.nutxemthem_gts:hover i {
    transform: translateX(5px);
}
.nutxemthem_gts i {
    vertical-align: -1px;
    margin-left: 3px;
    transition: transform 0.3s;
}
.nutxemthem_gts:hover a {
    color: rgb(239 192 52);
}*/
/*Header*/
/*main*/





#khungdichvu_pl 
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 25px;
    margin-top: 30px;
}
.anhof {
    overflow: hidden;
    height: 370px;
}

.anhof img {
    width: 100%;
    height: 395px;
    object-fit: cover;
}
.name_dvply {
    text-align: center;
    background: #f7f7f7;
    padding: 15px;
}

.item_dvply a {
    text-decoration: none;
}

.name_dvply h4 {
    margin-bottom: 0;
    color: #333;
    font-size: 21px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 30px;
}
.item_dvply:hover h4 {
    color: #e00202;
}
.total_tschon {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
    width: 65%;
    margin: 0 auto;
}

.hinhanh_itemtsc img {
    height: 90px;
}

.item_tschon {
    text-align: center;
}

.hinhanh_itemtsc {
    margin-bottom: 10px;
}

.mota_itemtsc p {
    font-weight: 700;
}

.mota_itemtsc p:first-child {
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 20px;
}
#khung_tschon {
    padding-top: 20px;
}
.noidung_taisaochon {
    background: url(../../img/slide2-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 95%;
}
.mota_itemtsc {
    color: #fff;
}

.item_doitacchinh {
    display: flex;
    min-height: 135px;
    align-items: center;
}
/*main*/


/*footer*/
.khung_tongfooter {
    background-color: #000;
    padding: 4em 0px;
    color: #fff;
}
.khung_maps iframe {
    width: 100%;
    height: 175px;
}
.copyrights p {
    margin-bottom: 0;
}

.copyrights {
    text-align: center;
    font-size: 14px;
}

.copys_fter {
    padding: 7px 0;
    background: #3b3b3b;
    color: #fcd214;
}
.tieude_tktruycap {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 20px;
}
#tongtruycap {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 500;
}
#mvctable td {
    padding: .5em;
    text-align: left;
    border-bottom: 1px solid #ececec;
    line-height: 1.3;
    font-size: .9em;
}
.khung_ttfts p {
    margin-bottom: 5px;
}
.logo_ttduoi img {
    height: 160px;
}

.khungthongtinttduoi {
    width: 50%;
}

/*footer*/
/*breadcrumb*/
.breadcrumb_top ol.breadcrumb {
    margin-bottom: 0;
}
.breadcrumb_top {
    padding: 10px 0;
    border-bottom: solid 1px #f2f2f2;
    /*box-shadow: 0 5px 10px #eaeaea;*/
    background: #eee
}

.breadcrumb_top a {
    text-decoration: none;
    color: #333;
}
/*breadcrumb*/
/*mainchinh*/
.noidung_mainchinh {
    padding-top: 50px;
    padding-bottom: 40px;
}
.noidung_mainchinh table {
    width: 100%;
    margin-bottom: 1em;
    border-color: #ececec;
    border-spacing: 0;
}
.noidung_mainchinh td {
    color: #666;
}
.noidung_mainchinh th, .noidung_mainchinh td {
    padding: .5em;
    text-align: left;
    border-bottom: 1px solid #ececec;
    line-height: 1.3;
    font-size: .9em;
}
.noidung_mainchinh th:first-child,.noidung_mainchinh td:first-child {
    padding-left: 0;
}
td label, td .label, td input, td select, td form, td dl, td p {
    margin: .5em 0;
}
ul.cap1 li a:hover {
    color: #fcd218;
}
.total_dts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
.tieude_baivietchinh.tt_tops {
    margin-top: 30px;
}
.content_detail_tt {
    margin-bottom: 20px;
}
.paing_chung {
    margin-bottom: 20px;
    text-align: center;
}

.paing_chung a {
    text-decoration: none;
    color: #333;
    display: block;
    height: 2.25em;
    line-height: 2em;
    text-align: center;
    width: auto;
    min-width: 2.25em;
    padding: 0 7px;
    font-weight: bolder;
    border-radius: 99px;
    border: 2px solid #333;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    vertical-align: top;
}

.paing_chung {
    display: flex;
    justify-content: center;
    align-items: center;
}

.paing_chung a {
    margin: 0 2px;
}

.paing_chung span {
    display: block;
    height: 2.25em;
    line-height: 2em;
    text-align: center;
    width: auto;
    min-width: 2.25em;
    padding: 0 7px;
    font-weight: bolder;
    border-radius: 99px;
    border: 2px solid #000000;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    vertical-align: top;
    background: #000000;
    color: #fff;
}
.paing_chung a:hover {
    background: #000;
    color: #fff;
}

/*mainchinh*/
/*hot*/
#button-contact-vr {
    position: fixed;
    bottom: 0;
    z-index: 99999;
}
#button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
}
#gom-all-in-one .button-contact {
    transition: 1.6s all;
    -moz-transition: 1.6s all;
    -webkit-transition: 1.6s all;
}
#button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}
#zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196F3;
    background-color: rgba(33, 150, 243, 0.7);
}
.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: rgba(230, 8, 8, 0.7);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
}
@-webkit-keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}@keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}
.phone-vr-img-circle a {
    display: block;
    line-height: 37px;
}
.phone-vr-img-circle img {
    max-height: 25px;
    max-width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.phone-bar a, #phone-vr .phone-vr-circle-fill, #phone-vr .phone-vr-img-circle, #phone-vr .phone-bar a {
    background-color: #dd3333;
}
.phone-vr-img-circle {
    background-color: #e60808;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex
    ;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
@-webkit-keyframes phone-vr-circle-fill {
  0% {-webkit-transform: rotate(0) scale(1) skew(1deg);  }
  10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}
  20% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}
  30% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}
  40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}
  50% {-webkit-transform: rotate(0) scale(1) skew(1deg);}
  100% {-webkit-transform: rotate(0) scale(1) skew(1deg);}
}
.phone-bar a {
    position: absolute;
    margin-top: -65px;
    left: 30px;
    z-index: -1;
    color: #fff;
    font-size: 16px;
    padding: 7px 15px 7px 50px;
    border-radius: 100px;
    white-space: nowrap;
    text-decoration: none;
}
#zalo-vr .phone-vr-img-circle {
    background-color: #2196F3;
}

/*hot*/
.noidung_details {
    padding: 30px 0;
}

.tieude_tintucs {
    font-weight: 700;
    font-size: .7em;
    line-height: 1.05;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.name_tintucs h4 {font-size: 1.7em;line-height: 1.3;}

.name_tintucs {
    margin-top: 1em;
}
.is-divider {
    height: 3px;
    display: block;
    background-color: rgba(0, 0, 0, .1);
    margin: 1em 0 1em;
    width: 100%;
    max-width: 30px;
}
.post_tintucs {
    line-height: 1.2;
    text-transform: uppercase;
    font-size: .7em;
    font-weight: 400;
    margin-bottom: 15px;
}
.tieude_khac {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 5px;
}
.khungbvlienquan li a {
    text-decoration: none;
    color: #333;
    font-weight: 400;
}

.khungbvlienquan li {
    margin-bottom: 5px;
    font-size: 15px;
}

.khungbvlienquan li:hover a {
    color: #f1b600;
}
.layout_lienhe
{
    padding:30px 0;
}
.layout_lienhe table {
    width: 100%;
    margin-bottom: 1em;
    border-color: #ececec;
    border-spacing: 0;
}
.layout_lienhe th,.layout_lienhe td {
    padding: .5em;
    text-align: left;
    border-bottom: 1px solid #ececec;
    line-height: 1.3;
    font-size: .9em;
}
.layout_lienhe td {
    color: #666;
}
.layout_lienhe tbody,.layout_lienhe td,.layout_lienhe tfoot,.layout_lienhe th,.layout_lienhe thead,.layout_lienhe tr {
    border-color: inherit;
    border-style: solid;
    border-width: 1px;
}
/*Responsive*/


.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl 
{
    max-width: 1200px;
}

#mmm_bb
{
    display: none;
}
/*Form*/

/*Header New*/


ul.cap1 li i:before {
    font-size: 13px;
    margin-left: .1em;
    opacity: .6;
}
.tieude_chungs {
    padding-bottom:3em;
/*    text-align: center;*/
display: flex;
flex-direction: column;
align-items: center;
}

.tieude_chungs h2 {
    font-weight: 700;
    font-style: normal;
    font-size: 2em;
    color: #ffd30c;
    line-height: 1.3;
}
.is-divider {
    background-color: #fcd216;
}
.is-divider {
    display: block;
    height: 3px;
    margin: 5px 0;
    width: 100%;
}
.total_ndungabouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}
.name_ctys {
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 30px;
    color: #ffd30c;
    margin-top: 1em;
}
.btn_xemthems span {
    display: inline-block;
    background-color: transparent;
    border: 1px solid #fcd218;
    padding: 9px 2em;
    border-radius: 8px;
    font-size: 14px;
}

.btn_xemthems span a {
    color: #26a4dc;
}
.btn_xemthems span:hover {
    background: #0f100a;
}
.btn_xemthems a {
    color: #fcd218;
}
/*Header New*/
/*Index*/
#danhmucogiuamain {
    background: #0f100a;
    padding: 4em 0;
}

.box_services_total {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
}

#khungtaisao {
    padding: 4em 0;
    background: url(../../img/bg_kh.jpg);
    background-position: center;
/*    min-height: 700px;*/
position: relative;

}
.title_taisaochons {
    text-align: center;
}

.title_taisaochons h2 {
    font-weight: 700;
    font-style: normal;
    font-size: 1.6em;
    color: #284193;
    line-height: 1.3;
}

.items_reviews {
    background: #fff;
    padding: 15px;
}



#tintuc_news {
    padding: 4em 0 4em 0;
}
.tt_blogs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.name_blogs h4 a {
    text-decoration: none;
    color: #292929;
}

.name_blogs h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    min-height: 53px;
}

.name_blogs {
    padding: 15px 0 0 0;
}
.mota_blogs {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 3;
    height: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.xemthem_blogs a {
    background: #294998;
    display: inline-block;
    padding: 7px 15px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    border: solid 1px #294998;
}
.xemthem_blogs a:hover {
    background: transparent;
    color: #294998;
    border: solid 1px #294998;
}
.xemthem_blogs {
    margin-top: 10px;
}



#owl_phanhoi_list > .owl-prev-icon,#owl_phanhoi_list > .owl-next-icon {
  font-size: 30px;
  color: #333;
  padding: 10px;
  cursor: pointer;
}

#owl_phanhoi_list > .owl-nav {
  position: absolute;
  top: 40%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

#owl_phanhoi_list > .owl-nav button {
  background: none;
  border: none;
  pointer-events: all;
}

#owl_phanhoi_list > .owl-dots {
  text-align: center;
  margin-top: 15px;
}

#owl_phanhoi_list > .owl-dot {
  width: 12px;
  height: 12px;
  margin: 5px;
  display: inline-block;
  border-radius: 50%;
  background: #ccc;
}

#owl_phanhoi_list > .owl-dot.active {
  background: #333;
}
#owl_phanhoi_list i {
    color: #fff;
    font-size: 25px;
}
#owl_phanhoi_list .owl-dot.active span,#owl_phanhoi_list .owl-dot:hover span
{
    background: #284193!important;
}
#khung_doitacs {
    padding: 3em 0 3em 0;
}
/*Index*/
/*Footer*/
.iconmaxh ul li {
    display: inline-block;
    padding-right: 5px;
}

.iconmaxh li img {
    height: 30px;
}

.iconmaxh ul {
    padding: 0;
    margin-bottom: 5px;
}
.khungtttc li a {
    text-decoration: none;
    color: #fff;
    font-size: 17px;
}

.khungtttc ul {
    padding-left: 20px;
}

.khungtttc li {
    margin-bottom: 10px;
}

.khungtttc li a:hover {
    color: #fac401;
}
.loading-spinner img
{
    height: 80px
}
/*Footer*/
/*Main*/
#sphamchinh_bottom {
    padding: 2em 0;
}

.box_total_newproduct {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.box_left_product_cat {
    width: 21%;
}
.box_right_product
{
    width: 75%;
}
.tieude_pro {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 600;
}

ul.product-categories {
    padding: 0;
    list-style: none;
}

li.items_categories {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
}

li.items_categories a {
    display: inline-block;
    flex: 1;
    padding: 6px 0;
    text-decoration: none;
    font-size: 15px;
    color: #27abe2;
}

li.items_categories span {
    font-size: .7em;
    line-height: 3em;
    opacity: .5;
}

li.items_categories {
    border-top: 1px solid #ececec;
}

li.items_categories:first-child {
    border: none;
}
li.items_categories a:hover {
    color: #2a4496;
}
.boxs_splist
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}
.container.title {
    font-size: 15px;
}
.ndung_chitiets {
    padding: 2em 0;
}





.gallery-main {
  width: 100%;
  margin-bottom: 10px;
}
.gallery-cell img {
  width: 100%;
  display: block;
}

.gallery-thumbs {
  margin-top: 10px;
}
.gallery-thumb {
  width: 80px;
  margin-right: 5px;
  cursor: pointer;
  opacity: 0.6;
}
.gallery-thumb.is-selected {
  opacity: 1;
  border: 2px solid #293c91;
  border-radius: 5px;
  overflow: hidden;
}


.gallery-wrapper {
  position: relative;
  width: 100%;
}

.arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: white;
  font-size: 26px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.arrow-prev {
  left: 10px;
}
.arrow-next {
  right: 10px;
}
/* Khi hover thì hiện mũi tên với hiệu ứng mờ dần */
.gallery-wrapper:hover .arrow {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gallery-thumbs {
  margin-top: 20px;
}
/*Main*/

/*Chitietsp*/
ul.product_info {
    padding: 0;
    list-style: none;
}
li.name_pro_info h2 {
    color: #197ac2;
}
.khungtong_duoi {
    padding: 2em 0;
    background: #f9f9f9;
}
.title_page_load_id h3 {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
}
.title_page_load_id h3:after {}

.title_page_load_id h3 {
    display: inline-block;
    position: relative;
}

.title_page_load_id {
    border-top: solid 2px #dddddd;
    padding-top: 10px;
}
.title_page_load_id h3:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    background: #27abe2;
    right: 0;
    top: -15px;
}
.khung_sphamlienquan {
    padding: 2em 0;
}
.title_splienquan {
    border-top: 1px solid #ececec;
    padding-top: 15px;
}

.title_splienquan h4 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
}

.content_splienquan {
    padding-top: 1em;
}
/*Chitietsp*/
/*paging*/
.paging_chung {
    padding-top: 2em;
}

.paging_chung a {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: solid 1px #283e92;
    line-height: 30px;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    background: #283e92;
}

.paging_chung span {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: solid 1px #283e92;
    line-height: 30px;
    font-size: 16px;
    text-decoration: none;
    color: #283e92;
/*    background: #283e92;*/
}
/*paging*/
/*Blogs*/
.box_details_logs {
    display: flex;
    justify-content: space-between;
    align-items: self-start;
}
.tt_blog_left {
/*    width: 72%;*/
width: 100%;
}

.khungphai_blognews {
    width: 25.4%;
    border-left: 1px solid #ececec;
    padding: 0 15px 0px;
}
.total_blogs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 25px;
    margin-bottom: 20px;
}
.tieude_blogs {
    padding-bottom: 5px;
    text-transform: uppercase;
    font-weight: bold;
}
.blogs_ttinnews {
    margin-top: 1.5em;
}

.blogs_ttinnews ul {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
}


.blogs_ttinnews li {
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    margin-bottom: 15px;
    border-bottom: solid 1px #eaeaea;
    padding-bottom: 10px;
}

.blogs_ttinnews li:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.blogs_ttinnews li:hover h4 a {
    color: #fcd216;
}

.blogs_ttinnews li:hover h4 a {
    font-weight: bold;
}

.hinhanh_blogsnews {
    width: 30%;
}

.mota_blogsnews {
    width: 65%;
}

.mota_blogsnews h4 a {
    text-decoration: none;
    font-size: 14px;
    line-height: normal;
    color: #292929;
    transition: 0.3s all;
    font-weight: 500;
}

.mota_blogsnews h4 {
    line-height: 1;
    margin-bottom: 0;
}

.hinhanh_blogsnews img {
    border-radius: 50px;
    width: 65px;
    height: 65px;
    object-fit: cover;
}
.items_blogs:hover img {
    transform: scale(1.1);
}

.hinhanh_blogs {
    overflow: hidden;

    width: 100%;
    height: 280px;
    overflow: hidden;
}

.hinhanh_blogs img {
    transition: all 0.3s;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*Blogs*/
/*lienhe*/
.khung_mapss iframe {width: 100%;height: 300px;}
.khungtotalform {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.khungtotalform input {
    width: 70%;
    height: 35px;
    font-size: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: solid 1px #eeeeee;
    padding: 0 10px;
}

.khungtotalform label {
    font-size: 14px;
}
.khungtotalform textarea {
    font-size: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: solid 1px #eeeeee;
    padding: 10px 10px;
    width: 70%;
}
/*lienhe*/
/*Tim kiem*/
.boxs_splist_t
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
.workshome-title {
    margin-bottom: 2em;
}
.workshome-title span {
    font-size: 22px;
}
/*Tim kiem*/

/*new*/
.des_services {
    background: #f9f9f9;
    padding: 20px;
}
.des_services h4 {
    text-align: center;
    text-align: center;
    font-size: 1.3em;
    min-height: 65px;
    line-height: 150%;
}
.des_services h4 a {
    text-decoration: none;
/*    font-family: 'Merriweather';*/
color: #4e4e4e;
}
.mota_services {
 color: #969696;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 25px;
 -webkit-line-clamp: 3;
 display: -webkit-box;
 -webkit-box-orient: vertical;
}
.items_services:hover h4 a {
    color: #fdce02;
}
.images_services {
    overflow: hidden;
}
.items_services:hover .images_services img {
    transform: scale(1.1);
    transition: all 0.3s;
}

.images_services img {
    transition: all 0.3s;
    object-fit: cover;
    height: 284px;
    width: 100%;
}


#khungtaisao:before {
    position: absolute;
    content: "";
    background: #00000057;
    z-index: 9;
    width: 100%;
    height: 100%;
    top: 0;
}

.total_ktsaochon {
    position: relative;
    z-index: 9;
}

.name_reivews {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 0 1em;
    margin-bottom: 10px;
    margin-top: 10px;
}

.ktsao ul {
    list-style: none;
    padding: inherit;
    text-align: center;
    margin-bottom: 10px;
}

.ktsao li {
    display: inline-block;
    color: #f7ce16;
}
.mota_revires_sao p {
/*    font-family: 'Merriweather';*/
margin-bottom: 0;
font-size: 14px;
padding: 0 10px;
line-height: 1.7em;
font-weight: 300;
}
.total_projects {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.items_projects {
    position: relative;
}

/*.name_projects {
    position: absolute;
    z-index: 9;
    width: 100%;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    top: 0;
}*/
.images_projects img {
    object-fit: cover;
    height: 290px;
    width: 100%;
}
.name_projects h4 a {
    color: #fff;
    text-decoration: none;
    font-size: 30px;
    font-weight: 600;
/*    font-family: 'Merriweather';*/
}



.items_projects {
  position: relative;
  overflow: hidden;
  z-index:0;
}

.images_projects img {
  display: block;
/*  width: 100%;*/
/*  height: auto;*/
}

.name_projects {
  position: absolute;
  bottom: -100%; /* Ẩn hẳn xuống dưới */
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  transition: bottom 0.3s ease; /* hiệu ứng trượt */
  z-index: 2;
}

.overlays_project {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0; /* ẩn */
  transition: opacity 0.3s ease;
  z-index: 1;
}

.items_projects:hover .name_projects {
  bottom: 0; /* Trượt lên khi hover */
}

.items_projects:hover .overlays_project {
  opacity: 1; /* Làm mờ khi hover */
}
.items_projects:hover h4 a {
    color: #fcd218;
}
.name_projects h4 {
    margin-bottom: 0;
}
#datlich {
    padding: 4em 0;
}

#datlich {
    background: url(../../img/bg_datlich.jpg);
    background-position: center;
    position: relative;
}
#datlich:before {
    position: absolute;
    content: "";
    background: #00000057;
    z-index: 9;
    width: 100%;
    height: 100%;
    top: 0;
}
.total_datlich {
    position: relative;
    z-index: 9;
}
.total_datlichchung {
    width: 55%;
    margin: 0 auto;
/*    background: #0000008c;*/
background: #fff;
padding: 2em 3em;
}

.tieude_datlichchung {
/*    color: #fff;*/
margin-bottom: 30px;
}

.tieude_datlichchung p {
    text-align: center;
    font-size: 23px;
    margin-bottom: 0;
}

.tieude_datlichchung span {display: block;text-align: center;font-size: 30px;font-weight: bolder;}

.box_inputcontent {
    display: flex;
    position: relative;
    flex-wrap: wrap;
}

.box_inputcontent .icon-form {
    position: absolute;
    top: 9px;
    right: 15px;
    z-index: 9;
    font-size: 16px;
}

.box_inputcontent input {
    border: none;
    box-shadow: none;
    z-index: 2;
    padding: 8px 15px;
    height: 40px;
    background-color: #F6F6F6;
}

.box_inputcontent {
    margin-bottom: 20px;
}
.box_inputcontent textarea {
    width: 100%;
    border-radius: 5px;
    padding: 15px;
    outline: none;
    border:none;
    background: #f6f6f6;
}

.box_btn_send {
    background: #000000;
    display: flex;
}

.btn.btn_datlichchung {
    color: #fff;
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    border: solid 1px #fff;
}
.iconmaxh {
    margin-top: 1em;
}


/*new*/


/* Định dạng khung chứa slide */
    .khung_sliders {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    /* Đặt vị trí tương đối cho mỗi item slide để làm gốc tọa độ cho phần mô tả */
    .item-slide {
        position: relative;
        display: block;
        width: 100%;
    }
    .item-slide img {
        width: 100%;
        display: block;
    }
    /* Căn giữa phần mô tả đè lên trên hình */
    .slide-caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #ffffff;
/*        background: rgba(0, 0, 0, 0.6); //* Nền đen mờ giúp chữ dễ đọc hơn */
/*        padding: 15px 25px;*/
/*        border-radius: 5px;*/
        z-index: 10;
        pointer-events: none; /* Tránh cản trở việc click vào link của slide */
        max-width: 35%; /* Giới hạn chiều rộng chữ trên mobile */
    }
    /* Định dạng chữ tiêu đề và mô tả */
    .slide-caption h3 {
        margin: 0 0 10px 0;
        font-size: 24px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .slide-caption p {
    margin: 0;
    font-size: 40px;
    text-shadow: 0 0px 6px #000000a3;
    }
    
    /* CSS Responsive nhỏ cho thiết bị di động */
    @media (max-width: 768px) {
        .slide-caption {
            max-width: 70%;
/*            padding: 8px 15px;*/
        }
        .slide-caption h3 {
/*            font-size: 16px;*/
/*            margin-bottom: 5px;*/
        }
        .slide-caption p {
            font-size: 14px;
        }

    }


a.social-button.booknow_s {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}

a.social-button.booknow_s p {
    margin-bottom: 5px;
    font-size: 10px;
    color: red;
}

a.social-button.booknow_s i {
    color: #ffc107;
}

    
/*with*/
.custom_pd
{
    padding: 0 6em;
}
/*with*/

/* Định vị khung chứa slide để caption ăn theo */
.item-slider {
    position: relative;
    overflow: hidden;
}


/* Trạng thái mặc định: Ẩn và đẩy xuống dưới */
.slide-caption .caption-inner {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.9s ease-in-out;
}

/* Trạng thái khi slide được kích hoạt (Active) */
.owl-item.active .slide-caption .caption-inner {
    opacity: 1;
    transform: translateY(0);
    /* Nếu muốn hiệu ứng xuất hiện trễ một chút sau khi ảnh đổi xong: */
    transition-delay: 0.4s; 
}







/*new camnhan*/
.testimonial-container {
/*    width: 100%;*/
/*    max-width: 1200px;*/
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
    z-index: 0;
    padding: 6em;
}

/* Cấu trúc Item Slider */
.testimonial-item {
    display: flex;
    min-height: 450px;
    align-items: center;
}

/* Bên trái: Hình ảnh */
.testimonial-img {
    flex: 1;
    height: 450px;
    position: relative;
}
.testimonial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bên phải: Nội dung */
.testimonial-content {
    flex: 1.3;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}


/* Đảm bảo khung chứa nội dung là điểm mốc (relative) để căn dots tuyệt đối bên trong nó */
.testimonial-content {
    flex: 1.3;
    padding: 60px 80px 100px 80px; /* Tăng padding bottom từ 60px lên 100px để chừa không gian cho dots */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; 
}

/* Định dạng dots khi đã nằm trong .testimonial-content */
.testimonial-content .owl-dots {
    position: absolute;
    bottom: 40px; /* Cách đáy của .testimonial-content 40px */
    left: 80px;   /* Thụt lề trái 80px - bằng đúng padding-left của .testimonial-content */
    margin-top: 0 !important;
    text-align: left !important;
    z-index: 10;
}

.testimonial-content .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0 6px;
    background: #0c2340;
    opacity: 0.3;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.testimonial-content .owl-dots .owl-dot.active span {
    background: transparent;
    border: 2px solid #0c2340;
    width: 12px;
    height: 12px;
    opacity: 1;
    transform: translateY(2px);
}

.testimonial-content .owl-dots .owl-dot:focus {
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .testimonial-content {
        padding: 40px 30px 90px 30px; /* Chừa không gian cho dots ở giao diện mobile */
    }
    .testimonial-content .owl-dots {
        left: 30px; /* Thụt lề trái bằng padding của mobile */
        bottom: 30px;
    }
}


.quote-icon {
    font-size: 45px;
    color: #0c2340;
    margin-bottom: 20px;
}

.testimonial-title {
    font-size: 22px;
    font-weight: 700;
    color: #0c2340;
    line-height: 1.4;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.testimonial-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 15px;
}

.rating-stars {
    color: #ff5722;
    font-size: 16px;
}

/* Tùy biến các chấm chuyển slide (Owl Dots) nằm bên phải giống hình */
.owl-theme .owl-dots {
    position: absolute;
    bottom: 60px;
    left: 80px;
    margin-top: 0 !important;
    text-align: left !important;
}

.owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0 6px;
    background: #0c2340;
    opacity: 0.3;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.owl-theme .owl-dots .owl-dot.active span {
    background: #ffc107!important;
    border:none;
    width: 12px;
    height: 12px;
    opacity: 1;
    transform: translateY(2px); /* Căn giữa vòng tròn lớn với chấm nhỏ */
}

.owl-theme .owl-dots .owl-dot:focus {
    outline: none;
}


/* Chỉnh lại khung chứa sao để hiển thị nằm ngang hàng với nút Google */
.rating-stars {
    display: flex;
    align-items: center;
    gap: 15px; /* Khoảng cách giữa cụm sao và biểu tượng Google */
}

.stars {
    color: #ff5722;
    font-size: 16px;
}

/* Định dạng biểu tượng Google */
.google-review-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #f1f3f4; /* Màu nền xám nhẹ của Google */
    color: #4285F4; /* Màu xanh thương hiệu Google */
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Hiệu ứng khi di chuột (hover) vào biểu tượng Google */
.google-review-btn:hover {
    background-color: #4285F4; /* Đổi nền sang màu xanh Google */
    color: #ffffff; /* Chữ/Icon chuyển sang màu trắng */
    transform: scale(1.1); /* Phóng to nhẹ */
}

.google-review-btn1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #f1f3f4; /* Màu nền xám nhẹ của Google */
    color: #f6001e; /* Màu xanh thương hiệu Google */
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Hiệu ứng khi di chuột (hover) vào biểu tượng Google */
.google-review-btn1:hover {
    background-color: #f6001e; /* Đổi nền sang màu xanh Google */
    color: #ffffff; /* Chữ/Icon chuyển sang màu trắng */
    transform: scale(1.1); /* Phóng to nhẹ */
}





/* Responsive */
@media (max-width: 768px) {
    .testimonial-item {
        flex-direction: column;
    }
    .testimonial-img {
        width: 100%;
        height: 300px;
    }
    .testimonial-content {
        padding: 40px 30px 80px 30px;
    }
    .owl-theme .owl-dots {
        left: 30px;
        bottom: 30px;
    }
}
/*new camnhan*/



@media only screen and (min-width: 1px) and (max-width: 1184px)
{



    @media only screen and (min-width: 1px) and (max-width: 1025px)
    {
        .total_headers
        {
            justify-content:space-between;
        }
        .box_phaithongtins
        {
           width: 27%;
           display: flex;
           align-items: center;
           justify-content: space-between;
       }
       .tatpc
       {
        display: block!important;
    }
    .khung_thongtinphai,.khungtimkiem_top
    {
        display: none;
    }
    #mmm_bb
    {
        display: block;
    }
    .menu_mobile .icon_menu span
    {
        background: #2d3c93 !important;
    }
    .menucon ul li .hotline_res
    {
        color:#2d3c93 !important;
    }
}


@media only screen and (min-width: 1px) and (max-width: 990px)
{
    .box_phaithongtins
    {
        width: 25%;
    }
    .logo_congty
    {
        width: 15%;
    }
}
@media only screen and (min-width: 1px) and (max-width: 768px)
{	 

    .box_phaithongtins
    {
        width: 50%;
    }
    .box_total_newproduct,.box_details_logs
    {
        flex-direction: column;
    }
    .box_left_product_cat,.khungphai_blognews
    {
        display: none;
    }
    .box_right_product,.tt_blog_left
    {
        width: 100%;
    }
    .boxs_splist
    {
        grid-template-columns: repeat(2, 1fr);
    }
    .total_ndungabouts
    {
        grid-template-columns: 1fr;
    }
    .items_khunggtphai
    {
        max-width: 95%;
    }
    .datlichbtn a
    {
        font-size: 15px;
    }

}
@media only screen and (min-width: 1px) and (max-width: 750px)
{      
    .custom_pd
    {
        padding: 0 10px;
    }

}
@media only screen and (min-width: 1px) and (max-width: 500px)
{   
    .fixed-top-custom
    {
        background:none;
        position:none;
        backdrop-filter: none;
    }
    .khungbooknow 
    {
        left: 25px!important;
        bottom: 25px!important;
    }


    .slide-caption {
        max-width: 100%!important;
        zoom: 0.4!important;
    }

    .testimonial-container
    {
        padding-top: 4em;
    }
    .logo-img
    {
        height: 75px;
    }
    .fixed-top-custom
    {
        top: 0;
        position: sticky;
        background: #fff;
    }
    .partner-contact__form
    {
        padding: 20px ;
    }

    .noidung_mainchinh
    {
        padding:15px 0;
    }
    .datlichbtn,.khungtimkiem_tts
    {
        display: none;
    }
    #khungdautien_main
    {
        padding: 0;
    }
    .box_services_total
    {
     grid-template-columns: 1fr;
 }
 .total_projects
 {
    grid-template-columns: repeat(2, 1fr);
}
.name_projects h4 a
{
    font-size: 20px;
}
#tintuc_news {
    padding: 2em 0 0em 0;
}
.tieude_chungs
{
    padding-bottom: 1em;
}
.total_datlichchung
{
    width: 95%;
}
.total_datlichchung
{
    padding: 1em 2em;
}
.logo_congty 
{
    width: 100%;
}
.total_headers 
{
    width: 25%;
}


/*    */
.gallery-wrapper
{
    margin-bottom: 2em;
}
.breadcrumb_top 
{
/*        zoom: .8;*/
}
.paging_chung
{
    zoom: .8;
}

#back_to_top
{
    zoom:0.8;
}
.total_ndungabouts
{
    grid-template-columns: 1fr;
}
.tt_blogs,.total_blogs
{
    grid-template-columns: repeat(2, 1fr);
}
.xemthem_blogs a ,.khungbtn_submit
{
    zoom: .8;
}
.iconmaxh
{
    margin-bottom: 1em;
}
}