/* ======================================== */
/* General Styling                 */
/* ======================================== */
body {
    font-family: 'Montserrat', sans-serif;
    /* Optional: Add padding-top if navbar height interferes with content start */
    /* padding-top: 70px; */ /* Adjust based on final navbar height */
}
h1, h2, h3, h4, h5, p {
    white-space: pre-line;
}
/* Hide AOS elements initially */
[data-aos] {
    opacity: 0;
    transition-property: transform, opacity;
}

/* Helper class to force white text color */
.force-white {
    color: #ffffff !important;
}


/* ======================================== */
/* Navigation Bar                  */
/* ======================================== */
#mainNavbar {
    transition: background-color 0.4s ease-out, box-shadow 0.4s ease-out;
    box-shadow: none;
    z-index: 1031;
    padding-top: 0.8rem; /* Adjust padding for logo/links */
    padding-bottom: 0.8rem;
}

    /* Scrolled state for navbar */
    #mainNavbar.scrolled {
        background-color: rgba(255, 255, 255, 0.5) !important; /* White background on scroll */
        backdrop-filter: blur(10px); /* hiệu ứng mờ nền */
        -webkit-backdrop-filter: blur(10px); /* hỗ trợ Safari */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    }

    /* --- Navbar Links and Brand (Initial State) --- */
    #mainNavbar .navbar-brand img {
        transition: filter 0.3s ease; /* Smooth transition for potential filter changes */
    }

    #mainNavbar .navbar-brand,
    #mainNavbar .nav-link {
        color: #ffffff; /* White text */
        font-weight: 400; /* Normal weight */
        position: relative;
        padding-top: 0.5rem; /* Adjust padding for vertical alignment */
        padding-bottom: 0.5rem; /* Space for underline */
    }

    @media (max-width: 991.98px){
        #mainNavbar .navbar-brand,
        #mainNavbar .nav-link {
            padding-bottom: 1rem; /* Space for underline */
        }
    }

/* Navbar Contact Us Button (Initial State) */
#mainNavbar .btn-outline-light {
    text-shadow: none;
    border-width: 1px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

        #mainNavbar .btn-outline-light:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border-color: #fff;
            color: #fff;
        }

    /* Underline effect for nav links */
    #mainNavbar .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0; /* Position at the bottom */
        left: 0.5rem; /* Align with nav-link padding */
        right: 0.5rem;
        height: 2px;
        background-color: #ffffff; /* White underline */
        transform: scaleX(0); /* Hidden initially */
        transform-origin: left; /* Start animation from the left */
        transition: transform 0.3s ease;
    }

    /* Nav Link Hover (Initial State) */
    #mainNavbar .nav-link:hover,
    #mainNavbar .nav-link:focus { /* Add focus state for accessibility */
        color: #ffffff;
        font-weight: 700; /* Bold on hover/focus */
        text-shadow: none; /* Remove shadow when bold for clarity */
    }

        #mainNavbar .nav-link:hover::after,
        #mainNavbar .nav-link:focus::after {
            transform: scaleX(1); /* Show underline on hover/focus */
        }

    /* Active Nav Link (Initial State) */
    #mainNavbar .nav-link.active {
        color: #ffffff;
        font-weight: 700; /* Active link is bold */
        text-shadow: none;
    }

        #mainNavbar .nav-link.active::after {
            transform: scaleX(1); /* Show underline for active */
        }

    /* --- Navbar Links and Brand (Scrolled State) --- */
    #mainNavbar.scrolled .navbar-brand,
    #mainNavbar.scrolled .nav-link {
        color: #212529; /* Dark text color */
        text-shadow: none; /* Remove text shadow */
        font-weight: 400; /* Reset weight */
    }
    /* Optional: Change logo color on scroll if needed */
    /* #mainNavbar.scrolled .navbar-brand img { filter: invert(1); } */


    /* Navbar Contact Us Button (Scrolled State) */
    #mainNavbar.scrolled .btn-outline-light {
        border-color: #0d6efd; /* Bootstrap primary blue, or your theme color */
        color: #0d6efd;
        background-color: transparent;
    }

        #mainNavbar.scrolled .btn-outline-light:hover,
        #mainNavbar.scrolled .btn-outline-light:focus {
            background-color: #0d6efd;
            color: white;
        }

    /* Underline effect (Scrolled State) */
    #mainNavbar.scrolled .nav-link::after {
        background-color: #0d6efd; /* Blue underline */
    }

    /* Nav Link Hover (Scrolled State) */
    #mainNavbar.scrolled .nav-link:hover,
    #mainNavbar.scrolled .nav-link:focus {
        color: #000000; /* Black on hover/focus */
        font-weight: 700; /* Bold on hover/focus */
    }

    /* Active Nav Link (Scrolled State) */
    #mainNavbar.scrolled .nav-link.active {
        color: #000000; /* Black */
        font-weight: 700; /* Active link bold */
    }

        #mainNavbar.scrolled .nav-link.active::after {
            transform: scaleX(1); /* Ensure underline is visible */
            background-color: #0d6efd; /* Blue underline */
        }

    /* Navbar Toggler Icon (Hamburger Menu) */
    #mainNavbar .navbar-toggler {
        border-color: rgba(255, 255, 255, 1);
    }

    #mainNavbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    #mainNavbar.scrolled .navbar-toggler {
        border-color: rgba(0, 0, 0, 0.5);
    }

    #mainNavbar.scrolled .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }


