/*
Theme Name: Phu Tai Wood Pellet
Theme URI: https://woodpellet.asia
Author: Timber Luu
Description: Custom theme for Phu Tai JSC Biomass Energy website
Version: 1.0
*/

:root{
                --bg:#FFFFFF;
                --heading:#563A39;
                --dark-navy:#2E3092;
                --accent-lime:#CCE97B;
                --text-gray:#76797B;
                --font-display: 'Be Vietnam Pro', sans-serif;
                --font-body: 'Be Vietnam Pro', sans-serif;
                --max-width:1440px;
                --gutter:24px;
                --gap-elements:26px;
                --gap-sections:100px;
            }
            *{
                margin:0;
                padding:0;
                box-sizing:border-box;
            }
            body{
                font-family:var(--font-body);
                color:var(--heading);
            }
            h1, h2, h3, h4{
                font-family:var(--font-display);
                font-weight:700;
                color:var(--heading);
            }
            h1{font-size:58px;}
            h2{font-size:42px;}
            h3{font-size:24px;}
            h4{font-size:18px;}
            p{
                font-family:var(--font-body);
                font-weight:500;
                font-size:18px;
                line-height:1.5;
                color:var(--heading);
            }
            img{
                max-width:100%;
                display:block;
            }
            a{
                text-decoration:none;
                color:inherit;
            }
            .container{
                max-width:var(--max-width);
                margin:0 auto;
                padding:0 var(--gutter);
            }
            /* Header */
            header{
                position:sticky;
                top:0;
                z-index:100;
                background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%);
                box-shadow:0 1px 0 rgba(0,0,0,0.05);
            }
            .header-inner{
                display:flex;
                align-items:center;
                justify-content:space-between;
                padding-top:24px;
                padding-bottom:24px;
            }
            .logo{
                flex-shrink:0;
            }
            .logo img{
                height:50px;
                width:auto;
            }
            nav{
                display:flex;
                align-items:center;
                gap:36px;
            }
            nav ul{
                display:flex;
                gap:32px;
                list-style:none;
            }
            nav ul li a{
                font-size:15px;
                font-weight:500;
                color:var(--heading);
            }
            nav ul li a:hover{
                color:var(--dark-navy);
            }
            button,.btn{
                font-family:var(--font-display);
                cursor:pointer;
                border:none;
            }
            .btn-lime{
                background:var(--accent-lime);
                color:var(--dark-navy);
                font-weight:600;
                padding:14px 28px;
                border-radius:6px;
                display:inline-block;
                font-size:15px;
                transition:transform .15s ease, box-shadow .15s ease;
            }
            .btn-lime:hover{
                transform:translateY(-2px);
                box-shadow:0 6px 16px rgba(204,233,123,.5);
            }
            .menu-toggle{
                display:none;
                flex-direction:column;
                justify-content:center;
                gap:5px;
                width:32px;
                height:32px;
                background:none;
            }
            .nav-menu{
                display:flex;
                align-items:center;
                gap:36px;
            }
            .menu-toggle span{
                display:block;
                width:100%;
                height:2px;
                background:var(--heading);
            }
            /* Hero */
            .hero{
                position:relative;
                min-height:640px;
                display:flex;
                align-items:flex-end;
                overflow:hidden;
            }
            .hero video{
                position:absolute;
                inset:0;
                width:100%;
                height:100%;
                object-fit:cover;
                z-index:0;
            }
            .hero::after{
                content:'';
                position:absolute;
                inset:0;
                background:linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 55%);
                z-index:1;
            }
            .hero-content{
                position:relative;
                z-index:2;
                padding-bottom:64px;
                max-width:640px;
            }
            .hero-content h1{
                color:#FFF;
                margin-bottom:var(--gap-elements);
            }
            .hero-content p{
                color:#FFF;
                max-width:520px;
            }
            /* Section 2 SLIDER One Integrated Supply Chain*/
            .section2{
                padding-top:var(--gap-sections);
            }
            .section2 .grid{
                display:grid;
                grid-template-columns:1fr 1fr;
                gap:64px;
                align-items:center;
            }
            .section2 h2{
                margin-bottom:var(--gap-elements);
            }
            .section2 p{
                color:var(--text-gray);
                max-width:460px;
            }
            .collage-radio{
                display:none;
            }
            .collage{
                position:relative;
                width:100%;
                height:340px;
                overflow:hidden;
            }
            .collage-holder{
                position:relative;
                width:100%;
                height:100%;
            }
            .collage-item{
                position:absolute;
                top:0;
                left:50%;
                width:300px;
                height:100%;
                margin-left:-150px;
                border-radius:8px;
                overflow:hidden;
                cursor:pointer;
                box-shadow:0 12px 28px rgba(0,0,0,.15);
                transition:transform .4s ease, opacity .4s ease, width .4s ease, z-index .4s ease;
            }
            .collage-item img{
                width:100%;
                height:100%;
                object-fit:cover;
            }
            /* Khi collage-1 đang active */
            #collage-1:checked ~ .collage-holder .collage-item--1{ transform:translateX(0) scale(1); opacity:1; z-index:4; }
            #collage-1:checked ~ .collage-holder .collage-item--2{ transform:translateX(120px) scale(0.85); opacity:.95; z-index:2; }
            #collage-1:checked ~ .collage-holder .collage-item--3{ transform:translateX(220px) scale(0.7); opacity:.75; z-index:1; }
            #collage-1:checked ~ .collage-holder .collage-item--4{ transform:translateX(260px) scale(0.6); opacity:0; z-index:0; }
            /* Khi collage-2 đang active */
            #collage-2:checked ~ .collage-holder .collage-item--1{ transform:translateX(-120px) scale(0.85); opacity:.95; z-index:2; }
            #collage-2:checked ~ .collage-holder .collage-item--2{ transform:translateX(0) scale(1); opacity:1; z-index:4; }
            #collage-2:checked ~ .collage-holder .collage-item--3{ transform:translateX(120px) scale(0.85); opacity:.95; z-index:2; }
            #collage-2:checked ~ .collage-holder .collage-item--4{ transform:translateX(220px) scale(0.7); opacity:.75; z-index:1; }
            /* Khi collage-3 đang active */
            #collage-3:checked ~ .collage-holder .collage-item--1{ transform:translateX(-220px) scale(0.7); opacity:.75; z-index:1; }
            #collage-3:checked ~ .collage-holder .collage-item--2{ transform:translateX(-120px) scale(0.85); opacity:.95; z-index:2; }
            #collage-3:checked ~ .collage-holder .collage-item--3{ transform:translateX(0px) scale(1); opacity:1; z-index:4; }
            #collage-3:checked ~ .collage-holder .collage-item--4{ transform:translateX(120px) scale(0.85); opacity:.95; z-index:2; }
            /* Khi collage-4 đang active */
            #collage-4:checked ~ .collage-holder .collage-item--1{ transform:translateX(-260px) scale(0.6); opacity:0; z-index:0; }
            #collage-4:checked ~ .collage-holder .collage-item--2{ transform:translateX(-220px) scale(0.7); opacity:.75; z-index:1; }
            #collage-4:checked ~ .collage-holder .collage-item--3{ transform:translateX(-120px) scale(0.85); opacity:.95; z-index:2; }
            #collage-4:checked ~ .collage-holder .collage-item--4{ transform:translateX(0px) scale(1); opacity:1; z-index:4; }

            /* Section 3: Introduction to Biomass Energy */
            .section3{
                padding-top:var(--gap-sections);
            }
            .intro-box{
                background:var(--dark-navy);
                border-radius:12px;
                display:grid;
                grid-template-columns:340px 1fr;
                overflow:hidden;
            }
            .intro-box img{
                height:100%;
                object-fit:cover;
            }
            .intro-text{
                padding:20px;
                color:#fff;
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-items:flex-start;
            }
            .intro-text h2{
                color:#fff;
                margin-bottom:var(--gap-elements);
            }
            .intro-text p{
                color:#fff;
                margin-bottom:var(--gap-elements);
            }
            /* Section 4 */
            .section4{
                padding-top:var(--gap-sections);
                text-align:center;
            }
            .section4 h2{
                margin-bottom:var(--gap-elements);
            }
            .section4 >  .container > p{
                color:var(--text-gray);
                max-width:640px;
                margin:0 auto var(--gap-elements);
            }
            .facility-track{
                display:flex;
                gap:32px;
                overflow-x:auto;
                scroll-snap-type:x mandatory;
                scrollbar-width:none;
                margin-bottom:40px;
                padding-bottom:4px;
                cursor:grab;
            }
            .facility-track::-webkit-scrollbar{
                display:none;
            }
            .facility-track:active{
                cursor:grabbing;
            }
            .facility-card{
                background:#fff;
                border-radius:12px;
                overflow:hidden;
                box-shadow:0 4px 16px rgba(0,0,0,.08);
                padding-bottom:20px;
                text-align:left;
                flex:0 0 400px;
                scroll-snap-align:start;
            }
            .facility-image{
                position:relative;
                height:220px;
            }
            .facility-image img{
                width:100%;
                height:100%;
                object-fit:cover;
            }
            .facility-badge{
                position:absolute;
                top:0;
                left:0;
                padding:16px 20px;
                background:linear-gradient(90deg,rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 100%);
                display:flex;
                flex-direction:column;
            }
            .badge-label{
                color:#e8792d;
                font-style:italic;
                font-weight:600;
                font-size:13px;
            }
            .badge-location{
                color:var(--heading);
                font-family:var(--font-display);
                font-weight:700;
                font-size:18px;
            }
            .facility-card h3{
                padding:0 20px;
                margin-top:16px;
                margin-bottom:4px;
                font-size:18px;
            }
            .facility-location{
                padding:0 20px;
                font-style:italic;
                color:var(--text-gray);
                font-size:15px;
                margin-bottom:4px;
            }
            .facility-capacity{
                padding:0 20px;
                color:var(--text-gray);
                font-size:15px;
            }
            /* Section 5 */
            .section5{
                padding-top:var(--gap-sections);
                padding-bottom:var(--gap-sections);
                text-align:center;
            }
            .section5 h2{
                margin-bottom:var(--gap-elements);
            }
            .section5 p{
                color:var(--text-gray);
                max-width:640px;
                margin:0 auto var(--gap-elements);
            }
            .certs{
                display:flex;
                align-items:center;
                justify-content:center;
                gap:48px;
                flex-wrap:wrap;
            }
            .certs img{
                height:150px;
                width:auto;
            }
            .cert-divider{
                width:1px;
                height:120px;
                background:#ccc;
            }
            /* section 6 FAQ */
            .section6{
                padding-top:var(--gap-sections);
                padding-bottom:var(--gap-sections);
            }
            .section6 h2{
                margin-bottom:var(--gap-elements);
            }
            .faq-item{
                border-bottom:1px solid #eee;
            }
            .faq-question{
                width:100%;
                background:none;
                padding:20px 0;
                display:flex;
                justify-content:space-between;
                align-items:center;
                font-family:var(--font-body);
                font-weight:600;
                font-size:16px;
                color:var(--heading);
                text-align:left;
            }
            .faq-icon{
                font-size:22px;
                color:var(--text-gray);
                flex-shrink:0;
                margin-left:16px;
                transition:transform .3s ease;
            }
            .faq-answer{
                max-height:0;
                overflow:hidden;
                transition:max-height .35s ease;
            }
            .faq-answer p{
                font-size:15px;
                font-weight:400;
                color: var(--text-gray);
                padding-bottom:20px;
            }
            .faq-item.active .faq-icon{
                transform:rotate(45deg);
            }
            /* Section Footer */
            footer{
                background:var(--dark-navy);
                padding-top:64px;
                padding-bottom:32px;
            }
            .footer-top{
                display:flex;
                justify-content:space-between;
                align-items:flex-start;
                flex-wrap:wrap;
                gap:40px;
                padding-bottom:48px;
            }
            .footer-logo{
                height:50px;
                width:auto;
                margin-bottom:16px;
            }
            .footer-brand p{
                color:rgba(255,255,255,.7);
                font-size:15px;
                font-weight:400;
                line-height:1.6;
            }
            .footer-links h4,
            .footer-social h4{
                color:#fff;
                font-size:16px;
                margin-bottom:16px;
            }
            .footer-links ul{
                list-style:none;
            }
            .footer-links ul li{
                margin-bottom:12px;
            }
            .footer-links ul li a{
                color:rgba(255,255,255,.65);
                font-size:15px;
                font-weight:400;
                transition:color .2s ease;
            }
            .footer-links ul li a:hover{
                color:#fff;
            }
            .social-icons{
                display:flex;
                gap:12px;
            }
            .social-icons a{
                width:36px;
                height:36px;
                border-radius:50%;
                background:var(--dark-navy);
                border:1px solid rgba(255,255,255,.3);
                display:flex;
                align-items:center;
                justify-content:center;
                transition:background .2s ease transform .2s ease;
            }
            .social-icons a:hover{
                background:rgba(255,255,255,.15);
                transform:translateY(-3px);
            }
            .social-icons a img{
                width:18px;
                height:18px;
            }
            .footer-bottom{
                border-top:1px solid rgba(255,255,255,.15);
                padding-top:24px;
            }
            .footer-bottom p{
                color:#fff;
                font-size:15px;
                font-weight:700;
            }

            /* ABOUT US PAGE */
            .page-banner{
                background:var(--dark-navy);
                padding:80px 0;
                display:flex;
                justify-content:center;
            }
            .banner-box{
                background:rgba(255,255,255,.08);
                padding:32px 48px;
                border-radius:8px;
                text-align:center;
            }
            .page-banner h1{
                color:#fff;
                font-size:36px;
            }
            .about-overview{
                padding-top:var(--gap-sections);
            }
            .overview-grid{
                display:grid;
                grid-template-columns:1fr 1.2fr;
                gap:48px;
                align-items:start;
            }
            .overview-text h2{
                margin-bottom:var(--gap-elements);
            }
            .overview-text p{
                color:var(--text-gray);
                margin-bottom:var(--gap-elements);
            }
            .overview-video{
                position:relative;
                padding-top:56.25%; /* TY LE 16:9 */
                border-radius:8px;
                overflow:hidden;
            }
            .overview-video iframe{
                position:absolute;
                inset:0;
                width:100%;
                height:100%;
            }
            .about-strengths{
                padding-top:var(--gap-sections);
                padding-bottom:var(--gap-sections);
                text-align:center;
            }
            .about-strengths h2{
                margin-bottom:var(--gap-elements);
            }
            .about-strengths > .container > p{
                margin-bottom:var(--gap-elements);
            }
            .strengths-grid{
                display:grid;
                grid-template-columns:repeat(3, 1fr);
                gap:48px;
                text-align:left;
            }
            .strength-icon{
                width:56px;
                height:56px;
                margin-bottom:16px;
            }
            .strength-item h3{
                margin-bottom:12px;
            }
            .strength-item p{
                color:var(--text-gray);
                font-size:15px;
            }

            /* FACTORY SYSTEMS PAGE */
            .page-banner{
                background:var(--dark-navy);
                padding:80px 0;
                display:flex;
                justify-content:center;
            }
            .banner-box{
                background:rgba(255,255,255,.08);
                padding:32px 48px;
                border-radius:8px;
                text-align:center;
            }
            .page-banner h1{
                color:#fff;
                font-size:36px;
            }
            .page-banner p{
                color:#fff;
                font-size:18px;
            }
            .factory-listing{
                padding-top:var(--gap-sections);
                padding-bottom:var(--gap-sections);
            }
            .factory-listing h1{
                margin-bottom:48px;
            }
            .factory-grid{
                display:grid;
                grid-template-columns:1fr 1fr;
                gap:32px;
            }
            .factory-card{
                background:#fff;
                border-radius:12px;
                overflow:hidden;
                box-shadow:0 4px 16px rgba(0,0,0,.08);
            }
            .factory-image{
                position:relative;
                height:320px;
            }
            .factory-image img{
                width:100%;
                height:100%;
                object-fit:cover;
            }
            .factory-badge{
                position:absolute;
                top:0;
                left:0;
                padding:16px 20px;
                background:linear-gradient(90deg, rgba(255,255,255,rgba(255,255,255,.95 0%,rgba(255,255,255,0))) 100%);
                display:flex;
                flex-direction:column;
            }
            .factory-infor{
                padding:20px;
            }
            .factory-location{
                font-style:italic;
                color:var(--text-gray);
                font-size:15px;
                margin-bottom:4px;
            }
            .factory-status{
                font-size:15px;
            }
            .status-operating{
                color:var(--text-gray);
            }
            .status-construction{
                color:#B8860B;
            }

            /* PRODUCTION PROCESS PAGE */
            .process-steps{
                padding-top:var(--gap-sections);
                padding-bottom:var(--gap-sections);
            }
            .step-radio{
                display:none;
            }
            .step-nav{
                display:flex;
                justify-content:center;
                gap:20px;
                margin-bottom:64px;
            }
            .step-number{
                width:56px;
                height:56px;
                border-radius:50%;
                border:1px solid var(--dark-navy);
                display:flex;
                align-items:center;
                justify-content:center;
                font-family:var(--font-display);
                font-weight:700;
                font-size:20px;
                color:var(--heading);
                cursor:pointer;
                transition:background .2s ease, color .2s ease;
            }

            .step-panel{
                display:none;
            }
            .step-panel h2{
                margin-bottom:var(--gap-elements);
            }
            .step-panel p{
                color:var(--text-gray);
                margin-bottom:16px;
            }
            .step-panel ul{
                margin-bottom:var(--gap-elements);
                padding-left:20px;
                color:var(--text-gray);
            }
            .step-panel img{
                width:100%;
                border-radius:8px;
                margin-top:var(--gap-elements);
            }
            #step-1:checked ~ .step-nav label[for="step-1"],
            #step-2:checked ~ .step-nav label[for="step-2"],
            #step-3:checked ~ .step-nav label[for="step-3"],
            #step-4:checked ~ .step-nav label[for="step-4"],
            #step-5:checked ~ .step-nav label[for="step-5"],
            #step-6:checked ~ .step-nav label[for="step-6"],
            #step-7:checked ~ .step-nav label[for="step-7"],
            #step-8:checked ~ .step-nav label[for="step-8"],
            #step-9:checked ~ .step-nav label[for="step-9"]{
                background:#e8792d;
                color:#fff;
                border-color:#e8792d;
            }

            #step-1:checked ~ .step-panels .step-panel--1,
            #step-2:checked ~ .step-panels .step-panel--2,
            #step-3:checked ~ .step-panels .step-panel--3,
            #step-4:checked ~ .step-panels .step-panel--4,
            #step-5:checked ~ .step-panels .step-panel--5,
            #step-6:checked ~ .step-panels .step-panel--6,
            #step-7:checked ~ .step-panels .step-panel--7,
            #step-8:checked ~ .step-panels .step-panel--8,
            #step-9:checked ~ .step-panels .step-panel--9{
                display:block;
            }

            /* NEWS PAGE */
            .news-listing{
                padding-top:var(--gap-sections);
                padding-bottom:var(--gap-sections);
            }

            .news-tabs{
                display:flex;
                gap:32px;
                margin-bottom:48px;
                border-bottom:1px solid #eee;
                padding-bottom:16px;
            }

            .tab-btn{
                background:none;
                font-family:var(--font-display);
                font-weight:700;
                font-size:15px;
                color:var(--text-gray);
                padding:0;
            }

            .tab-btn.active{
                color:#e8792d;
            }

            .news-grid{
                display:grid;
                grid-template-columns:1fr 1fr;
                gap:48px;
                margin-bottom:48px;
            }

            .news-card img{
                width:100%;
                height:260px;
                object-fit:cover;
                border-radius:8px;
                margin-bottom:20px;
            }

            .news-card h3{
                font-size:20px;
                margin-bottom:12px;
            }

            .news-card p{
                color:var(--text-gray);
                font-size:15px;
                margin-bottom:12px;
            }

            .news-date{
                color:var(--text-gray);
                font-size:14px;
            }

            .news-pagination{
                display:flex;
                justify-content:center;
                gap:12px;
            }

            .page-btn{
                width:40px;
                height:40px;
                border-radius:50%;
                border:1px solid #ddd;
                background:#fff;
                font-family:var(--font-display);
                font-weight:600;
                cursor:pointer;
            }

            .page-btn.active{
                background:#e8792d;
                color:#fff;
                border-color:#e8792d;
            }

            /* NEWS DETAIL PAGE */
            .news-detail{
                padding-top:var(--gap-sections);
                padding-bottom:var(--gap-sections);
            }

            .detail-breadcrumb{
                color:var(--text-gray);
                font-size:14px;
                margin-bottom:16px;
            }

            .detail-breadcrumb a{
                color:var(--text-gray);
            }

            .news-detail h1{
                margin-bottom:16px;
            }

            .detail-content p{
                color:var(--text-gray);
                margin-bottom:20px;
            }

            /* FORMMMMMMMM */
            
            /* REQUEST A QUOTATION PAGE         */
            
            .request-form-section{
                display:grid;
                grid-template-columns:1fr 1fr;
                min-height:700px;
            }

            .form-image{
                height:100%;
            }

            .form-image img{
                width:100%;
                height:100%;
                object-fit:cover;
            }

            .form-content{
                padding:48px;
                display:flex;
                align-items:center;
            }

            .form-content form{
                width:100%;
            }

            .form-row{
                display:grid;
                grid-template-columns:1fr 2fr;
                gap:0;
            }

            .form-content input,
            .form-content select,
            .form-content textarea{
                width:100%;
                border:1px solid #ddd;
                border-top:none;
                padding:18px 20px;
                font-family:var(--font-body);
                font-size:16px;
                color:var(--heading);
                background:none;
            }

            .form-content select{
                cursor:pointer;
            }

            .form-row select,
            .form-row input{
                border-top:1px solid #ddd;
            }

            .form-content select:first-of-type{
                border-top:1px solid #ddd;
            }

            .form-content textarea{
                resize:vertical;
                min-height:140px;
            }

            .form-content button{
                margin-top:0px;
            }

            /* Popup xác nhận */
            .success-overlay{
                display:none;
                position:fixed;
                inset:0;
                background:rgba(0,0,0,.6);
                z-index:200;
                align-items:center;
                justify-content:center;
            }

            .success-overlay.open{
                display:flex;
            }

            .success-box{
                position:relative;
                background:var(--dark-navy);
                max-width:1100px;
                width:90%;
                max-height:85vh;
                display:grid;
                grid-template-columns:1.2fr 1fr;
                border-radius:8px;
                overflow:hidden;
            }

            .success-text{
                padding:48px;
                overflow-y:auto;
            }

            .success-text h2{
                color:#fff;
                font-size:32px;
                margin-bottom:24px;
            }

            .success-text p{
                color:rgba(255,255,255,.85);
                font-size:16px;
                margin-bottom:16px;
            }

            .success-image img{
                width:100%;
                height:100%;
                object-fit:cover;
            }

            .success-close{
                position:absolute;
                top:16px;
                right:16px;
                background:none;
                color:#fff;
                font-size:28px;
                width:40px;
                height:40px;
                z-index:2;
            }

            /* CONTACT PAGE */
            
            .contact-section{
                display:grid;
                grid-template-columns:1fr 1fr;
                min-height:700px;
            }

            .contact-info{
                padding:80px 64px;
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-items:flex-start;
            }

            .contact-info h2{
                margin-bottom:var(--gap-elements);
            }

            .contact-info > p{
                color:var(--text-gray);
                margin-bottom:40px;
            }

            .contact-details{
                list-style:none;
                margin-bottom:40px;
            }

            .contact-details li{
                display:flex;
                align-items:flex-start;
                gap:16px;
                margin-bottom:24px;
            }

            .contact-details img{
                width:28px;
                height:28px;
                flex-shrink:0;
                margin-top:2px;
            }

            .contact-details a,
            .contact-details span{
                font-size:18px;
                color:var(--heading);
                line-height:1.5;
            }

            .contact-map{
                position:relative;
                height:100%;
                min-height:500px;
            }

            .contact-map iframe{
                position:absolute;
                inset:0;
                width:100%;
                height:100%;
                border:0;
            }
            /*======nation ============= */
            .iti{
                    width:100% !important;
                    display:block !important;
                    position:relative;
            }

            .iti input{
                width:100%;
                padding-left:90px !important;
            }

            .iti__flag-container{
                position:absolute;
                top:0;
                left:0;
                height:100%;
                display:flex;
                align-items:center;
                padding:0 8px;
            }

            /* MEDIA QUERY - NAM O CUOI CSS */
            @media (max-width:900px) {
                .menu-toggle{
                    display:flex;
                }
                .nav-menu{
                    display:none;
                    position:absolute;
                    top:100%;
                    left:0;
                    width:100%;
                    background:#fff;
                    flex-direction:column;
                    align-items:flex-start;
                    padding:20px var(--gutter);
                    box-shadow:0 8px 16px rgba(0,0,0,.08);
                }
                .nav-menu.open{
                    display:flex;
                }
                .nav-menu ul{
                    flex-direction:column;
                    gap:16px;
                    width:100%;
                    margin-bottom:20px;
                }
                header{
                    position:sticky;
                }
                .header-inner{
                    position:relative;
                }
                .intro-box{
                    grid-template-columns:1fr;
                }
                .intro-box img{
                    height:320px;
                }
                .intro-text{
                    padding:24px;
                }
                .section2 .grid{
                    grid-template-columns:1fr;
                    gap:32px;
                }
                .collage{
                    height:260px;
                }
                .collage-item{
                    width:220px;
                    margin-left:-110px;
                }

                /* process-step */
                .step-nav{
                    overflow-x:auto;
                    justify-content:flex-start;
                    padding-bottom:8px;
                    scrollbar-width:none;
                }
                .step-nav::-webkit-scrollbar{
                    display:none;
                }
                .step-number{
                    flex-shrink:0;
                }
                /* ===== ABOUT US - Overview & Strengths ===== */
                .overview-grid{
                    grid-template-columns:1fr;
                    gap:32px;
                }

                .about-strengths .strengths-grid{
                    grid-template-columns:1fr;
                    gap:32px;
                }

                .overview-text .btn-lime{
                    margin-top:8px;
                }

                /* ===== FACTORY SYSTEMS ===== */
                .factory-grid{
                    grid-template-columns:1fr;
                    gap:32px;
                }

                .factory-image{
                    height:240px;
                }

                /* ===== REQUEST A QUOTATION - Form ===== */
                .request-form-section{
                    grid-template-columns:1fr;
                    min-height:auto;
                }

                .form-image{
                    height:260px;
                }

                .form-content{
                    padding:32px 20px;
                }

                .form-row{
                    grid-template-columns:1fr;
                }

                .form-row select,
                .form-row input{
                    border-top:1px solid #ddd;
                }

                

                /* ===== REQUEST A QUOTATION - Popup xác nhận ===== */
                .success-box{
                    grid-template-columns:1fr;
                    max-height:90vh;
                    overflow-y:auto;
                    width:92%;
                }

                .success-image{
                    order:-1;
                    height:200px;
                }

                .success-text{
                    padding:32px 20px;
                }

                .success-text h2{
                    font-size:24px;
                }
            }