/* ==========================================================
   NNServices – Custom Header & Footer CSS
   Prefix: nns- để tránh xung đột với Flatsome
   ========================================================== */

/* ── CSS Variables ── */
:root {
    --nns-navy: #071d61;
    --nns-red: #e42b31;
    --nns-gold: #c7a14c;
    --nns-ink: #17213a;
    --nns-muted: #66718a;
    --nns-line: #dfe5ef;
    --nns-soft: #f5f7fb;
    --nns-header: 82px;
    --nns-radius: 12px;
    --nns-shadow: 0 10px 30px rgba(4, 25, 80, .1);
}

/* ── H1 Tiêu đề trang trong Banner Breadcrumb Flatsome ── */
h1.nns-page-h1 {
    font-size: clamp(26px, 3.5vw, 40px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 10px 0 0 0 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    display: block !important;
}

@media (max-width: 768px) {
    h1.nns-page-h1 {
        font-size: clamp(22px, 5vw, 30px) !important;
    }
}

/* ── Container – khớp với Flatsome .container ── */
.nns-container {
    max-width: 1200px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.nns-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(7, 29, 97, .1);
}

.admin-bar .nns-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .nns-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .admin-bar .nns-header {
        top: 0;
    }
}

.nns-header-inner {
    min-height: var(--nns-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
}

/* ── Header Actions (Search, Lang, Hamburger) ── */
.nns-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Brand / Logo ── */
.nns-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.nns-brand img {
    height: 76px;
    width: auto;
    display: block;
    transition: height .3s ease;
}

.nns-mobile-toggle {
    display: none;
    color: var(--nns-navy);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    height: 28px;
    width: 28px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.nns-mobile-open .nns-mobile-toggle .nns-icon-bars {
    display: none;
}

body.nns-mobile-open .nns-mobile-toggle .nns-icon-close {
    display: block !important;
}

/* Mobile Dropdown Container */
.nns-mobile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    z-index: 999;
    padding: 10px 15px 20px;
}

body.nns-mobile-open .nns-mobile-dropdown {
    display: block;
}

.nns-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nns-mobile-nav-list li {
    position: relative;
}

.nns-mobile-nav-list>li>a {
    display: block;
    padding: 14px 15px;
    font-size: 16px;
    font-weight: 700;
    color: var(--nns-navy);
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 2px;
}

.nns-mobile-nav-list>li.current-menu-item>a,
.nns-mobile-nav-list>li.current-menu-ancestor>a,
.nns-mobile-nav-list>li.current-page-ancestor>a,
.nns-mobile-nav-list>li.current-menu-parent>a {
    background: #eef0f8;
}

.nns-mobile-nav-list ul.sub-menu li.current-menu-item>a {
    font-weight: 700;
}

.nns-mobile-nav-list ul.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 15px;
    display: none;
}

.nns-mobile-nav-list li.sub-menu-open>ul.sub-menu {
    display: block;
}

.nns-mobile-nav-list ul.sub-menu li a {
    display: block;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: 600;
    color: var(--nns-navy);
    text-decoration: none;
}

.nns-toggle-sub {
    position: absolute;
    right: 5px;
    top: 6px;
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border-radius: 6px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    color: var(--nns-navy);
}

.nns-mobile-nav-list li.sub-menu-open>.nns-toggle-sub {
    transform: rotate(180deg);
}

@media (max-width: 991px) {
    .nns-brand img {
        height: 58px;
    }

    .nns-desktop-nav,
    .nns-header-btn {
        display: none !important;
    }

    .nns-mobile-toggle {
        display: inline-flex;
    }
}

/* ── Desktop Nav ── */
.nns-desktop-nav {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--nns-navy);
    flex: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nns-desktop-nav .nns-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
    align-items: center;
}

.nns-desktop-nav .nns-nav-list li a {
    position: relative;
    display: block;
    padding: 29px 0 24px;
    color: var(--nns-navy);
    text-decoration: none;
    white-space: nowrap;
}

.nns-desktop-nav .nns-nav-list li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--nns-red), var(--nns-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
}

.nns-desktop-nav .nns-nav-list li a:hover::after,
.nns-desktop-nav .nns-nav-list li.current-menu-item>a::after,
.nns-desktop-nav .nns-nav-list li.current-menu-ancestor>a::after,
.nns-desktop-nav .nns-nav-list li.current-page-ancestor>a::after,
.nns-desktop-nav .nns-nav-list li.current-menu-parent>a::after {
    transform: scaleX(1);
}