/* ======================================== */
/* Navigation Bar - Language Switcher       */
/* ======================================== */

/* Style chung cho bộ chọn ngôn ngữ dropdown */
.language-switcher .dropdown-toggle {
    font-size: 0.9rem; /* Kích thước chữ */
    font-weight: 400; /* Mặc định không bold */
    transition: color 0.3s ease, font-weight 0.3s ease;
    /* Loại bỏ mũi tên mặc định của dropdown nếu muốn */
    /* &::after { display: none; } */
}

/* Icon quả địa cầu */
.language-switcher .bi-globe {
    font-size: 1.1rem; /* Kích thước icon */
    vertical-align: middle; /* Căn giữa icon với text */
}

/* Text ngôn ngữ active */
.language-switcher .active-lang-text {
    /* Thêm style nếu cần */
}

/* --- Trạng thái Navbar trong suốt (Initial State) --- */
#mainNavbar:not(.scrolled) .language-switcher .dropdown-toggle {
    color: #ffffff; /* Màu trắng */
}

    #mainNavbar:not(.scrolled) .language-switcher .dropdown-toggle:hover {
        color: #f0f0f0; /* Sáng hơn khi hover */
        /* font-weight: 700; */ /* Có thể thêm bold khi hover nếu muốn */
    }

/* Nhấn mạnh ngôn ngữ active (nếu cần, nhưng thường chỉ cần màu là đủ) */
#mainNavbar:not(.scrolled) .language-switcher .active-lang-text {
    /* font-weight: 700; */ /* Ví dụ: Làm đậm chữ ngôn ngữ active */
}


/* --- Trạng thái Navbar đã cuộn (Scrolled State) --- */
#mainNavbar.scrolled .language-switcher .dropdown-toggle {
    color: #212529; /* Màu xám đậm */
    text-shadow: none; /* Bỏ bóng đổ */
}

    #mainNavbar.scrolled .language-switcher .dropdown-toggle:hover {
        color: #000000; /* Màu đen khi hover */
        /* font-weight: 700; */
    }

/* Nhấn mạnh ngôn ngữ active khi scroll */
#mainNavbar.scrolled .language-switcher .active-lang-text {
    /* font-weight: 700; */
}

/* --- Dropdown Menu Styling --- */
.language-switcher .dropdown-menu {
    min-width: auto; /* Cho phép menu co lại theo nội dung */
    font-size: 0.9rem;
    /* Thêm style khác nếu cần: background, border, shadow... */
    /* Ví dụ: Làm menu hơi lệch để không che icon */
    /* margin-top: 0.5rem !important; */
}

