@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@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=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=Manrope:wght@200..800&display=swap');

:root
{
    --fa-primary-color:#fff;
    --stroke-width: 1px;
    --id-heading-stroke-color: #17262F;
    --shop-color-main: #FF5E14;
    --shop-color-text: #000;
    --shop-color-border: #eae4e8;
    --shop-color-button: #FF5E14;
    --shop-color-hover: #000;
}
body
{
    font-family: 'Manrope',sans-serif;
    font-size: 15px;
    overflow-x:hidden;
/*    padding: 0;*/
/*    margin: 0;*/
}

ul
{
/*    padding: 0;*/
/*    list-style: none;*/
}

a
{
    text-decoration: none;
}
/*a:hover
{
    outline: none;
}*/


a:hover, a:focus {
    color: var(--shop-color-hover);
    text-decoration: none;
    outline: none;
}


img {
    max-width: 100%;
}





.container {
/*    width: 100%;*/
max-width: 1440px;
/*    margin: 0 auto;*/
/*    padding: 0 30px;*/
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* --- 1. TOP BAR --- */
.top-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
    font-size: 15px;
    color: #555555;
    padding: 10px 0;
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-info span {
    margin-right: 25px;
}

.top-info i {
    margin-right: 6px;
    color: #666666;
}

.top-social {
    display: flex;
    gap: 15px;
}

.top-social a:hover {
    color: #ff5722;
}

/* --- 2. MAIN HEADER --- */
.main-header {
    background-color: #111111;
    color: #ffffff;
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 999;
}

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

.logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}
.main-header .logo img {
    height: 75px;
}
.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 22px;
    align-items: center;
    margin-bottom: 0;
}

.nav-menu ul li {
    position: relative;
}


.nav-menu ul li a {
    font-size: 17px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.75px;
    font-weight: 600;
}

.nav-menu ul li a:hover,
.nav-menu ul li a.active {
    color: var(--shop-color-main);
}


.nav-menu .dropdown-menu {
    position: absolute;
    top: 100%; /* Hiển thị ngay sát mép dưới của menu cha */
    left: 0;
    background-color: #ffffff; /* Màu nền menu con */
    min-width: 200px; /* Độ rộng tối thiểu của menu con */
    padding: 0;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Đổ bóng cho sang xịn mịn */
    border-radius: 4px;
    z-index: 999;
    
    /* Hiệu ứng ẩn/hiện mượt mà (Transition) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    
    /* Reset lại flex-direction nếu menu cha dùng flex */
    display: block; 
}

.nav-menu li.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu .dropdown-menu li {
    width: 100%;
    display: block;
}


.nav-menu .dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: #333333; /* Màu chữ menu con */
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left; /* Đảm bảo chữ canh lề trái */
    white-space: nowrap; /* Không cho chữ xuống hàng */
}

.nav-menu .dropdown-menu li a:hover {
    background-color: #f5f5f5; /* Màu nền khi hover vào mục con */
    color: #fc5602; /* Màu chữ khi hover (đổi theo màu chủ đạo của bạn) */
    padding-left: 25px; /* Hiệu ứng đẩy nhẹ chữ sang phải khi hover */
}