/* Thêm icon mũi tên thả xuống cho mục có menu con (Level 1) */
.nns-desktop-nav .nns-nav-list>li.menu-item-has-children>a {
    padding-right: 18px;
    /* Dành không gian cho icon mũi tên */
}

.nns-desktop-nav .nns-nav-list>li.menu-item-has-children>a::before {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% + 2px);
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071d61' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: transform 0.2s;
}

.nns-desktop-nav .nns-nav-list>li.menu-item-has-children:hover>a::before {
    transform: translateY(-50%) rotate(180deg);
}

/* Desktop Dropdown */
.nns-desktop-nav .nns-nav-list li {
    position: relative;
}

/* Cầu nối vô hình giúp không bị mất hover khi rê chuột xuống sub-menu */
.nns-desktop-nav .nns-nav-list>li::before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
}

.nns-desktop-nav .nns-nav-list li ul.sub-menu {
    list-style: none !important;
    margin: 0;
    position: absolute;
    top: 100%;
    /* Bắt đầu ngay dưới mép menu cha */
    left: 0;
    /* Mép trái hộp thẳng với mép trái chữ menu cha */
    background: #fff;
    min-width: 280px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    border-radius: 12px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) translateZ(0);
    transition: all .25s ease;
    z-index: 100;
    flex-direction: column;
    gap: 2px;
    display: flex;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Triệt tiêu hoàn toàn dấu chấm bullet có thể do Flatsome tự chèn */
.nns-desktop-nav .nns-nav-list li ul.sub-menu li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.nns-desktop-nav .nns-nav-list li ul.sub-menu li::before {
    display: none !important;
}

.nns-desktop-nav .nns-nav-list li:hover>ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateZ(0);
}

/* Sub-menu cấp 3 (nếu có) */
.nns-desktop-nav .nns-nav-list li ul.sub-menu ul.sub-menu {
    top: -15px;
    /* Ngang hàng với item hiện tại */
    left: 100%;
    /* Mở sang bên phải */
    margin-left: 2px;
}

/* Icon mũi tên ngang cho Sub-menu cấp 2 có menu con */
.nns-desktop-nav .nns-nav-list li ul.sub-menu li.menu-item-has-children>a {
    position: relative;
    padding-right: 28px;
}

.nns-desktop-nav .nns-nav-list li ul.sub-menu li.menu-item-has-children>a::before {
    content: "";
    position: absolute;
    right: 18px;
    top: calc(50% + 1px);
    transform: translateY(-50%) rotate(-90deg);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071d61' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: transform 0.2s;
}

.nns-desktop-nav .nns-nav-list li ul.sub-menu li a {
    padding: 8px 20px;
    font-size: 16px !important;
    /* Tăng lên 16px theo yêu cầu */
    font-weight: 600;
    color: var(--nns-navy);
    white-space: nowrap;
    transition: color .2s ease;
    display: block;
    text-decoration: none;
}

.nns-desktop-nav .nns-nav-list li ul.sub-menu li a::after {
    display: none;
}

.nns-desktop-nav .nns-nav-list li ul.sub-menu li a:hover {
    background: transparent;
    /* Bỏ màu nền xám khi hover */
    color: var(--nns-red);
    /* Đổi màu chữ sang đỏ khi hover giống trong hình */
}

/* ── Header Actions ── */
.nns-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Search toggle */
.nns-search-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--nns-navy);
    border-radius: 8px;
    cursor: pointer;
    transition: color .2s;
    margin: 0 !important;
    padding: 0 !important;
}

.nns-search-toggle:hover {
    color: var(--nns-red);
}

body.nns-search-open .nns-search-toggle {
    background: transparent;
    color: var(--nns-navy);
}

body.nns-search-open .nns-search-toggle .nns-icon-search {
    display: none;
}

body.nns-search-open .nns-search-toggle .nns-icon-close {
    display: block !important;
}

/* CTA Button */
.nns-header-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--nns-navy);
    color: #fff;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s;
}

.nns-header-btn:hover {
    background: var(--nns-red);
    color: #fff;
}

/* Language switcher (GTranslate) */
.nns-header-lang,
.nns-header-lang .gtranslate_wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nns-header-lang a.gflag {
    display: flex;
    align-items: center;
}

.nns-header-lang img {
    display: block;
    width: 36px !important;
    height: 26px !important;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    transition: transform .2s;
}

