body {
        background-color: var(--c-white);
        margin: 0;
        font-family: var(--font-primary);
    }

        .section-home {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-color: var(--c-white);
            flex-shrink: 0;
        }


        .hero-text {
            color: var(--c-primary);
            font-size: 96px;
            line-height: 1;
            margin: 0;
            font-weight: 400;
            letter-spacing: -0.02em;
        }


        /* Preloader Styles */
        #preloader {
            
            
            
            width: 100%;
            height: 100vh;
            z-index: 9999;
            pointer-events: none;
        }

        .loader-grid {
            position: absolute;
            
            
            width: 100%;
            height: 100vh;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(6, 1fr);
            padding: 40px;
            box-sizing: border-box;
            pointer-events: none;
        }

        #loader-counter {
            grid-column: 1;
            grid-row: 1;
            font-size: 20px;
            font-weight: 400;
            display: flex;
            align-items: flex-start;
        }

        /* Hide main wrapper initially for reveal effect */
        .grid-6x6-wrapper {
            opacity: 0;
            visibility: hidden;
        }

        .text-small {
            font-size: 14px;
            color: var(--c-primary);
            font-weight: 400;
            line-height: 1;
        }

        .nav-text {
            font-size: 20px;
            color: var(--c-primary);
            font-weight: 400;
            line-height: 1;
        }
        
        .text-10 { font-size: 10px; line-height: 1; }
        .text-16 { font-size: 16px; line-height: 1; }
        
        .hero-image {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            background-color: var(--c-dark);
            overflow: hidden;
        }
        .hero-image video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: none;
            pointer-events: none;
        }


        
        /* Grid placements */
        
        .big-text-left {
            grid-column: 1 / span 2;
            grid-row: 2 / span 4;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            z-index: 1;
            overflow: visible;
            padding-right: 5vw;
        }

        .big-text-right {
            grid-column: 5 / span 2;
            grid-row: 2 / span 4;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            z-index: 1;
            overflow: visible;
            padding-left: 5vw;
        }

        .big-text-svg {
            /* Video spans 2 columns (33.33vw) with 16:9 ratio, so its height is exactly 18.75vw */
            height: 18.75vw;
            width: auto;
            flex-shrink: 0;
            /* Offset to align perfectly with the video, which is pushed up by the labels (8px gap + 14px text) */
            margin-bottom: 22px;
        }

        .showreel-wrapper {
            grid-column: 3 / span 2;
            grid-row: 2 / span 4;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            z-index: 10;
        }

        .pos-image {
            width: 100%;
            position: relative;
            aspect-ratio: 16 / 9;
        }

        .shape-overlay {
            position: absolute;
            
            
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
            overflow: visible;
        }

        .showreel-labels {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .pos-scroll { 
            grid-column: 1; 
            grid-row: 6; 
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: flex-end;
            justify-self: flex-start;
            font-size: 10px; 
            font-weight: 500;
            background-color: var(--c-primary);
            color: var(--c-white);
            padding: 6px 12px;
            border-radius: 0;
          
        }

        .pos-desc { 
            grid-column: 5 / span 2; 
            grid-row: 6; 
            display: flex; 
            align-items: flex-end; 
            padding-bottom: 0; 
            font-size: 24px; 
            line-height: 1.2; 
            font-weight: 400;
        }
        
        /* Logo SVG icon */
        .logo-icon {
            width: 20px;
            height: 20px;
            background-color: var(--c-primary);
            border-top-left-radius: 50%;
        }

        /* --- MOBILE RESPONSIVE OVERRIDES --- */
        @media (max-width: 1023px) {
            /* Hero Grid & Navigation */
            .grid-6x6 {
                grid-template-columns: repeat(4, 1fr) !important;
            }
            
            /* Hero Text & Video */
            .big-text-left, .showreel-wrapper, .big-text-right {
                grid-column: 1 / -1 !important;
                grid-row: auto !important;
                justify-content: center !important;
                padding: 0 !important;
                margin-top: 10px;
            }
            .big-text-left { grid-row: 2 !important; }
            .showreel-wrapper { grid-row: 3 !important; }
            .big-text-right { display: none !important; }
            
            .big-text-svg {
                height: auto !important;
                width: 75% !important;
                margin-bottom: 0 !important;
            }

            .pos-scroll { 
                grid-column: 1 / span 1 !important; 
                grid-row: 5 !important; 
                margin-top: 0 !important; 
                align-self: flex-end;
            }
            .pos-desc { 
                grid-column: 2 / -1 !important; 
                grid-row: 5 !important; 
                padding-top: 0 !important; 
                font-size: 16px !important; 
                padding-left: 10px;
                align-self: flex-end;
            }

            /* General Text Resize */
            .hero-text { font-size: 56px !important; }

            /* Solution Card Icons */
            .solution-card-icon {
                width: 36px !important;
                height: 36px !important;
            }
            .solution-card-icon svg {
                width: 18px !important;
                height: 18px !important;
            }
        }



                    .wf-item {
                        position: relative;
                        display: flex;
                        width: 100%;
                        cursor: pointer;
                    }
                    .wf-line {
                        position: absolute;
                        
                        right: 0;
                        height: 1px;
                        background-color: rgba(247, 243, 236, 0.5);
                        width: calc(50% - 10px);
                        transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
                    }
                    .wf-item:hover .wf-line {
                        width: 100%;
                    }
                    .wf-left-anim {
                        opacity: 0;
                        transform: translateY(25px);
                        clip-path: polygon(0% 100%, 0% 100%, 0% 100%);
                        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
                    }
                    .wf-item:hover .wf-num {
                        opacity: 1;
                        transform: translateY(0);
                        clip-path: polygon(0% 100%, 0% -200%, 300% 100%);
                    }
                    .wf-item:hover .wf-desc {
                        opacity: 0.9;
                        transform: translateY(0);
                        clip-path: polygon(0% 100%, 0% -200%, 300% 100%);
                        transition-delay: 0.05s;
                    }
                    .wf-icon-group {
                        opacity: 0;
                        transform: translateX(-10px);
                        transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
                        transition-delay: 0.1s;
                    }
                    .wf-item:hover .wf-icon-group {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    .wf-icon-square {
                        position: absolute;
                        
                        opacity: 0;
                        transform: translate(-28px, 25px);
                        clip-path: polygon(0% 100%, 0% 100%, 0% 100%);
                        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
                    }
                    .wf-item:hover .wf-icon-square {
                        opacity: 1;
                        transform: translate(0px, 6px);
                        clip-path: polygon(0% 100%, 0% -200%, 300% 100%);
                    }
                    .wf-title-text {
                        transform: translateX(0);
                        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
                    }
                    .wf-item:hover .wf-title-text {
                        transform: translateX(28px);
                    }
                


                    .faq-item {
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        gap: var(--space-md);
                        align-items: start;
                        cursor: pointer;
                    }
                    .faq-tag {
                        grid-column: 1;
                        display: flex;
                        justify-content: flex-end;
                        padding-top: 12px;
                        opacity: 0;
                        visibility: hidden;
                        transition: opacity 0.2s ease, visibility 0.2s ease;
                    }
                    .faq-item:hover .faq-tag,
                    .faq-item.active .faq-tag {
                        opacity: 1;
                        visibility: visible;
                    }
                    .faq-content {
                        grid-column: 2 / span 3;
                        border-top: 1px dashed var(--c-primary);
                        padding: 10px 0;
                    }
                    .faq-item.last-item .faq-content {
                        border-bottom: 1px dashed var(--c-primary);
                    }
                    
                    /* Accordion Styles */
                    .faq-icon {
                        transition: transform 0.3s ease;
                        transform: rotate(180deg); /* Default: points down */
                    }
                    .faq-item.active .faq-icon {
                        transform: rotate(0deg); /* Active: points up */
                    }
                    .faq-answer-wrapper {
                        display: grid;
                        grid-template-rows: 0fr;
                        transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                      
                    }
                    .faq-item.active .faq-answer-wrapper {
                        grid-template-rows: 1fr;
                        margin-top: 15px;
                    }
                    .faq-answer {
                        max-height: 0;
                        overflow: hidden;
                        transition: max-height 0.4s ease, margin-top 0.4s ease, opacity 0.4s ease;
                        
                        opacity: 0;
                        font-size: 14px;
                        font-weight: 500;
                        color: var(--c-tertiary);
                        width: 85%;
                        line-height: 1.4;
                    }
                    .faq-item.active .faq-answer {
                        opacity: 1;
                        max-height: 1000px;
                    }

                    /* FAQ Tag Animation */
                    .faq-tag-inner {
                        background-color: var(--c-primary);
                        color: var(--c-white);
                        font-size: 10px;
                        border-radius: 0;
                        letter-spacing: 0.5px;
                        overflow: hidden;
                        position: relative;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        width: 54px;
                        height: 24px;
                    }
                    .faq-text-open, .faq-text-close {
                        position: absolute;
                        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
                        font-weight: 500;
                    
                    }
                    .faq-text-open {
                        transform: translate(0, 0);
                        opacity: 1;
                    }
                    .faq-text-close {
                        /* Start from bottom-left (45 degrees) */
                        transform: translate(-100%, 100%);
                        opacity: 0;
                    }
                    .faq-item.active .faq-text-open {
                        /* Animate to top-right (45 degrees) */
                        transform: translate(100%, -100%);
                        opacity: 0;
                    }
                    .faq-item.active .faq-text-close {
                        transform: translate(0, 0);
                        opacity: 1;
                    }

/* About Section */
.section-about {
    background-image: var(--bg-desktop) !important;
}

@media (max-width: 768px) {
    .section-about {
        background-image: none !important;
        background-color: transparent !important;
        clip-path: inset(0 0 0 0); /* Khóa vị trí giả lập Parallax */
    }
    .section-about::before {
        content: "";
        
        
        
        width: 100%;
        height: 100%;
        background-image: var(--bg-mobile) !important;
        background-size: cover;
        background-position: center;
        z-index: 0;
        pointer-events: none;
        will-change: transform; /* Giúp mượt hơn trên mobile */
    }
    .about-heading {
        grid-column: 1 / -1 !important;
        grid-row: 2 / span 1 !important;
        align-self: start !important;
    }
    .about-bottom-wrapper {
        grid-column: 1 / -1 !important;
        grid-row: 3 / span 4 !important;
        align-self: start !important;
        display: flex !important;
        flex-direction: column !important;
    }
}
                

    @media (max-width: 1023px) {
        section.section-workflow .grid-6x6 {
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important;
            grid-template-rows: auto !important;
        }
        section.section-workflow .grid-6x6 div.wf-left-panel:first-child {
            position: sticky !important;
            top: 0 !important; /* Stick to top to span full 100vh */
            z-index: 10 !important;
            height: 100vh !important; /* CRITICAL: Match card height so they scroll up simultaneously */
            padding: 10vh var(--space-md) 0 var(--space-md) !important; /* 10vh from top as requested */
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            background: linear-gradient(to bottom, var(--c-white) 30vh, transparent 30vh) !important; /* Ends at 30vh */
            border-bottom: none !important;
            grid-column: 1 / -1 !important;
            grid-row: 1 !important;
            align-self: start !important;
            pointer-events: none !important; /* Let clicks pass through transparent area */
        }
        section.section-workflow .grid-6x6 div.wf-left-panel:first-child > div {
            pointer-events: auto !important; /* Re-enable clicks for button */
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 12px 16px;
            align-items: start !important;
            text-align: left !important;
        }
        section.section-workflow .grid-6x6 div.wf-left-panel:first-child h2 {
            margin-bottom: 0 !important;
            grid-column: 1 / span 1;
            grid-row: 1 / span 2;
            font-size: 18px !important;
            line-height: 1.2 !important;
        }
        section.section-workflow .grid-6x6 div.wf-left-panel:first-child > div > p {
            grid-column: 2 / span 3;
            grid-row: 1;
            width: 100% !important;
            font-size: 14px !important;
            line-height: 1.4 !important;
            margin-bottom: 0 !important;
        }
        section.section-workflow .grid-6x6 div.wf-left-panel:first-child .digifi-btn {
            grid-column: 2 / span 2;
            grid-row: 2;
            justify-self: start !important;
            font-size: 12px !important;
            padding: 6px 6px 6px 12px !important;
            text-transform: uppercase;
        }
        .wf-cards-wrapper {
            width: 100% !important;
            grid-column: 1 / -1 !important;
            grid-row: 1 !important;
        }
        .wf-stack-card {
            height: 100vh !important;
            top: 0 !important;
            padding-top: 30vh !important;
            align-items: flex-end !important; /* Anchor card to the bottom */
            padding-bottom: 10px !important;
        }
        .wf-card-inner {
            width: calc(100% - 20px) !important;
            margin: 0 auto !important;
            height: auto !important; /* Let it be natural height */
            max-height: 100% !important; /* Prevent upward overflow into the title area */
        }
        /* Removed sticky CSS */
    }
            .project-header-row {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: var(--space-md);
                padding-bottom: 8px;
                border-bottom: 1px dashed rgba(0, 0, 0, 0.4);
                margin-bottom: 0;
                align-items: end;
            }
            .project-header-col {
                grid-column: 1 / span 3;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: var(--space-md);
            }
            .project-row-item {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: var(--space-md);
                border-bottom: 1px dashed rgba(0, 0, 0, 0.4);
            }
            .project-row-item.no-border { border-bottom: none; }
            .proj-text-col {
                grid-column: 1 / span 3;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: var(--space-md);
                padding-top: 20px;
            }
            .proj-img-col {
                grid-column: 4 / span 3;
                padding: 20px 0;
            }
            .proj-name { font-size: 24px; color: var(--c-dark); }
            .proj-cat-wrapper { display: flex; justify-content: space-between; align-items: flex-start; }
            .proj-cat { font-size: 24px; color: var(--c-dark); line-height: 1.4; }
            .proj-date { font-size: 24px; color: var(--c-dark); text-align: right; }
            
            .case-studies-banner {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                width: 100%;
                padding-bottom: 60px;
                padding-top: 40px;
            }
            .case-studies-title {
                font-size: clamp(60px, 12vw, 160px);
                font-weight: 400;
                line-height: 1;
                color: var(--c-dark);
                white-space: nowrap;
            }
            .case-studies-desc {
                max-width: 250px;
                font-size: clamp(14px, 1.2vw, 16px);
                line-height: 1.4;
                color: var(--c-dark);
                opacity: 0.9;
                margin-bottom: clamp(10px, 1.5vw, 20px);
                text-align: left;
            }

            @media (max-width: 1023px) {
                .case-studies-banner {
                    flex-wrap: wrap;
                    justify-content: space-between;
                    gap: 10px;
                    padding-bottom: 20px;
                    padding-top: 20px;
                }
                .case-studies-title {
                    font-size: 13vw; /* smaller on mobile to fit one line */
                }
                .case-studies-title.left {
                    order: 1;
                }
                .case-studies-title.right {
                    order: 2;
                }
                .case-studies-desc {
                    order: 3;
                    width: 100%;
                    max-width: 100%;
                    text-align: center;
                    margin-top: 10px;
                    margin-bottom: 0;
                    font-size: 16px;
                }
                .case-studies-desc br {
                    display: none; /* remove arbitrary breaks on mobile for better flow */
                }

                .project-header-row { display: none !important; }
                .project-row-item {
                    grid-template-columns: 1fr !important;
                    gap: 10px !important;
                    padding-bottom: 20px !important;
                }
                .proj-text-col {
                    grid-column: 1 / -1 !important;
                    display: flex !important;
                    flex-direction: column !important;
                    gap: 4px !important;
                    padding-top: 5px !important;
                    order: 2 !important;
                }
                .proj-img-col {
                    grid-column: 1 / -1 !important;
                    padding: 20px 0 0 0 !important;
                    order: 1 !important;
                    width: 100% !important;
                }
                .proj-date {
                    order: 1 !important;
                    text-align: left !important;
                    font-size: 14px !important;
                    opacity: 0.7 !important;
                    margin-bottom: 4px;
                }
                .proj-name {
                    order: 2 !important;
                    font-size: 20px !important;
                    font-weight: 500 !important;
                }
                .proj-cat-wrapper {
                    order: 3 !important;
                    display: block !important;
                }
                .proj-cat {
                    font-size: 16px !important;
                    opacity: 0.9 !important;
                }
                .proj-cat br { display: none !important; }
            }
                        @keyframes thumbnailFade {
                            0%, 20% { opacity: 1; }
                            25%, 95% { opacity: 0; }
                            100% { opacity: 1; }
                        }
                        .anim-thumb {
                            position: absolute;
                            
                            
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            animation: thumbnailFade 8s infinite;
                        }
                        .anim-thumb:nth-child(2) { animation-delay: 0s; }
                        .anim-thumb:nth-child(3) { animation-delay: 2s; }
                        .anim-thumb:nth-child(4) { animation-delay: 4s; }
                        .anim-thumb:nth-child(5) { animation-delay: 6s; }
            #news-slider::-webkit-scrollbar { display: none; }
            .article-card-slide {
                flex: 0 0 calc(33.333% - (var(--space-md) * 2 / 3));
            }
            @media (max-width: 1024px) {
                .article-card-slide { flex: 0 0 calc(50% - (var(--space-md) / 2)); }
            }
            @media (max-width: 1023px) {
                .insights-header {
                    grid-template-columns: repeat(4, 1fr) !important;
                    align-items: start !important;
                    gap: 12px 16px !important;
                    padding-bottom: 24px !important;
                }
                .insights-title-wrapper {
                    grid-column: 1 / span 1 !important;
                }
                .insights-title {
                    font-size: 18px !important;
                }
                .insights-desc-wrapper {
                    grid-column: 2 / span 3 !important;
                }
                .insights-desc {
                    font-size: 14px !important;
                    line-height: 1.4 !important;
                }
            }
            @media (max-width: 768px) {
                .article-card-slide { flex: 0 0 85%; }
            }
            @media (max-width: 1023px) {
                .news-controls-row {
                    display: flex !important;
                    justify-content: space-between !important;
                }
                .news-controls-row > div {
                    justify-self: auto !important;
                }
                
                .solution-title {
                    font-size: clamp(20px, 6vw, 36px) !important;
                    white-space: nowrap !important;
                    word-break: normal !important;
                }
                .solution-card {
                    min-height: auto !important;
                }
                .solution-desc {
                    margin-top: 10px !important;
                    max-width: calc(50% - 8px) !important;
                }
            }


.scope-children {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
    padding-left: 10px;
    padding-bottom: 0;
    color: var(--c-tertiary);
}
.scope-children.is-open {
    max-height: 500px;
    opacity: 0.85;
    padding-bottom: 12px;
}
.toggle-icon {
    transition: transform 0.3s ease !important;
}
.toggle-icon.is-open {
    transform: rotate(45deg);
}

@media (max-width: 768px) {
    .section-about {
        background-image: var(--bg-mobile) !important;
        background-attachment: scroll !important;
    }
    .about-heading {
        grid-column: 1 / -1 !important;
        grid-row: 2 / span 1 !important;
        align-self: start !important;
    }
    .about-bottom-wrapper {
        grid-column: 1 / -1 !important;
        grid-row: 3 / span 4 !important;
        align-self: start !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* === INLINE STYLES MIGRATED FROM HOME INDEX === */
.hero-swiper { width: 100%; height: 100%; }

/* === CROSSFADE + KEN BURNS ZOOM (không chạy ngang) === */
.hero-swiper .swiper-slide { overflow: hidden; }

/* Media luôn zoom to hơn một chút, zoom nhẹ về 1 trong suốt thời gian slide hiển thị */
.hero-swiper .swiper-slide .hero-media {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform: scale(1.15);
    transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-swiper .swiper-slide-active .hero-media {
    transform: scale(1);
}

/* Text mặc định hiện — overflow visible để không cắt mép descenders */
.hero-text-split {
    opacity: 1;
    visibility: visible;
    overflow: visible !important;
    padding-bottom: 0.15em; /* tránh cắt mép dưới chữ */
}
/* SplitType .line wrapper cũng cần overflow visible cho clip-path hoạt động */
.hero-text-split .line {
    overflow: visible !important;
    padding-bottom: 0.1em;
}

/* === ABOUT SECTION: overlay tối nhẹ trên mobile để text/button ngà sáng luôn đủ tương phản trên ảnh === */
@media (max-width: 767px) {
    .about-mobile-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 75%);
    }
}

/* === FEATURED PRODUCTS: carousel mobile === */
.featured-swiper { padding-bottom: 4px; }
.featured-swiper .swiper-slide { height: auto; display: flex; }
.featured-swiper .swiper-slide > * { width: 100%; }
.featured-swiper-btn-disabled { opacity: .3; pointer-events: none; }

/* === SCIENCE SECTION: mobile - video pin căn giữa, text trượt chồng lên nên cần màu chữ/icon sáng để đọc rõ === */
@media (max-width: 767px) {
    .science-card h3 { color: var(--c-light) !important; }
    .science-card p { color: rgba(247, 243, 236,0.85) !important; }
    .science-card svg { color: var(--c-light) !important; }
}