/*==================================================
RESPONSIVE.CSS - Mobile optimized
==================================================*/

@media (max-width:1200px){
    .container{width:min(94%,1120px)}
    nav ul{gap:22px}
    .hero-grid{gap:48px}
    .hero h1{font-size:52px}
    .section-title h2{font-size:38px}
    .about-content h2,.contact-info h2{font-size:36px}
}

@media (max-width:992px){
    body.menu-open{overflow:hidden}

    header .container{height:72px}
    .logo img{height:64px;padding:7px 0}
    .header-right{margin-left:auto;margin-right:14px}
    .header-right .phone{display:none}
    .header-right .btn-primary{padding:11px 18px;font-size:14px}

    .mobile-menu{
        display:flex;
        width:44px;
        height:44px;
        align-items:center;
        justify-content:center;
        border-radius:12px;
        color:var(--primary);
        background:#edf5ff;
        font-size:22px;
        position:relative;
        z-index:1002;
    }

    nav{
        display:block;
        position:fixed;
        inset:72px 0 auto 0;
        max-height:0;
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        background:rgba(255,255,255,.98);
        box-shadow:0 20px 40px rgba(20,54,92,.12);
        transition:max-height .35s ease,opacity .25s ease,visibility .25s;
    }
    nav.show-menu{max-height:calc(100vh - 72px);opacity:1;visibility:visible;overflow-y:auto}
    nav ul{flex-direction:column;gap:0;padding:12px 4% 22px}
    nav li{border-bottom:1px solid #edf1f5}
    nav li:last-child{border-bottom:0}
    nav a{display:block;padding:15px 8px;font-size:16px}
    nav a:after{display:none}
    nav a.active{color:var(--primary)}

    .hero{padding:118px 0 72px}
    .hero-grid{grid-template-columns:1fr;gap:48px;text-align:center}
    .hero-content{max-width:720px;margin:auto}
    .hero-btn,.hero-number{justify-content:center}
    .hero-number{flex-wrap:wrap}
    .hero-image{max-width:720px;margin:auto;animation:none}

    .about-grid,.contact-wrapper,.spec-wrapper{grid-template-columns:1fr}
    .about-image{max-width:720px;margin:auto}
    .feature-grid,.application-grid,.product-grid{grid-template-columns:repeat(2,1fr)}
    .testimonial-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
    .cta-box{flex-direction:column;text-align:center}

    .spec-menu{display:grid;position: static;grid-template-columns:repeat(3,1fr);gap:10px}
    .spec-item{min-height:94px}
    .spec-content{grid-template-columns:1fr}
    .spec-image{min-height:300px}
}

@media (max-width:768px){
    :root{--radius:15px}
    section{padding:64px 0}
    .container{max-width:calc(100% - 32px)}

    header .container{height:66px}
    .logo img{height:56px}
    .header-right{display:none}
    nav{inset:66px 0 auto 0}
    nav.show-menu{max-height:calc(100vh - 66px)}

    .hero{padding:104px 0 58px}
    .tag{font-size:13px;padding:7px 13px;margin-bottom:18px}
    .hero h1{font-size:clamp(34px,9vw,44px);margin-bottom:20px;letter-spacing:-1px}
    .hero h1 span{margin-top:6px}
    .hero p{font-size:16px;line-height:1.75}
    .hero-btn{gap:12px;margin-bottom:34px}
    .btn-primary,.btn-outline{padding:14px 24px;min-height:50px}
    .hero-number{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
    .hero-number>div{padding:14px 8px;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(10,107,255,.08)}
    .hero-number h2{font-size:25px;line-height:1.2}
    .hero-number p{font-size:12px;line-height:1.4;margin-top:4px}
    .hero-image:before{width:120px;height:120px;left:-25px;top:-20px}
    .hero-image:after{width:100px;height:100px;right:-20px;bottom:-20px}
    .hero-image img{border-radius:20px}

    .section-title{margin-bottom:42px}
    .section-title span{font-size:13px;margin-bottom:12px}
    .section-title h2,.about-content h2,.contact-info h2{font-size:30px;line-height:1.3}
    .section-title p{font-size:15px;line-height:1.7}

    .about-grid{gap:38px}
    .about-content{text-align:left}
    .about-content h2{margin-bottom:18px}
    .about-content ul{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:28px}
    .about-content li{padding:12px;font-size:14px}
    .about-content .btn-primary{width:100%}

    .feature-grid,.application-grid,.product-grid,.footer-grid{grid-template-columns:1fr}
    .feature-grid,.application-grid,.product-grid{gap:18px}
    .feature-box{padding:28px 22px}
    .feature-box i{width:66px;height:66px;line-height:66px;font-size:27px;margin-bottom:16px}
    .feature-box h3{font-size:21px;margin-bottom:9px}

    .app-card img,.product-card img{height:220px}
    .app-content,.product-info{padding:22px}
    .app-content h3,.product-info h3{font-size:21px}

    .spec-menu{display:flex;position: static;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:2px 2px 12px;scrollbar-width:none}
    .spec-menu::-webkit-scrollbar{display:none}
    .spec-item{flex:0 0 82%;min-height:82px;scroll-snap-align:start;padding:15px}
    .spec-content{padding:22px}
    .spec-image{min-height:220px;padding:10px}
    .spec-info h3{font-size:25px}
    .spec-info table{font-size:14px}
    .spec-info td{padding:12px 8px}
    .spec-info td:first-child{width:42%}
    .spec-feature{grid-template-columns:1fr}
    .spec-btn{flex-direction:column;gap:10px}
    .spec-btn a{width:100%}

    .cta-box{padding:34px 22px;border-radius:20px}
    .cta-box h2{font-size:29px;line-height:1.3}
    .testimonial-card{padding:26px 22px}

    .faq-title{padding:18px;font-size:16px;text-align:left;gap:14px}
    .faq-content{padding:0 18px 18px;font-size:15px}

    footer{padding-top:58px}
    .footer-grid{gap:30px}
    .copyright{font-size:13px;line-height:1.65;padding:20px 16px}

    .floating-call,.floating-zalo,.back-top{width:48px;height:48px;right:14px;font-size:15px}
    .floating-call{bottom:132px}
    .floating-zalo{bottom:76px}
    .back-top{bottom:20px}
}

@media (max-width:480px){
    .container{max-width:calc(100% - 24px)}
    section{padding:54px 0}

    .hero{padding-top:94px}
    .hero h1{font-size:32px}
    .hero-btn{flex-direction:column}
    .hero-btn .btn-primary,.hero-btn .btn-outline{width:100%}
    .hero-number{grid-template-columns:1fr 1fr}
    .hero-number>div:last-child{grid-column:1/-1}

    .section-title h2,.about-content h2,.contact-info h2{font-size:27px}
    .about-content ul{grid-template-columns:1fr}
    .app-card img,.product-card img{height:200px}

    .spec-item{flex-basis:90%}
    .spec-content{padding:16px}
    .spec-image{min-height:180px}
    .spec-info td{display:block;width:100%!important;padding:8px 4px}
    .spec-info td:first-child{padding-bottom:0;color:var(--gray)}
    .spec-info tr{display:block;padding:7px 0;border-bottom:1px solid #edf1f5}

    .cta-box h2{font-size:26px}
}

@media (min-width:1400px){
    .container{width:1320px}
    .hero h1{font-size:68px}
    .section-title h2{font-size:48px}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/*==================================================
CONTACT SECTION - Redesigned
==================================================*/
.contact{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 8% 15%,rgba(10,107,255,.12),transparent 28%),
        radial-gradient(circle at 92% 85%,rgba(71,178,255,.12),transparent 26%),
        linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
}

.contact::before,
.contact::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.contact::before{
    width:340px;
    height:340px;
    top:-190px;
    right:-120px;
    border:70px solid rgba(10,107,255,.045);
}

.contact::after{
    width:220px;
    height:220px;
    left:-120px;
    bottom:-120px;
    background:rgba(73,162,255,.06);
}

.contact .container{position:relative;z-index:1}

.contact-wrapper{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
    gap:70px;
    align-items:center;
}

.contact-intro{max-width:650px}

.contact-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:#e7f1ff;
    color:var(--primary);
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:20px;
}

.contact-eyebrow::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 6px rgba(10,107,255,.12);
}

.contact-intro h2{
    max-width:620px;
    margin:0 0 20px;
    font-size:clamp(38px,4vw,56px);
    line-height:1.14;
    letter-spacing:-1.8px;
    color:#10233f;
}

.contact-intro>p{
    max-width:610px;
    margin:0 0 30px;
    color:#5f6f84;
    font-size:17px;
    line-height:1.8;
}

.contact-benefits{
    display:grid;
    gap:13px;
    margin-bottom:34px;
}

.contact-benefits>div{
    display:flex;
    align-items:center;
    gap:12px;
    color:#233754;
    font-weight:600;
}

.contact-benefits i{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--primary);
    background:#fff;
    box-shadow:0 8px 20px rgba(10,107,255,.10);
}