.nns-header-lang a:hover img {
    transform: scale(1.1);
}

/* ── Search Panel (full-width dropdown) ── */
.nns-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--nns-navy);
    padding: 18px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .3s ease;
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    z-index: 1050;
    /* Z-index rất cao để vượt qua z-index 100 của menu thả xuống */
}

body.nns-search-open .nns-search-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nns-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.nns-search-field {
    flex: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 16px;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

.nns-search-field::placeholder {
    color: rgba(255, 255, 255, .55);
}

/* ── Hamburger ── */
.nns-mobile-menu {
    display: none;
    position: relative;
}

.nns-mobile-menu summary {
    list-style: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: transparent;
}

.nns-mobile-menu summary::-webkit-details-marker {
    display: none;
}

.nns-bars,
.nns-bars::before,
.nns-bars::after {
    width: 24px;
    height: 2.5px;
    background: var(--nns-navy);
    border-radius: 99px;
    display: block;
    position: relative;
    transition: .22s;
}

.nns-bars::before,
.nns-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nns-bars::before {
    top: -7px;
}

.nns-bars::after {
    top: 7px;
}

.nns-mobile-menu[open] .nns-bars {
    background: transparent;
}

.nns-mobile-menu[open] .nns-bars::before {
    top: 0;
    transform: rotate(45deg);
    background: var(--nns-navy);
}

.nns-mobile-menu[open] .nns-bars::after {
    top: 0;
    transform: rotate(-45deg);
    background: var(--nns-navy);
}

/* ── Overlay & Mobile Panel ── */
.nns-overlay {
    display: none;
    position: fixed;
    z-index: 1050;
    inset: var(--nns-header) 0 0;
    background: rgba(3, 15, 53, .5);
    backdrop-filter: blur(2px);
}

.nns-mobile-menu[open]~.nns-header-actions .nns-overlay,
.nns-mobile-menu[open]+.nns-overlay {
    display: block;
}

/* Overlay is inside .nns-header-inner, sibling selector doesn't work directly,
   so we use JS class on <details> instead – the overlay is inside the same flex container
   We target it via the details[open] state through JS body class */
.nns-mobile-menu[open]~* .nns-overlay {
    display: block;
}

/* Simpler approach: show overlay when mobile-menu open */
body.nns-mobile-open .nns-overlay {
    display: block;
}

.nns-mobile-panel {
    display: none;
    position: fixed;
    z-index: 1100;
    top: var(--nns-header);
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 10px 30px rgba(4, 25, 80, .1);
    padding: 10px 16px 20px;
    max-height: calc(100dvh - var(--nns-header));
    overflow-y: auto;
}

/* Show mobile panel when details[open] – native CSS trick */
.nns-mobile-menu[open]~.nns-mobile-panel {
    display: block;
}

/* But .nns-mobile-panel is not a direct sibling – we use JS instead via body class */
body.nns-mobile-open .nns-mobile-panel {
    display: block;
}

.nns-mobile-nav-list,
.nns-mobile-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nns-mobile-panel .nns-mobile-nav-list>li>a {
    width: 100%;
    border: none;
    background: #fff;
    color: var(--nns-navy);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 14px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s;
}

.nns-mobile-panel .nns-mobile-nav-list>li>a:hover,
.nns-mobile-panel .nns-mobile-nav-list>li.current-menu-item>a {
    background: var(--nns-soft);
}

/* Mobile sub-menu */
.nns-mobile-panel ul li ul.sub-menu {
    padding-left: 16px;
    margin: 4px 0 6px;
    flex-direction: column;
    gap: 0;
}

.nns-mobile-panel ul li ul.sub-menu li a {
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    background: transparent;
}

.nns-mobile-panel ul li ul.sub-menu li a:hover {
    background: rgba(7, 29, 97, .05);
}

/* ── Responsive: show/hide nav ── */
@media (max-width: 991px) {
    .nns-desktop-nav {
        display: none;
    }

    .nns-mobile-menu {
        display: block;
    }

    .nns-header-btn {
        display: none !important;
    }

    .nns-header-actions {
        gap: 8px;
        margin-left: auto;
    }
}

/* ══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.nns-footer {
    background: #fff;
    color: var(--nns-ink);
    padding: 55px 0 0;
    border-top: 2px solid var(--nns-navy);
}

.nns-footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px;
}

.nns-footer-grid>* {
    flex: 1 1 0;
    min-width: 150px;
}

.nns-footer-brand {
    flex: 1.5 1 0 !important;
    min-width: 240px !important;
}

.nns-footer-contact {
    flex: 1.5 1 0 !important;
    min-width: 240px !important;
}

.nns-brand-logo {
    height: 82px;
    width: auto;
    display: block;
    margin-bottom: 14px;
}

.nns-footer-brand p {
    color: var(--nns-ink);
    line-height: 1.65;
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 0;
}

/* Footer headings */
.nns-footer h4 {
    color: var(--nns-navy);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 20px;
    padding-bottom: 10px;
    position: relative;
}

.nns-footer h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 2px;
    background: var(--nns-red);
}