.nav-menu .has-dropdown > a i {
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.nav-menu .has-dropdown:hover > a i {
    transform: rotate(180deg); /* Xoay ngược mũi tên lên khi mở menu */
}



/* --- MENU CẤP 3 (DROPDOWN LEVEL 3) --- */

/* Style chung cho menu cấp 3 */
.nav-menu .dropdown-menu-lvl3 {
    position: absolute;
    top: 0;
    left: 100%; /* Đẩy menu cấp 3 sang hẳn bên phải của menu cấp 2 */
    background-color: #ffffff;
    min-width: 200px;
    padding: 0;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
    
    /* Ẩn mặc định với hiệu ứng mượt */
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s ease;
    display: block;
}

/* Khi hover vào li cấp 2 có chứa cấp 3, hiển thị menu cấp 3 */
.nav-menu .has-dropdown-lvl3:hover .dropdown-menu-lvl3 {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Định dạng các item bên trong menu cấp 3 */
.nav-menu .dropdown-menu-lvl3 li a {
    padding: 10px 20px;
}

/* Xử lý icon mũi tên ngang ở cấp 2 */
.nav-menu .has-dropdown-lvl3 > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu .has-dropdown-lvl3 > a i {
    font-size: 11px;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* Hiệu ứng xoay nhẹ mũi tên cấp 2 khi hover */
.nav-menu .has-dropdown-lvl3:hover > a i {
    transform: rotate(90deg);
}

/* --- TRƯỜNG HỢP TRÀN MÀN HÌNH BÊN PHẢI --- */
/* Nếu mục 'Chính sách' nằm ngoài cùng bên phải, menu cấp 3 đẩy qua phải sẽ bị lút màn hình. 
   Ta lật ngược nó sang bên trái bằng cách thêm class này hoặc cấu hình riêng cho mục cuối: */
.nav-menu ul li:last-child .dropdown-menu-lvl3, 
.nav-menu .has-dropdown:nth-last-child(3) .dropdown-menu-lvl3 { /* Hoặc chỉ định đích danh nếu cần */
    /* Nếu cần bạn có thể bật dòng dưới để ép menu cấp 3 quay vào trong */
    /* left: auto; right: 100%; transform: translateX(-10px); */
}






.live-stream {
    color: #ff4444 !important;
}

.live-stream .dot {
    width: 7px;
    height: 7px;
    background-color: #ff4444;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1s infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* HEADER ACTIONS */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-contact {
    background-color: #ff5722;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
/*    border-radius: 4px;*/
letter-spacing: 0.5px;
}

.btn-contact:hover {
    background-color: #e64a19;
}

.action-icon {
    font-size: 20px;
    color: #cccccc;
}

.action-icon:hover {
    color: #ffffff;
}

.cart-icon {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #ff4444;
    color: white;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 50%;
}

/* --- 3. HERO SLIDER (OWL CAROUSEL) --- */
.hero-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000000;
}

.slide-item {
    height: calc(100vh - 90px);
    min-height: 550px;
    background-size: cover;
    background-position: center right;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 650px;
    color: #ffffff;
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e5e5e5;
}
p.hero-subtitle i {
    font-size: 30px;
}
.hero-title {
    font-size: 76px;
    font-weight: 700;
    margin-bottom: 35px;
    letter-spacing: 1px;
}

.btn-more {
    display: inline-block;
    background-color: #ff5722;
    color: #ffffff;
    padding: 14px 40px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.btn-more:hover {
    background-color: #e64a19;
}

/* CUSTOM DOTS (Dấu chấm chuyển slide theo mẫu hình) */
.hero-slider .owl-dots {
    position: absolute;
    bottom: 40px;
    left: 30px;
    display: flex !important;
    gap: 10px;
    z-index: 10;
}

.hero-slider .owl-dots .owl-dot span {
    width: 8px !important;
    height: 8px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    margin: 0 !important;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.hero-slider .owl-dots .owl-dot.active span,
.hero-slider .owl-dots .owl-dot:hover span {
    background: #ffffff !important;
    transform: scale(1.2);
}

/* --- 4. FLOATING CHAT BUTTON --- */
.floating-chat {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #ff5722;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    transition: all 0.3s ease;
}

.floating-chat:hover {
    transform: scale(1.1);
    background-color: #e64a19;
}

.btn-sidebar {
    background: transparent;
    border: none !important;
    outline: none !important;
/*    margin-left: 15px;*/
color: white;
}
.btn-sidebar svg
{
    vertical-align: -.125em;
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: inline-block;
}

/*slide*/
/* --- HIỆU ỨNG KHỞI TẠO CHO HERO CONTENT --- */
.hero-slider .slide-item .hero-content {
    opacity: 0;
    transform: translateY(30px); /* Đẩy nhẹ xuống dưới để tạo hiệu ứng lướt lên */
    transition: all 0.8s ease;
}

/* --- KHI SLIDE ĐƯỢC KÍCH HOẠT (.active) --- */
.hero-slider .owl-item.active .slide-item .hero-content {
    opacity: 1;
    transform: translateY(0); /* Trả về vị trí cũ */
}

/* Tùy chỉnh độ trễ (delay) cho từng thành phần để tạo cảm giác mượt mà cao cấp */
.hero-slider .owl-item.active .hero-subtitle {
    animation: fadeInUp 0.6s ease both 0.2s;
}

.hero-slider .owl-item.active .hero-title {
    animation: fadeInUp 0.8s ease both 0.4s;
}

.hero-slider .owl-item.active .btn-more {
    animation: fadeInUp 1s ease both 0.6s;
}

/* Định nghĩa hiệu ứng keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*slide*/
/*index*/
.section-service-1 {
    margin-bottom: 80px;
    margin-top: 40px;
}
.section-service-1 .service-item {
    position: relative;
    z-index: 0;
}
.section-service-1 .service-item .count {
    font-size: 13.75rem;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    font-weight: 300;
    line-height: 1;
    width: 100%;
    text-align: center;
    --id-number-stroke-color: rgba(23, 38, 47, 0.1);
    --stroke-width: 1px;
    color: #fff;
    text-shadow: var(--stroke-width) 0 0 var(--id-number-stroke-color), calc(var(--stroke-width) * -1) 0 0 var(--id-number-stroke-color), 0 var(--stroke-width) 0 var(--id-number-stroke-color), 0 calc(var(--stroke-width) * -1) 0 var(--id-number-stroke-color);

}
.section-service-1 .service-item .title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 15px;
}
.section-service-1 .service-item .desc {
    font-size: 16px;
    margin-top: 10px;
    color: #4A5257;
    font-weight: 400;
}
.section-service-1 .service-item .action {
    margin-top: 20px;
}
.seemore-circle {
    font-size: 1.25rem;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F6F6F6;
    transition: .3s all;
    border: 1px solid transparent;
}
.icon-svg {
    width: 20px;
    height: 20px;
    fill: #000;
}

.section-aboutus {
    border-top: 1px solid #eae4e8;
    padding-top: 80px;
}
.block-slogan {
    position: relative;
    --id-special-text-bc-secondary: #F6F6F6;
}
.block-slogan .wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}
.block-slogan .wrapper-special-text {
    display: inline-block;
}

.block-slogan .wrapper-special-text {
    position: relative;
    padding-right: 3.2vw;
}
.block-slogan .wrapper-special-text .special-text {
    position: relative;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15vw;
    height: 15vw;
    border-radius: 100%;
    background: var(--bgUrl);
    font-size: 7.5vw;
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
}
.block-slogan .wrapper-special-text .special-text:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 7px solid var(--id-special-text-bc-secondary);
}
.block-slogan .wrapper-special-text .special-text:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    border: 1px solid var(--shop-color-main);
}