.contact-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.contact-btn{
    min-width:205px;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:12px 20px;
    border-radius:18px;
    font-weight:800;
    transition:transform .25s ease,box-shadow .25s ease;
}

.contact-btn:hover{transform:translateY(-3px)}
.contact-btn i{font-size:21px}
.contact-btn span{display:flex;flex-direction:column;line-height:1.2}
.contact-btn small{font-size:11px;font-weight:600;opacity:.82;margin-bottom:4px}

.contact-btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--primary),#4da8ff);
    box-shadow:0 16px 34px rgba(10,107,255,.28);
}

.contact-btn-zalo{
    color:#075ca8;
    background:#fff;
    border:1px solid rgba(10,107,255,.14);
    box-shadow:0 14px 30px rgba(28,72,120,.10);
}

.contact-panel{
    padding:28px;
    border-radius:30px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 28px 70px rgba(34,77,128,.15);
    backdrop-filter:blur(14px);
}

.contact-panel-head{
    padding:7px 6px 22px;
    border-bottom:1px solid #e8eef6;
}

.contact-panel-head span,
.contact-detail small,
.contact-hours small{
    display:block;
    margin-bottom:6px;
    color:#7c8da3;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.contact-panel-head strong{
    color:#142842;
    font-size:21px;
}

.contact-detail,
.contact-hours{
    display:grid;
    grid-template-columns:52px minmax(0,1fr) 18px;
    align-items:center;
    gap:15px;
    padding:20px 6px;
    border-bottom:1px solid #e8eef6;
}

