/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
@font-face {
    font-family: 'Safira March';
    src: url('/wp-content/themes/flatsome-child/assets/font/Safira March Personal Use Only.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.text-font-safira h2 {
    font-family: 'Safira March', cursive;
    margin-bottom: 12px;
    font-weight: 100;
    letter-spacing: 6px;
}
.section-content {
    max-width: 1250px;
    margin: 0 auto;
}

.custom-subscribe-form {
    width: 260px;
}

.custom-subscribe-form input[type="email"],
.custom-subscribe-form input[type="text"] {
    width: 100%;
    background: #e5e5e5;
    border: none;
    padding: 10px;
       margin-bottom: 4px;
    font-size: 16px;
    /* font-family: Arial, Helvetica, sans-serif; */
    box-sizing: border-box;
    height: 42px;
    background: #fff;

}


.section-footer a {
    color: rgb(199, 199, 193);
}

.custom-subscribe-form input[type="email"]::placeholder,
.custom-subscribe-form input[type="text"]::placeholder {
    color: #000 !important;
}

.custom-subscribe-form input[type="submit"] {
    width: 100%;
    background: #E9E4E3;
    border: none;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    color: #000;
}

.custom-subscribe-form input[type="submit"]:hover {
    background: #cfcfcf;
}

.text-bottom p {
    margin-bottom: 12px;
}

.section-footer span.ux-menu-link__text {
   color: #c7c7c1;
}

.menu-what-we-can-do a.ux-menu-link__link.flex {
    margin-bottom: -10px;
}

.menu-sv .ux-menu-link__link {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-sv .ux-menu-link__link {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-sv .ux-menu-link__link::before {
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%2376766B' d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.absolute-footer.dark {
    display: none;
}



div#masthead .flex-col.hide-for-medium.flex-right {
    display: block !important;
    text-align: right;
}

div#masthead .header-nav {
    display: block;
    padding: 0;
    margin: 0;
}

div#masthead .header-nav>li.header-social-icons {
    display: block !important;
    width: 100%;
    margin-bottom: 12px;
    text-align: right;
}

div#masthead .header-nav>li:not(.header-social-icons) {
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
}

div#masthead .nav-top-link {
    text-decoration: none;
    font-size: 22px;
    letter-spacing: 1px;
    color: #000;
    font-family: 'Roboto Mono', monospace !important;
}

div#masthead .nav-top-link:hover {
    color: #0C2C55;
}

div#masthead .social-icons a.icon {
    color: #2970DB;
}


.section-footer {
    position: relative;
    overflow: hidden;
}

.section-footer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-image: url("http://localhost/svconsulting/wp-content/uploads/2026/03/width_200-1.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    opacity: 0.9;
    pointer-events: none;
}

.btn-find-out span {
    color: #004AAD;
}

.img-box-we-do {
    position: relative;
    overflow: hidden;
}

.img-box-we-do .box-text {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    text-align: center;
    text-shadow: unset !important;
}

.img-box-we-do .box-text-inner {
    background: rgba(255, 255, 255, 0.85);
    /* nền trắng mờ */
        padding: 12px 15px;
    display: inline-block;
    text-shadow: unset !important;
}

.img-box-we-do h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: #000;
    text-shadow: unset !important;
}

.blog-home .box-text.text-center {
    background: #fff;
    padding: 30px 50px;
    min-height: 294px;
}

h5.post-title.is-large a {
    color: #000;
}

.section-article .section-bg img.bg {
    filter: blur(8px);
}

.section-article .section-bg-overlay {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

.career-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 80px 0px;
    width: 100vw !important;
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
}

.more-articles-btn-wrap {
    width: 100vw !important;
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
    margin-bottom: -61px;
}

/* Cấu trúc cột chung */
.career-col {
    width: 50%;
    flex: 0 0 50%;
}

/* Cột ảnh: Xóa bỏ padding, ảnh tràn lề */
.career-image {
    padding: 0;
}

.career-image img {
    width: 100%;
    height: 100%;
        aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block; 
}

.career-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 20px 0px 135px;
}
.more-articles-btn:hover {
    background-color: #0056b3 !important;
    color: #ffffff !important;
}


.is-even .career-content {
    padding-right: calc((100% - 1200px) / 2 + 20px);
    padding-left: 60px;
}

/* Nếu ảnh bên phải (is-odd), content bên trái sẽ padding-left */
.is-odd .career-content {
    padding-left: calc((100% - 1200px) / 2 + 20px);
    padding-right: 60px;
}

/* Typography & Links */
.career-content h2 {
    font-size: 26px;
    margin-bottom: 20px;
}