.block-slogan .heading-textbold {
    font-weight: bold;
    font-size: 5.2vw;
}
.block-slogan .heading-textstroke {
    color: #FFFFFF;
    font-size: 5.2vw;
    display: inline-block;
    text-shadow: var(--stroke-width) 0 0 var(--id-heading-stroke-color), calc(var(--stroke-width) * -1) 0 0 var(--id-heading-stroke-color), 0 var(--stroke-width) 0 var(--id-heading-stroke-color), 0 calc(var(--stroke-width) * -1) 0 var(--id-heading-stroke-color);
}
.section-aboutus .wrapper-content {
    margin-top: 80px;
}
.section-aboutus .action {
    margin-top: 30px;
}
.block-title .subtitle {
    color: #ff5e14;
    font-weight: 600;
    font-size: 18px;
    padding-bottom: 20px;
    display: inline-block;
}
.block-title .title {
    margin-bottom: 25px;
    font-weight: bold;
    line-height: 1.3;
    font-size: 2.5rem;
}
.block-title .desc {
    color: #4A5257;
    font-weight: 400;
    line-height: 1.5;
    font-size: 16px;
    margin-bottom: 0;
}
.button.btn-arrow {
    padding: 15px 30px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    gap: 3px;
    font-weight: 700;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    background-color: #000;
    color: #fff;
    text-transform: uppercase;
}
.button.btn-arrow:before {
    background-color: #161515;
}
.section-aboutus .block-content {
    padding-left: 30px;
}


.section-service-2
{
    padding: 80px 0;
}
.section-service-2 .block-image {
    display: block;
}
.section-service-2 .list-service {
    margin-top: 50px;
}
.block-title .subtitle {
    color: var(--shop-color-main);
    font-weight: 600;
    font-size: 18px;
    padding-bottom: 20px;
    display: inline-block;

}
.section-service-2 .service-item {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 35px;
    padding-bottom: 35px;
    transition: 0.35s;
}
.section-service-2 .service-item .number {
    font-size: 1.5rem;
    padding-right: 135px;
    transition: 0.35s;
}
.section-service-2 .service-item .service_title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
    margin-bottom: 10px;
    transition: 0.35s;
}
.section-service-2 .service-item .service_content {
    color: #4A5257;
    font-size: 16px;
}
.section-service-2 .block-image .wrapper {
    display: flex;
    justify-content: end;
}
.section-service-2 .block-image .wrapper .image {
    position: relative;
    margin-top: 30px;
}
.section-service-2 .block-image .wrapper .action-wrapper {
    position: absolute;
    top: 50%;
    left: -72px;
    transform: translateY(-50%);
    font-size: 40px;
    font-size: 2.5rem;
    font-weight: 300;
    width: 145px;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.section-service-2 .block-image .wrapper .action-wrapper:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 1px solid white;
    z-index: -1;
}
.section-service-2 .block-image .wrapper .action-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    background-color: var(--shop-color-main);
    z-index: -1;
}
.lazyloaded:not(.noreset) {
    width: auto;
    height: auto;
}


.section-members .wrapper-content {
    margin-top: 30px;
}
.block-slogan .wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}
.heading-textbold
{
    font-size: 5.2vw;
    font-weight: bold;
    display: inline-block;
}

.block-slogan .wrapper-special-text {
    position: relative;
    padding-right: 3.2vw;
    display: inline-block;
}
.section-members .block-slogan .wrapper-special-text {
    padding-left: 3.2vw;
}
.block-slogan .wrapper-special-text .special-text {
    position: relative;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15vw;
    height: 15vw;
    border-radius: 100%;
    background: var(--bgUrl);
    font-size: 7.5vw;
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
}
.block-slogan .wrapper-special-text .special-text:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 7px solid var(--id-special-text-bc-secondary);
}
.block-slogan .wrapper-special-text .special-text:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    border: 1px solid var(--shop-color-main);
}
.block-slogan .heading-textstroke {
    color: #FFFFFF;
    text-shadow: var(--stroke-width) 0 0 var(--id-heading-stroke-color), calc(var(--stroke-width) * -1) 0 0 var(--id-heading-stroke-color), 0 var(--stroke-width) 0 var(--id-heading-stroke-color), 0 calc(var(--stroke-width) * -1) 0 var(--id-heading-stroke-color);
}
.section-members .member-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    gap: 30px;
}
.section-members .member-item {
    position: relative;
    flex: 0 0 calc(100% / 2 - 30px);
    max-width: calc(100% / 2 - 30px);
    box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    padding: 20px;
}
.section-members .member-item .member--image {
    position: relative;
}
.section-members .member-item .member--content {
    padding: 20px 15px;
}
.section-members .member-item .member--image .action {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: .3s all;
}
.seemore-circle
{
    font-size: 1.25rem;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F6F6F6;
    transition: .3s all;
    border: 1px solid transparent;
}
.section-members .member-item .member--image .action .seemore-circle {
    width: 40px;
    height: 40px;
    background-color: var(--shop-color-main);
    color: white;
}

.section-members .member-item .member--content .member_name {
    font-size: 24px;
    padding-bottom: 15px;
}

.section-members .member-item .member--content .member_job {
    padding-bottom: 15px;
}

.section-members .member-item .member--content .member_social {
    display: flex;
    flex-wrap: wrap;
}

.section-members .member-item .member--content .member_social a {
    font-size: 1rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 21, 21, 0.1);
    color: #17262F;
    margin: 5px;
}

.section-counter {
    margin-block-start: -220px;
    margin-bottom: 80px;
}

.bgImage {
    background-image: var(--bgUrl);
    background-repeat: no-repeat;
    background-size: cover;
}

.section-counter .bgImage {
    padding-block-start: 290px;
    padding-block-end: 110px;
}