.language-switcher .dropdown-item {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* --- Responsive cho Language Dropdown --- */
@media (max-width: 991.98px) {
    .language-switcher.dropdown { /* Target the li.dropdown */
        margin-left: 0 !important; /* Bỏ margin trái trên mobile */
        margin-top: 0.5rem; /* Thêm khoảng cách trên mobile */
        width: 100%; /* Chiếm toàn bộ chiều rộng để căn giữa dễ hơn */
        display: flex;
        justify-content: center; /* Căn giữa dropdown toggle */
    }

    .language-switcher .dropdown-toggle {
        display: inline-flex !important; /* Đảm bảo toggle hiển thị đúng */
        justify-content: center;
    }

    .language-switcher .dropdown-menu {
        width: auto; /* Đảm bảo menu không bị quá rộng */
        position: static !important; /* Hoặc absolute tùy theo cách menu mobile hiển thị */
        float: none !important;
        margin-top: 0.25rem !important;
        border: none; /* Bỏ border nếu muốn tích hợp hơn */
        box-shadow: none; /* Bỏ shadow nếu muốn */
        text-align: center; /* Căn giữa các item trong menu */
    }

    /* Đảm bảo màu chữ đúng khi menu thu gọn và navbar đã scroll */
    #mainNavbar.scrolled .navbar-collapse .language-switcher .dropdown-toggle {
        color: #495057;
    }

        #mainNavbar.scrolled .navbar-collapse .language-switcher .dropdown-toggle:hover {
            color: #000000;
        }

    /* Màu chữ ban đầu khi menu thu gọn (thường là màu tối trên nền sáng của menu collapse) */
    #mainNavbar:not(.scrolled) .navbar-collapse .language-switcher .dropdown-toggle {
        color: #495057; /* Hoặc màu mặc định của nav-link trong collapse */
        text-shadow: none;
    }

        #mainNavbar:not(.scrolled) .navbar-collapse .language-switcher .dropdown-toggle:hover {
            color: #000000;
        }
}

/* ======================================== */
/* Kết thúc Navigation Bar - Language Switcher */
/* ======================================== */


/* ======================================== */
/* Footer Section                  */
/* ======================================== */
#footer {
    background-color: #ffffff; /* Nền trắng */
    color: #021426; /* Màu chữ mặc định cho section */
    z-index: 3;
    position: relative;
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

    /* Tiêu đề trong Footer (CÔNG TY..., Liên kết nhanh, Liên hệ) */
    #footer h5 {
        color: #021426; /* Màu chữ đậm */
        margin-bottom: 1.2rem;
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Đoạn văn bản thông tin công ty và địa chỉ */
    #footer .footer-company-info p {
        color: #021426; /* Màu chữ đậm */
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }

    /* Các liên kết nhanh */
    #footer .footer-quick-links li a.footer-quick-link {
        color: #333333; /* Màu xám đậm */
        font-size: 0.9rem;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        #footer .footer-quick-links li a.footer-quick-link:hover {
            color: #06498D; /* Màu xanh Tekwell khi hover */
            text-decoration: underline !important;
        }

    /* Phần thông tin liên hệ */
    #footer .footer-contact-info p {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
        color: #666666; /* Màu mặc định cho label (ghi đè màu của #footer) */
    }

    /* Nhãn (Email:, Hotline:, Tel:) */
    #footer .contact-label {
        color: #666666; /* Màu label */
        margin-right: 0.3em; /* Khoảng cách nhỏ sau label */
    }

    /* Link số điện thoại */
    #footer a.footer-phone-link {
        color: #666666; /* Màu số điện thoại */
        text-decoration: none;
        transition: color 0.3s ease;
    }

        #footer a.footer-phone-link:hover {
            color: #021426; /* Màu đậm khi hover */
            text-decoration: underline !important;
        }

    /* Link địa chỉ email */
    #footer a.footer-email-link {
        color: #333333; /* Màu địa chỉ email */
        text-decoration: none;
        transition: color 0.3s ease;
    }

        #footer a.footer-email-link:hover {
            color: #021426; /* Màu đậm khi hover */
            text-decoration: underline !important;
        }

    /* Icons trong Footer */
    #footer .bi {
        color: #999999; /* Màu icon xám nhạt hơn */
        margin-right: 0.7rem;
        vertical-align: middle;
        font-size: 1rem; /* Có thể chỉnh size icon */
    }

    /* Đường kẻ ngang */
    #footer hr {
        border-top: 1px solid #e9ecef; /* Màu xám rất nhạt */
        margin-top: 2rem;
        margin-bottom: 1.5rem;
    }

    /* Chữ Copyright */
    #footer .footer-copyright small {
        color: #999999; /* Màu copyright */
        font-size: 0.8rem;
    }


