/* =========================================================
           ROOT VARIABLES
        ========================================================== */

        :root {

            --primary-50: #f0f7ff;
            --primary-100: #e0effe;
            --primary-500: #1d84c7;
            --primary-600: #14358a;
            --primary-700: #1d84c7;
            --primary-800: #075985;

            --bg-body: #f8fafc;
            --bg-card: #ffffff;
            --bg-card-glass: rgba(255, 255, 255, 0.85);
            --bg-subtle: #f1f5f9;

            --text-main: #14358a;
            --text-muted: #212326;
            --text-light: #94a3b8;

            --border-color: rgba(226, 232, 240, 0.8);

            --amber-500: #ee8020;
            --emerald-500: #10b981;
            --red-500: #ef4444;

            --radius-sm: 0.5rem;
            --radius-md: 0.75rem;
            --radius-lg: 1rem;
            --radius-xl: 1.5rem;

            --shadow-lg:
                0 20px 25px -5px rgba(15, 23, 42, 0.08),
                0 8px 10px -6px rgba(15, 23, 42, 0.04);

            --shadow-float:
                0 20px 30px -10px rgba(0, 0, 0, 0.2);

        }


        /* =========================================================
           DARK MODE
        ========================================================== */

        .dark {

            --bg-body: #020617;
            --bg-card: #0f172a;
            --bg-card-glass: rgba(15, 23, 42, 0.85);
            --bg-subtle: #1e293b;

            --text-main: #f8fafc;
            --text-muted: #212326;
            --text-light: #64748b;

            --border-color: rgba(51, 65, 85, 0.8);
        }


        /* =========================================================
           RESET
        ========================================================== */

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


        /* =========================================================
           MAIN SECTION
        ========================================================== */

        .about-section {

            position: relative;

            width: 100%;

            max-width: 100%;

            margin: 0 auto;

            padding: 3.5rem 2rem;

            background-color: var(--bg-card);

            border: 1px solid var(--border-color);

            box-shadow: var(--shadow-lg);

            overflow: hidden;
        }


        /* =========================================================
           BACKGROUND
        ========================================================== */

        .bg-grid-overlay {

            position: absolute;

            inset: 0;

            background-image:
                radial-gradient(
                    var(--primary-500) 0.75px,
                    transparent 0.75px
                );

            background-size: 24px 24px;

            opacity: 0.06;

            pointer-events: none;
        }


        .glow-effect {

            position: absolute;

            width: 380px;

            height: 380px;

            border-radius: 50%;

            filter: blur(80px);

            pointer-events: none;

            opacity: 0.15;
        }


        .glow-top-right {

            top: -80px;

            right: -80px;

            background-color: var(--primary-500);
        }


        .glow-bottom-left {
            bottom: -80px;
            left: -80px;
            background-color: var(--primary-600);
        }


        .section-content-bdc {
            position: relative;
            z-index: 10;
			width: 1300px; 
			margin: 0 auto;
        }


        /* =========================================================
           HEADER
        ========================================================== */

        .section-header {

            text-align: center;

            max-width: 900px;

            margin: 0 auto 3.5rem auto;
        }


        .badge-tag {

            display: inline-flex;

            align-items: center;

            gap: 0.5rem;

            padding: 0.375rem 0.875rem;

            border-radius: 9999px;

            background-color: var(--primary-50);

            border: 1px solid var(--primary-100);

            color: var(--primary-700);

            font-size: 0.75rem;

            font-weight: 700;

            letter-spacing: 0.05em;

            text-transform: uppercase;

            margin-bottom: 1rem;
        }


        .dark .badge-tag {

            background-color: rgba(3, 105, 161, 0.2);

            border-color: rgba(3, 105, 161, 0.4);

            color: var(--primary-100);
        }


        .badge-dot {

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background-color: var(--primary-500);

            animation: pulse 2s infinite;
        }


        .section-title-bdc {

            font-size: 2.25rem;

            font-weight: 800;

            line-height: 1.2;

            letter-spacing: -0.025em;

            margin-bottom: 1rem;

            color: var(--text-main);
        }


        .text-gradient {

            background: var(--primary-500);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;
        }


        .section-desc {

            font-size: 1.05rem;

            color: var(--text-muted);

            line-height: 1.6;
        }


        /* =========================================================
           GRID
        ========================================================== */

        .about-grid {

            display: grid;

            grid-template-columns: 1fr;

            gap: 2.5rem;

            align-items: center;
        }


        @media (min-width: 1024px) {

            .about-grid {

                grid-template-columns: 1fr 1fr;

                gap: 3.5rem;
            }


            .section-title-bdc {

                font-size: 2.75rem;
            }
        }


        /* =========================================================
           GLASS CARD
        ========================================================== */

        .card-glass {

            background-color: var(--bg-card-glass);

            backdrop-filter: blur(12px);

            border: 1px solid var(--border-color);

            border-radius: var(--radius-xl);

            padding: 2rem;

            box-shadow:
                0 10px 30px -10px rgba(0, 0, 0, 0.05);
        }


        .card-header-title {

            display: flex;

            align-items: center;

            gap: 0.75rem;

            margin-bottom: 1rem;
        }
        .card-header-title .fa-solid {
            padding-right: unset;
        }

        .icon-box-primary {

            width: 42px;

            height: 42px;

            border-radius: var(--radius-md);

            background-color: rgba(29, 107, 243, 0.1);

            color: var(--primary-500);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.15rem;

            font-weight: bold;

            flex-shrink: 0;
        }


        .company-subtitle {

            font-size: 1.25rem;

            font-weight: 700;

            color: var(--text-main);
			text-align: justify;
			margin-bottom: 0;
        }


        .brand-story-text {

            font-size: 16px;

            color: var(--text-muted);

            line-height: 1.65;

            margin-bottom: 1.5rem;
			text-align: justify;
        }


        .brand-highlight {

            color: var(--primary-500);

            font-weight: 600;
        }


        /* =========================================================
           FEATURES
        ========================================================== */

        .feature-list {

            display: flex;

            flex-direction: column;

            gap: 0.875rem;
        }


        .feature-item-bdc {
            padding: 1rem;
            border-radius: var(--radius-lg);
            background-color: var(--bg-subtle);
            border: 1px solid var(--border-color);
            display: flex;
            align-items: flex-start;
            gap: 0.875rem;
            transition:
                transform 0.2s ease,
                border-color 0.2s ease;
		    text-align: justify;
        }


        .feature-item-bdc:hover {
            transform: translateX(4px);
            border-color: var(--primary-500);
        }
        .feature-item-bdc .fa-solid {
            padding-right: unset;
        }

        .feature-icon {
            width: 38px;
            height: 38px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1rem;
            margin-top: 2px;
        }


        .feature-icon-sky {
            background-color: rgba(2, 132, 199, 0.1);
            color: var(--primary-600);
        }


        .feature-icon-indigo {
            background-color: rgba(2, 132, 199, 0.1);
            color: #14358a;
        }


        .feature-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 0.25rem;
        }


        .feature-desc {
            font-size: 16px;
            color: var(--text-muted);
            line-height: 1.4;
			margin-bottom: 0;
        }


        /* =========================================================
           METRICS
        ========================================================== */

        .metrics-row {

            margin-top: 1.5rem;

            padding-top: 1.5rem;

            border-top: 1px solid var(--border-color);

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 0.75rem;

            text-align: center;
        }


        .metric-box {

            padding: 0.625rem 0.5rem;

            border-radius: var(--radius-md);

            background-color: var(--bg-subtle);
        }


        .metric-value {

            display: block;

            font-size: 1.15rem;

            font-weight: 800;

            color: var(--primary-500);
        }


        .metric-value.gold {

            color: var(--amber-500);
        }


        .metric-label {

            font-size: 16px;

            color: var(--text-muted);

            font-weight: 500;
        }


        /* =========================================================
           BUTTONS
        ========================================================== */

        .actions-row {

            margin-top: 1.5rem;

            display: flex;

            flex-wrap: wrap;

            gap: 0.875rem;
        }


        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 0.5rem;

            padding: 0.75rem 1.35rem;

            border-radius: var(--radius-md);

            font-size: 0.875rem;

            font-weight: 700;

            cursor: pointer;

            border: none;

            transition: all 0.2s ease;

            text-decoration: none;

            font-family: var(--font-family);
        }


        .btn-primary {

            background-color: var(--primary-500);

            color: #ffffff;

            box-shadow:
                0 4px 14px rgba(29, 107, 243, 0.35);
			height: 50px;
        }


        .btn-primary:hover {

            background-color: #1557c0;

            color: #ffffff;

            box-shadow:
                0 6px 20px rgba(29, 107, 243, 0.45);
        }


        .btn-secondary {

            background-color: var(--bg-subtle);

            color: var(--text-main);

            border: 1px solid var(--border-color);
			height: 50px;
        }


        .btn-secondary:hover {

            background-color: rgba(203, 213, 225, 0.4);
        }


        /* =========================================================
           SHOWCASE
        ========================================================== */

        .showcase-wrapper {

            position: relative;
            width: 100%;
            max-width: 520px;
            margin: 0 auto;
        }
        .showcase-wrapper .fa-solid {
           padding-right: unset;
        }

        .showcase-frame {
            position: relative;
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            background-color: #090d16;
            height: 600px;
        }


         .showcase-img {

            width: 100%;
            height: 600px;
            object-fit: cover;
            object-position : center;
            display: block;
            transition:
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

            opacity: 0.9;
        }


        .showcase-frame:hover .showcase-img {

            transform: scale(1.04);
        }


        .showcase-overlay {

            position: absolute;

            inset: 0;

            background:
                linear-gradient(
                    to top,
                    rgba(2, 6, 23, 0.9) 0%,
                    rgba(2, 6, 23, 0.2) 60%,
                    transparent 100%
                );

            display: flex;

            flex-direction: column;

            justify-content: flex-end;

            padding: 50px 10px;

            color: #ffffff;
            height: 600px;
			text-align: justify;
        }

        
        .overlay-badge {

            display: inline-flex;

            align-items: center;

            gap: 0.375rem;

            color: var(--amber-500);

            font-size: 16px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.05em;

            margin-bottom: 0.375rem;
        }

        .overlay-title {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.35;
			color: #fff;
			margin-bottom: 0;
        }


        .overlay-desc {

            font-size: 0.775rem;

            color: #cbd5e1;

            margin-top: 0.375rem;
        }


        /* =========================================================
           FLOATING BADGES
        ========================================================== */

        .badge-floating {
            position: absolute;
            background-color: #14358a;
            backdrop-filter: blur(8px);
            color: #ffffff;
            padding: 0.875rem 1.15rem;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-float);
            display: flex;
            align-items: center;
            gap: 0.875rem;
            z-index: 20;
            animation: float 4s ease-in-out infinite;
        }


        .badge-floating-top {
            top: -20px;
            left: -20px;
            border: 1px solid #ee8020;
        }


        .badge-floating-bottom {
            bottom: -20px;
            right: -20px;
            background-color: #14358a;
            color: #fff;
            border: 1px solid var(--border-color);
            animation-delay: -2s;
        }


        .badge-icon-gold {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-md);
            background:
                linear-gradient(
                    135deg,
                    #f59e0b 0%,
                    #d97706 100%
                );
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
            flex-shrink: 0;
        }


        .badge-icon-emerald {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            background-color: #ee8020;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }


        .badge-tag-gold {
            color: #ee8020;
            font-size: 0.625rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: block;
        }


        .badge-title-white {
            font-size: 0.825rem;
            font-weight: 800;
            color: #ffffff;
            display: block;
			text-align: justify;
        }


        .badge-sub-text {
            font-size: 0.725rem;
            color: #94a3b8;
        }

        /* =========================================================
   FLOATING BADGE 3 - MIDDLE LEFT
========================================================= */

.badge-floating-middle-left {

    top: 60%;

    right: -80px;

    transform: translateY(-50%);

    background-color: #14358a;

    border: 1px solid var(--border-color);

    animation-delay: -1s;
}


/* Giữ vị trí middle khi animation float chạy */

@keyframes float-middle-left {

    0%,
    100% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(calc(-50% - 8px));
    }
}