.section-counter .block-counter {
    display: flex;
    align-items: end;
}

.section-counter .counter-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.section-counter .icon {
    --icon-width: 24px;
    --icon-height: 24px;
    color: var(--shop-color-main);
    display: block;
    margin-bottom: 10px;
}
.section-counter .counter-item {
    display: flex;
    align-items: end;
}
.section-counter .counter-item .counter--number {
    display: flex;
    align-items: end;
}

.section-counter .counter-item .counter {
    font-size: 7.5rem;
    line-height: 1;
    font-weight: 600;
    min-width: 150px;
}

.section-counter .counter--title .title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-left: 25px;
    padding-top: 23px;
    color: #4A5257;
    position: relative;
}

.section-counter .counter--title .title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 2px;
    background: var(--shop-color-main);
}


.section-project .content-wrapper {
    display: flex;
    gap: 30px;
    margin-top: 50px;
}
.section-project .block-left {
    flex: 0 0 calc(35% - 15px);
    max-width: calc(35% - 15px);
}
.section-project .block-right {
    flex: 0 0 calc(65% - 15px);
    max-width: calc(65% - 15px);
    padding-left: 150px;
    position: relative;
}

.section-project .project--heading {
    margin-bottom: 60px;
    display: flex;
}
.section-project .project--heading .subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: var(--shop-color-main);
    padding-right: 90px;
    margin-top: 5px;
}
.section-project .project--heading .title {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--shop-color-title);
}
.section-project .swiper-nav {
    position: absolute;
    top: 40%;
    transform: translateY(-40%);
    left: 40px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(22, 21, 21, 0.1);
    border-radius: 100%;
    transition: 0.35s;
    cursor: pointer;
    color: var(--shop-color-text);
}
.section-project .swiper-nav.swiper-button-prev {
    margin-top: 80px;
}

.section-project .swiper-pagination {
    bottom: -40px;
    display: none;
}

.section-project .swiper-nav .icon-svg {
    --icon-width: 25px;
    --icon-height: 25px;
}
.swiper-button-next:after, .swiper-button-prev:after
{
    display: none;
}
.section-project .swiper-nav {
    font-size: 22px;
}
.section-project
{
    margin-bottom: 80px;
}






.section-whyus
{
    margin-bottom: 80px;
}