/* ======================================== */
/* Pinned Contact Icons               */
/* ======================================== */
#pinned-contact-icons {
    position: fixed;
    bottom: 30px; /* Higher position */
    right: 30px;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    gap: 18px; /* Increased gap */
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Larger icons */
    height: 50px;
    border-radius: 50%;
    color: #fff;
    font-size: 26px; /* Larger icon glyph */
    text-decoration: none;
    box-shadow: 0 5px 12px rgba(0,0,0,0.2); /* Enhanced shadow */
    position: relative; /* Needed for ::before */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible; /* Allow pulse animation to show outside bounds */
}

    .contact-icon:hover {
        transform: scale(1.15); /* Larger hover scale */
        box-shadow: 0 8px 18px rgba(0,0,0,0.3);
    }

    .contact-icon.messenger {
        background-color: #0084ff;
    }

    .contact-icon.zalo {
        background-color: #ffffff;
    }

        .contact-icon.zalo img {
            width: 70%; /* Adjust Zalo icon size */
            height: auto;
        }

    .contact-icon.call {
        background-color: #1ebea5;
    }
    /* Adjusted green */

    /* Pulse animation ("Loan ra") */
    .contact-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0); /* Start transparent */
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        z-index: -1; /* Behind the icon */
        /* Animation properties */
        animation: iconPulse 3s infinite ease-out;
    }

    .contact-icon:hover::before {
        animation-play-state: paused; /* Pause pulse on hover */
    }

.zalo-chat-widget{
    margin-bottom:45px;
    margin-right: -25px;
}

@media (max-width: 767.98px) {
    .zalo-chat-widget {
        margin-bottom: 45px;
        margin-right: -28px;
    }
}

@media (max-width: 991.98px) {
    .zalo-chat-widget {
        margin-bottom: 45px;
        margin-right: -25px;
    }
}

@media (max-width: 575.98px) {
    .zalo-chat-widget {
        margin-bottom: 25px;
        margin-right: -45px;
    }
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
        border-color: rgba(255, 255, 255, 0.2); /* Đậm hơn */
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Thêm ánh sáng */
        opacity: 0.3;
    }

    70% {
        transform: scale(1.3); /* Expand further */
        border-color: rgba(255, 255, 255, 0.2); /* Make border visible */
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); /* Add glow */
        opacity: 0.3; /* Fade out */
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Tooltip styling */
.tooltip-inner {
    background-color: #333;
    color: #fff;
    font-size: 0.9rem; /* Slightly larger tooltip text */
    padding: 6px 12px;
    border-radius: 4px;
}

.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #333; /* Match tooltip background */
}


/* ======================================== */
/* Responsive Adjustments          */
/* ======================================== */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    #mainNavbar .navbar-brand img {
        height: 60px;
        width: 94px;
    }
    /* Adjust logo size */
    .hero-section .container {
        padding-top: 100px;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-tag-button {
        font-size: 0.85rem;
        padding: 7px 15px;
        margin: 6px;
    }

    #business-model h2 {
        font-size: 2rem;
    }

    .business-model-diagram-container {
        margin-top: 1rem;
    }
    /* Điều chỉnh margin nếu cần */
    .business-model-static-diagram { /* Thêm style responsive nếu cần */
    }

    #footer .col-lg-3, #footer .col-lg-4, #footer .col-lg-5 {
        text-align: left !important; /* Căn trái trên tablet */
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    body { /* padding-top: 65px; */
    }
    /* Adjust if navbar height changes significantly */
    #mainNavbar .navbar-brand img {
        height: 60px;
        width: 94px;
    }

    .hero-section {
        min-height: 90vh;
    }
        /* Adjust hero height */
        .hero-section .container {
            padding-top: 90px;
        }

        .hero-section h1 {
            font-size: 2rem;
            line-height: 1.3;
        }

        .hero-section .lead {
            font-size: 0.95rem;
        }

    .hero-tag-button {
        font-size: 0.8rem;
        padding: 6px 12px;
        margin: 5px;
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    /* Stack buttons */

    #business-model {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .business-model-diagram-container {
        margin-top: 1rem;
    }

    .business-model-static-diagram { /* Thêm style responsive nếu cần */
    }

    #footer {
        padding-top: 2.5rem;
    }

        #footer .col-lg-3, #footer .col-lg-4, #footer .col-lg-5, #footer .col-md-6 {
            margin-bottom: 1.5rem;
        }

    #pinned-contact-icons {
        bottom: 20px;
        right: 20px;
        gap: 15px;
    }

    .contact-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    #footer .footer-contact-info {
        text-align: left !important; /* Căn trái trên mobile */
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .hero-section h1 {
        font-size: 1.8rem;
    }

    .hero-section .lead {
        font-size: 0.9rem;
    }

    #business-model h2 {
        font-size: 1.6rem;
    }

    #business-model h3 {
        font-size: 1.8rem;
    }

    #pinned-contact-icons {
        bottom: 15px;
        right: 15px;
        gap: 12px;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }
}

