/**
 * DPS.MEDIA - Unified Navigation System Stylesheet
 * Enterprise-grade Desktop Megamenu + Mobile App Navigation
 * Typography: 'Be Vietnam Pro' & 'JetBrains Mono'
 */

:root {
    /* 1. Surfaces & Canvas */
    --dps-nav-bg: #f8fafc;
    --dps-nav-surface: #ffffff;
    --dps-nav-surface-low: #f1f5f9;
    --dps-nav-surface-container: #e2e8f0;

    /* 2. Typography Colors */
    --dps-nav-text-main: #0f172a;
    --dps-nav-text-sub: #475569;
    --dps-nav-text-muted: #64748b;

    /* 3. Brand Foundations (DPS Official Brand Colors) */
    --dps-nav-primary-navy: #212c74;
    --dps-nav-primary-deep: #141c52;
    --dps-nav-primary-indigo: #2d3e80;

    --dps-nav-secondary-green: #2bb656;
    --dps-nav-secondary-dark: #1e8a40;
    --dps-nav-secondary-light: #22c55e;
    --dps-nav-secondary-bg: #eaf8ef;

    --dps-nav-tertiary-purple: #6366f1;
    --dps-nav-tertiary-deep: #4338ca;
    --dps-nav-tertiary-bg: #eef2ff;

    /* 4. Semantic Badges */
    --dps-badge-hot-bg: #fef2f2;
    --dps-badge-hot-text: #dc2626;
    --dps-badge-hot-border: rgba(220, 38, 38, 0.25);

    --dps-badge-free-bg: #eaf8ef;
    --dps-badge-free-text: #2bb656;
    --dps-badge-free-border: rgba(43, 182, 86, 0.25);

    --dps-badge-ai-bg: #eef1fc;
    --dps-badge-ai-text: #212c74;
    --dps-badge-ai-border: rgba(33, 44, 116, 0.25);

    --dps-badge-pro-bg: #212c74;
    --dps-badge-pro-text: #ffffff;
    --dps-badge-pro-border: #212c74;

    /* 5. Metrics */
    --dps-desk-header-height: 72px;
    --dps-mob-header-height: 60px;
    --dps-mob-bottom-bar-height: 64px;
}

/* =========================================================================
   GLOBAL RESET & ICON PROTECTION
   ========================================================================= */
.dps-desktop-nav-root,
.dps-mobile-nav-root {
    font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
    color: var(--dps-nav-text-main);
    box-sizing: border-box;
}

.dps-desktop-nav-root *:not(i):not([class*="fa-"]):not([class*="fa"]):not(.dps-mono),
.dps-mobile-nav-root *:not(i):not([class*="fa-"]):not([class*="fa"]):not(.dps-mono) {
    font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
    box-sizing: border-box;
}

.dps-mono {
    font-family: 'JetBrains Mono', monospace !important;
}