.section-whyus .list-content {
    display: flex;
    gap: 30px;
    align-items: center;
}
.section-whyus .list-content .block-left {
    flex: 0 0 calc(60% - 15px);
    max-width: calc(60% - 15px);
}
.section-whyus .list-content .block-right {
    flex: 0 0 calc(40% - 15px);
    max-width: calc(40% - 15px);
}
.section-whyus .list-desc {
    margin: 30px 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    justify-content: space-between;
    padding: 0;
    list-style-type: none;
}
.section-whyus .list-desc li {
    display: flex;
    align-items: center;
    flex: 0 0 calc(45% - 10px);
    max-width: calc(45% - 10px);
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: rgba(22, 21, 18, 0.1);
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.section-whyus .list-desc li .icon {
    margin-right: 10px;
    color: var(--shop-color-main);
}




.section-review
{
    margin-bottom: 80px;
}
.section-review .bgColor {
    padding: 100px 0 0;
}
.block-slogan {
    position: relative;
    --id-special-text-bc-secondary: #F6F6F6;
}
.block-slogan .wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}
.section-review .heading-textbold {
    color: white;
    font-size: 5.2vw;
    font-weight: bold;
    display: inline-block;    
}
.section-review .block-slogan .wrapper-special-text {
    padding-left: 3.2vw;
    display: inline-block;
}
.block-slogan .wrapper-special-text {
    position: relative;
    padding-right: 3.2vw;
}
.block-slogan .wrapper-special-text .special-text {
    position: relative;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15vw;
    height: 15vw;
    border-radius: 100%;
    background: var(--bgUrl);
    font-size: 7.5vw;
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
}
.section-review .block-slogan .wrapper-special-text .special-text {
    -webkit-text-fill-color: var(--shop-color-main);
}
.block-slogan .wrapper-special-text .special-text:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 7px solid var(--id-special-text-bc-secondary);
}
.section-review .block-slogan .wrapper-special-text .special-text:before {
    border-color: rgba(255, 255, 255, 0.1);
}
.block-slogan .wrapper-special-text .special-text:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    border: 1px solid var(--shop-color-main);
}
.section-review .block-slogan .wrapper-special-text .special-text:after {
    border-color: white;
}
.section-review .heading-textstroke.heading-stroke
{
    --id-heading-stroke-color: #FFFFFF;
    color: #000000;
}
.section-review .content-wrapper {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
}
.section-review .content-wrapper .block-left {
    flex: 0 0 calc(60% - 15px);
    max-width: calc(60% - 15px);
    position: relative;
}
.section-review .content-wrapper .block-right {
    flex: 0 0 calc(40% - 15px);
    max-width: calc(40% - 15px);
}
.section-review .review--start {
    color: var(--shop-color-main);
}
.section-review .review--desc
{
    margin-top: 20px;
    color: #FFFFFF;
    font-size: 18px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.section-review .review--author {
    display: flex;
    align-items: center;
}
.section-review .review--author .icon {
    color: var(--shop-color-main);
}
.section-review .review--author .detail {
    padding-left: 25px;
}
.section-review .review--author .detail .title {
    font-weight: 700;
    font-size: 22px;
    font-size: 1.375rem;
    color: white;
    padding-right: 5px;
    line-height: 1;
}
.section-review .review--author .detail .job {
    font-size: 1rem;
    padding-top: 5px;
    color: #BBBBBB;
}
.section-review .swiper-pagination {
    left: 0;
    width: auto;
    bottom: auto;
    top: calc(100% + 50px);
}
.section-review .swiper-pagination .swiper-pagination-bullet {
    width: 25px;
    height: 25px;
    border: 1px solid transparent;
    position: relative;
    background-color: transparent;
    margin: 2px;
    opacity: 1;
}
.section-review .swiper-pagination .swiper-pagination-bullet-active {
    border-color: #FFFEFE;
}
.section-review .swiper-pagination .swiper-pagination-bullet:before {
    content: "";
    width: 7px;
    height: 7px;
    background-color: #4A5257;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.section-review .swiper-pagination .swiper-pagination-bullet-active:before {
    background-color: #FFFFFF;
}
.section-review .swiper-pagination {
    position: unset;
    text-align: left;
    margin-top: 2em;
}
.section-review .review--author .icon i {
    font-size: 5em;
}
.review--start i {
    font-size: 20px;
}


.section-blog
{
    margin-bottom: 80px;
}
.item-article .media-article {
    position: relative;
}
.item-article .info-article {
    padding: 15px 0 15px;
}
.item-article .info-article .title-blog {
    margin-bottom: 10px;
}
.item-article .article-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(22, 21, 21, 0.1);
    padding-top: 25px;
    margin-top: 25px;
}
.item-article .info-article .title-blog a {
    font-size: 18px;
    font-weight: 500;
    color: var(--shop-color-main);
}
.item-article .info-article .title-article h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    overflow: hidden;
}
.item-article .info-article .title-article h4 a {
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
.article-action time {
    display: flex;
    line-height: 1;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    color: #4A5257;
}
.item-article .info-article .view-article a {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--shop-color-main);
}
.bgImage {
    background-image: var(--bgUrl);
    background-repeat: no-repeat;
    background-size: cover;
}
.section-hotline .bgImage {
    padding: 20px;
}
.section-hotline .content-wrapper {
    display: flex;
    justify-content: center;
}
.section-hotline .hotline--title {
    font-size: 1.6875rem;
    font-weight: 600;
    margin: 0;
    color: #FFFFFF;
}
.section-hotline .hotline--link {
    font-size: 1.375rem;
    font-weight: 500;
    margin-left: 35px;
}
.section-hotline .icon {
    font-size: 1rem;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: var(--shop-color-main);
    border-radius: 100%;
    margin-right: 15px;
}
.section-hotline .hotline--link a {
    color: white;
}
/*index*/
/*footer*/
.mainFooter {
    padding: 80px 0 40px 0;
}
.mainFooter .title-footer {
    font-size: 22px;
}
.mainFooter .footer-about p {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 25px;
}
.contact-form .input-group {
    width: 100%;
    margin-bottom: 20px;
}
.contact-form .input-group input, .contact-form .input-group textarea {
    color: #5c5c5c;
    height: 45px;
    width: 100%;
    font-weight: 500;
    padding: 8px 20px;
    background: #fff;
    border: 1px solid var(--shop-color-border);
    border-radius: 4px;
    box-shadow: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
.mainFooter .newsletter-block .newsletter-content.newsletter-form #newsletter-email {
    height: 60px;
    background: white;
}
.input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.mainFooter .newsletter-block .newsletter-content.newsletter-form .input-group-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.mainFooter .newsletter-block .newsletter-content.newsletter-form .newsletter-btn {
    border-radius: 0;
    height: 50px;
    padding: 8px 35px;
}
.mainFooter .footer-about p {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 25px;
}
.mainFooter p.copyright {
    font-size: 14px;
}
.footerNav-link
{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.mainFooter .footerNav-link li {
    padding: 5px 0;
    font-size: 15px;
}
.hover-line {
    position: relative;
}
.hover-line:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    width: 0;
    height: 1px;
    background-color: var(--shop-color-main);
    transition: .5s;
    opacity: 0;
}
.hover-line:hover:after {
    width: 100%;
    opacity: 1;
    transition: .5s;
}
.mainFooter .logo-footer {
    margin-bottom: 30px;
}
.mainFooter .logo-footer a {
    font-weight: bold;
    font-size: 32px;
    color: var(--shop-color-main);
}
.button {
    position: relative;
    display: inline-block;
    z-index: 1;
    overflow: hidden;
    padding: 8px 24px;
    line-height: normal;
    color: #fff;
    border-radius: 20px;
    background-color: var(--shop-color-hover);
    border: 0;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    outline: none !important;
    -webkit-transition: all 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.button:before {
    content: '';
    display: block;
    background-color: var(--shop-color-button);
    position: absolute;
    left: -2px;
    top: 0;
    right: -2px;
    bottom: 0;
    z-index: -1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.button:hover, .button:focus {
    border-color: var(--shop-color-hover);
    color: #ffffff;
}
.button:hover:before, .button:focus:before

{
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
}
.mainFooter a:hover {
    color: var(--shop-color-main);
}
.mainFooter .title-footer
{
    color: var(--shop-color-title);
    margin: 0 0 13px 0;
    font-weight: 700;
    line-height: 1.2;
}
.namectys h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px 0;
}
ul.noidung_fter li {
    margin-bottom: 10px;
}
ul.noidung_fter {
    padding: 0;
    list-style: none;
}
/*footer*/

/*breacrumb*/
.wrapper-breadcrumb
{
    position: relative;
}
.wrapper-breadcrumb:before
{
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(0, 0, 0, 0.3);
}
.wrapper-breadcrumb .new-breadcrumb {
    position: absolute;
    top: 50%;
    z-index: 99;
    transform: translateY(-50%);
}
.wrapper-breadcrumb .new-breadcrumb h1 {
    color: white;
    font-size: 85px;
    margin-bottom: 5px;
    text-align: left;
    padding-left: 75px;
    padding-right: 75px;
    font-weight: 600;
}
.wrapper-breadcrumb .new-breadcrumb .breadcrumb-shop {
    border-top: unset;
    border-bottom: unset;
    background: transparent;
}
.breadcrumb-list {
    overflow: hidden;
}
.breadcrumb-list .breadcrumb-arrows {
    font-size: 13px;
    padding: 10px 0;
    background: transparent;
    border-radius: 0;
    margin: 0;
    list-style: none;
}
.wrapper-breadcrumb .new-breadcrumb .breadcrumb-list .breadcrumb-arrows {
    justify-content: start;
    font-size: 16px;
    align-items: center;
}
.breadcrumb-list .breadcrumb-arrows > li {
    display: inline-block;
}
.wrapper-breadcrumb .new-breadcrumb .breadcrumb-list .breadcrumb-arrows a {
    color: white;
}

.wrapper-breadcrumb .new-breadcrumb .breadcrumb-list .breadcrumb-arrows span {
    color: white;
}
.breadcrumb-list .breadcrumb-arrows > li + li:before {
    padding: 0 3px;
    margin-left: 5px;
    color: #ccc;
    font-family: 'Font Awesome 6 Pro';
    content: "/\00a0";
}
.wrapper-breadcrumb .new-breadcrumb .breadcrumb-list .breadcrumb-arrows > li + li:before {
    content: '\f054';
    font-size: 14px;
    color: white;
    transform: translateY(0px);
    padding: 0 10px;
    display: inline-block;
}


.wrapper-breadcrumb .wrapper-banner, .wrapper-breadcrumb .wrapper-banner img {
    width: 100%;
}
/*breacrumb*/

/*chitiet*/
.section-aboutUs-partner .bgImage {
    background-color: #F6F6F6;
    padding: 100px 0;
}
.section-aboutUs-partner .flex-container {
    display: flex;
    justify-content: space-between;
}
.section-aboutUs-partner .block-social {
    background-color: #fff;
    padding: 25px 30px;
}
.section-aboutUs-partner .block-social .social--title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 23px;
    position: relative;
}
.section-aboutUs-partner .block-social .social--list {
    display: flex;
}
.section-aboutUs-partner .block-social .social--title:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 70px;
    height: 1px;
    background: rgba(22, 21, 21, 0.1);
}
.section-aboutUs-partner .block-social .social--list .item-social {
    overflow: hidden;
    display: inline-block;
}
.section-aboutUs-partner .block-social .social--list .item-social img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 100%;
}
.section-list-project {
    padding: 100px 0;
}
.block-project {
    margin-bottom: 30px;
}
.project-item .project--image {
    position: relative;

    max-height: 300px;
    overflow: hidden;   

}
.project-item .project--content {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}
.project-item .absolute-icon {
    font-size: 1.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--shop-color-main);
    color: white;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    opacity: 0;
    transition: 0.3s;
}
.project-item .project--image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(22, 21, 21, 0.5);
    opacity: 0;
    transition: 0.3s;
}
.project-item:hover .project--image:after {
    opacity: 1;
}