.main-btn {
    background-color: #042E59;
    color: #fff
}

#mainNavbar .main-btn {
    text-shadow: none;
    border-radius: 24px;
    border-width: 1px;
    padding: 10px;
    font-size: 0.9rem;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    #mainNavbar .main-btn:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: #fff;
        color: #fff;
    }

#mainNavbar.scrolled .main-btn {
    background-color: #042E59;
    text-shadow: none;
    border-radius: 24px;
    border-width: 1px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    #mainNavbar.scrolled .main-btn:hover {
        background-color: #ffffff; /* White background on scroll */
        border-color: #042E59;
        color: #042E59;
    }

/* ======================================== */
/* About Us Page Styles              */
/* ======================================== */

/* --- Section 1: About Hero Banner --- */
#about-hero {
    background-color: #06498D; /* Màu nền xanh Tekwell */
    color: #FFFFFF; /* Màu chữ trắng */
    min-height: 361px; /* Chiều cao tối thiểu */
    padding: 40px 0;
    display: flex; /* Sử dụng flex để căn giữa row */
    align-items: center; /* Căn giữa row theo chiều dọc */
}
    /* Căn chỉnh text trong cột */
    #about-hero .col-lg-7,
    #about-hero .col-lg-5 {
        /* Giữ căn trái mặc định của cột */
    }

    #about-hero .about-subtitle {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.5px;
        opacity: 0.9;
        margin-bottom: 0.25rem !important; /* Giảm khoảng cách dưới */
    }

    #about-hero .about-title {
        font-size: 48px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 0 !important; /* Bỏ khoảng cách dưới */
    }

    #about-hero .about-description {
        font-size: 20px;
        font-weight: 400;
        line-height: 1.6; /* Tăng line-height */
        opacity: 0.9;
    }

/* --- Section 2: Get to know --- */
#get-to-know {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

    #get-to-know img {
        padding-top: unset;
        max-height: auto;
        width: auto; /* Cho ảnh chiếm hết chiều rộng cột */
        object-fit: initial;
    }

    #get-to-know .get-to-know-subtitle {
        color: #D61918; /* Màu đỏ */
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #get-to-know .get-to-know-title {
        color: #06498D; /* Màu xanh Tekwell */
        font-weight: 700;
        font-size: 2.2rem;
        line-height: 1.3;
        margin-bottom: 1.5rem !important;
    }

    #get-to-know .get-to-know-text {
        color: #021426; /* Màu nội dung chính */
        font-size: 1rem;
        line-height: 1.7;
    }

/* --- Section 3: Applications Field --- */
#applications-field {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

    #applications-field .applications-title {
        font-size: 42px;
        color: #06498D;
        font-weight: 700;
    }

    #applications-field .applications-subtitle {
        font-size: 16px;
        color: #666666; /* Màu subtitle */
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
    }

    #applications-field .applications-image {
        max-width: auto; /* Có thể tăng max-width */
        margin-top: 2rem;
    }

    #applications-field .application-content-area {
        margin-top: 3rem; /* Khoảng cách trên khu vực danh sách */
    }

    #applications-field .application-row {
        padding-bottom: 2rem; /* Khoảng cách dưới của row */
    }

        #applications-field .application-row:last-child {
            border-bottom: none; /* Bỏ đường kẻ cho row cuối */
            padding-bottom: 0;
            margin-bottom: 0; /* Bỏ margin cho row cuối */
        }


    #applications-field .application-list-title {
        font-weight: 700;
        font-size: 32px; /* Size 32px */
        letter-spacing: 0.5px;
        margin-bottom: 1rem !important; /* Giảm khoảng cách dưới tiêu đề cột */
        padding-bottom: 0; /* Bỏ gạch chân cũ */
        border-bottom: none;
        display: block; /* Cho tiêu đề chiếm cả dòng */
    }