.career-content h2 a {
    text-decoration: none;
    color: #1d3557;
}

.career-content p {
    margin: 30px 0;
    font-size: 20px;
    line-height: 1.6;
}

.career-row {
    display: flex;
    width: 100%;
}

.more-articles-btn {
    transition: all 0.3s ease;
    border-radius: 2px;
    font-size: 16px;
}

.more-articles-btn:hover {
    background: #0056b3 !important;
    color: #fff !important;
}

/* Đảm bảo career-hidden-posts không làm gãy layout khi hiện ra */
.career-hidden-posts {
    width: 100%;
}

.career-date {
    display: block;
    font-style: italic;
    color: #666;
}

/* Responsive cho Mobile */
@media (max-width: 1024px) {
    .career-row {
        flex-direction: column !important;
    }
    .career-col {
        width: 100%;
        flex: 0 0 100%;
    }
    .career-content {
        padding: 40px 20px !important;
    }
}

.career-form {
    max-width: 600px;
    margin: auto;
    text-align: center;
}

.career-form .wpcf7-form-control {
    width: 100%;
    border: none;
    border-bottom: 2px solid #9A9EAA;
    background: transparent;
    padding: 18px 10px;
    margin-bottom: 17px;
    font-size: 18px;
    text-align: center;
    outline: none;
    color: #333;
    box-shadow: unset;
}

.career-form .wpcf7-form-control:hover,
.career-form .wpcf7-form-control:focus {
    box-shadow: unset;

}

.career-form input::placeholder {
    color: #c9c9c9;
    font-weight: 400;
}

.career-form .wpcf7-submit {
    border: none;
    background: none;
    color: #1e4fa3;
       font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 1px;
    margin-top: 10px;
    padding: 0px 10px;
    margin-bottom: 0px;
}


.career-form .wpcf7-submit:hover {
    background-color: #1e4fa3 !important;
    color: #fff !important;
}

.blog-banner {
    width: 100%;
    height: 420px;
    overflow: hidden;
}

.blog-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-banner img {
    width: 100%;
}

.blog-short {
    font-size: 19px;
    max-width: 800px;
    margin: 20px auto;
    text-align: center;
}

.blog-image-after img {
    width: 100%;
    margin: 40px 0;
}


.blog-section {
    margin: 60px 0;
}

.blog-section h2 {
    font-size: 30px;
    color: #0b2c5a;
    margin-bottom: 20px;
}

.blog-section h3 {
    font-size: 22px;
    margin-top: 20px;
    color: #3A4144;
}

.blog-video {
    margin-top: 40px;
}

.blog-video iframe {
    width: 100%;
    height: 500px;
}

.more-articles {
    text-align: center;
    margin-top: 66px;
    margin-bottom: 12px;
}

.btn-more:hover {
    background: #0b2c5a;
    color: #fff;
}

.btn-more {
    padding: 16px 35px;
    color: #0b2c5a;
    font-weight: 600;
    background: #EDF5FD;
}

.page-wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
}

.blog-detail .container {
    padding-top: 80px;
}

.blog-detail h1 {
    color: #0D2C55 !important;
    font-size: 34px;
    text-align: center;
}

.blog-section .content>* {
    font-size: 19px !important;
}

.header-social-icons,
.header-social-icons * {
    transition: none !important;
    animation: none !important;
}

/* Giữ vị trí cố định, không bị dịch chuyển */
.header-wrapper.stuck .header-social-icons {
    transform: none !important;
    top: auto !important;
}

/* Nếu icon bị lệch khi stuck thì khóa luôn */
.header-social-icons {
    position: relative;
}

.header-wrapper,
.header-wrapper * {
    transition: none !important;
}
#header {
    position: fixed;
    top: 32px !important;
    width: 100%;
    z-index: 9999;
}
.header.has-sticky.sticky-jump .header-wrapper {
    transition: none !important;
}

/* 2. Luôn fixed header */
#header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

/* 3. Bỏ hiệu ứng dịch chuyển khi stuck */
.header-wrapper.stuck {
    transform: none !important;
}

/* 4. Luôn nền trắng */
#header,
.header-wrapper,
#masthead {
    background-color: #fff !important;
}

/* 5. Bỏ transparent (nếu có) */
.header-bg-color {
    opacity: 1 !important;
    background-color: #fff !important;
}

.stuck .header-main .nav > li > a {
    line-height: 40px !important;
	 padding: 0px 0 !important;
}
li.html.header-social-icons .social-icons i {
   
    font-size: 18px;
}