.badge-floating-middle-left {

    animation:
        float-middle-left 4s ease-in-out infinite;
}

        /* =========================================================
           MODAL
        ========================================================== */

        .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    background: rgba(2, 6, 23, 0.75);

    backdrop-filter: blur(6px);

    z-index: 2147483647 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-card {
    position: relative;

    z-index: 2147483647;

    background-color: var(--bg-card);

    width: 100%;
    max-width: 480px;

    max-height: calc(100vh - 2rem);

    overflow-y: auto;

    border-radius: var(--radius-xl);

    padding: 2rem;

    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25);

    transform: scale(.95);

    transition: transform .25s ease;
}

.modal-backdrop.active .modal-card {
    transform: scale(1);
}



        .modal-close-btn {

            position: absolute;

            top: 1rem;

            right: 1rem;

            width: 32px;

            height: 32px;

            border-radius: 50%;

            background-color: var(--bg-subtle);

            color: var(--text-muted);

            border: none;

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            z-index: 10;
        }


        .modal-close-btn:hover {

            background-color: #e2e8f0;

            color: #0f172a;
        }


        .modal-icon-header {

            width: 56px;

            height: 56px;

            border-radius: var(--radius-lg);

            background-color: rgba(239, 68, 68, 0.1);

            color: var(--red-500);

            margin: 0 auto 1rem auto;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.5rem;
        }
        .modal-card .fa-solid, modal-icon-header .fa-solid {
            padding-right: unset;
        }

        .modal-title {

            font-size: 1.25rem;

            font-weight: 800;

            text-align: center;

            color: var(--text-main);
        }


        .modal-subtitle {

            font-size: 0.8rem;

            color: var(--text-muted);

            text-align: center;

            margin-top: 0.25rem;

            margin-bottom: 1.25rem;

            line-height: 1.5;
        }


        /* =========================================================
           CONTACT FORM 7
        ========================================================== */
		/*.wpcf7 input[type="submit"] {
			width: 100% !important; 
			margin-left: unset !important;
		}*/

        .cf7-profile-form {

            width: 100%;
        }


        .cf7-profile-form .wpcf7 {

            width: 100%;
			padding: 0;
        }


        .cf7-profile-form form {

            width: 100%;
        }


        .cf7-profile-form p {

            margin: 0 0 0.75rem;
        }


        .cf7-profile-form label {

            display: block;

            width: 100%;

            font-size: 0.8rem;

            font-weight: 600;

            color: var(--text-main);

            margin-bottom: 0.35rem;
			text-align: left;
        }


        .cf7-profile-form .form-input {

            width: 100%;

            padding: 0.75rem 1rem;

            border-radius: var(--radius-md);

            border: 1px solid var(--border-color);

            background-color: var(--bg-subtle);

            color: var(--text-main);

            font-size: 0.875rem;

            outline: none;

            font-family: var(--font-family);

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }


        .cf7-profile-form .form-input::placeholder {

            color: #94a3b8;
        }


        .cf7-profile-form .form-input:focus {

            border-color: var(--primary-500);

            box-shadow:
                0 0 0 3px rgba(29, 107, 243, 0.15);
        }


        .cf7-profile-form .wpcf7-submit.btn-tai-pdf {

            width: 100% !important ;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 0.5rem;

            border-radius: var(--radius-md);

            background-color: var(--primary-500);

            color: #ffffff;

            border: none;

            font-family: var(--font-family);

            font-size: 0.875rem;

            font-weight: 700;

            cursor: pointer;

            transition: all 0.2s ease;

            margin-top: 0.25rem;
            margin-left: unset;
        }


        .cf7-profile-form .wpcf7-submit:hover {

            background-color: #1557c0;

            box-shadow:
                0 6px 20px rgba(29, 107, 243, 0.45);
        }


        .cf7-profile-form .wpcf7-submit:disabled {

            opacity: 0.65;

            cursor: not-allowed;
        }


        .cf7-profile-form .wpcf7-spinner {

            display: block;

            margin: 10px auto;
        }


        .cf7-profile-form .wpcf7-not-valid-tip {

            display: block;

            font-size: 0.75rem;

            color: #ef4444;

            margin-top: 0.25rem;

            margin-bottom: 0.5rem;
        }


        .cf7-profile-form .wpcf7-response-output {

            margin: 1rem 0 0;

            padding: 0.75rem;

            border-radius: var(--radius-md);

            font-size: 0.8rem;

            line-height: 1.5;

            text-align: center;
        }
        .cf7-profile-form .wpcf7 form.sent .wpcf7-response-output {
            color: rgb(15, 15, 15);
        }
        .cf7-profile-form .wpcf7 form.invalid .wpcf7-response-output {
            color: rgb(15, 15, 15);
        }

        /* Success message */

        .cf7-profile-form .wpcf7-mail-sent-ok {

            border-color: #10b981;
        }


        /* =========================================================
           DOWNLOAD SUCCESS BOX
        ========================================================== */

        .download-success {

            display: none;

            text-align: center;

            padding: 1rem 0 0;
        }


        .download-success.active {

            display: block;
        }


        .download-success-icon {

            width: 56px;

            height: 56px;

            margin: 0 auto 0.75rem;

            border-radius: 50%;

            background: rgba(16, 185, 129, 0.1);

            color: #10b981;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.5rem;
        }


        .download-success-title {

            font-size: 1rem;

            font-weight: 800;

            color: var(--text-main);

            margin-bottom: 0.35rem;
        }


        .download-success-text {

            font-size: 0.8rem;

            color: var(--text-muted);

            line-height: 1.5;
        }


        .download-manual-link {

            display: inline-flex;

            align-items: center;

            gap: 0.4rem;

            margin-top: 0.75rem;

            color: var(--primary-500);

            font-size: 0.8rem;

            font-weight: 700;

            text-decoration: none;
        }


        .download-manual-link:hover {

            text-decoration: underline;
        }


        /* =========================================================
           TOAST
        ========================================================== */

        .toast-box {

            position: fixed;

            bottom: 20px;

            right: 20px;

            background-color: #0f172a;

            color: #ffffff;

            padding: 0.875rem 1.25rem;

            border-radius: var(--radius-md);

            box-shadow: var(--shadow-float);

            font-size: 0.825rem;

            font-weight: 600;

            display: flex;

            align-items: center;

            gap: 0.625rem;

            z-index: 100000;

            border: 1px solid #334155;

            transform: translateY(100px);

            opacity: 0;

            transition:
                all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }


        .toast-box.show {

            transform: translateY(0);

            opacity: 1;
        }


        /* =========================================================
           ANIMATIONS
        ========================================================== */

        @keyframes float {

            0%,
            100% {

                transform: translateY(0px);
            }

            50% {

                transform: translateY(-8px);
            }
        }


        @keyframes pulse {

            0%,
            100% {

                opacity: 1;
            }

            50% {

                opacity: 0.4;
            }
        }


        /* =========================================================
           MOBILE - IPAD
        ========================================================== */

        @media (max-width: 922px) {

            body {

                padding: 1rem 0.5rem;
            }


            .about-section {

                padding: 2rem 1rem;
            }

            .section-content-bdc {
				width: unset; 
				margin: unset;
			}
            .section-title-bdc {
                font-size: 1.85rem;
            }


            .section-desc {

                font-size: 0.9rem;
            }
            .metrics-row {
                grid-template-columns: repeat(1, 1fr);
            }

            .card-glass {

                padding: 1.25rem;
            }


            .company-subtitle {

                font-size: 1rem;
            }


            .badge-floating-top {

                left: 0;

                top: -15px;
            }


            .badge-floating-bottom {

                right: 0;

                bottom: -15px;
            }
            .badge-floating-middle-left {

               right: 0;

               top: 50%;

           }
           .showcase-wrapper .fa-solid {
              padding-right: unset;
           }
            .showcase-img {

                height: 600px;
            }


            .modal-card {

                padding: 1.5rem;

                max-width: calc(100vw - 2rem);
            }


            .actions-row {

                flex-direction: column;
            }


            .actions-row .btn {

                width: 100%;
            }
        }