.application-list {
    padding-left: 0.5rem; /* Thêm thụt lề nhẹ cho danh sách */
}

    .application-list li {
        margin-bottom: 1.1rem; /* Khoảng cách giữa các mục */
        color: #475467; /* Màu chữ mục */
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        line-height: 1.5; /* Điều chỉnh line-height */
    }

        .application-list li i {
            margin-top: 0px; /* Căn icon */
            font-size: 0.9em;
            margin-right: 0.7rem !important; /* Tăng khoảng cách icon */
            flex-shrink: 0;
            /* Đặt màu mặc định cho icon (có thể bị ghi đè bởi text-primary/danger) */
            color: #6c757d;
        }
/* Đặt màu icon theo cột */
.privation + .col-md-4 .application-list i,
.privation + .col-md-4 + .col-md-5 .application-list i {
    color: #0d6efd; /* Màu primary cho icon Privation */
}

.project + .col-md-4 .application-list i,
.project + .col-md-4 + .col-md-5 .application-list i {
    color: #dc3545; /* Màu danger cho icon Project */
}


/* --- Responsive điều chỉnh cho About Us --- */
@media (max-width: 991.98px) {
    #about-hero {
        min-height: auto;
        padding: 60px 0;
    }

        #about-hero .about-title {
            font-size: 40px;
        }

        #about-hero .about-description {
            font-size: 18px;
        }

        #about-hero .text-lg-start {
            text-align: center !important;
        }

        #about-hero .col-lg-7 {
            margin-bottom: 1.5rem;
        }

    #get-to-know .section-main-title {
        font-size: 1.9rem;
    }

    #applications-field .applications-title {
        font-size: 36px;
    }

    #applications-field .applications-subtitle {
        font-size: 17px;
    }

    #applications-field .application-list-title {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    #about-hero .about-title {
        font-size: 32px;
    }

    #about-hero .about-description {
        font-size: 16px;
    }

    #get-to-know .section-main-title {
        font-size: 1.7rem;
    }

    #get-to-know .get-to-know-text {
        font-size: 0.95rem;
    }

    #applications-field .applications-title {
        font-size: 30px;
    }

    #applications-field .applications-subtitle {
        font-size: 16px;
    }

    #applications-field .application-list-title {
        font-size: 24px;
        text-align: center;
    }
    /* Căn giữa tiêu đề cột */
    .application-list li {
        font-size: 15px;
    }

    #applications-field .application-row {
        padding-bottom: 1rem;
    }
        /* Giảm padding */
        #applications-field .application-row .col-md-4,
        #applications-field .application-row .col-md-5 {
            margin-top: 1rem; /* Thêm khoảng cách trên cho cột list trên mobile */
        }
}

/* ======================================== */
/* About Us / Services Page Hero Styles */
/* ======================================== */

/* Áp dụng style chung cho cả 2 hero banner */
#about-hero,
#services-hero { /* Thêm #services-hero vào selector */
    background-color: #06498D;
    color: #FFFFFF;
    min-height: 361px;
    padding: 40px 0;
    display: flex;
    align-items: center;
}
    /* Style cho các text bên trong hero banner */
    #about-hero .about-subtitle,
    #services-hero .about-subtitle { /* Thêm #services-hero */
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.5px;
        opacity: 0.9;
        margin-bottom: 0.25rem !important;
    }

    #about-hero .about-title,
    #services-hero .about-title { /* Thêm #services-hero */
        font-size: 48px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 0 !important;
    }

    #about-hero .about-description,
    #services-hero .about-description { /* Thêm #services-hero */
        font-size: 20px;
        font-weight: 400;
        line-height: 1.6;
        opacity: 0.9;
    }

    /* Căn chỉnh cột trong hero banner */
    #about-hero .col-lg-7,
    #about-hero .col-lg-5,
    #services-hero .col-lg-7, /* Thêm #services-hero */
    #services-hero .col-lg-5 { /* Thêm #services-hero */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

/* ======================================== */
/* Services Page - Cards Section      */
/* ======================================== */

#service-cards {
    background-color: #F9FAFB; /* Nền trắng cho section card */
}