.header-nav-main.nav>li>a {
    padding: 0px 0 !important;
}

    .sub-menu .tabbed-content .nav-vertical {
        padding-top: 0;
       width: 50%;
    }

.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:after, .nav-dropdown-has-arrow li.current-dropdown.has-dropdown:before{
display:none;}

.sub-menu.nav-dropdown {
    top: 63px;
    background: #e1eff3c4;
    border: unset;
}

.sub-menu .nav-line-bottom>li>a:before, .sub-menu .nav-line-grow>li>a:before, .sub-menu .nav-line>li>a:before {
   display:none;
}

.sub-menu li.tab a {
    font-size: 16px;
    margin-bottom: -5px;
    color: #182D55;
}

.sub-menu span.ux-menu-link__text {
    color: #000;
    font-size: 18px;
    margin-top: 2px;
}


    .sub-menu .nav-vertical+.tab-panels {
        border-left: unset;
        flex: 1;
        margin-top: 0 !important;
        padding: 0 30px 30px;
    }

.sub-menu .nav-vertical>li+li {
    border-top: unset;
}

.sub-menu li.tab a:hover {
    text-decoration: underline;
}

.text-welcome p {
    margin-bottom: 12px;
}

.ux-builder-iframe .fade-in-up,
.ux-builder-iframe .fade-auto {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
}
.fade-in-up,
.fade-auto {
    opacity: 1;
    transform: none;
}

/* Chỉ khi có JS active thì mới ẩn */
.js-animate .fade-in-up,
.js-animate .fade-auto {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.js-animate .fade-in-up.show,
.js-animate .fade-auto.show {
    opacity: 1;
    transform: translateY(0);
}
.gallery-client .box-image {
    height: 120px; /* chỉnh theo bạn */
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-ux-builder] body .fade-in-up,
html[data-ux-builder] body .fade-auto {
    opacity: 1 !important;
    transform: none !important;
}

.gallery-client .box-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.gallery-client.slider-nav-outside.slider-nav-circle .next {
    margin-left: 46px;
	    top: 30px;
}
.gallery-client.slider-nav-outside.slider-nav-circle .previous {
    margin-right: 46px;
	    top: 30px;
}

.slider-our-mision .flickity-prev-next-button {
    top: 50%;
    transform: translateY(-50%);
}

.slider-our-mision .flickity-prev-next-button {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.slider-our-mision .flickity-viewport {
    min-height: 350px;
}


.sub-menu span.ux-menu-link__text:hover {
    text-decoration: underline;
}
.blog-detail {
    margin-top: 130px;
}

/* --- CSS GỐC (Giữ nguyên) --- */
.srv-container { position: relative;     max-width: 600px; margin: 20px 0; }
.srv-main-title { color: #0d2c5c; font-size: 24px; font-weight: 800; text-transform: uppercase; margin-bottom: 25px; letter-spacing: 0.5px; }
.srv-ul { list-style: none; padding: 0; margin: 0; }
.srv-li { position: relative; margin-bottom: 14px; padding-left: 20px; font-weight: 700; color: #333; cursor: pointer; line-height: 1.4; transition: color 0.3s; }
.srv-li:hover {
    /* color: #0d2c5c; */
    text-decoration: underline;
}

span.srv-title {
    font-size: 18px;
}
.srv-li::before { content: "•"; position: absolute; left: 0; color: #000; font-size: 1.4em; top: -2px; }

.srv-hover-box {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 100%;
    top: -10px;
    width: 320px;
    background: #eaf3f9;
    padding: 20px;
 
    /* box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.07); */
    z-index: 100;
    color: #555;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(10px);
    pointer-events: none;
}
.srv-li:hover .srv-hover-box {
    visibility: visible;
    opacity: 1;
           transform: translateX(-344px);
}

/* --- CSS MỚI: XỬ LÝ NỘI DUNG WYSIWYG --- */
.srv-wysiwyg-content p {
    margin-top: 0;
    margin-bottom: 10px; /* Khoảng cách giữa các đoạn văn */
}
.srv-wysiwyg-content p:last-child {
    margin-bottom: 0; /* Đoạn văn cuối không có margin bottom */
}

.srv-wysiwyg-content ul, 
.srv-wysiwyg-content ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 20px; /* Thụt đầu dòng cho list */
}

.srv-wysiwyg-content ul {
    list-style-type: disc; /* Dấu chấm tròn cho list không thứ tự */
}

.srv-wysiwyg-content ol {
    list-style-type: decimal; /* Số cho list có thứ tự */
}

.srv-wysiwyg-content strong, 
.srv-wysiwyg-content b {
    font-weight: 700;
    color: #333; /* Làm đậm chữ đậm */
}

.srv-wysiwyg-content em, 
.srv-wysiwyg-content i {
    font-style: italic;
}

.srv-wysiwyg-content a {
    color: #0d2c5c;
    text-decoration: underline;
}

/* Container chứa nút để tạo khoảng cách với văn bản phía trên */
.srv-button-wrapper {
    margin-top: 20px;
    text-align: center; /* Căn giữa nút */
}

/* Style cho nút Book a meeting */
.btn-book-now {
    display: inline-block;
    background-color: #ffffff; /* Nền trắng */
    color: #0d2c5c;           /* Chữ xanh đậm giống tiêu đề */
      padding: 8px 22px;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none !important;
    text-transform: capitalize;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Đổ bóng nhẹ cho nút */
}

.btn-book-now:hover {
    background-color: #0d2c5c; /* Đổi màu khi hover */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Điều chỉnh lại hover-box để cho phép click vào nút bên trong */
.srv-hover-box {
    /* Thay đổi pointer-events thành auto để có thể click vào nút */
    pointer-events: auto; 
    
    /* Đảm bảo khi di chuột từ list item sang box không bị mất hover */
    padding-bottom: 25px; 
}


.tab-news ul.nav.nav-pills.nav-normal {
    margin-bottom: 40px;
    display: flex;
    gap: 24px;
}

/* ===== TỔNG THỂ KHUNG MEGA MENU ===== */
#menu-item-371 > .sub-menu {
    position: absolute;
          top: 65px;
    left: 0 !important;
  width: 565px !important;
   padding: 15px 15px !important;
       background: #e1eff3c4;
    display: block !important; /* Ép về block để quản lý cột bằng absolute/margin */
    transform: none !important;
    margin-left: 0 !important; /* Xóa margin âm do JS của theme tự tính */
}

/* ===== CỘT TRÁI (MENU CẤP 2) ===== */
#menu-item-371 > .sub-menu > .nav-dropdown-col {
    display: block !important;
    width: 280px !important; /* Độ rộng cột bên trái */
    float: none !important;  /* Quan trọng: Xóa float để các item tự rớt dòng */
    position: static;        /* Để menu cấp 3 căn theo sub-menu tổng */
}

/* Link menu cấp 2 */
#menu-item-371 > .sub-menu > .nav-dropdown-col > a {
       display: block;
    font-size: 16px;
    font-weight: 700;
    color: #182D55 !important;
    text-transform: uppercase;
    border-bottom: unset;
}

#menu-item-371 > .sub-menu > .nav-dropdown-col:hover > a {
    /* background-color: #f7f9fb; */
    color: #182D55 !important;
    text-decoration: underline;
}

/* ===== CỘT PHẢI (MENU CẤP 3) ===== */
#menu-item-371 .nav-column {
    display: none; 
    position: absolute;
    top: 0;
    left: 280px; /* Bằng đúng chiều rộng cột bên trái */
    width: 370px; /* Chiều rộng còn lại của menu */
    height: 100%;
    padding: 15px 20px;
       background: transparent;
   
    z-index: 10;
}