/* Footer links */
.nns-footer-links {
    display: grid;
    gap: 12px;
}

.nns-footer-links a {
    color: var(--nns-ink);
    text-decoration: none;
    font-size: 16px;
    transition: .2s;
    display: inline-block;
}

.nns-footer-links a:hover {
    color: var(--nns-navy);
    transform: translateX(5px);
}

/* Footer contact items */
.nns-footer-contact .nns-fc-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--nns-ink);
}

.nns-footer-contact .nns-fc-bold {
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 15px;
}

.nns-footer-contact .nns-fc-tax {
    color: var(--nns-muted);
    font-size: 13px;
    margin-bottom: 12px;
}

/* ══════════════════════════════════════════
   Section CTA – GỬI YÊU CẦU TƯ VẤN
═══════════════════════════════════════════ */
.nns-cta-section {
    background: var(--nns-navy, #071d61);
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    scroll-margin-top: 100px;
    /* Thêm phần này để trượt xuống ko bị che */
}

/* Đường chéo trang trí góc phải */
.nns-cta-bg-lines {
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg stroke='rgba(255,255,255,0.06)' stroke-width='1' fill='none'%3E%3Cline x1='0' y1='0' x2='400' y2='400'/%3E%3Cline x1='40' y1='0' x2='400' y2='360'/%3E%3Cline x1='80' y1='0' x2='400' y2='320'/%3E%3Cline x1='120' y1='0' x2='400' y2='280'/%3E%3Cline x1='160' y1='0' x2='400' y2='240'/%3E%3Cline x1='200' y1='0' x2='400' y2='200'/%3E%3Cline x1='240' y1='0' x2='400' y2='160'/%3E%3Cline x1='280' y1='0' x2='400' y2='120'/%3E%3Cline x1='320' y1='0' x2='400' y2='80'/%3E%3Cline x1='360' y1='0' x2='400' y2='40'/%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
    opacity: 0.8;
}

.nns-cta-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.nns-cta-left {
    color: #fff;
    padding-right: 40px;
    /* Cách xa form thêm chút cho thoáng */
}

.nns-cta-title {
    font-size: clamp(24px, 2.5vw, 32px);
    /* Nhỏ lại cho tinh tế */
    font-weight: 700;
    /* Bớt cục mịch */
    color: #fff;
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.nns-cta-desc {
    font-size: 15px;
    /* Giảm 1 chút cho thanh mảnh */
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 480px;
}

.nns-cta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    /* Đổi thành 1 cột để nằm trên 1 hàng */
    gap: 12px;
    /* Chỉnh lại khoảng cách dòng cho đẹp */
}

.nns-cta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    /* Thanh lịch hơn */
    font-weight: 500;
    line-height: 1.5;
}