.service-card {
    border: none; /* Bỏ viền mặc định của card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Đảm bảo flex hoạt động */
    flex-direction: column; /* Hướng cột */
}

    .service-card:hover {
        transform: translateY(-5px); /* Hiệu ứng nhấc lên khi hover */
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Tăng shadow khi hover */
    }

    .service-card .card-img-top {
        height: 200px; /* Chiều cao cố định cho ảnh */
        object-fit: cover; /* Đảm bảo ảnh không bị méo */
    }

    .service-card .card-body {
        padding: 1.25rem; /* Tăng padding */
    }

    .service-card .card-title {
        font-weight: 700;
        color: #06498D; /* Màu tiêu đề card */
        font-size: 1.1rem;
    }

    .service-card .card-text {
        font-size: 0.9rem; /* Kích thước chữ mô tả */
        line-height: 1.5;
    }

    .service-card .service-card-arrow {
        color: #D61918; /* Màu đỏ cho mũi tên */
        font-size: 1.5rem; /* Kích thước mũi tên */
        text-decoration: none;
        transition: transform 0.2s ease;
    }

        .service-card .service-card-arrow:hover {
            transform: scale(1.1); /* Phóng to nhẹ mũi tên khi hover */
        }

/* --- Responsive cho Services Page --- */
@media (max-width: 991.98px) {
    #services-hero .about-title {
        font-size: 40px;
    }

    #services-hero .about-description {
        font-size: 18px;
    }

    #services-hero .text-lg-start {
        text-align: center !important;
    }

    #services-hero .col-lg-7 {
        margin-bottom: 1.5rem;
    }

    .service-card .card-img-top {
        height: 180px;
    }
}

@media (max-width: 767.98px) {
    #services-hero .about-title {
        font-size: 32px;
    }

    #services-hero .about-description {
        font-size: 16px;
    }

    .service-card .card-img-top {
        height: 160px;
    }

    .service-card .card-title {
        font-size: 1rem;
    }

    .service-card .card-text {
        font-size: 0.85rem;
    }

    .service-card .service-card-arrow {
        font-size: 1.3rem;
    }
}


/* ======================================== */
/* Service Detail Page Styles        */
/* ======================================== */

#service-detail-page {
    /* Thêm padding top nếu cần khoảng cách với navbar */
    padding-top:200px; /* Ví dụ */
    padding-bottom:80px; /* Ví dụ */
    background-color: #F9FAFB;
}

.service-detail-header {
    margin-bottom: 0rem; /* Khoảng cách dưới header */
}

.service-detail-publish-date {
    font-size: 16px;
    color: #021426; /* Màu subtitle */
    font-weight: 500; /* Hơi đậm */
    margin-bottom: 0.75rem !important;
}

.service-detail-title {
    font-size: 48px;
    color: #06498D; /* Màu title */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem !important;
}

.service-detail-short-desc {
    font-size: 20px;
    color: #666666; /* Màu short description */
    max-width: 750px; /* Giới hạn chiều rộng */
    line-height: 1.6;
}

.service-detail-image-container img {
    max-height: auto; /* Giới hạn chiều cao ảnh chính */
    width: auto; /* Để giữ tỉ lệ */
    max-width: 100%; /* Đảm bảo không tràn */
}

.service-detail-content {
    max-width: 1200px; /* Chiều rộng cố định cho nội dung */
    margin-left: auto;
    margin-right: auto;
}

    .service-detail-content h3.content-heading {
        font-size: 1.8rem; /* Kích thước tiêu đề phụ trong nội dung */
        font-weight: 700;
        color: #06498D; /* Màu xanh Tekwell */
        margin-top: 2.5rem;
        margin-bottom: 1.5rem;
    }

        .service-detail-content h3.content-heading:first-of-type {
            margin-top: 0; /* Bỏ margin top cho heading đầu tiên */
        }


    .service-detail-content p {
        font-size: 1rem; /* Size chữ nội dung */
        line-height: 1.8; /* Tăng giãn dòng cho dễ đọc */
        color: #343a40; /* Màu chữ tối */
        margin-bottom: 1.25rem;
    }