/* Protected Icon Fonts */
.dps-desktop-nav-root i.fa-solid,
.dps-mobile-nav-root i.fa-solid,
.dps-desktop-nav-root i.fas,
.dps-mobile-nav-root i.fas {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

.dps-desktop-nav-root i.fa-brands,
.dps-mobile-nav-root i.fa-brands,
.dps-desktop-nav-root i.fab,
.dps-mobile-nav-root i.fab {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}

.dps-desktop-nav-root i.fa-regular,
.dps-mobile-nav-root i.fa-regular,
.dps-desktop-nav-root i.far,
.dps-mobile-nav-root i.far {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 400 !important;
}

/* Badges */
.dps-badge {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
}

.dps-badge-hot {
    background: var(--dps-badge-hot-bg);
    color: var(--dps-badge-hot-text);
    border-color: var(--dps-badge-hot-border);
}

.dps-badge-free {
    background: var(--dps-badge-free-bg);
    color: var(--dps-badge-free-text);
    border-color: var(--dps-badge-free-border);
}

.dps-badge-ai {
    background: var(--dps-badge-ai-bg);
    color: var(--dps-badge-ai-text);
    border-color: var(--dps-badge-ai-border);
}

.dps-badge-pro {
    background: var(--dps-badge-pro-bg);
    color: var(--dps-badge-pro-text);
    border-color: var(--dps-badge-pro-border);
}

/* =========================================================================
   HARDWARE-ACCELERATED DRUM ROTATION (80s, COUNTER-CLOCKWISE / CHIM LẠC BAY)
   ========================================================================= */
@keyframes dpsDrumSpinCounterClockwise {
    from {
        transform: translate3d(0, 0, 0) rotate(360deg);
    }

    to {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

/* Unified 40x40 Icon Boxes */
.dps-icon-box {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
}

.dps-icon-navy {
    background: var(--dps-nav-surface-low);
    color: var(--dps-nav-primary-navy);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.dps-icon-green {
    background: var(--dps-nav-secondary-bg);
    color: var(--dps-nav-secondary-green);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

.dps-icon-purple {
    background: var(--dps-nav-tertiary-bg);
    color: var(--dps-nav-tertiary-deep);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.dps-icon-blue {
    background: #eff6ff;
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.2);
}

.dps-icon-red {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}


/* =========================================================================
   GLOBAL LANGUAGE SWITCHER & LOGOUT ACTION BUTTONS (DESKTOP & MOBILE)
   ========================================================================= */
.dps-header-lang-wrap {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.dps-header-lang-wrap .trp-shortcode-switcher__wrapper {
    margin: 0 !important;
    width: 34px !important;
    height: 34px !important;
    position: relative !important;
    overflow: visible !important;
}

.dps-header-lang-wrap .trp-language-switcher {
    width: 34px !important;
    height: 34px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
    display: block !important;
}

.dps-header-lang-wrap .trp-current-language-item__wrapper {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.dps-header-lang-wrap .trp-current-language-item__wrapper:hover,
.dps-header-lang-wrap:hover .trp-current-language-item__wrapper {
    border-color: var(--dps-nav-secondary-green) !important;
    box-shadow: 0 3px 10px rgba(0, 209, 133, 0.15) !important;
    transform: translateY(-1px);
}

.dps-header-lang-wrap .trp-current-language-item__wrapper a,
.dps-header-lang-wrap .trp-current-language-item__wrapper div.trp-language-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* Strictly HIDE ALL language name text & SVGs everywhere */
.dps-header-lang-wrap .trp-language-item-name,
.dps-header-lang-wrap span,
.dps-header-lang-wrap svg {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

.dps-header-lang-wrap .trp-current-language-item__wrapper .trp-flag-image {
    width: 20px !important;
    height: 15px !important;
    border-radius: 2px !important;
    margin: 0 !important;
    object-fit: cover !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
    display: block !important;
}

/* Sleek Flag-Only Dropdown List (38px wide compact pill) */
.dps-header-lang-wrap .trp-switcher-dropdown-list {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 19px !important;
    box-shadow: 0 8px 24px rgba(33, 44, 116, 0.16) !important;
    padding: 4px 2px !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    outline: none !important;
}

.dps-header-lang-wrap .trp-switcher-dropdown-list > *:not(.trp-language-item) {
    display: none !important;
}

.dps-header-lang-wrap .trp-switcher-dropdown-list::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Invisible hover bridge ::before from button to dropdown (20px high) */
.dps-header-lang-wrap .trp-switcher-dropdown-list::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -8px;
    right: -8px;
    height: 20px;
    display: block;
    background: transparent;
    z-index: 10;
}

/* Show dropdown on hover and active/focus */
.dps-header-lang-wrap:hover .trp-switcher-dropdown-list,
.dps-header-lang-wrap:focus-within .trp-switcher-dropdown-list,
.dps-header-lang-wrap .trp-language-switcher:hover .trp-switcher-dropdown-list,
.dps-header-lang-wrap .trp-language-switcher.trp-active .trp-switcher-dropdown-list,
.dps-header-lang-wrap .trp-shortcode-switcher__wrapper:hover .trp-switcher-dropdown-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.dps-header-lang-wrap .trp-switcher-dropdown-list .trp-language-item {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.dps-header-lang-wrap .trp-switcher-dropdown-list .trp-language-item .trp-flag-image {
    width: 20px !important;
    height: 15px !important;
    border-radius: 2px !important;
    display: block !important;
    object-fit: cover !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
    margin: 0 auto !important;
}

.dps-header-lang-wrap .trp-switcher-dropdown-list .trp-language-item:hover {
    background: rgba(0, 209, 133, 0.12) !important;
    transform: scale(1.08) !important;
}

.dps-header-lang-wrap .trp-language-switcher.trp-shortcode-anchor {
    display: none !important;
}

/* Logout button */
.dps-header-logout-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dps-nav-primary-navy);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.dps-header-logout-btn:hover,
.dps-header-logout-btn:active {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15);
    transform: translateY(-1px);
}

/* =========================================================================
   DESKTOP NAVIGATION STYLES (≥ 1025px)
   ========================================================================= */
@media (min-width: 1025px) {
    .dps-mobile-nav-root {
        display: none !important;
    }

    .dps-desktop-nav-root {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--dps-desk-header-height);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        z-index: 1000;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        overflow: visible;
    }

    .dps-desktop-nav-root.dps-header-scrolled {
        height: 64px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 24px rgba(33, 44, 116, 0.06);
    }

    /* 1. LỚP TRỐNG ĐỒNG XOAY NGƯỢC RỘNG TRÊN HEADER (CANH GIỮA CHÍNH TÂM, CẮT ĐÚNG CHIỀU CAO HEADER) */
    .dps-header-drum-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* Cắt chính xác theo khung header, tuyệt đối không tràn xuống hero */
        pointer-events: none;
        z-index: 0;
        opacity: 1;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ẨN TRỐNG ĐỒNG TRÊN HEADER KHI RÊ CHUỘT VÀO MENU HOẶC MỞ MEGAMENU */
    .dps-desktop-nav-root:hover .dps-header-drum-wrapper,
    .dps-desk-item:hover~.dps-header-drum-wrapper {
        opacity: 0 !important;
    }

    .dps-header-drum-bg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 800px;
        height: 800px;
        pointer-events: none;
        opacity: 0.08;
        contain: strict;
    }

    .dps-header-drum-bg img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
        will-change: transform;
        animation: dpsDrumSpinCounterClockwise 80s linear infinite;
    }

    .dps-desk-container {
        max-width: 1320px;
        margin: 0 auto;
        height: 100%;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        position: relative;
        z-index: 1;
    }

    /* Logo */
    .dps-desk-logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        height: 100%;
    }

    .dps-desk-logo-img {
        max-height: 38px;
        width: auto;
        display: block;
        object-fit: contain;
    }

    /* Menu Bar */
    .dps-desk-menu {
        height: 100%;
        position: static;
    }

    .dps-desk-menu-list {
        display: flex;
        align-items: center;
        gap: 6px;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        position: static;
    }

    .dps-desk-item {
        position: static;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .dps-desk-link {
        padding: 8px 14px;
        border-radius: 6px;
        color: var(--dps-nav-text-main);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
    }

    .dps-desk-arrow {
        font-size: 10px;
        color: var(--dps-nav-text-muted);
        transition: transform 0.25s ease;
    }

    .dps-desk-item:hover>.dps-desk-link,
    .dps-desk-item.dps-active>.dps-desk-link {
        background: var(--dps-nav-surface-low);
        color: var(--dps-nav-secondary-green);
    }

    .dps-desk-item:hover>.dps-desk-link .dps-desk-arrow,
    .dps-desk-item.dps-active>.dps-desk-link .dps-desk-arrow {
        transform: rotate(180deg);
        color: var(--dps-nav-secondary-green);
    }

    /* Invisible hover bridge spanning between header and megamenu to prevent hover loss */
    .dps-desk-item.dps-has-megamenu {
        position: static;
    }

    .dps-desk-item.dps-has-megamenu::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 24px;
        background: transparent;
        pointer-events: auto;
        z-index: 1000;
        display: block;
    }

    /* Megamenu Dropdown: Centered to the container, expansive width */
    .dps-megamenu-dropdown {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        background: #ffffff;
        border: 1.5px solid var(--dps-nav-surface-container);
        border-radius: 14px;
        box-shadow: 0 20px 50px rgba(33, 44, 116, 0.10);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
        z-index: 1001;
        padding: 26px 30px;
        overflow: hidden;
    }

    .dps-megamenu-dropdown.dps-mega-wide {
        width: min(1180px, calc(100vw - 48px));
    }

    .dps-desk-item:hover>.dps-megamenu-dropdown,
    .dps-desk-item.dps-active>.dps-megamenu-dropdown {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    /* 2. TRỐNG ĐỒNG ĐÔNG SƠN WATERMARK XOAY NGƯỢC CHẬM 80S (CANH GIỮA TRONG MEGAMENU) */
    .dps-megamenu-drum-bg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 880px;
        height: 880px;
        pointer-events: none;
        opacity: 0.10;
        z-index: 0;
        contain: strict;
    }

    .dps-megamenu-drum-bg img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
        will-change: transform;
        animation: dpsDrumSpinCounterClockwise 80s linear infinite;
    }

    .dps-mega-grid {
        display: grid;
        grid-template-columns: 1fr 310px;
        gap: 32px;
        position: relative;
        z-index: 1;
    }

    .dps-mega-section-title {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--dps-nav-primary-navy);
        letter-spacing: 0.04em;
        margin-bottom: 12px;
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Symmetrical 3-Column Megamenu Grid (Left 1fr - Center 230px - Right 1fr) */
    .dps-megamenu-dropdown.dps-mega-symmetrical {
        width: min(1320px, calc(100vw - 48px));
        padding: 24px 28px;
    }

    .dps-mega-sym-grid {
        display: grid;
        grid-template-columns: 1fr 230px 1fr;
        gap: 24px;
        align-items: stretch;
        position: relative;
        z-index: 1;
    }

    .dps-mega-sym-col {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .dps-mega-stack {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .dps-mega-sym-center {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border: none !important;
        padding: 0 8px;
    }

    .dps-center-hero-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        width: 100%;
        text-align: center;
    }

    .dps-center-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .dps-center-logo img {
        max-width: 140px;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .dps-promo-socials-list {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .dps-promo-soc-item {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50%;
        background: var(--dps-nav-surface-low);
        border: 1px solid rgba(0, 0, 0, 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--dps-nav-primary-navy);
        font-size: 12px !important;
        text-decoration: none;
        transition: all 0.2s ease;
        flex-shrink: 0 !important;
    }

    .dps-promo-soc-item:hover {
        background: var(--dps-nav-secondary-green);
        color: #ffffff;
        border-color: var(--dps-nav-secondary-green);
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(0, 209, 133, 0.2);
    }

    /* Tactile Clickable Card Hover State (Solid Crisp White) */
    .dps-mega-card {
        padding: 10px 14px;
        border-radius: 8px;
        border: 1px solid var(--dps-nav-surface-container);
        background: #ffffff !important;
        display: flex;
        align-items: center;
        gap: 14px;
        text-decoration: none;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .dps-mega-card:hover {
        background: #ffffff !important;
        border-color: var(--dps-nav-secondary-green);
        transform: translateX(4px);
        box-shadow: 0 4px 16px rgba(43, 182, 86, 0.15);
    }

    .dps-card-info {
        flex: 1;
        min-width: 0;
    }

    .dps-card-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--dps-nav-primary-navy);
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 1.35;
        white-space: nowrap;
    }

    .dps-card-sub {
        font-size: 12px;
        color: var(--dps-nav-text-sub);
        margin-top: 2px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Sidebar Promo Box (Glassmorphic) */
    .dps-mega-sidebar {
        border-left: 1px solid rgba(0, 0, 0, 0.06);
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .dps-mega-promo-box {
        background: linear-gradient(145deg, rgba(240, 253, 244, 0.75) 0%, rgba(238, 242, 255, 0.75) 100%) !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(5, 150, 105, 0.2);
        border-radius: 10px;
        padding: 16px;
    }

    .dps-promo-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--dps-nav-primary-navy);
        margin: 8px 0 4px;
    }

    .dps-promo-desc {
        font-size: 11.5px;
        color: var(--dps-nav-text-sub);
        line-height: 1.4;
        margin-bottom: 12px;
    }

    /* High-Contrast CTA Buttons (Fix Bug 1) */
    .dps-promo-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 10px 14px;
        color: #ffffff !important;
        font-size: 12px;
        font-weight: 700;
        border-radius: 6px;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.2s;
        line-height: 1.2;
    }

    .dps-promo-btn.btn-green {
        background: var(--dps-nav-secondary-green) !important;
    }

    .dps-promo-btn.btn-navy {
        background: var(--dps-nav-primary-navy) !important;
    }

    .dps-promo-btn.btn-purple {
        background: var(--dps-nav-tertiary-deep) !important;
    }

    .dps-promo-btn:hover {
        opacity: 0.92;
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        color: #ffffff !important;
    }

    /* Actions */
    .dps-desk-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .dps-desk-search-trigger {
        height: 38px;
        padding: 0 12px;
        border-radius: 6px;
        background: var(--dps-nav-surface-low);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--dps-nav-text-muted);
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .dps-desk-search-trigger:hover {
        border-color: var(--dps-nav-secondary-green);
        color: var(--dps-nav-text-main);
        background: #ffffff;
    }

    .dps-desk-search-trigger kbd {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        padding: 1px 5px;
        font-size: 10px;
        color: var(--dps-nav-text-muted);
    }

    .dps-desk-cta-btn {
        height: 38px;
        padding: 0 16px;
        border-radius: 6px;
        background: var(--dps-nav-primary-navy);
        color: #ffffff !important;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0, 0, 51, 0.15);
        transition: all 0.2s;
        white-space: nowrap;
    }
    .dps-desk-cta-btn span,
    .dps-desk-cta-btn i {
        color: #ffffff !important;
    }
    .dps-desk-cta-btn:hover {
        background: var(--dps-nav-primary-indigo);
        color: #ffffff !important;
        transform: translateY(-1px);
    }
}


/* =========================================================================
   MOBILE NAVIGATION STYLES (< 992px)
   ========================================================================= */
@media (max-width: 991px) {

    .dps-desktop-nav-root,
    .dps-desktop-header-wrapper,
    header.site-header,
    .bi-header-section,
    .mean-container,
    div[data-elementor-type="header"],
    section[data-elementor-type="header"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    body {
        padding-bottom: var(--dps-mob-bottom-bar-height) !important;
    }

    .dps-mobile-nav-root {
        display: block;
        width: 100%;
        position: relative;
    }

    /* Top Mobile Header */
    .dps-top-header {
        height: 60px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .dps-header-logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        height: 44px;
    }

    .dps-brand-logo-img {
        max-height: 32px;
        width: auto;
        display: block;
        object-fit: contain;
    }

    .dps-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dps-header-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.09) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        color: var(--dps-nav-secondary-green) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    /* WCAG 2.1 / Google Mobile Friendly Touch Target Expansion (44px min tap area) */
    .dps-header-btn::after,
    .dps-header-lang-wrap::after,
    .dps-header-logout-btn::after {
        content: '';
        position: absolute;
        top: -6px;
        bottom: -6px;
        left: -6px;
        right: -6px;
        display: block;
        min-width: 44px;
        min-height: 44px;
    }

    .dps-header-btn:active {
        background: var(--dps-nav-secondary-bg) !important;
        border-color: var(--dps-nav-secondary-green) !important;
        transform: scale(0.95);
    }

    /* Search Overlay (Shared) */
    .dps-search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #ffffff;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    }

    .dps-search-overlay.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .dps-search-header {
        height: calc(var(--dps-mob-header-height) + 16px);
        padding: 16px 16px 0;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: #ffffff;
    }

    .dps-search-input-wrap {
        flex: 1;
        height: 44px;
        background: var(--dps-nav-surface-low);
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .dps-search-input-wrap:focus-within {
        border-color: var(--dps-nav-secondary-green);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
    }

    .dps-search-input-wrap input {
        border: none;
        background: transparent;
        outline: none;
        font-size: 13.5px;
        color: var(--dps-nav-text-main);
        width: 100%;
        font-weight: 500;
    }

    .dps-btn-close-search {
        height: 44px;
        padding: 0 12px;
        border: none;
        background: transparent;
        color: var(--dps-nav-secondary-green);
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
    }

    .dps-search-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
    }

    .dps-search-hints-title {
        font-size: 11px;
        font-weight: 700;
        color: var(--dps-nav-text-muted);
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .dps-tags-container {
        position: relative;
        margin-bottom: 20px;
    }

    .dps-tags-container::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 32px;
        background: linear-gradient(to right, transparent, #ffffff);
        pointer-events: none;
    }

    .dps-tags-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-right: 24px;
    }

    .dps-tags-list::-webkit-scrollbar {
        display: none;
    }

    .dps-tag-item {
        padding: 6px 12px;
        background: var(--dps-nav-surface-low);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        font-size: 12px;
        color: var(--dps-nav-text-sub);
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    .dps-tag-item:active {
        background: var(--dps-nav-secondary-bg);
        color: var(--dps-nav-secondary-green);
    }

    /* Full-Screen App Drawer */
    .dps-app-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #ffffff;
        z-index: 8000;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
        padding-bottom: var(--dps-mob-bottom-bar-height);
        overflow-y: auto;
    }

    .dps-app-drawer.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .dps-drawer-top-bar {
        height: 62px;
        padding: 12px 18px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: #ffffff;
        position: sticky;
        top: 0;
        z-index: 99;
    }

    .dps-drawer-title-wrap {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 700;
        color: var(--dps-nav-primary-navy);
        letter-spacing: -0.01em;
    }

    .dps-drawer-close-btn {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        background: var(--dps-nav-surface-low);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--dps-nav-text-main);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
    }

    /* Horizontal Chips Bar (Prominent Fade Gradient) */
    .dps-category-header {
        padding: 12px 18px;
        background: #ffffff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        position: sticky;
        top: 62px;
        z-index: 90;
    }

    .dps-chips-relative {
        position: relative;
        display: flex;
        align-items: center;
    }

    .dps-chips-relative::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 44px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 85%);
        pointer-events: none;
        z-index: 3;
    }

    .dps-chips-bar {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-right: 48px;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .dps-chips-bar::-webkit-scrollbar {
        display: none;
    }

    .dps-chip {
        padding: 7px 12px;
        background: var(--dps-nav-surface-low);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        color: var(--dps-nav-text-sub);
        font-size: 11.5px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .dps-chip i {
        font-size: 12px;
    }

    .dps-chip.active {
        background: var(--dps-nav-primary-navy);
        color: #ffffff;
        border-color: var(--dps-nav-primary-navy);
        box-shadow: 0 2px 8px rgba(0, 0, 51, 0.2);
    }

    .dps-chip.active i {
        color: var(--dps-nav-secondary-light);
    }

    /* Content Cards */
    .dps-content-container {
        padding: 16px 16px 96px;
    }

    /* Mobile Hero Hub Card with Large Rotating Dong Son Drum (80s Counter-Clockwise, Unboxed Edge-to-Edge) */
    .dps-mob-hero-drum-card {
        position: relative;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 28px 16px 20px !important;
        margin-bottom: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .dps-mob-drum-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 380px;
        height: 380px;
        max-width: 100vw;
        pointer-events: none;
        opacity: 0.16;
        z-index: 0;
    }

    .dps-mob-drum-bg img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        animation: dpsDrumSpinCounterClockwise 80s linear infinite !important;
    }

    .dps-mob-hero-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
    }

    .dps-mob-hero-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .dps-mob-hero-logo img {
        max-width: 160px;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .dps-mob-hero-content .dps-promo-socials-list {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .dps-mob-hero-content .dps-promo-soc-item {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.09) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--dps-nav-primary-navy) !important;
        font-size: 13px !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        position: relative !important;
    }

    .dps-mob-hero-content .dps-promo-soc-item::after {
        content: '';
        position: absolute;
        top: -6px;
        bottom: -6px;
        left: -6px;
        right: -6px;
        display: block;
        min-width: 44px;
        min-height: 44px;
    }

    .dps-mob-hero-content .dps-promo-soc-item:hover,
    .dps-mob-hero-content .dps-promo-soc-item:active {
        background: var(--dps-nav-secondary-green) !important;
        color: #ffffff !important;
        border-color: var(--dps-nav-secondary-green) !important;
        transform: translateY(-2px);
    }

    .dps-lead-banner {
        background: linear-gradient(135deg, #f0fdf4 0%, #eef2ff 100%);
        border: 1px solid rgba(5, 150, 105, 0.2);
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .dps-banner-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--dps-nav-primary-navy);
        margin-bottom: 2px;
    }

    .dps-banner-desc {
        font-size: 11.5px;
        color: var(--dps-nav-text-sub);
    }

    .dps-category-group-panel {
        animation: dpsPanelFade 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes dpsPanelFade {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dps-service-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .dps-service-card {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        transition: all 0.2s;
        min-height: 44px;
    }

    .dps-service-card:active {
        background: var(--dps-nav-surface-low);
        border-color: var(--dps-nav-secondary-green);
        transform: translateX(3px);
    }

    .dps-card-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .dps-card-title {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--dps-nav-primary-navy);
        line-height: 1.35;
    }

    .dps-card-sub {
        font-size: 11px;
        color: var(--dps-nav-text-sub);
        margin-top: 2px;
    }

    /* Contact Hub */
    .dps-hub-lead {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .dps-hub-company {
        font-size: 15px;
        font-weight: 700;
        color: var(--dps-nav-primary-navy);
        margin-bottom: 4px;
    }

    .dps-hub-addr {
        font-size: 12px;
        color: var(--dps-nav-text-sub);
        line-height: 18px;
        margin-bottom: 8px;
    }

    .dps-extra-card {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 14px;
        margin-top: 14px;
    }

    .dps-extra-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--dps-nav-primary-navy);
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    /* Sticky Bottom Nav Bar */
    .dps-bottom-nav-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: var(--dps-mob-bottom-bar-height);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 16px rgba(0, 0, 51, 0.05);
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 4px 6px;
        z-index: 9999;
    }

    .dps-nav-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--dps-nav-text-muted);
        text-decoration: none;
        cursor: pointer;
        position: relative;
        padding: 6px 0;
        min-height: 44px;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .dps-nav-tab i {
        font-size: 18px;
        transition: transform 0.2s;
    }

    .dps-nav-tab span {
        font-size: 11px;
        font-weight: 600;
    }

    .dps-nav-tab.active {
        color: var(--dps-nav-primary-navy);
    }

    .dps-nav-tab.active i {
        color: var(--dps-nav-secondary-green);
        transform: translateY(-2px);
    }

    .dps-nav-tab.active span {
        color: var(--dps-nav-primary-navy);
        font-weight: 700;
    }

    .dps-nav-tab.dps-center-cta {
        transform: translateY(-6px);
    }

    .dps-center-cta .dps-cta-box {
        width: 44px;
        height: 44px;
        border-radius: 4px;
        background: var(--dps-nav-surface-low);
        border: 1px solid rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--dps-nav-tertiary-deep);
        transition: all 0.2s;
        position: relative;
    }

    .dps-center-cta .dps-cta-box i {
        font-size: 18px;
        color: var(--dps-nav-tertiary-deep);
    }

    .dps-center-cta .dps-cta-badge {
        position: absolute;
        top: -5px;
        right: -5px;
    }

    .dps-nav-tab.dps-center-cta.active .dps-cta-box {
        background: var(--dps-nav-primary-navy);
        border-color: var(--dps-nav-tertiary-purple);
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
    }

    .dps-nav-tab.dps-center-cta.active .dps-cta-box i {
        color: #ffffff;
    }

    .dps-nav-tab.dps-center-cta.active span {
        color: var(--dps-nav-primary-navy);
        font-weight: 700;
    }
}