.project-item:hover .absolute-icon {
    opacity: 1;
    z-index: 9;
}
.project-item .project--content .icon {
    font-size: 1.25rem;
    margin-left: 5px;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(22, 21, 21, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    transition: 0.3s;
}
/*chitiet*/
/*blog*/

.pd-top {
    padding-top: 40px;
}
.breadcrumb-shop {
    background: #fff;
    padding: 0 0px;
    border-bottom: 1px solid #dfe2e6;
    border-top: 1px solid #dfe2e6;
}
.layout-blogs .breadcrumb-shop, .layout-article .breadcrumb-shop {
    margin-bottom: 0;
}

.wrapper-contentBlogs {
    margin-bottom: 40px;
}
.boxBlog-left {
    padding-right: 30px;
}
.heading-page {
    margin-bottom: 20px;
}
.heading-page h1 {
    font-size: 28px;
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
}
.list-article-content {
    display: flex;
    display: -ms-flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}
.article-loop {
    margin-bottom: 30px;
}
.article-loop .article-inner {
    background: #fff;
    height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
}
.article-loop .article-image {
    position: relative;
    overflow: hidden;
}
.article-loop .article-image img {
    transition: opacity 0.2s ease-in-out, transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition: opacity 0.2s ease-in-out, transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: opacity 0.2s ease-in-out, transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.article-loop .article-inner:hover .article-image img {
    transform: scale(1.07);
    -webkit-transform: scale(1.07);
    -ms-transform: scale(1.07);
    -o-transform: scale(1.07);
    -moz-transform: scale(1.07);
    opacity: 0.8;
}
.article-loop .article-detail {
    padding: 15px 20px;
}
.article-loop .article-title .post-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.article-loop .article-title .post-title a {
    white-space: initial;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
.article-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(22, 21, 21, 0.1);
    padding-top: 25px;
    margin-top: 25px;
}
.article-loop .article-detail .entry-content {
    font-size: 16px;
    margin-bottom: 8px;
}
.article-loop .article-detail .entry-content

{
    white-space: initial;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.article-action time {
    display: flex;
    line-height: 1;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    color: #4A5257;
}
.article-action .view-article a {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--shop-color-main);
}
.group-sidebox {
    position: relative;
    background: #fff;
    margin: 0 0 20px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}
.group-sidebox .sidebox-title {
    padding: 15px 20px;
}
.group-sidebox .sidebox-title h3 {
    font-size: 16px;
    margin-bottom: 0;
    position: relative;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.2;
}
.group-sidebox .sidebox-title h3:after
{
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-color: #666;
    border-style: solid;
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .2s ease;
    -ms-transition: transform .2s ease;
    -webkit-transition: transform .2s ease;
}
.group-sidebox .sidebox-content {
    padding: 0 20px 15px;
    border-top: 1px solid var(--shop-color-border);
}
.list-blogs-latest {
    counter-reset: post-ranking;
}
.list-blogs-latest .item-article {
    border-bottom: 1px #efefef dotted;
    padding: 15px 0;
    margin: 0;
}
.list-blogs-latest .item-article .post-image {
    width: 100px;
    padding-right: 10px;
    float: left;
    position: relative;
}
.list-blogs-latest .item-article .post-content {
    width: calc(100% - 100px);
    float: left;
}
.list-blogs-latest .item-article .post-image:before {
    position: absolute;
    content: counter(post-ranking);
    top: calc(50% - 16px);
    left: -16px;
    border: 2px solid #fff;
    height: 28px;
    width: 28px;
    line-height: 26px;
    text-align: center;
    border-radius: 100%;
    background: var(--shop-color-main);
    color: #fff;
    font-size: 12px;
    counter-increment: post-ranking;
    z-index: 1;
}
.list-blogs-latest .item-article .post-content h3 {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 500;
}
.list-blogs-latest .item-article .post-content .post-meta {
    font-size: 12px;
    margin: 0;
}
.list-blogs-latest .item-article:last-child {
    border-bottom: none;
}
.list-blogs-latest .item-article .post-content .post-meta .date {
    color: #74839f;
}
.list-blogs-latest .item-article .post-content h3 a {
    white-space: initial;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
.boxArticle-detail {
    background: #fff;
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);
}
.wrapper-contentArticle .heading-article {
    margin: 0px 0 20px;
}
.wrapper-contentArticle .heading-article h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.2;
}
.inforArticle-content .article-content > div {
    margin-bottom: 30px;
}
.inforArticle-content .article-content .box-article-detail {
/*    max-width: 860px;*/
margin: 0 auto 30px;
}
.inforArticle-content .post-navigation {
    border-top: 1px solid var(--shop-color-border);
    width: 100%;
    display: inline-block;
    font-size: 16px;
    padding: 25px 0 0;
}
.inforArticle-content .post-navigation .flex-row-articleToolbar {
    font-size: 13px;
/*    margin: 0 -7px;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.inforArticle-content .post-navigation .flex-row-articleToolbar .articleToolbar-title p {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.inforArticle-content .post-navigation .flex-row-articleToolbar .articleToolbar--nav {
    text-align: right;
    font-weight: 600;
}
.inforArticle-content .post-navigation .flex-row-articleToolbar a {
    color: var(--shop-color-text);
}
.inforArticle-content .post-navigation .flex-row-articleToolbar .articleToolbar--nav > span svg {
    vertical-align: -1px;
    width: 12px;
    color: var(--shop-color-text);
    height: 12px;
    margin: 0 4px;
}
.inforArticle-content .post-navigation .flex-row-articleToolbar .articleToolbar-title p span {
    font-size: 14px;
    color: var(--shop-color-title);
    font-weight: 600;
}
.inforArticle-content .article-related {
    margin-top: 25px;
    border-radius: 3px;
}
.inforArticle-content .article-related .title-blog-related {
    position: relative;
    text-align: left;
    margin: 0 0 20px;
    font-weight: 700;
    line-height: 1.2;
}
.inforArticle-content .article-related .title-blog-related span {
    display: inline-block;
    color: var(--shop-color-text);
    position: relative;
    font-size: 24px;
}
/*blog*/


/*Lienhe*/
.layout-pageContact .list-address {
    display: flex;
    align-items: center;
    color: #FF5E14;
    gap: 30px;
}
.layout-pageContact .address--title {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #000;
    color: #000;
}
.layout-pageContact .addess-detail {
    font-size: 16px;
    color: #4A5257;
    margin-bottom: 10px;
}
.layout-pageContact .email-detail {
    margin-bottom: 13px;
}
.layout-pageContact .email-detail a {
    color: var(--shop-color-main);
}
.layout-pageContact .phone-detail .icon {
    width: 32px;
    height: 32px;
    align-content: center;
    border-radius: 100% 100% 100% 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FF5E14;
    color: #FFFFFF;
    margin-right: 6px;
}
.layout-pageContact .phone-detail .icon svg {
    height: 25px;
    fill: currentColor;
}
.layout-pageContact .box-map-contact iframe {
    width: 100% !important;
    height: 720px;
    filter: brightness(100%) contrast(100%) saturate(6%) blur(0px) hue-rotate(0deg);
}
.layout-pageContact .box-map-contact {
    margin-top: 60px;
}
.wrapper-bodycontact .box-send-contact {
    background-color: #F6F6F6;
    padding: 70px 40px;
    border-radius: 3px;

}
.box-send-contact h2, .box-info-contact h2 {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 20px;
}
.box-send-contact p {
    margin-bottom: 15px;
}
.contact-form .input-group {
    width: 100%;
    margin-bottom: 20px;
}
.contact-form .input-group input, .contact-form .input-group textarea
{
    color: #5c5c5c;
    height: 45px;
    width: 100%;
    font-weight: 500;
    padding: 8px 20px;
    background: #fff;
    border: 1px solid var(--shop-color-border);
    border-radius: 4px;
    box-shadow: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
.wrapper-bodycontact .box-send-contact .input-group textarea, .wrapper-bodycontact .box-send-contact .input-group input {
    background: transparent;
    border-top: unset;
    border-left: unset;
    border-right: unset;
}
.contact-form .input-group textarea {
    width: 100%;
    height: 130px;
    padding: 20px 20px;
    resize: none;
    overflow: auto;
    outline: none;
}
.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}
.wrapper-bodycontact .box-send-contact .cta-submitform {
    width: 100%;
    border-radius: 0px;
    padding: 12px 24px;
    font-size: 15px;
}

.wrapper-pageDetail
{
        background: #fff;
    padding: 10px 15px;
    height: 100%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);
}
.heading-pageDetail h1 {
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 20px;
    line-height: 1.2;
}
/*Lienhe*/


@media (min-width: 1400px) {
    .main-header .container-fluid, .top-bar .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
}


@media (min-width: 1400px) {
    .container, .container-fluid{
        padding-left: 75px;
        padding-right: 75px;
    }
}

@media (min-width: 768px) {

    .blogs-aside--sticky {
        top: 100px;
        position: -webkit-sticky;
        position: sticky;
        -webkit-transition: top 400ms ease;
        -moz-transition: top 400ms ease;
        transition: top 400ms ease;
    }
}

.menu_respon
{
    display: none;
}

@media only screen and (min-width: 1px) and (max-width: 1044px)
{   
    .top-bar
    {
        display: none;
    }
}

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


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


}
@media only screen and (min-width: 1px) and (max-width: 768px)
{   
    .logodd
    {
        background: #070707!important;
    }
    .menu_respon
    {
        display: block;
    }

    .header-actions,.nav-menu
    {
        display: none;
    }
    .section-aboutus .block-content {
        padding-left: 15px;
        margin-top: 30px;
    }
    .section-project .content-wrapper
    {
        flex-direction: column;
    }
    .block-left,.block-right
    {
        max-width: 100%!important;
        text-align: center;
    }
    .section-whyus .list-content
    {
     flex-direction: column;
 }
 .section-review .block-right
 {
    display: none;
}
.block-slogan .wrapper-special-text .special-text 
{
    width: 20vw;
    height: 20vw;
    font-size: 8.5vw;
}
.block-slogan .wrapper-special-text .special-text:before 
{
    top: 5px;
    left: 5px;
}
.block-slogan .wrapper 
{
    gap: 10px;
}
.section-project .project--heading 
{
    margin-bottom: 20px;
    flex-direction: column;
}
}
@media only screen and (min-width: 1px) and (max-width: 500px)
{   
    .section-service-1 .service-item .action
    {
        margin-bottom: 20px;
    }
    .section-list-project
    {
        padding: 40px 0;
    }
    .wrapper-contentBlogs
    {
        margin-bottom: 0px;
    }
.article-action .view-article a
{
        font-size: 14px;
} 
    .article-action time
    {
        display: none;
    }
        .article-action {
        padding-top: 15px;
        margin-top: 15px;
    }
    .article-loop .article-inner .article-detail .entry-content {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .article-loop .article-inner .article-detail {
        padding: 7px;
    }

        .article-loop .article-inner .article-title h3.post-title {
        font-size: 14px;
        margin: 0 0 6px;
    }
   .pd-top {
        padding-top: 20px;
    }
        .article-loop {
        margin-bottom: 14px;
        padding: 0 7px;
    }
    .item-addesss
    {
        margin-top: 30px;
    }
    .layout-pageContact .box-map-contact
    {
        margin-top: 30px;
    }
    .item-icon
    {
        display: none;
    }
        .section-list-project [class*="col-"] {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
        .project-item .project--content .icon {
        display: none;
    }
    .project-item .project--content {
        font-size: 18px;
    }
    .wrapper-breadcrumb .new-breadcrumb h1 {
        font-size: 28px;
        margin-bottom: 0;
        padding-left: 15px;
        padding-right: 15px;
    }


    .block-title .title {
        font-size: 28px;
        margin-bottom: 20px;
    }
    .mainFooter
    {
        padding:40px 0;
    }
    .thongtin_footer
    {
        margin-top: 10px;
    }
    .section-hotline .hotline--title {
        font-size: 20px;
        text-align: center;
    }
    .section-hotline .content-wrapper {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    .section-project .swiper-pagination
    {
        bottom: -40px !important;
    }
    .section-project .swiper-pagination {
        display: block;
    }
    .section-project .swiper-nav {
        display: none;
    }
    .section-project .block-right
    {
        max-width: 100%!important;
        padding-left:0px;
    }
    .hero-title
    {
        font-size:20px;
    }
    .hero-subtitle
    {
        font-size: 17px;
    }
    .section-project .project--heading .title 
    {
        font-size:17px;
    }
    .section-project .project--heading .subtitle
    {
        padding-right:10px;
    }
    .block-title .title
    {
        font-size: 20px;
    }
    .section-counter .counter-item .counter
    {
        font-size: 4rem;
    }
    .section-members .member-list
    {
        flex-direction: column;
    }
    .section-members .member-item
    {
        max-width: 100%!important;
    }
    .section-service-2 .service-item .number
    {
        padding-right:25px;
    }
    .section-service-1 .service-item .count
    {
        font-size: 2em;
    }
    .section-aboutUs-partner .flex-container
    {
        flex-direction: column;
    }
}