/* Style cho blockquote */
.service-detail-quote {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 1.5rem 1.5rem 1.5rem 2rem; /* Padding */
    background-color: #f8f9fa; /* Nền xám nhạt */
}

    .service-detail-quote blockquote p {
        font-size: 1.2rem; /* Chữ quote to hơn */
        font-style: italic;
        color: #212529; /* Màu chữ quote đậm hơn */
        margin-bottom: 1rem;
    }

    .service-detail-quote .quote-container {
        border-left: 2px solid #06498D; /* Viền trái màu xanh */
        border-radius: 0 8px 8px 0; /* Bo góc nhẹ */
    }

    .service-detail-quote figcaption {
        font-size: 0.9rem;
        color: #6c757d; /* Màu chú thích */
    }

        .service-detail-quote figcaption.blockquote-footer:first-of-type { /* Style riêng cho image courtesy */
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }


/* --- Responsive cho Service Detail Page --- */
@media (max-width: 991.98px) {
    .service-detail-title {
        font-size: 40px;
    }

    .service-detail-short-desc {
        font-size: 18px;
    }
}

@media (max-width: 767.98px) {
    #service-detail-page {
        padding-top: 60px;
    }

    .service-detail-title {
        font-size: 32px;
    }

    .service-detail-short-desc {
        font-size: 17px;
    }

    .service-detail-content {
        max-width: 95%;
    }
        /* Cho phép rộng hơn trên mobile */
        .service-detail-content h3.content-heading {
            font-size: 1.6rem;
        }

        .service-detail-content p {
            font-size: 0.95rem;
        }

    .service-detail-quote blockquote p {
        font-size: 1.1rem;
    }
}

/* ======================================== */
/* Contact Us Page Styles            */
/* ======================================== */

#contact-page {
    /* Có thể thêm background nhẹ nếu muốn */
    /* background-color: #f8f9fa; */
    padding-top: 140px !important;
}

.contact-title {
    font-size: 36px;
    color: #101828; /* Màu title */
    font-weight: 700; /* Hoặc 600 tùy font */
    margin-bottom: 0.5rem !important;
}

.contact-subtitle {
    font-size: 20px;
    color: #475467; /* Màu subtitle */
    margin-bottom: 2.5rem !important; /* Tăng khoảng cách dưới */
    line-height: 1.6;
}

/* Form Styles */
#contact-page .form-label {
    font-weight: 500; /* Hơi đậm label */
    color: #344054; /* Màu label */
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

#contact-page .form-control {
    padding: 0.8rem 1rem; /* Tăng padding */
    border: 1px solid #D0D5DD; /* Viền xám nhạt */
    border-radius: 8px; /* Bo góc */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); /* Shadow nhẹ */
    font-size: 1rem;
}

    #contact-page .form-control:focus {
        border-color: #84adf4; /* Màu viền khi focus */
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(132, 173, 244, 0.3); /* Shadow khi focus */
    }

#contact-page textarea.form-control {
    min-height: 120px; /* Chiều cao tối thiểu cho textarea */
}

/* Button Style */
.btn-tekwell {
    background-color: #06498D; /* Màu xanh Tekwell */
    border-color: #06498D;
    color: #ffffff;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 8px; /* Bo góc */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

    .btn-tekwell:hover {
        background-color: #043a6b; /* Đậm hơn khi hover */
        border-color: #043a6b;
        color: #ffffff;
        transform: translateY(-2px); /* Nhấc nhẹ nút lên */
    }

    .btn-tekwell:active {
        background-color: #032b4f !important;
        border-color: #032b4f !important;
        transform: translateY(0);
    }


/* Image Style */
.contact-image {
    max-width: 100%; /* Giữ lại từ img-fluid */
    height: 100%; /* !!! THAY ĐỔI: Cho ảnh cao 100% cột chứa nó */
    object-fit: cover; /* !!! THÊM: Đảm bảo ảnh che phủ mà không méo */
    border-radius: 8px; /* Giữ lại bo góc nếu muốn */
}


/* --- Responsive cho Contact Us Page --- */
@media (max-width: 991.98px) {
    .contact-title {
        font-size: 32px;
    }

    .contact-subtitle {
        font-size: 18px;
    }
}

@media (max-width: 767.98px) {
    #contact-page {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .contact-title {
        font-size: 28px;
    }

    .contact-subtitle {
        font-size: 17px;
        margin-bottom: 2rem !important;
    }
}

.german-text {
    font-size: 1rem;
    text-align: center;
    margin-top: 2rem;
    color: #042E59;
}

@media (min-width: 991.98px){
    .german-text{
        display: none;
    }
}