/* Hiện menu cấp 3 khi hover vào li cấp 2 tương ứng */
#menu-item-371 .nav-dropdown-col:hover > .nav-column {
    display: block !important;
}

/* Item cấp 3 */
#menu-item-371 .nav-column li {
    display: block;
    width: 100%;
}

#menu-item-371 .nav-column li a {
    display: block;
    padding: 8px 0;
    font-size: 18px;
    font-weight: 400;
    color: #333 !important;
    text-transform: none;
    border-bottom: unset;
    line-height: 24px;
}
#menu-item-371 .nav-column li a:hover {
   
    text-decoration: underline;
}

/* Clear float nếu cần */
#menu-item-371 > .sub-menu::after {
    content: "";
    display: table;
    clear: both;
}

/* Ép row .blog-home rộng 93% màn hình và căn giữa tuyệt đối */
.blog-home.row-full-width {
    width: 93vw !important;
    max-width: 93vw !important;
    position: relative;
    left: 50% !important;
    /* Kéo ngược row về bên trái để căn giữa */
    transform: translateX(-50%) !important; 
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.blog-home.slider-nav-outside.slider-nav-circle .next {
    margin-left: -4px !important;
}
.blog-home .flickity-prev-next-button.previous {
    left: -34px !important;
}


.sub-menu li a {
    color: #0C2C56;
    border-bottom: unset !important;
    font-weight: 600;
}
.sub-menu li a:hover {
    text-decoration: underline;
}
@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}