.contact-detail>i:first-child,
.contact-hours>i:first-child{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:var(--primary);
    background:#edf5ff;
    font-size:20px;
}

.contact-detail strong,
.contact-hours strong{
    display:block;
    min-width:0;
    color:#20344f;
    font-size:15px;
    line-height:1.55;
    overflow-wrap:anywhere;
}

.contact-detail>i:last-child{
    color:#9aacbf;
    font-size:13px;
    transition:.25s;
}

.contact-detail:hover>i:last-child{
    color:var(--primary);
    transform:translateX(3px);
}

.contact-detail-address{align-items:start}
.contact-detail-address>i:first-child{margin-top:2px}
.contact-hours{border-bottom:0;padding-bottom:8px}
.contact-hours{grid-template-columns:52px minmax(0,1fr)}

@media (max-width:1100px){
    .contact-wrapper{grid-template-columns:1fr;gap:45px}
    .contact-intro{max-width:none;text-align:center}
    .contact-intro h2,.contact-intro>p{margin-left:auto;margin-right:auto}
    .contact-benefits{max-width:520px;margin-left:auto;margin-right:auto;text-align:left}
    .contact-actions{justify-content:center}
    .contact-panel{max-width:760px;width:100%;margin:auto}
}

@media (max-width:768px){
    .contact{padding:64px 0}
    .contact-wrapper{gap:32px}
    .contact-eyebrow{font-size:11px;padding:7px 12px}
    .contact-intro h2{font-size:32px;letter-spacing:-.8px}
    .contact-intro>p{font-size:15px;line-height:1.7}
    .contact-benefits{margin-bottom:26px}
    .contact-benefits>div{align-items:flex-start;font-size:14px;text-align:left}
    .contact-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
    .contact-btn{min-width:0;width:100%;padding:11px 14px}
    .contact-panel{padding:20px;border-radius:22px}
    .contact-panel-head strong{font-size:18px}
    .contact-detail,.contact-hours{grid-template-columns:46px minmax(0,1fr) 16px;gap:12px;padding:17px 2px}
    .contact-hours{grid-template-columns:46px minmax(0,1fr)}
    .contact-detail>i:first-child,.contact-hours>i:first-child{width:46px;height:46px;border-radius:14px;font-size:18px}
    .contact-detail strong,.contact-hours strong{font-size:14px}
}

@media (max-width:520px){
    .contact-intro{text-align:left}
    .contact-intro h2{font-size:29px}
    .contact-intro>p{margin-left:0;margin-right:0}
    .contact-actions{grid-template-columns:1fr}
    .contact-btn{justify-content:flex-start;min-height:60px}
    .contact-panel{padding:17px}
    .contact-detail,.contact-hours{grid-template-columns:42px minmax(0,1fr);gap:11px}
    .contact-detail>i:last-child{display:none}
    .contact-detail>i:first-child,.contact-hours>i:first-child{width:42px;height:42px;border-radius:13px;font-size:17px}
    .contact-panel-head{padding-bottom:17px}
}