.nns-cta-check {
    width: 18px;
    /* Icon gọn hơn */
    height: 18px;
    flex-shrink: 0;
    color: var(--nns-gold, #c7a14c);
    margin-top: 2px;
    /* Căn giữa hoàn hảo với dòng chữ đầu tiên */
}

/* Form card */
.nns-cta-right {
    position: relative;
    z-index: 1;
}

.nns-cta-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Override Fluent Forms styles inside CTA card */
.nns-cta-form-card form {
    margin: 0 !important;
}

.nns-cta-form-card .ff-el-group {
    margin-bottom: 20px !important;
}

.nns-cta-form-card .ff-el-form-control {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
    transition: all .2s !important;
    background: #f9fafb !important;
    color: #111827 !important;
    box-shadow: none !important;
}

.nns-cta-form-card .ff-el-form-control:focus {
    border-color: var(--nns-navy, #071d61) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(7, 29, 97, 0.1) !important;
    outline: none !important;
}

/* Ẩn mũi tên lên xuống (spinner) của ô nhập số (type="number") */
.nns-cta-form-card input[type="number"]::-webkit-outer-spin-button,
.nns-cta-form-card input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.nns-cta-form-card input[type="number"] {
    -moz-appearance: textfield !important;
}

.nns-cta-form-card .ff-el-input--label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--nns-ink, #1f2937) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.nns-cta-form-card .ff-el-is-required {
    color: var(--nns-red, #e42b31) !important;
}

/* Ép kiểu Nút Submit mạnh tay nhất */
.nns-cta-form-card button[type="submit"],
.nns-cta-form-card .ff-btn-submit,
.nns-cta-form-card .fluentform .ff-btn {
    background-color: var(--nns-navy, #071d61) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: background-color .3s ease, transform .2s ease !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(7, 29, 97, 0.2) !important;
    margin-top: 10px !important;
}

.nns-cta-form-card button[type="submit"]:hover,
.nns-cta-form-card .ff-btn-submit:hover,
.nns-cta-form-card .fluentform .ff-btn:hover {
    background-color: var(--nns-red, #e42b31) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(228, 43, 49, 0.3) !important;
}

/* Responsive CTA */
@media (max-width: 900px) {
    .nns-cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .nns-cta-bg-lines {
        width: 100%;
        opacity: 0.4;
    }

    .nns-cta-section {
        padding: 50px 0;
    }
}

@media (max-width: 550px) {
    .nns-cta-section {
        padding: 40px 0;
    }

    .nns-cta-title {
        font-size: 24px;
    }

    .nns-cta-desc {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .nns-cta-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .nns-cta-form-card {
        padding: 24px 20px;
    }

    .nns-cta-inner {
        gap: 30px;
    }
}

/* Override Flatsome global link color in entire footer */
.nns-footer a,
.nns-footer a:link,
.nns-footer a:visited {
    color: var(--nns-ink);
    text-decoration: none;
}

.nns-footer-contact .nns-fc-item a,
.nns-footer-contact .nns-fc-item a:link,
.nns-footer-contact .nns-fc-item a:visited {
    color: var(--nns-ink) !important;
    text-decoration: none;
}

.nns-footer-contact .nns-fc-item a:hover {
    text-decoration: underline;
    color: var(--nns-navy) !important;
}

.nns-footer .nns-fc-item a {
    color: var(--nns-ink) !important;
}

/* Footer bottom bar */
.nns-footer-bottom {
    background: var(--nns-navy);
    margin-top: 40px;
    padding: 12px 0;
}

.nns-copy {
    font-size: 14px;
    color: #fff;
    text-align: center;
    letter-spacing: .5px;
}

/* ── Floating buttons ── */
.nns-floating {
    position: fixed;
    z-index: 900;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 10px;
}

.nns-float {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    overflow: hidden;
    animation: nns-pulse 2s infinite;
}

.nns-float svg {
    display: block;
}

.nns-fb {
    background: #1877f2;
}

.nns-zalo {
    background: #1675e8;
}

.nns-call {
    background: var(--nns-red);
}

.nns-backtotop {
    background: var(--nns-gold);
    animation: none;
    transition: opacity .3s, transform .3s;
}

@keyframes nns-pulse {
    0% {
        box-shadow: 0 8px 22px rgba(0, 0, 0, .22), 0 0 0 0 var(--nns-navy);
    }

    70% {
        box-shadow: 0 8px 22px rgba(0, 0, 0, .22), 0 0 0 14px transparent;
    }

    100% {
        box-shadow: 0 8px 22px rgba(0, 0, 0, .22), 0 0 0 0 transparent;
    }
}

/* ── Responsive Footer ── */
@media (max-width: 768px) {
    .nns-footer-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .nns-footer-brand,
    .nns-footer-contact {
        min-width: 0 !important;
    }

    .nns-footer-nav-col {
        justify-self: start;
    }
}

/* ══════════════════════════════════════════
   Ẩn Flatsome header/footer gốc khi bật custom
═══════════════════════════════════════════ */
body.nns-custom-header-active #header,
body.nns-custom-header-active .header-wrapper,
body.nns-custom-header-active [class*="flatsome-header"],
body.nns-custom-header-active .has-header-1,
body.nns-custom-header-active [data-ux="Header"] {
    display: none !important;
}

body.nns-custom-footer-active #footer,
body.nns-custom-footer-active .footer-wrapper,
body.nns-custom-footer-active [class*="flatsome-footer"],
body.nns-custom-footer-active [data-ux="Footer"] {
    display: none !important;
}