[data-aos][data-aos][data-aos-duration="50"],
body[data-aos-duration="50"] [data-aos] {
    transition-duration: 50ms
}

[data-aos][data-aos][data-aos-delay="50"],
body[data-aos-delay="50"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="50"].aos-animate,
body[data-aos-delay="50"] [data-aos].aos-animate {
    transition-delay: 50ms
}

[data-aos][data-aos][data-aos-duration="100"],
body[data-aos-duration="100"] [data-aos] {
    transition-duration: .1s
}

[data-aos][data-aos][data-aos-delay="100"],
body[data-aos-delay="100"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="100"].aos-animate,
body[data-aos-delay="100"] [data-aos].aos-animate {
    transition-delay: .1s
}

[data-aos][data-aos][data-aos-duration="150"],
body[data-aos-duration="150"] [data-aos] {
    transition-duration: .15s
}

[data-aos][data-aos][data-aos-delay="150"],
body[data-aos-delay="150"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="150"].aos-animate,
body[data-aos-delay="150"] [data-aos].aos-animate {
    transition-delay: .15s
}

[data-aos][data-aos][data-aos-duration="200"],
body[data-aos-duration="200"] [data-aos] {
    transition-duration: .2s
}

[data-aos][data-aos][data-aos-delay="200"],
body[data-aos-delay="200"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="200"].aos-animate,
body[data-aos-delay="200"] [data-aos].aos-animate {
    transition-delay: .2s
}

[data-aos][data-aos][data-aos-duration="250"],
body[data-aos-duration="250"] [data-aos] {
    transition-duration: .25s
}

[data-aos][data-aos][data-aos-delay="250"],
body[data-aos-delay="250"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="250"].aos-animate,
body[data-aos-delay="250"] [data-aos].aos-animate {
    transition-delay: .25s
}

[data-aos][data-aos][data-aos-duration="300"],
body[data-aos-duration="300"] [data-aos] {
    transition-duration: .3s
}

[data-aos][data-aos][data-aos-delay="300"],
body[data-aos-delay="300"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="300"].aos-animate,
body[data-aos-delay="300"] [data-aos].aos-animate {
    transition-delay: .3s
}

[data-aos][data-aos][data-aos-duration="350"],
body[data-aos-duration="350"] [data-aos] {
    transition-duration: .35s
}

[data-aos][data-aos][data-aos-delay="350"],
body[data-aos-delay="350"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="350"].aos-animate,
body[data-aos-delay="350"] [data-aos].aos-animate {
    transition-delay: .35s
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-delay="400"],
body[data-aos-delay="400"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="400"].aos-animate,
body[data-aos-delay="400"] [data-aos].aos-animate {
    transition-delay: .4s
}

[data-aos][data-aos][data-aos-duration="450"],
body[data-aos-duration="450"] [data-aos] {
    transition-duration: .45s
}

[data-aos][data-aos][data-aos-delay="450"],
body[data-aos-delay="450"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="450"].aos-animate,
body[data-aos-delay="450"] [data-aos].aos-animate {
    transition-delay: .45s
}

[data-aos][data-aos][data-aos-duration="500"],
body[data-aos-duration="500"] [data-aos] {
    transition-duration: .5s
}

[data-aos][data-aos][data-aos-delay="500"],
body[data-aos-delay="500"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="500"].aos-animate,
body[data-aos-delay="500"] [data-aos].aos-animate {
    transition-delay: .5s
}

[data-aos][data-aos][data-aos-duration="550"],
body[data-aos-duration="550"] [data-aos] {
    transition-duration: .55s
}

[data-aos][data-aos][data-aos-delay="550"],
body[data-aos-delay="550"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="550"].aos-animate,
body[data-aos-delay="550"] [data-aos].aos-animate {
    transition-delay: .55s
}

[data-aos][data-aos][data-aos-duration="600"],
body[data-aos-duration="600"] [data-aos] {
    transition-duration: .6s
}

[data-aos][data-aos][data-aos-delay="600"],
body[data-aos-delay="600"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="600"].aos-animate,
body[data-aos-delay="600"] [data-aos].aos-animate {
    transition-delay: .6s
}

[data-aos][data-aos][data-aos-duration="650"],
body[data-aos-duration="650"] [data-aos] {
    transition-duration: .65s
}

[data-aos][data-aos][data-aos-delay="650"],
body[data-aos-delay="650"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="650"].aos-animate,
body[data-aos-delay="650"] [data-aos].aos-animate {
    transition-delay: .65s
}

[data-aos][data-aos][data-aos-duration="700"],
body[data-aos-duration="700"] [data-aos] {
    transition-duration: .7s
}

[data-aos][data-aos][data-aos-delay="700"],
body[data-aos-delay="700"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="700"].aos-animate,
body[data-aos-delay="700"] [data-aos].aos-animate {
    transition-delay: .7s
}

[data-aos][data-aos][data-aos-duration="750"],
body[data-aos-duration="750"] [data-aos] {
    transition-duration: .75s
}

[data-aos][data-aos][data-aos-delay="750"],
body[data-aos-delay="750"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="750"].aos-animate,
body[data-aos-delay="750"] [data-aos].aos-animate {
    transition-delay: .75s
}

[data-aos][data-aos][data-aos-duration="800"],
body[data-aos-duration="800"] [data-aos] {
    transition-duration: .8s
}

[data-aos][data-aos][data-aos-delay="800"],
body[data-aos-delay="800"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="800"].aos-animate,
body[data-aos-delay="800"] [data-aos].aos-animate {
    transition-delay: .8s
}

[data-aos][data-aos][data-aos-duration="850"],
body[data-aos-duration="850"] [data-aos] {
    transition-duration: .85s
}

[data-aos][data-aos][data-aos-delay="850"],
body[data-aos-delay="850"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="850"].aos-animate,
body[data-aos-delay="850"] [data-aos].aos-animate {
    transition-delay: .85s
}

[data-aos][data-aos][data-aos-duration="900"],
body[data-aos-duration="900"] [data-aos] {
    transition-duration: .9s
}

[data-aos][data-aos][data-aos-delay="900"],
body[data-aos-delay="900"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="900"].aos-animate,
body[data-aos-delay="900"] [data-aos].aos-animate {
    transition-delay: .9s
}

[data-aos][data-aos][data-aos-duration="950"],
body[data-aos-duration="950"] [data-aos] {
    transition-duration: .95s
}

[data-aos][data-aos][data-aos-delay="950"],
body[data-aos-delay="950"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="950"].aos-animate,
body[data-aos-delay="950"] [data-aos].aos-animate {
    transition-delay: .95s
}

[data-aos][data-aos][data-aos-duration="1000"],
body[data-aos-duration="1000"] [data-aos] {
    transition-duration: 1s
}

[data-aos][data-aos][data-aos-delay="1000"],
body[data-aos-delay="1000"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1000"].aos-animate,
body[data-aos-delay="1000"] [data-aos].aos-animate {
    transition-delay: 1s
}

[data-aos][data-aos][data-aos-duration="1050"],
body[data-aos-duration="1050"] [data-aos] {
    transition-duration: 1.05s
}

[data-aos][data-aos][data-aos-delay="1050"],
body[data-aos-delay="1050"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1050"].aos-animate,
body[data-aos-delay="1050"] [data-aos].aos-animate {
    transition-delay: 1.05s
}

[data-aos][data-aos][data-aos-duration="1100"],
body[data-aos-duration="1100"] [data-aos] {
    transition-duration: 1.1s
}

[data-aos][data-aos][data-aos-delay="1100"],
body[data-aos-delay="1100"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1100"].aos-animate,
body[data-aos-delay="1100"] [data-aos].aos-animate {
    transition-delay: 1.1s
}

[data-aos][data-aos][data-aos-duration="1150"],
body[data-aos-duration="1150"] [data-aos] {
    transition-duration: 1.15s
}

[data-aos][data-aos][data-aos-delay="1150"],
body[data-aos-delay="1150"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1150"].aos-animate,
body[data-aos-delay="1150"] [data-aos].aos-animate {
    transition-delay: 1.15s
}

[data-aos][data-aos][data-aos-duration="1200"],
body[data-aos-duration="1200"] [data-aos] {
    transition-duration: 1.2s
}

[data-aos][data-aos][data-aos-delay="1200"],
body[data-aos-delay="1200"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1200"].aos-animate,
body[data-aos-delay="1200"] [data-aos].aos-animate {
    transition-delay: 1.2s
}

[data-aos][data-aos][data-aos-duration="1250"],
body[data-aos-duration="1250"] [data-aos] {
    transition-duration: 1.25s
}

[data-aos][data-aos][data-aos-delay="1250"],
body[data-aos-delay="1250"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1250"].aos-animate,
body[data-aos-delay="1250"] [data-aos].aos-animate {
    transition-delay: 1.25s
}

[data-aos][data-aos][data-aos-duration="1300"],
body[data-aos-duration="1300"] [data-aos] {
    transition-duration: 1.3s
}

[data-aos][data-aos][data-aos-delay="1300"],
body[data-aos-delay="1300"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1300"].aos-animate,
body[data-aos-delay="1300"] [data-aos].aos-animate {
    transition-delay: 1.3s
}

[data-aos][data-aos][data-aos-duration="1350"],
body[data-aos-duration="1350"] [data-aos] {
    transition-duration: 1.35s
}

[data-aos][data-aos][data-aos-delay="1350"],
body[data-aos-delay="1350"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1350"].aos-animate,
body[data-aos-delay="1350"] [data-aos].aos-animate {
    transition-delay: 1.35s
}

[data-aos][data-aos][data-aos-duration="1400"],
body[data-aos-duration="1400"] [data-aos] {
    transition-duration: 1.4s
}

[data-aos][data-aos][data-aos-delay="1400"],
body[data-aos-delay="1400"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1400"].aos-animate,
body[data-aos-delay="1400"] [data-aos].aos-animate {
    transition-delay: 1.4s
}

[data-aos][data-aos][data-aos-duration="1450"],
body[data-aos-duration="1450"] [data-aos] {
    transition-duration: 1.45s
}

[data-aos][data-aos][data-aos-delay="1450"],
body[data-aos-delay="1450"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1450"].aos-animate,
body[data-aos-delay="1450"] [data-aos].aos-animate {
    transition-delay: 1.45s
}

[data-aos][data-aos][data-aos-duration="1500"],
body[data-aos-duration="1500"] [data-aos] {
    transition-duration: 1.5s
}

[data-aos][data-aos][data-aos-delay="1500"],
body[data-aos-delay="1500"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1500"].aos-animate,
body[data-aos-delay="1500"] [data-aos].aos-animate {
    transition-delay: 1.5s
}

[data-aos][data-aos][data-aos-duration="1550"],
body[data-aos-duration="1550"] [data-aos] {
    transition-duration: 1.55s
}

[data-aos][data-aos][data-aos-delay="1550"],
body[data-aos-delay="1550"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1550"].aos-animate,
body[data-aos-delay="1550"] [data-aos].aos-animate {
    transition-delay: 1.55s
}

[data-aos][data-aos][data-aos-duration="1600"],
body[data-aos-duration="1600"] [data-aos] {
    transition-duration: 1.6s
}

[data-aos][data-aos][data-aos-delay="1600"],
body[data-aos-delay="1600"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1600"].aos-animate,
body[data-aos-delay="1600"] [data-aos].aos-animate {
    transition-delay: 1.6s
}

[data-aos][data-aos][data-aos-duration="1650"],
body[data-aos-duration="1650"] [data-aos] {
    transition-duration: 1.65s
}

[data-aos][data-aos][data-aos-delay="1650"],
body[data-aos-delay="1650"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1650"].aos-animate,
body[data-aos-delay="1650"] [data-aos].aos-animate {
    transition-delay: 1.65s
}

[data-aos][data-aos][data-aos-duration="1700"],
body[data-aos-duration="1700"] [data-aos] {
    transition-duration: 1.7s
}

[data-aos][data-aos][data-aos-delay="1700"],
body[data-aos-delay="1700"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1700"].aos-animate,
body[data-aos-delay="1700"] [data-aos].aos-animate {
    transition-delay: 1.7s
}

[data-aos][data-aos][data-aos-duration="1750"],
body[data-aos-duration="1750"] [data-aos] {
    transition-duration: 1.75s
}

[data-aos][data-aos][data-aos-delay="1750"],
body[data-aos-delay="1750"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1750"].aos-animate,
body[data-aos-delay="1750"] [data-aos].aos-animate {
    transition-delay: 1.75s
}

[data-aos][data-aos][data-aos-duration="1800"],
body[data-aos-duration="1800"] [data-aos] {
    transition-duration: 1.8s
}

[data-aos][data-aos][data-aos-delay="1800"],
body[data-aos-delay="1800"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1800"].aos-animate,
body[data-aos-delay="1800"] [data-aos].aos-animate {
    transition-delay: 1.8s
}

[data-aos][data-aos][data-aos-duration="1850"],
body[data-aos-duration="1850"] [data-aos] {
    transition-duration: 1.85s
}

[data-aos][data-aos][data-aos-delay="1850"],
body[data-aos-delay="1850"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1850"].aos-animate,
body[data-aos-delay="1850"] [data-aos].aos-animate {
    transition-delay: 1.85s
}

[data-aos][data-aos][data-aos-duration="1900"],
body[data-aos-duration="1900"] [data-aos] {
    transition-duration: 1.9s
}

[data-aos][data-aos][data-aos-delay="1900"],
body[data-aos-delay="1900"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1900"].aos-animate,
body[data-aos-delay="1900"] [data-aos].aos-animate {
    transition-delay: 1.9s
}

[data-aos][data-aos][data-aos-duration="1950"],
body[data-aos-duration="1950"] [data-aos] {
    transition-duration: 1.95s
}

[data-aos][data-aos][data-aos-delay="1950"],
body[data-aos-delay="1950"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="1950"].aos-animate,
body[data-aos-delay="1950"] [data-aos].aos-animate {
    transition-delay: 1.95s
}

[data-aos][data-aos][data-aos-duration="2000"],
body[data-aos-duration="2000"] [data-aos] {
    transition-duration: 2s
}

[data-aos][data-aos][data-aos-delay="2000"],
body[data-aos-delay="2000"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2000"].aos-animate,
body[data-aos-delay="2000"] [data-aos].aos-animate {
    transition-delay: 2s
}

[data-aos][data-aos][data-aos-duration="2050"],
body[data-aos-duration="2050"] [data-aos] {
    transition-duration: 2.05s
}

[data-aos][data-aos][data-aos-delay="2050"],
body[data-aos-delay="2050"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2050"].aos-animate,
body[data-aos-delay="2050"] [data-aos].aos-animate {
    transition-delay: 2.05s
}

[data-aos][data-aos][data-aos-duration="2100"],
body[data-aos-duration="2100"] [data-aos] {
    transition-duration: 2.1s
}

[data-aos][data-aos][data-aos-delay="2100"],
body[data-aos-delay="2100"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2100"].aos-animate,
body[data-aos-delay="2100"] [data-aos].aos-animate {
    transition-delay: 2.1s
}

[data-aos][data-aos][data-aos-duration="2150"],
body[data-aos-duration="2150"] [data-aos] {
    transition-duration: 2.15s
}

[data-aos][data-aos][data-aos-delay="2150"],
body[data-aos-delay="2150"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2150"].aos-animate,
body[data-aos-delay="2150"] [data-aos].aos-animate {
    transition-delay: 2.15s
}

[data-aos][data-aos][data-aos-duration="2200"],
body[data-aos-duration="2200"] [data-aos] {
    transition-duration: 2.2s
}

[data-aos][data-aos][data-aos-delay="2200"],
body[data-aos-delay="2200"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2200"].aos-animate,
body[data-aos-delay="2200"] [data-aos].aos-animate {
    transition-delay: 2.2s
}

[data-aos][data-aos][data-aos-duration="2250"],
body[data-aos-duration="2250"] [data-aos] {
    transition-duration: 2.25s
}

[data-aos][data-aos][data-aos-delay="2250"],
body[data-aos-delay="2250"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2250"].aos-animate,
body[data-aos-delay="2250"] [data-aos].aos-animate {
    transition-delay: 2.25s
}

[data-aos][data-aos][data-aos-duration="2300"],
body[data-aos-duration="2300"] [data-aos] {
    transition-duration: 2.3s
}

[data-aos][data-aos][data-aos-delay="2300"],
body[data-aos-delay="2300"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2300"].aos-animate,
body[data-aos-delay="2300"] [data-aos].aos-animate {
    transition-delay: 2.3s
}

[data-aos][data-aos][data-aos-duration="2350"],
body[data-aos-duration="2350"] [data-aos] {
    transition-duration: 2.35s
}

[data-aos][data-aos][data-aos-delay="2350"],
body[data-aos-delay="2350"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2350"].aos-animate,
body[data-aos-delay="2350"] [data-aos].aos-animate {
    transition-delay: 2.35s
}

[data-aos][data-aos][data-aos-duration="2400"],
body[data-aos-duration="2400"] [data-aos] {
    transition-duration: 2.4s
}

[data-aos][data-aos][data-aos-delay="2400"],
body[data-aos-delay="2400"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2400"].aos-animate,
body[data-aos-delay="2400"] [data-aos].aos-animate {
    transition-delay: 2.4s
}

[data-aos][data-aos][data-aos-duration="2450"],
body[data-aos-duration="2450"] [data-aos] {
    transition-duration: 2.45s
}

[data-aos][data-aos][data-aos-delay="2450"],
body[data-aos-delay="2450"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2450"].aos-animate,
body[data-aos-delay="2450"] [data-aos].aos-animate {
    transition-delay: 2.45s
}

[data-aos][data-aos][data-aos-duration="2500"],
body[data-aos-duration="2500"] [data-aos] {
    transition-duration: 2.5s
}

[data-aos][data-aos][data-aos-delay="2500"],
body[data-aos-delay="2500"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2500"].aos-animate,
body[data-aos-delay="2500"] [data-aos].aos-animate {
    transition-delay: 2.5s
}

[data-aos][data-aos][data-aos-duration="2550"],
body[data-aos-duration="2550"] [data-aos] {
    transition-duration: 2.55s
}

[data-aos][data-aos][data-aos-delay="2550"],
body[data-aos-delay="2550"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2550"].aos-animate,
body[data-aos-delay="2550"] [data-aos].aos-animate {
    transition-delay: 2.55s
}

[data-aos][data-aos][data-aos-duration="2600"],
body[data-aos-duration="2600"] [data-aos] {
    transition-duration: 2.6s
}

[data-aos][data-aos][data-aos-delay="2600"],
body[data-aos-delay="2600"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2600"].aos-animate,
body[data-aos-delay="2600"] [data-aos].aos-animate {
    transition-delay: 2.6s
}

[data-aos][data-aos][data-aos-duration="2650"],
body[data-aos-duration="2650"] [data-aos] {
    transition-duration: 2.65s
}

[data-aos][data-aos][data-aos-delay="2650"],
body[data-aos-delay="2650"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2650"].aos-animate,
body[data-aos-delay="2650"] [data-aos].aos-animate {
    transition-delay: 2.65s
}

[data-aos][data-aos][data-aos-duration="2700"],
body[data-aos-duration="2700"] [data-aos] {
    transition-duration: 2.7s
}

[data-aos][data-aos][data-aos-delay="2700"],
body[data-aos-delay="2700"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2700"].aos-animate,
body[data-aos-delay="2700"] [data-aos].aos-animate {
    transition-delay: 2.7s
}

[data-aos][data-aos][data-aos-duration="2750"],
body[data-aos-duration="2750"] [data-aos] {
    transition-duration: 2.75s
}

[data-aos][data-aos][data-aos-delay="2750"],
body[data-aos-delay="2750"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2750"].aos-animate,
body[data-aos-delay="2750"] [data-aos].aos-animate {
    transition-delay: 2.75s
}

[data-aos][data-aos][data-aos-duration="2800"],
body[data-aos-duration="2800"] [data-aos] {
    transition-duration: 2.8s
}

[data-aos][data-aos][data-aos-delay="2800"],
body[data-aos-delay="2800"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2800"].aos-animate,
body[data-aos-delay="2800"] [data-aos].aos-animate {
    transition-delay: 2.8s
}

[data-aos][data-aos][data-aos-duration="2850"],
body[data-aos-duration="2850"] [data-aos] {
    transition-duration: 2.85s
}

[data-aos][data-aos][data-aos-delay="2850"],
body[data-aos-delay="2850"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2850"].aos-animate,
body[data-aos-delay="2850"] [data-aos].aos-animate {
    transition-delay: 2.85s
}

[data-aos][data-aos][data-aos-duration="2900"],
body[data-aos-duration="2900"] [data-aos] {
    transition-duration: 2.9s
}

[data-aos][data-aos][data-aos-delay="2900"],
body[data-aos-delay="2900"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2900"].aos-animate,
body[data-aos-delay="2900"] [data-aos].aos-animate {
    transition-delay: 2.9s
}

[data-aos][data-aos][data-aos-duration="2950"],
body[data-aos-duration="2950"] [data-aos] {
    transition-duration: 2.95s
}

[data-aos][data-aos][data-aos-delay="2950"],
body[data-aos-delay="2950"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="2950"].aos-animate,
body[data-aos-delay="2950"] [data-aos].aos-animate {
    transition-delay: 2.95s
}

[data-aos][data-aos][data-aos-duration="3000"],
body[data-aos-duration="3000"] [data-aos] {
    transition-duration: 3s
}

[data-aos][data-aos][data-aos-delay="3000"],
body[data-aos-delay="3000"] [data-aos] {
    transition-delay: 0
}

[data-aos][data-aos][data-aos-delay="3000"].aos-animate,
body[data-aos-delay="3000"] [data-aos].aos-animate {
    transition-delay: 3s
}

[data-aos][data-aos][data-aos-easing=linear],
body[data-aos-easing=linear] [data-aos] {
    transition-timing-function: cubic-bezier(.25, .25, .75, .75)
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

[data-aos][data-aos][data-aos-easing=ease-in],
body[data-aos-easing=ease-in] [data-aos] {
    transition-timing-function: ease-in
}

[data-aos][data-aos][data-aos-easing=ease-out],
body[data-aos-easing=ease-out] [data-aos] {
    transition-timing-function: ease-out
}

[data-aos][data-aos][data-aos-easing=ease-in-out],
body[data-aos-easing=ease-in-out] [data-aos] {
    transition-timing-function: ease-in-out
}

[data-aos][data-aos][data-aos-easing=ease-in-back],
body[data-aos-easing=ease-in-back] [data-aos] {
    transition-timing-function: cubic-bezier(.6, -.28, .735, .045)
}

[data-aos][data-aos][data-aos-easing=ease-out-back],
body[data-aos-easing=ease-out-back] [data-aos] {
    transition-timing-function: cubic-bezier(.175, .885, .32, 1.275)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-back],
body[data-aos-easing=ease-in-out-back] [data-aos] {
    transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}

[data-aos][data-aos][data-aos-easing=ease-in-sine],
body[data-aos-easing=ease-in-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.47, 0, .745, .715)
}

[data-aos][data-aos][data-aos-easing=ease-out-sine],
body[data-aos-easing=ease-out-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.39, .575, .565, 1)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-sine],
body[data-aos-easing=ease-in-out-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.445, .05, .55, .95)
}

[data-aos][data-aos][data-aos-easing=ease-in-quad],
body[data-aos-easing=ease-in-quad] [data-aos] {
    transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}

[data-aos][data-aos][data-aos-easing=ease-out-quad],
body[data-aos-easing=ease-out-quad] [data-aos] {
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-quad],
body[data-aos-easing=ease-in-out-quad] [data-aos] {
    transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}

[data-aos][data-aos][data-aos-easing=ease-in-cubic],
body[data-aos-easing=ease-in-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}

[data-aos][data-aos][data-aos-easing=ease-out-cubic],
body[data-aos-easing=ease-out-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],
body[data-aos-easing=ease-in-out-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}

[data-aos][data-aos][data-aos-easing=ease-in-quart],
body[data-aos-easing=ease-in-quart] [data-aos] {
    transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}

[data-aos][data-aos][data-aos-easing=ease-out-quart],
body[data-aos-easing=ease-out-quart] [data-aos] {
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-quart],
body[data-aos-easing=ease-in-out-quart] [data-aos] {
    transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}

[data-aos^=fade][data-aos^=fade] {
    opacity: 0;
    transition-property: opacity, transform
}

[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0)
}

[data-aos=fade-up] {
    transform: translate3d(0, 100px, 0)
}

[data-aos=fade-down] {
    transform: translate3d(0, -100px, 0)
}

[data-aos=fade-right] {
    transform: translate3d(-100px, 0, 0)
}

[data-aos=fade-left] {
    transform: translate3d(100px, 0, 0)
}

[data-aos=fade-up-right] {
    transform: translate3d(-100px, 100px, 0)
}

[data-aos=fade-up-left] {
    transform: translate3d(100px, 100px, 0)
}

[data-aos=fade-down-right] {
    transform: translate3d(-100px, -100px, 0)
}

[data-aos=fade-down-left] {
    transform: translate3d(100px, -100px, 0)
}

[data-aos^=zoom][data-aos^=zoom] {
    opacity: 0;
    transition-property: opacity, transform
}

[data-aos^=zoom][data-aos^=zoom].aos-animate {
    opacity: 1;
    transform: translateZ(0) scale(1)
}

[data-aos=zoom-in] {
    transform: scale(.6)
}

[data-aos=zoom-in-up] {
    transform: translate3d(0, 100px, 0) scale(.6)
}

[data-aos=zoom-in-down] {
    transform: translate3d(0, -100px, 0) scale(.6)
}

[data-aos=zoom-in-right] {
    transform: translate3d(-100px, 0, 0) scale(.6)
}

[data-aos=zoom-in-left] {
    transform: translate3d(100px, 0, 0) scale(.6)
}

[data-aos=zoom-out] {
    transform: scale(1.2)
}

[data-aos=zoom-out-up] {
    transform: translate3d(0, 100px, 0) scale(1.2)
}

[data-aos=zoom-out-down] {
    transform: translate3d(0, -100px, 0) scale(1.2)
}

[data-aos=zoom-out-right] {
    transform: translate3d(-100px, 0, 0) scale(1.2)
}

[data-aos=zoom-out-left] {
    transform: translate3d(100px, 0, 0) scale(1.2)
}

[data-aos^=slide][data-aos^=slide] {
    transition-property: transform
}

[data-aos^=slide][data-aos^=slide].aos-animate {
    transform: translateZ(0)
}

[data-aos=slide-up] {
    transform: translate3d(0, 100%, 0)
}

[data-aos=slide-down] {
    transform: translate3d(0, -100%, 0)
}

[data-aos=slide-right] {
    transform: translate3d(-100%, 0, 0)
}

[data-aos=slide-left] {
    transform: translate3d(100%, 0, 0)
}

[data-aos^=flip][data-aos^=flip] {
    backface-visibility: hidden;
    transition-property: transform
}

[data-aos=flip-left] {
    transform: perspective(2500px) rotateY(-100deg)
}

[data-aos=flip-left].aos-animate {
    transform: perspective(2500px) rotateY(0)
}

[data-aos=flip-right] {
    transform: perspective(2500px) rotateY(100deg)
}

[data-aos=flip-right].aos-animate {
    transform: perspective(2500px) rotateY(0)
}

[data-aos=flip-up] {
    transform: perspective(2500px) rotateX(-100deg)
}

[data-aos=flip-up].aos-animate {
    transform: perspective(2500px) rotateX(0)
}

[data-aos=flip-down] {
    transform: perspective(2500px) rotateX(100deg)
}

[data-aos=flip-down].aos-animate {
    transform: perspective(2500px) rotateX(0)
}

.owl-carousel,
.owl-carousel .owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative
}

.owl-carousel {
    display: none;
    width: 100%;
    z-index: 1
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item {
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
    display: none
}

.no-js .owl-carousel,
.owl-carousel.owl-loaded {
    display: block
}

.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    background: 0 0;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-hidden {
    opacity: 0
}

.owl-carousel.owl-refresh .owl-item {
    visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel.owl-grab {
    cursor: move;
    cursor: grab
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right
}

.owl-carousel .animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s ease
}

.owl-carousel .owl-item .owl-lazy:not([src]),
.owl-carousel .owl-item .owl-lazy[src^=""] {
    max-height: 0
}

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.html) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform .1s ease
}

.owl-carousel .owl-video-play-icon:hover {
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}

.owl-theme .owl-dots,
.owl-theme .owl-nav {
    text-align: center;
    -webkit-tap-highlight-color: transparent
}

.owl-theme .owl-nav {
    margin-top: 10px
}

.owl-theme .owl-nav [class*=owl-] {
    color: #FFF;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: #D6D6D6;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: #869791;
    color: #FFF;
    text-decoration: none
}

.owl-theme .owl-nav .disabled {
    opacity: .5;
    cursor: default
}

.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 10px
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #869791
}

@font-face {
    font-family: "default";
    font-style: normal;
    font-weight: 700;
    src: url("html/style/fonts/BeVietnamPro-Bold.ttf");
    font-display: swap
}

@font-face {
    font-family: "default";
    font-style: normal;
    font-weight: 600;
    src: url("html/style/fonts/BeVietnamPro-SemiBold.ttf");
    font-display: swap
}

@font-face {
    font-family: "default";
    font-style: normal;
    font-weight: 500;
    src: url("html/style/fonts/BeVietnamPro-Medium.ttf");
    font-display: swap
}

@font-face {
    font-family: "default";
    font-style: normal;
    font-weight: 400;
    src: url("html/style/fonts/BeVietnamPro-Regular.ttf");
    font-display: swap
}

@font-face {
    font-family: "default";
    font-style: normal;
    font-weight: 300;
    src: url("html/style/fonts/BeVietnamPro-Light.ttf");
    font-display: swap
}


:root {
    --color-main: #5453d6;
    --color-main1: #5453d6;
    --color-price: #6363d9;
    --color-more-hover: #5252d5;
    --color-process: #d9cbf9;
    --color-placeholder: #7d7d7d;
    --color-red: #ec282f;
    --color-white: #fff;
    --color-text: #19192c;
    --color-quote: #6e6e6e;
    --color-check: #f1543f;
    --color-check1: #26cd63;
    --color-sale: #f609ad;
    --color-star: #fac655;
    --color-border: #b2b2b2;
    --color-hotline: #ec282f;
    --color-social-ft: #515151;
    --color-price: #5553d6;
    --bg-translate: #eeefef;
    --bg-mess: #1777f1;
    --bg-zalo: #008ff3;
    --bg-service: #1b202e;
    --bg-header: #19192c;
    --bg-footer: #181822;
    --bg-category: #e6e9ef;
    --bg-advantage: #e3e7f4;
    --bg-teamwork: #f3f6fc;
    --bg-sale: #f618b1;
    --bg-table-compare: #f5f5f5;
    --bg-advantage-cloud: #e6ebfa;
    --bd-category: #c3ccdd;
    --bd-blog: #e1e1e1;
    --bd-footer: #d6ceeb;
    --bd-contact: #b8b7b7;
    --bd-quote: #d1d5e9;
    --bd-table-compare: #e9e9e9;
    --bd-item-price: #d6d6d6;
    --h-header: 0;
    --h-header-mini: 80px;
    --width-container-2: 1400px;
    --width-container: 1210px;
    --width-logo: 192px;
    --fs-text-min: 13px;
    --fs-text: 16px;
    --fs-about-option-index: 32px;
    --fs-header: 18px;
    --fs-h1: 26px;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --fs-h4: 16px;
    --fs-h5: 15px;
    --fs-h6: 14px;
    --fs-14: 14px;
    --fs-paragraph: 16px;
    --fs-process: 34px;
    --fs-price: 45px;
    --fs-price1: 27px;
    --fs-data: 41px;
    --fs-price-center: 48px;
    --fs-small15-paragraph: 15px;
    --fs-small14-paragraph: 14px;
    --fs-bigger-paragraph: 18px;
    --fs-language: 15px;
    --fs-more: 16px;
    --fs-sale: 12px;
    --fs-more-banner: 16px;
    --fs-more-service: 14px;
    --fs-more-service1: 15px;
    --fs-title: 32px;
    --fs-title-banner: 48px;
    --fs-title-infrastructure: 20px;
    --fs-title-service: 22px;
    --fs-title-customer: 20px;
    --fs-title-blog: 20px;
    --fs-title-item-price: 18px;
    --fs-title-form: 20.3px;
    --fs-title-about: 20.3px;
    --fs-title-blog-detail: 28px;
    --fs-title-policy: 26px;
    --fs-title-category: 20px;
    --fs-title-footer: 15px;
    --fs-title-min: 26px;
    --fs-title-ft: 18px;
    --fs-title-product: 24px;
    --fs-title-product-min: 20px
}

@media (max-width:87.4375em) {
    :root {
        --width-container: 1140px;
        --width-container-2: 1240px
    }
}

@media (max-width:74.9375em) {
    :root {
        --width-container: 960px;
        --width-container-2: 960px
    }
}

@media (max-width:1024px) {
    :root {
        --width-container: 720px;
        --width-container-2: 720px;
        --fs-paragraph: 15px;
        --fs-process: 34px;
        --fs-price: 35px;
        --fs-data: 35px;
        --fs-price-center: 35px;
        --fs-small15-paragraph: 15px;
        --fs-small14-paragraph: 14px;
        --fs-bigger-paragraph: 16px;
        --fs-language: 15px;
        --fs-more: 16px;
        --fs-more-banner: 16px;
        --fs-more-service: 14px;
        --fs-more-service1: 15px;
        --fs-title: 22px;
        --fs-title-banner: 25px;
        --fs-title-infrastructure: 18px;
        --fs-title-service: 18px;
        --fs-title-customer: 18px;
        --fs-title-blog: 18px;
        --fs-title-form: 18px;
        --fs-title-about: 18px;
        --fs-title-blog-detail: 20px;
        --fs-title-policy: 20px;
        --fs-title-category: 18px;
        --fs-title-footer: 15px;
        --fs-title-min: 18px;
        --fs-title-ft: 18px;
        --fs-title-product: 18px;
        --fs-title-product-min: 18px
    }
}

@media (max-width:767px) {
    :root {
        --fs-text: 14px;
        --width-container: 540px;
        --width-container-2: 540px;
        --width-logo: 150px;
        --fs-paragraph: 14px;
        --fs-title: 20px;
        --fs-bigger-paragraph: 14px;
        --fs-title-banner: 22px;
        --fs-more-banner: 14px;
        --fs-data: 28px
    }
}

@media (max-width:35.9375em) {
    :root {
        --width-container: 100%;
        --width-container-2: 100%
    }
}

@keyframes MoveUpDown {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(10px)
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "default"
}

.load.text-center {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 201
}

.load.text-center.show {
    display: flex
}

.load.text-center:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1
}

.load.text-center p {
    color: var(--color-white);
    z-index: 2
}

.load.text-center img {
    z-index: 2;
    width: 100px
}

body {
    font-size: var(--fs-text);
    margin-top: var(--h-header);
    top: 0 !important;
    color: var(--color-text);
    line-height: 1.5;
    background: #0b0b1e;
}

body.no-scroll {
    overflow: hidden
}

a {
    color: var(--color-white)
}

a:hover {
    color: var(--color-main)
}

form input.error,
form textarea.error,
form select.error {
    border: 1px solid red !important
}

form label.error {
    display: none !important
}

.container {
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: var(--width-container)
}

.container.container-2 {
    max-width: var(--width-container-2)
}

input {
    border: none;
    outline: none;
    background: 0 0;
    font-size: var(--fs-14);
    color: var(--color-text);
    padding-left: 10px
}

input::placeholder {
    color: var(--color-placeholder);
    font-size: var(--fs-14)
}

button {
    border: none;
    outline: none;
    background: 0 0;
    font-size: var(--fs-14);
    color: var(--color-text);
    padding: 10px 15px
}

textarea {
    border: none;
    outline: none;
    background: 0 0;
    font-size: var(--fs-14);
    color: var(--color-text);
    padding-left: 10px;
    padding-top: 10px
}

textarea::placeholder {
    color: var(--color-placeholder);
    font-size: var(--fs-14)
}

select {
    border: none;
    outline: none;
    background: 0 0;
    font-size: var(--fs-14);
    color: var(--color-text)
}

ul,
ol,
li {
    list-style: none;
    font-size: var(--fs-text)
}

a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer
}

a:hover {
    color: var(--color-main)
}

img {
    max-width: 100%;
    transition: transform 0.3s linear
}

.img {
    overflow: hidden;
    display: block
}

.img img {
    display: block
}

strong {
    font-weight: 700
}

label.error {
    color: red;
    font-size: 10px
}

.page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    width: 100%
}

.page span,
.page a,
.page div {
    color: #333;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    position: relative
}

.page span:hover,
.page span.active-page,
.page a:hover,
.page a.active-page,
.page div:hover,
.page div.active-page {
    background: var(--color-main);
    color: var(--color-white);
    border-color: var(--color-main)
}

.page span:hover i,
.page span.active-page i,
.page a:hover i,
.page a.active-page i,
.page div:hover i,
.page div.active-page i {
    color: var(--color-white)
}

.page span.disabled,
.page a.disabled,
.page div.disabled {
    opacity: 0.5;
    pointer-events: none
}

.page .prev,
.page .next {
    width: 33px;
    height: 33px;
    border-radius: 16.5px
}

.page svg {
    width: 13px;
    height: 13px;
    fill: var(--color-text)
}

.detail-content h2,
.detail-content h3,
.detail-content h4,
.detail-content h5,
.detail-content h6 {
    margin-bottom: 10px;
    line-height: 1.5;
    color: var(--color-text)
}

.detail-content h2,
.detail-content h3,
.detail-content h4 {
    font-weight: 700
}

.detail-content h2 {
    font-size: var(--fs-h2)
}

@media (max-width:767px) {
    .detail-content h2 {
        margin-bottom: 10px
    }
}

.detail-content h3 {
    font-size: var(--fs-h3)
}

@media (max-width:767px) {
    .detail-content h3 {
        margin-bottom: 10px
    }
}

.detail-content h4 {
    font-size: var(--fs-h4)
}

.detail-content p {
    line-height: 1.5;
    margin-top: 0;
    color: var(--color-text)
}

.detail-content ul,
.detail-content ol {
    margin-bottom: 10px;
    padding-left: 25px
}

.detail-content ul li,
.detail-content ol li {
    padding-bottom: 5px;
    line-height: 1.5
}

.detail-content ul li:last-child,
.detail-content ol li:last-child {
    padding-bottom: 0
}

.detail-content ul li::marker,
.detail-content ol li::marker {
    color: var(--color-text)
}

.detail-content ul {
    list-style-type: disc
}

.detail-content ul li {
    list-style-type: disc;
    color: var(--color-text)
}

.detail-content ol {
    list-style-type: decimal
}

.detail-content ol li {
    list-style-type: decimal
}

.detail-content .image-center {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.detail-content .image-center figcaption {
    font-family: "default";
    font-size: var(--fs-text-min);
    padding: 5px 0;
    font-style: italic
}

@media (max-width:767px) {
    .detail-content .image-center figure {
        margin: 0;
        width: 100%
    }

    .detail-content .image-center figure figcaption {
        padding: 10px
    }
}

.detail-content .image-right {
    margin: 0;
    display: flex;
    align-items: end;
    justify-content: center;
    flex-direction: column;
    float: right
}

.detail-content .image-right figcaption {
    background: #f1f1f1;
    padding: 5px 0;
    font-style: italic
}

@media (max-width:767px) {
    .detail-content .image-right {
        margin-left: 0;
        margin-right: 0
    }

    .detail-content .image-right figure {
        margin: 0;
        width: 100%
    }

    .detail-content .image-right figure figcaption {
        padding: 10px
    }
}

.detail-content .image-left {
    margin: 0;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    float: left
}

.detail-content .image-left figcaption {
    background: #f1f1f1;
    padding: 5px 0;
    font-style: italic
}

@media (max-width:767px) {
    .detail-content .image-left {
        margin-left: 0;
        margin-right: 0
    }

    .detail-content .image-left figure {
        margin: 0;
        width: 100%
    }

    .detail-content .image-left figure figcaption {
        padding: 10px
    }
}

.detail-content a {
    text-decoration: underline
}

.detail-content a:hover {
    color: var(--color-main)
}

.detail-content img {
    max-width: 100%;
    height: initial !important
}

.detail-content table {
    margin-bottom: 10px;
    border-collapse: collapse;
    width: 100%
}

.detail-content table tr th {
    line-height: 1;
    font-weight: 400;
    font-size: var(--fs-text);
    color: var(--color-text);
    border: 1px solid #dbdbdb;
    border-top-color: var(--color-main)
}

.detail-content table tr th:first-child {
    border-left-color: var(--color-main)
}

.detail-content table tr th:last-child {
    border-right-color: var(--color-main)
}

.detail-content table tr th,
.detail-content table tr td {
    font-size: var(--fs-text);
    line-height: 1.5;
    padding: 5px
}

.detail-content iframe {
    max-width: 100%
}

.detail-content .iframe_video {
    margin-bottom: 15px
}

.detail-content .iframe_video iframe,
.detail-content .iframe_video video {
    width: 100%;
    height: 100%
}

.alrt-popup {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0
}

.alrt-popup.show {
    opacity: 1;
    pointer-events: all
}

.alrt-popup .wapper {
    background: var(--color-white);
    width: 320px;
    border-radius: 10px;
    overflow: hidden
}

.alrt-popup .wapper .main {
    padding: 15px;
    text-align: center
}

.alrt-popup .wapper .title {
    background: #bf2929;
    color: var(--color-white);
    text-align: center;
    font-weight: 400;
    padding: 15px 10px;
    margin-bottom: 0
}

.alrt-popup .wapper .close-alrt {
    text-align: center;
    margin: 0 auto 10px auto;
    border: 2px solid #bf2929;
    padding: 5px 15px;
    cursor: pointer;
    width: 205px;
    height: 38px;
    border-radius: 20px;
    color: #bf2929;
    display: flex;
    align-items: center;
    justify-content: center
}

.alrt-popup.success .wapper .title {
    background: #09e493
}

.alrt-popup.success .wapper .close-alrt {
    display: none
}

.overlay,
.overlay-popup-index {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 990;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transition: all 0.5s ease
}

.overlay.show,
.overlay-popup-index.show {
    opacity: 1;
    pointer-events: all;
    display: flex !important
}

.overlay-popup-index {
    z-index: 9999
}

.grecaptcha-badge {
    display: none !important
}

#notfound {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px
}

@media (max-width:991px) {
    #notfound {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    #notfound {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

#notfound .notfound {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

#notfound .notfound .notfound-404 {
    text-align: center;
    color: var(--color-main);
    font-size: 100px
}

#notfound .notfound h1 {
    line-height: 1
}

#notfound .notfound h2,
#notfound .notfound p,
#notfound .notfound a {
    text-align: center
}

#notfound .notfound h2 {
    color: var(--color-main);
    font-size: 32px;
    margin-bottom: 20px
}

#notfound .notfound p {
    margin-bottom: 30px
}

@media (max-width:991px) {
    #notfound .notfound p {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    #notfound .notfound p {
        margin-bottom: 15px
    }
}

#notfound .notfound a {
    font-size: var(--fs-text);
    color: var(--color-white);
    background-color: var(--color-main);
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.5s linear;
    border: 1px solid var(--color-main);
    max-width: 250px
}

#notfound .notfound a:hover {
    background-color: var(--color-white);
    color: var(--color-main)
}

@media (max-width:767px) {
    #notfound .notfound .notfound-404 {
        font-size: 50px
    }

    #notfound .notfound h2 {
        font-size: 16px;
        margin-bottom: 15px
    }

    #notfound .notfound p,
    #notfound .notfound a {
        font-size: 14px
    }
}

.social-fixed {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 20
}

.social-fixed a,
.social-fixed div {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    margin: 15px 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer
}

.social-fixed a i,
.social-fixed div i {
    font-size: 20px
}

.social-fixed a.mess,
.social-fixed div.mess {
    background: var(--bg-mess)
}

.social-fixed a.zalo,
.social-fixed div.zalo {
    background: var(--bg-zalo)
}

.social-fixed a img,
.social-fixed div img {
    max-width: 80%;
    object-fit: contain;
    max-height: 80%;
    width: initial
}

.social-fixed a.tele img,
.social-fixed div.tele img {
    max-width: 70%;
    margin-right: 3px
}

@media (min-width:0) {
    .social-fixed .coccoc-alo-ph-circle {
        width: 60px;
        height: 60px;
        top: -25px;
        left: -10px;
        position: absolute;
        background-color: transparent;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        border: 2px solid red;
        opacity: 0.1;
        -webkit-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
        -moz-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
        -ms-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
        -o-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
        animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s
    }

    .social-fixed .coccoc-alo-phone {
        background-color: transparent;
        cursor: pointer;
        z-index: 200000 !important;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        -webkit-transition: visibility 0.5s;
        -moz-transition: visibility 0.5s;
        -o-transition: visibility 0.5s;
        transition: visibility 0.5s
    }

    .social-fixed .coccoc-alo-ph-circle-fill {
        width: 38px;
        height: 38px;
        top: -15px;
        left: 0;
        position: absolute;
        background-color: #fff;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        border: 2px solid transparent;
        -webkit-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
        -moz-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
        -ms-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
        -o-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
        animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s
    }

    .social-fixed .coccoc-alo-ph-img-circle {
        width: 30px;
        height: 30px;
        top: -8px;
        left: 8px;
        position: absolute;
        z-index: 10;
        background: url("/assets/html/style/images/ic-phone.webp") no-repeat center center;
        background-size: 100% 100%;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        border: 2px solid transparent;
        opacity: 1;
        -webkit-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
        -moz-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
        -ms-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
        -o-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
        animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out
    }

    @-moz-keyframes coccoc-alo-circle-anim {
        0% {
            transform: rotate(0) scale(0.5) skew(1deg);
            opacity: 0.1
        }

        30% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.5
        }

        100% {
            transform: rotate(0) scale(1) skew(1deg);
            opacity: 0.1
        }
    }

    @-webkit-keyframes coccoc-alo-circle-anim {
        0% {
            transform: rotate(0) scale(0.5) skew(1deg);
            opacity: 0.1
        }

        30% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.5
        }

        100% {
            transform: rotate(0) scale(1) skew(1deg);
            opacity: 0.1
        }
    }

    @-o-keyframes coccoc-alo-circle-anim {
        0% {
            transform: rotate(0) scale(0.5) skew(1deg);
            opacity: 0.1
        }

        30% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.5
        }

        100% {
            transform: rotate(0) scale(1) skew(1deg);
            opacity: 0.1
        }
    }

    @keyframes coccoc-alo-circle-anim {
        0% {
            transform: rotate(0) scale(0.5) skew(1deg);
            opacity: 0.1
        }

        30% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.5
        }

        100% {
            transform: rotate(0) scale(1) skew(1deg);
            opacity: 0.1
        }
    }

    @-moz-keyframes coccoc-alo-circle-fill-anim {
        0% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.9
        }

        50% {
            transform: rotate(0) scale(1) skew(1deg);
            opacity: 0.9
        }

        100% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.9
        }
    }

    @-webkit-keyframes coccoc-alo-circle-fill-anim {
        0% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.9
        }

        50% {
            transform: rotate(0) scale(1) skew(1deg);
            opacity: 0.9
        }

        100% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.9
        }
    }

    @-o-keyframes coccoc-alo-circle-fill-anim {
        0% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.9
        }

        50% {
            transform: rotate(0) scale(1) skew(1deg);
            opacity: 0.9
        }

        100% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.9
        }
    }

    @keyframes coccoc-alo-circle-fill-anim {
        0% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.9
        }

        50% {
            transform: rotate(0) scale(1) skew(1deg);
            opacity: 0.9
        }

        100% {
            transform: rotate(0) scale(0.7) skew(1deg);
            opacity: 0.9
        }
    }

    @-moz-keyframes coccoc-alo-circle-img-anim {
        0% {
            transform: rotate(0) scale(1) skew(1deg)
        }

        10% {
            transform: rotate(-25deg) scale(1) skew(1deg)
        }

        20% {
            transform: rotate(25deg) scale(1) skew(1deg)
        }

        30% {
            transform: rotate(-25deg) scale(1) skew(1deg)
        }

        40% {
            transform: rotate(25deg) scale(1) skew(1deg)
        }

        50% {
            transform: rotate(0) scale(1) skew(1deg)
        }

        100% {
            transform: rotate(0) scale(1) skew(1deg)
        }
    }

    @-webkit-keyframes coccoc-alo-circle-img-anim {
        0% {
            transform: rotate(0) scale(1) skew(1deg)
        }

        10% {
            transform: rotate(-25deg) scale(1) skew(1deg)
        }

        20% {
            transform: rotate(25deg) scale(1) skew(1deg)
        }

        30% {
            transform: rotate(-25deg) scale(1) skew(1deg)
        }

        40% {
            transform: rotate(25deg) scale(1) skew(1deg)
        }

        50% {
            transform: rotate(0) scale(1) skew(1deg)
        }

        100% {
            transform: rotate(0) scale(1) skew(1deg)
        }
    }

    @-o-keyframes coccoc-alo-circle-img-anim {
        0% {
            transform: rotate(0) scale(1) skew(1deg)
        }

        10% {
            transform: rotate(-25deg) scale(1) skew(1deg)
        }

        20% {
            transform: rotate(25deg) scale(1) skew(1deg)
        }

        30% {
            transform: rotate(-25deg) scale(1) skew(1deg)
        }

        40% {
            transform: rotate(25deg) scale(1) skew(1deg)
        }

        50% {
            transform: rotate(0) scale(1) skew(1deg)
        }

        100% {
            transform: rotate(0) scale(1) skew(1deg)
        }
    }

    @keyframes coccoc-alo-circle-img-anim {
        0% {
            transform: rotate(0) scale(1) skew(1deg)
        }

        10% {
            transform: rotate(-25deg) scale(1) skew(1deg)
        }

        20% {
            transform: rotate(25deg) scale(1) skew(1deg)
        }

        30% {
            transform: rotate(-25deg) scale(1) skew(1deg)
        }

        40% {
            transform: rotate(25deg) scale(1) skew(1deg)
        }

        50% {
            transform: rotate(0) scale(1) skew(1deg)
        }

        100% {
            transform: rotate(0) scale(1) skew(1deg)
        }
    }
}

@media (min-width:992px) {
    .social-fixed .coccoc-alo-ph-circle {
        width: 70px;
        height: 70px
    }

    .social-fixed .coccoc-alo-ph-circle-fill {
        width: 50px;
        height: 50px
    }

    .social-fixed .coccoc-alo-ph-img-circle {
        width: 30px;
        height: 30px;
        top: -4px;
        left: 12px
    }
}

@media (max-width:991px) {

    .social-fixed a,
    .social-fixed div {
        width: 38px;
        height: 38px
    }

    .social-fixed a img,
    .social-fixed div img {
        max-width: 70%
    }
}

@media (max-width:767px) {
    .menu-bottom-mb {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        height: 50px;
        justify-content: space-between;
        background-color: var(--color-white);
        padding: 0 20px;
        z-index: 99;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
    }

    .menu-bottom-mb img {
        height: 30px;
        width: initial;
        object-fit: contain
    }
}

.update.center {
    text-align: center
}

.detail-ser {
    padding: 20px 0
}

.detail-ser h1 {
    color: var(--color-text);
    font-size: 20px
}

.detail-ser .title-module {
    margin-bottom: 25px
}

@media (max-width:991px) {
    .detail-ser .title-module {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .detail-ser .title-module {
        margin-bottom: 15px
    }
}

.detail-ser .result-search .item {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center
}

.detail-ser .result-search .item .img {
    width: 15%;
    aspect-ratio: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    background: #f1f1f1
}

.detail-ser .result-search .item .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.detail-ser .result-search .item .right {
    width: 85%;
    padding-left: 30px
}

.detail-ser .result-search .item:last-child {
    border-bottom: 0
}

.detail-ser .result-search .item .module {
    color: var(--color-white);
    background-color: var(--color-main);
    padding: 2px 10px;
    border-radius: 5px;
    margin-right: 10px;
    display: inline-block;
    white-space: nowrap
}

.detail-ser .result-search .item h3 a {
    font-weight: 700;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box
}

.detail-ser .result-search .item h3:hover a {
    color: var(--color-main)
}

.detail-ser .result-search .item .time {
    font-size: 13px;
    color: var(--color-main);
    font-style: italic;
    margin: 5px 0;
    display: flex;
    align-items: center
}

.detail-ser .result-search .item .time svg {
    margin-right: 10px;
    fill: var(--color-main)
}

@media (max-width:767px) {
    .detail-ser .result-search .item {
        flex-direction: column
    }

    .detail-ser .result-search .item .img {
        width: 100%;
        aspect-ratio: 16/9;
        margin-bottom: 15px
    }

    .detail-ser .result-search .item .right {
        padding: 0;
        width: 100%
    }
}

.skiptranslate iframe {
    display: none
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: #19192c
}

::-webkit-scrollbar-thumb:hover {
    background: #7772e6
}

@media (min-width:991px) {
    .ani-up-down {
        animation: MoveUpDown 3s ease-in-out infinite
    }
}

body.no-banner {
    margin-top: 70px
}

@media (max-width:1024px) {
    body {
        margin-top: 67px
    }

    body.no-banner {
        margin-top: 67px
    }
}

@media (max-width:767px) {
    body {
        margin-top: 53px
    }

    body.no-banner {
        margin-top: 53px
    }
}

.list-language {
    position: absolute;
    top: calc(100% + 5px);
    border-radius: 5px;
    right: 14px;
    background: var(--color-white);
    width: 50px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s linear
}

.list-language .item:not(:last-child) {
    border-bottom: 1px solid var(--color-border)
}

.list-language .item {
    padding: 5px 5px 0
}

.list-language .item img {
    width: 80%;
    height: 20px;
    object-fit: cover
}

.list-language .item:hover {
    color: var(--color-main);
    cursor: pointer
}

.padding-box {
    padding: 75px 0
}

@media (max-width:1024px) {
    .padding-box {
        padding: 30px 0
    }
}

@media (max-width:767px) {
    .padding-box {
        padding: 20px 0
    }
}

.padding-box50 {
    padding: 50px 0
}

.padding-box90 {
    padding: 90px 0
}

@media (max-width:1024px) {
    .padding-box90 {
        padding: 30px 0
    }
}

@media (max-width:767px) {
    .padding-box90 {
        padding: 20px 0
    }
}

.padding-box60 {
    padding: 60px 0
}

@media (max-width:1024px) {
    .padding-box60 {
        padding: 30px 0
    }
}

@media (max-width:767px) {
    .padding-box60 {
        padding: 20px 0
    }
}

.big-title {
    font-size: var(--fs-title);
    font-weight: 700;
    text-transform: uppercase
}

.big-title a {
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--color-main);
    text-transform: uppercase
}

.big-title.center {
    text-align: center
}

.big-title.center a {
    text-align: center
}

.big-title.color-gradient {
    color: unset;
    background: linear-gradient(to right, #982bfd, #6363da);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.big-title.color-text {
    color: var(--color-text)
}

.big-title.color-text a {
    color: var(--color-text)
}

.big-title.color-main {
    color: var(--color-main)
}

.big-title.color-main a {
    color: var(--color-main)
}

.big-title.color-white {
    color: var(--color-white)
}

.big-title.color-white a {
    color: var(--color-white)
}

.big-title.no-uppercase {
    text-transform: none
}

.big-title.no-uppercase a {
    text-transform: none
}

.big-title.title-service {
    font-size: var(--fs-title-service);
    background: -webkit-linear-gradient(#6542dd, #3b5fc6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.big-title.title-service a {
    font-size: var(--fs-title-service)
}

.big-title.title-banner {
    font-size: var(--fs-title-banner)
}

.big-title.title-banner a {
    font-size: var(--fs-title-banner)
}

.big-title.title-footer {
    font-size: var(--fs-title-footer)
}

.big-title.title-footer a {
    font-size: var(--fs-title-footer)
}

.big-title.title-customer {
    font-size: var(--fs-title-customer)
}

.big-title.title-customer a {
    font-size: var(--fs-title-customer)
}

.big-title.title-item-price {
    font-size: var(--fs-title-item-price)
}

.big-title.title-item-price a {
    font-size: var(--fs-title-item-price)
}

.big-title.title-form {
    font-size: var(--fs-title-form)
}

.big-title.title-form a {
    font-size: var(--fs-title-form)
}

.big-title.title-infrastructure {
    font-size: var(--fs-title-infrastructure)
}

.big-title.title-infrastructure a {
    font-size: var(--fs-title-infrastructure)
}

.big-title.title-about {
    font-size: var(--fs-title-about)
}

.big-title.title-about a {
    font-size: var(--fs-title-about)
}

.big-title.title-blog {
    font-size: var(--fs-title-blog)
}

.big-title.title-blog a {
    font-size: var(--fs-title-blog)
}

.big-title.title-blog-detail {
    font-size: var(--fs-title-blog-detail)
}

.big-title.title-blog-detail a {
    font-size: var(--fs-title-blog-detail)
}

.big-title.title-category {
    font-size: var(--fs-title-category)
}

.big-title.title-category a {
    font-size: var(--fs-title-category)
}

.big-title.title-policy {
    font-size: var(--fs-title-policy)
}

.big-title.title-policy a {
    font-size: var(--fs-title-policy)
}

.big-title.semibold {
    font-weight: 600
}

.big-title.semibold a {
    font-weight: 600
}

.title {
    font-size: var(--fs-paragraph);
    color: #333;
}

.time {
    font-size: var(--fs-paragraph);
    color: #333;
}

.paragraph {
    font-size: var(--fs-paragraph);
    color:#FFF;
}

.paragraph p,
.paragraph li,
.paragraph a,
.paragraph th,
.paragraph td,
.paragraph strong {
    font-size: var(--fs-paragraph)
}

.paragraph.center {
    text-align: center
}

.paragraph.center p,
.paragraph.center li,
.paragraph.center a,
.paragraph.center th,
.paragraph.center td,
.paragraph.center strong {
    text-align: center
}

.paragraph.smaller15 {
    font-size: var(--fs-small15-paragraph)
}

.paragraph.smaller15 p,
.paragraph.smaller15 li,
.paragraph.smaller15 a,
.paragraph.smaller15 th,
.paragraph.smaller15 td,
.paragraph.smaller15 strong {
    font-size: var(--fs-small15-paragraph)
}

.paragraph.smaller14 {
    font-size: var(--fs-small14-paragraph)
}

.paragraph.smaller14 p,
.paragraph.smaller14 li,
.paragraph.smaller14 a,
.paragraph.smaller14 th,
.paragraph.smaller14 td,
.paragraph.smaller14 strong {
    font-size: var(--fs-small14-paragraph)
}

.paragraph.bigger {
    font-size: var(--fs-bigger-paragraph)
}

.paragraph.bigger p,
.paragraph.bigger li,
.paragraph.bigger a,
.paragraph.bigger th,
.paragraph.bigger td,
.paragraph.bigger strong {
    font-size: var(--fs-bigger-paragraph)
}

.paragraph.light {
    font-weight: 300
}

.paragraph.light p,
.paragraph.light li,
.paragraph.light a,
.paragraph.light th,
.paragraph.light td,
.paragraph.light strong {
    font-weight: 300
}

.paragraph.color-main {
    color: var(--color-main)
}

.paragraph.color-main p,
.paragraph.color-main li,
.paragraph.color-main a,
.paragraph.color-main th,
.paragraph.color-main td,
.paragraph.color-main strong {
    color: var(--color-main)
}

.paragraph.color-white {
    color: var(--color-white)
}

.paragraph.color-white p,
.paragraph.color-white li,
.paragraph.color-white a,
.paragraph.color-white th,
.paragraph.color-white td,
.paragraph.color-white strong {
    color: var(--color-white)
}

.paragraph.justify {
    text-align: justify
}

.paragraph.justify p,
.paragraph.justify li,
.paragraph.justify a,
.paragraph.justify th,
.paragraph.justify td,
.paragraph.justify strong {
    text-align: justify
}

.scroll-form {
    cursor: pointer
}

.more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    padding: 0 35px;
    border-radius: 360px;
    border: 1px solid var(--color-white);
    font-weight: 600;
    font-size: var(--fs-more);
    color: var(--color-white);
    background: #6363da;
    text-align: center;
    cursor: pointer
}

.gradient-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 35px;
    border-radius: 360px;
    border: none;
    font-weight: 600;
    font-size: var(--fs-more);
    color: var(--color-white);
    background-image: linear-gradient(50deg, #7e56db, #68b3ff);
    text-align: center;
    cursor: pointer
}

.gradient-btn:hover {
    color: var(--color-white);
    background-image: linear-gradient(25deg, #ff00ea, #2600fc);
}

@media (max-width:767px) {
    .more {
        padding: 5px 15px
    }
}

.more.other-padding {
    padding: 0 25px
}

.more:hover,
.more.more-service {
    border-color: var(--color-more-hover);
    color: var(--color-more-hover);
    background: var(--color-white);
    font-size: var(--fs-more-services)
}

.more.more-banner {
    font-size: var(--fs-more-banner)
}

.more.more-banner:hover {
    background: var(--color-white);
    text-transform: initial
}

.more-detail {
    display: inline-block;
    padding: 8px 25px;
    margin-bottom: 15px;
    border: 1px solid var(--color-white);
    font-weight: 600;
    font-size: var(--fs-more);
    color: var(--color-white);
    background: rgb(246, 133, 212);
    background: linear-gradient(90deg, rgb(246, 133, 212) 0, rgb(185, 81, 235) 100%);
    text-align: center;
    cursor: pointer;
    text-decoration: none !important;
    border-radius: 40px
}

@media (max-width:767px) {
    .more-detail {
        padding: 5px 15px
    }
}

.more-detail:hover,
.more-detail.reverse {
    border-color: var(--color-more-hover);
    color: var(--color-more-hover);
    background: var(--color-white);
    font-size: var(--fs-more-services)
}

.more-detail.reverse:hover {
    color: var(--color-white);
    background: rgb(246, 133, 212);
    background: linear-gradient(90deg, rgb(246, 133, 212) 0, rgb(185, 81, 235) 100%);
    border-color: transparent
}

.item-service {
    border-radius: 15px;
    transition: all 0.5s ease;
    background: var(--color-white);
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 50px;
    padding-top: 40px;
    padding-bottom: 35px
}

@media (max-width:991px) {
    .item-service {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-service {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

@media (max-width:767px) {
    .item-service {
        padding: 15px 25px
    }
}

.item-service:after {
    transition: opacity 0.5s ease;
    content: "";
    background-image: url("html/style/images/bg-item-service.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    z-index: 1
}

.item-service .img {
    margin-bottom: 25px;
    width: 63px;
    height: 63px;
    position: relative;
    overflow: unset;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width:767px) {
    .item-service .img {
        margin-top: 15px
    }
}

.item-service .img::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: url("html/style/images/icon-service1.webp") no-repeat center;
    background-size: 100% 100%
}

.item-service .img img {
    height: 70%;
    max-width: 70%;
    object-fit: contain;
    position: relative;
    z-index: 10
}

.item-service h3.big-title {
    margin-bottom: 25px;
    text-align: center
}

@media (max-width:991px) {
    .item-service h3.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-service h3.big-title {
        margin-bottom: 15px
    }
}

@media (max-width:767px) {
    .item-service h3.big-title {
        margin-bottom: 10px
    }
}

.item-service .price {
    margin-bottom: 25px
}

@media (max-width:991px) {
    .item-service .price {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-service .price {
        margin-bottom: 15px
    }
}

.item-service .price p {
    margin-bottom: 10px;
    text-align: center
}

.item-service .price p:last-child {
    margin-bottom: 0
}

.item-service .price p strong {
    font-size: var(--fs-price);
    font-weight: 700;
    color: var(--color-price)
}

@media (max-width:767px) {
    .item-service .price p {
        margin-bottom: 5px
    }
}

.item-service>.paragraph {
    height: 100px;
    overflow: hidden;
    margin-bottom: 15px
}

.item-service .more {
    width: 100%
}

.item-service .more:hover {
    background: rgb(246, 133, 212);
    background: linear-gradient(90deg, rgb(246, 133, 212) 0, rgb(185, 81, 235) 100%);
    color: var(--color-white);
    border-color: transparent
}

.item-customer {
    position: relative;
    background-color: var(--color-white);
    border-radius: 15px;
    padding: 40px 25px 50px 25px;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0
}

@media (max-width:1024px) {
    .item-customer {
        padding: 20px
    }
}

@media (max-width:992px) {
    .item-customer {
        padding: 15px
    }
}

.item-customer .img {
    width: 66px;
    height: 66px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-bottom: 20px
}

@media (max-width:991px) {
    .item-customer .img {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-customer .img {
        margin-bottom: 15px
    }
}

.item-customer .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.item-customer h3.big-title {
    margin-bottom: 30px
}

@media (max-width:991px) {
    .item-customer h3.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-customer h3.big-title {
        margin-bottom: 15px
    }
}

.item-customer .paragraph {
    min-height: 100px
}

.item-customer .star {
    display: flex;
    align-items: center;
    gap: 3px;
    position: absolute;
    bottom: 40px;
    left: 25px
}

@media (max-width:767px) {
    .item-customer .star {
        position: unset
    }
}

.item-customer .star .icon svg {
    fill: var(--color-star)
}

@media (max-width:1024px) {
    .item-customer .star {
        left: 20px
    }
}

@media (max-width:992px) {
    .item-customer .star {
        left: 15px
    }
}

.item-blog {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0
}

.item-blog .img {
    aspect-ratio: 406/155
}

.item-blog .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.item-blog .img:hover img {
    transform: scale(1.05)
}

.item-blog .text {
    background-color: var(--color-white);
    padding: 0 15px;
    padding-top: 25px;
    padding-bottom: 10px
}

@media (max-width:991px) {
    .item-blog .text {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-blog .text {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

.item-blog .text h3.big-title {
    min-height: 60px;
    margin-bottom: 15px
}

.item-blog .text h3.big-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2
}

.item-blog .text h3.big-title:hover a {
    color: var(--color-main)
}

.item-blog .text>.paragraph {
    min-height: 45px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--bd-blog)
}

.item-blog .text>.paragraph p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2
}

.item-blog .text .date-more {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.item-blog .text .date-more .date {
    display: flex;
    align-items: center;
    gap: 10px
}

.item-blog .text .date-more .date .icon svg {
    fill: var(--color-text)
}

.item-blog.main .img {
    aspect-ratio: 830/330
}

.item-blog.main h3.big-title {
    min-height: unset
}

.item-advantage {
    width: 33.3333333333%;
    background-color: var(--color-white);
    border-radius: 15px;
    padding: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0
}

.item-advantage .img {
    width: 230px;
    height: 174px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 45px
}

@media (max-width:991px) {
    .item-advantage .img {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-advantage .img {
        margin-bottom: 15px
    }
}

.item-advantage .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.item-advantage h3.big-title {
    min-height: 22px;
    margin-bottom: 25px
}

@media (max-width:991px) {
    .item-advantage h3.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-advantage h3.big-title {
        margin-bottom: 15px
    }
}

.item-teamwork {
    display: flex;
    align-items: center;
    flex-direction: column
}

.item-teamwork .img {
    width: 264px;
    height: 264px;
    margin-bottom: 20px
}

@media (max-width:991px) {
    .item-teamwork .img {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-teamwork .img {
        margin-bottom: 15px
    }
}

@media (max-width:1024px) {
    .item-teamwork .img {
        width: 100%;
        height: 100%
    }
}

.item-teamwork .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.item-teamwork h3.big-title {
    min-height: 22px;
    margin-bottom: 8px
}

.item-benefit {
    border-radius: 15px;
    background-color: var(--color-white);
    padding: 35px;
    display: flex;
    align-items: center;
    flex-direction: column
}

.item-benefit .img {
    width: 78px;
    height: 77px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px
}

@media (max-width:991px) {
    .item-benefit .img {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-benefit .img {
        margin-bottom: 15px
    }
}

.item-benefit .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.item-benefit h3.big-title {
    min-height: 48px;
    margin-bottom: 15px
}

@media (max-width:1024px) {
    .item-benefit h3.big-title {
        min-height: unset
    }
}

@media (max-width:1024px) {
    .item-benefit {
        padding: 20px
    }
}

@media (max-width:767px) {
    .item-benefit {
        padding: 15px
    }
}

.item-price {
    background: var(--color-white);
    border-radius: 15px;
    overflow: hidden;
    position: relative
}

.item-price .img-price {
    width: 100%;
    aspect-ratio: 282/156;
    background: url("html/style/images/bf-item-price.webp") center no-repeat;
    background-size: cover;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

@media (max-width:991px) {
    .item-price .img-price {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-price .img-price {
        margin-bottom: 15px
    }
}

.item-price .img-price .img {
    width: 90px;
    height: 90px;
    margin-bottom: 15px
}

.item-price .img-price .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.item-price .price {
    font-size: var(--fs-price1);
    font-weight: 600;
    text-align: center;
    min-height: 29px;
    color: var(--color-main);
    margin-bottom: 20px
}

@media (max-width:991px) {
    .item-price .price {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-price .price {
        margin-bottom: 15px
    }
}

.item-price .select {
    width: 100%;
    padding: 0 20px;
    position: relative;
    margin-bottom: 15px
}

.item-price .select select {
    width: 100%;
    padding: 10px 15px;
    font-size: var(--fs-more-service);
    font-weight: 600;
    color: var(--color-main);
    text-transform: uppercase;
    background-color: var(--bg-service);
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none
}

.item-price .select .icon-down {
    position: absolute;
    top: 50%;
    right: 30px;
    pointer-events: none;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.item-price .select .icon-down svg {
    fill: var(--color-main);
    width: 16px;
    height: 16px
}

.item-price .specifications {
    padding: 0 20px;
    margin-bottom: 15px;
    height: 325px;
    overflow: hidden
}

@media (max-width:1400px) {
    .item-price .specifications {
        height: 320px
    }
}

.item-price .specifications.active {
    height: auto
}

.item-price .specifications table tr td {
    text-align: center;
    padding: 2px 0;
    border-bottom: 1px solid #ccc
}

.item-price .specifications table tr:last-child td {
    border-bottom: 0
}

.item-price .see-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: var(--fs-more-service1);
    font-weight: 600;
    color: var(--color-white);
    height: 45px;
    text-align: center;
    cursor: pointer
}

.item-price.item-1 .see-more {
    background: rgb(116, 116, 221);
    background: linear-gradient(90deg, rgb(116, 116, 221) 0, rgb(129, 118, 220) 52%, rgb(153, 120, 217) 100%)
}

.item-price.item-2 .img-price {
    background: url("html/style/images/bf-item-price1.webp") center no-repeat;
    background-size: cover
}

.item-price.item-2 .see-more {
    background: rgb(164, 111, 227);
    background: linear-gradient(90deg, rgb(164, 111, 227) 0, rgb(180, 114, 224) 52%, rgb(201, 115, 222) 100%)
}

.item-price.item-3 .img-price {
    background: url("html/style/images/bf-item-price2.webp") center no-repeat;
    background-size: cover
}

.item-price.item-3 .see-more {
    background: rgb(116, 118, 221);
    background: linear-gradient(90deg, rgb(116, 118, 221) 0, rgb(99, 141, 217) 52%, rgb(77, 170, 213) 100%)
}

.item-price.item-4 .img-price {
    background: url("html/style/images/bf-item-price3.webp") center no-repeat;
    background-size: cover
}

.item-price.item-4 .see-more {
    background: rgb(120, 116, 221);
    background: linear-gradient(90deg, rgb(120, 116, 221) 0, rgb(165, 116, 220) 52%, rgb(214, 112, 221) 100%)
}

.item-price.other-bg .img-price {
    background: url("html/style/images/bf-item-price1.webp") center no-repeat;
    background-size: 100% 100%
}

.item-price.other-bg .see-more {
    background: linear-gradient(90deg, rgb(163, 111, 226) 0, rgb(199, 116, 222) 100%)
}

.item-price.other-bg1 .img-price {
    background: url("html/style/images/bf-item-price2.webp") center no-repeat;
    background-size: 100% 100%
}

.item-price.other-bg1 .see-more {
    background: linear-gradient(90deg, rgb(115, 118, 221) 0, rgb(77, 171, 212) 100%)
}

.item-price.other-bg2 .img-price {
    background: url("html/style/images/bf-item-price3.webp") center no-repeat;
    background-size: 100% 100%
}

.item-price.other-bg2 .see-more {
    background: linear-gradient(90deg, rgb(119, 116, 221) 0, rgb(217, 113, 221) 100%)
}

.list-table-price {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px
}

.list-table-price .item-price {
    width: calc((100% - 60px) / 4)
}

@media (max-width:1024px) {
    .list-table-price .item-price {
        width: calc((100% - 20px) / 2)
    }
}

@media (max-width:767px) {
    .list-table-price .item-price {
        width: 100%
    }

    .list-table-price .item-price .specifications {
        min-height: auto
    }
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999
}

header .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
}

@media (max-width:1024px) {
    header .container {
        padding: 15px 0;
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

@media (max-width:767px) {
    header .container {
        padding: 10px
    }
}

header .container .menu-icon {
    display: none;
    cursor: pointer
}

header .container .menu-icon .bar1,
header .container .menu-icon .bar2,
header .container .menu-icon .bar3 {
    width: 30px;
    height: 3px;
    background-color: var(--color-white);
    margin: 6px 0;
    transition: 0.4s
}

header .container .menu-icon.change .bar1 {
    transform: translate(0, 8px) rotate(-45deg)
}

header .container .menu-icon.change .bar2 {
    opacity: 0
}

header .container .menu-icon.change .bar3 {
    transform: translate(0, -11px) rotate(45deg)
}

@media (max-width:1024px) {
    header .container .menu-icon {
        display: inline-block
    }
}

header .container .logo {
    aspect-ratio: 192/33;
    width: var(--width-logo)
}

header .container .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

header .container .right {
    width: calc(100% - 192px);
    padding-left: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media (max-width:1399px) {
    header .container .right {
        padding-left: 40px
    }
}

@media (max-width:1024px) {
    header .container .right {
        width: unset;
        padding-left: 0
    }
}

header .container .right .search {
    position: relative
}

header .container .right .search .icon {
    cursor: pointer;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

header .container .right .search .icon svg {
    fill: var(--color-white)
}

header .container .right .search .icon.btn-close {
    display: none
}

header .container .right .search form {
    position: absolute;
    top: 50%;
    right: 30px;
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.3s linear;
    pointer-events: none
}

header .container .right .search form input {
    background: var(--color-white);
    border-radius: 360px;
    border: 1px solid var(--color-white);
    width: 250px;
    padding: 10px 35px 10px 15px;
    color: var(--color-text);
    font-size: var(--fs-paragraph)
}

header .container .right .search form input::placeholder {
    color: var(--color text);
    font-size: var(--fs-paragraph)
}

header .container .right .search form .icon svg {
    fill: var(--color-text)
}

header .container .right .search form button {
    padding: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%)
}

header .container .right .search.active .icon.btn-search {
    display: none
}

header .container .right .search.active .icon.btn-close {
    display: flex
}

header .container .right .search.active form {
    opacity: 1;
    transform: translateY(-50%);
    transition: all 0.3s linear;
    pointer-events: all
}

@media (max-width:1024px) {
    header .container .right .search {
        display: none
    }
}

header .container .right .language {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    gap: 10px
}

header .container .right .language .list-language {
    transition: all 0.3s linear
}

header .container .right .language:hover .list-language {
    opacity: 1;
    transform: translateY(0)
}

header .container .right .language>p {
    font-size: var(--fs-language);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center
}

header .container .right .language>p img {
    width: 30px;
    height: 20px;
    object-fit: cover
}

header .container .right .language .icon svg,
header .container .right .language .icon1 svg {
    fill: var(--color-white)
}

header .container .right .language .icon {
    display: flex;
    align-items: center;
    justify-content: center
}

header .container .right .language .icon1 {
    display: flex;
    justify-content: center;
    align-items: flex-end
}

header .container .right .login {
    display: flex;
    align-items: center;
    gap: 10px
}

header .container .right .login .item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 107px;
    height: 35px;
    font-size: var(--fs-paragraph);
    color: var(--color-white);
    border-radius: 360px;
    border: 1px solid var(--color-white)
}

header .container .right .login .item {
    background: var(--color-white);
    color: var(--color-main)
}

@media (max-width:1024px) {
    header .container .right .login {
        display: none
    }
}

header .container .right .menu>ul {
    display: flex;
    align-items: center;
    gap: 50px
}

header .container .right .menu>ul>li {
    padding-top: 40px;
    padding-bottom: 40px;
    position: relative
}

@media (max-width:991px) {
    header .container .right .menu>ul>li {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    header .container .right .menu>ul>li {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

header .container .right .menu>ul>li .btn-down {
    display: none
}

header .container .right .menu>ul>li>a {
    position: relative;
    font-size: var(--fs-paragraph);
    color: var(--color-white)
}

header .container .right .menu>ul>li>a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: var(--color-white);
    transition: all 0.3s linear
}

header .container .right .menu>ul>li .submenu {
    opacity: 0;
    transition: all 0.3s linear;
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: calc(100% - 26px);
    transform: translateX(-50%);
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    border-radius: 5px;
    overflow: hidden
}

header .container .right .menu>ul>li .submenu .submenu-product {
    display: flex;
    background: var(--color-white)
}

header .container .right .menu>ul>li .submenu ul {
    background-color: var(--color-white);
    padding: 20px 20px 35px 20px
}

header .container .right .menu>ul>li .submenu ul>li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 20px
}

header .container .right .menu>ul>li .submenu ul>li .icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center
}

header .container .right .menu>ul>li .submenu ul>li a {
    white-space: nowrap
}

header .container .right .menu>ul>li .submenu ul>li:last-child {
    margin-bottom: 0
}

header .container .right .menu>ul>li:hover a::before,
header .container .right .menu>ul>li.active a::before {
    width: 100%;
    transition: all 0.3s linear
}

header .container .right .menu>ul>li:hover .submenu {
    opacity: 1;
    transition: all 0.3s linear;
    pointer-events: all
}

@media (max-width:1399px) {
    header .container .right .menu>ul {
        gap: 30px
    }
}

@media (max-width:1024px) {
    header .container .right .menu {
        width: 40%;
        height: 100%;
        position: fixed;
        top: 67px;
        left: 0;
        background-color: var(--color-white);
        transform: translateX(-100%);
        transition: all 0.3s linear
    }

    header .container .right .menu.active {
        transform: translateX(0);
        transition: all 0.3s linear
    }

    header .container .right .menu>ul {
        flex-direction: column;
        gap: 0
    }

    header .container .right .menu>ul>li {
        width: 100%;
        padding: 15px 20px;
        border-bottom: 1px solid var(--bd-contact)
    }
}

@media (max-width:1024px) and (max-width:767px) {
    header .container .right .menu>ul>li {
        padding: 15px
    }
}

@media (max-width:1024px) {
    header .container .right .menu>ul>li>a {
        color: var(--color-text);
        font-weight: 600
    }

    header .container .right .menu>ul>li>a::before {
        display: none
    }
}

@media (max-width:1024px) {
    header .container .right .menu>ul>li .btn-down {
        display: block;
        position: absolute;
        top: 16px;
        right: 20px
    }
}

@media (max-width:1024px) {
    header .container .right .menu>ul>li .submenu {
        display: none;
        position: unset;
        transform: unset;
        box-shadow: unset
    }

    header .container .right .menu>ul>li .submenu>ul {
        padding: 10px 20px
    }
}

@media (max-width:1024px) and (max-width:767px) {
    header .container .right .menu>ul>li .submenu>ul {
        padding: 10px 15px
    }
}

@media (max-width:1024px) {
    header .container .right .menu>ul>li .submenu>ul>li>a {
        white-space: unset
    }
}

@media (max-width:767px) {
    header .container .right .menu {
        width: 100%;
        top: 53px
    }
}

header .container .right .menu .search {
    display: none
}

@media (max-width:1024px) {
    header .container .right .menu .search {
        display: block;
        padding: 15px 20px
    }

    header .container .right .menu .search form {
        position: unset;
        opacity: 1;
        transform: unset;
        transition: unset;
        pointer-events: all
    }

    header .container .right .menu .search form input {
        width: 100%;
        border: 1px solid var(--color-main)
    }

    header .container .right .menu .search form .icon {
        right: 30px
    }

    header .container .right .menu .search form .icon svg {
        fill: var(--color-main)
    }
}

@media (max-width:767px) {
    header .container .right .menu .search {
        padding: 15px
    }
}

header .container .right .menu .login {
    display: none
}

@media (max-width:1024px) {
    header .container .right .menu .login {
        display: flex;
        justify-content: center
    }

    header .container .right .menu .login .item {
        border: 1px solid var(--color-main);
        color: var(--color-main)
    }
}

header.active,
header.nobanner {
    background: var(--bg-header)
}

@media (max-width:1024px) {
    header {
        background: var(--bg-header)
    }
}

.banner {
    width: 100%;
    aspect-ratio: 1900/900;
    background: url("html/style/images/bg-banner1.webp") center no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width:991px) {
    .banner {
        overflow: hidden
    }
}

@media (max-width:767px) {
    .banner {
        aspect-ratio: 9/16;
        align-items: flex-start;
        padding-top: 30px
    }
}

.banner .item {
    width: 100%
}

.banner .item .container {
    display: flex;
    align-items: center
}

.banner .item .container .left {
    padding-right: 45px;
    width: 50%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 30px
}

@media (max-width:1024px) {
    .banner .item .container .left {
        gap: 20px
    }
}

@media (max-width:767px) {
    .banner .item .container .left {
        gap: 15px
    }
}

.banner .item .container .right {
    width: 50%;
    padding-left: 80.5px
}

.banner .item .container .right .img {
    aspect-ratio: 507/466;
    display: flex;
    align-items: center;
    justify-content: center
}

.banner .item .container .right .img img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

@media (max-width:1024px) {
    .banner .item .container .left {
        padding-right: 0
    }

    .banner .item .container .right {
        padding-left: 20px
    }
}

@media (max-width:767px) {
    .banner .item .container {
        flex-direction: column;
        gap: 15px
    }

    .banner .item .container .left {
        width: 100%;
        padding-right: 0
    }

    .banner .item .container .right {
        width: 100%;
        padding-left: 0
    }
}

@media (max-width:1024px) {
    .banner .item {
        padding: 15px 0
    }
}

.banner .slide-index {
    width: 100%
}

.banner .slide-index .owl-prev,
.banner .slide-index .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.banner .slide-index .owl-prev svg,
.banner .slide-index .owl-next svg {
    fill: var(--color-white)
}

.banner .slide-index .owl-prev:hover,
.banner .slide-index .owl-next:hover {
    background-color: unset !important
}

.banner .slide-index .owl-prev {
    left: 55px
}

.banner .slide-index .owl-next {
    right: 55px
}

@media (max-width:1399px) {
    .banner .slide-index .owl-prev {
        left: 15px
    }

    .banner .slide-index .owl-next {
        right: 15px
    }
}

.banner.banner-index,
.banner.slide-banner-product {
    background-color: var(--bg-service);
    width: 100%
}

@media (min-width:991px) {

    .banner.banner-index .item .container .left h2,
    .banner.banner-index .item .container .left .paragraph,
    .banner.banner-index .item .container .left .more,
    .banner.slide-banner-product .item .container .left h2,
    .banner.slide-banner-product .item .container .left .paragraph,
    .banner.slide-banner-product .item .container .left .more {
        transform: translateX(-50%);
        opacity: 0
    }

    .banner.banner-index .item .container .left h2,
    .banner.slide-banner-product .item .container .left h2 {
        transition: transform 1s linear, opacity 0.8s linear
    }

    .banner.banner-index .item .container .left .paragraph,
    .banner.slide-banner-product .item .container .left .paragraph {
        transition: transform 1s linear 0.2s, opacity 0.8s linear 0.2s
    }

    .banner.banner-index .item .container .left .more,
    .banner.slide-banner-product .item .container .left .more {
        transition: transform 1s linear 0.4s, opacity 0.8s linear 0.4s
    }

    .banner.banner-index .item .container .right,
    .banner.slide-banner-product .item .container .right {
        transform: translateX(50%);
        opacity: 0;
        transition: transform 1s linear, opacity 0.8s linear
    }
}

.banner.banner-product {
    aspect-ratio: 1900/670;
    background: url("html/style/images/bg-banner2.webp") center no-repeat;
    background-size: cover
}

.banner.banner-product .item {
    width: 100%
}

.banner.banner-product .item .container .left {
    padding-right: 0
}

.banner.banner-product .item .container .right .img {
    aspect-ratio: 1
}

.banner.banner-product .item .container .right .img div {
    display: flex;
    align-items: center;
    justify-content: center
}

@media (min-width:991px) {

    .banner .owl-item.active .item .container .left h2,
    .banner .owl-item.active .item .container .left .paragraph,
    .banner .owl-item.active .item .container .left .more {
        transform: translateX(0);
        opacity: 1
    }

    .banner .owl-item.active .item .container .right {
        transform: translateX(0);
        opacity: 1
    }
}

.service-index {
    background-color: var(--bg-service);
    position: relative
}

@media (max-width:1024px) {
    .service-index {
        padding: 30px 0
    }
}

@media (max-width:991px) {
    .service-index {
        overflow: hidden
    }
}

@media (max-width:767px) {
    .service-index {
        padding: 15px 0
    }
}

.service-index .container>h2 {
    margin-bottom: 20px
}

@media (max-width:991px) {
    .service-index .container>h2 {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .service-index .container>h2 {
        margin-bottom: 15px
    }
}

.service-index .container>.paragraph {
    margin-bottom: 45px
}

@media (max-width:991px) {
    .service-index .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .service-index .container>.paragraph {
        margin-bottom: 15px
    }
}

@media (min-width:992px) {
    .service-index .container .slide-service {
        aspect-ratio: 1180/578
    }
}

.service-index .container .slide-service .owl-stage {
    display: flex;
    align-items: center
}

.service-index .container .slide-service .owl-stage .owl-item.center .item {
    position: relative;
    transform: scaleY(1.05)
}

.service-index .container .slide-service .owl-stage .owl-item.center .item:after {
    opacity: 1
}

.service-index .container .slide-service .owl-stage .owl-item.center .item .img {
    position: relative;
    z-index: 2
}

.service-index .container .slide-service .owl-stage .owl-item.center .item .img::before {
    background: url("html/style/images/bg-icon-service.webp") no-repeat center
}

.service-index .container .slide-service .owl-stage .owl-item.center .item h3.big-title {
    position: relative;
    z-index: 2;
    color: var(--color-white)
}

.service-index .container .slide-service .owl-stage .owl-item.center .item .price {
    position: relative;
    z-index: 2
}

.service-index .container .slide-service .owl-stage .owl-item.center .item .price p {
    color: var(--color-white);
    font-size: var(--fs-paragraph)
}

.service-index .container .slide-service .owl-stage .owl-item.center .item .price p strong {
    color: var(--color-white);
    font-size: var(--fs-price-center)
}

.service-index .container .slide-service .owl-stage .owl-item.center .item>.paragraph {
    position: relative;
    z-index: 2;
    color: var(--color-white)
}

.service-index .container .slide-service .owl-stage .owl-item.center .item>.paragraph p {
    color: var(--color-white)
}

.service-index .container .slide-service .owl-stage .owl-item.center .item .more {
    position: relative;
    z-index: 2;
    font-size: var(--fs-more-services1);
    border: none;
    background: #6363da;
    color: var(--color-white)
}

.service-index .container .slide-service .owl-stage .owl-item.center .item .more:hover {
    background: var(--color-white);
    color: var(--color-main);
    border-color: transparent
}

.service-index .container .slide-service .owl-stage-outer {
    padding: 30px 0
}

@media (max-width:767px) {
    .service-index .container .slide-service .owl-stage-outer {
        padding: 15px 0
    }
}

.service-index .container .slide-service .owl-prev,
.service-index .container .slide-service .owl-next {
    position: absolute;
    bottom: -5px;
    background: 0 0
}

.service-index .container .slide-service .owl-prev svg,
.service-index .container .slide-service .owl-next svg {
    width: 20px;
    height: 20px
}

.service-index .container .slide-service .owl-prev:hover svg,
.service-index .container .slide-service .owl-next:hover svg {
    fill: var(--color-main)
}

.service-index .container .slide-service .owl-prev {
    left: 42%
}

.service-index .container .slide-service .owl-next {
    right: 42%
}

.service-index .container .slide-service .owl-dot span {
    width: 8px;
    height: 8px
}

.service-index .container .slide-service .owl-dot.active span {
    background: var(--color-main)
}

@media (max-width:991px) {
    .service-index .container .slide-service .owl-prev {
        left: 35%
    }

    .service-index .container .slide-service .owl-next {
        right: 35%
    }
}

@media (max-width:767px) {
    .service-index .container .slide-service .owl-prev {
        left: 20%
    }

    .service-index .container .slide-service .owl-next {
        right: 20%
    }
}

@media (max-width:991px) {
    .advantage-index {
        overflow: hidden
    }
}

.advantage-index .container {
    display: flex;
    align-items: center;
    flex-direction: column
}

.advantage-index .container>h2 {
    width: 100%;
    margin-bottom: 20px
}

@media (max-width:991px) {
    .advantage-index .container>h2 {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .advantage-index .container>h2 {
        margin-bottom: 15px
    }
}

.advantage-index .container>.paragraph {
    width: 100%;
    margin-bottom: 45px
}

@media (max-width:991px) {
    .advantage-index .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .advantage-index .container>.paragraph {
        margin-bottom: 15px
    }
}

.advantage-index .container .content {
    width: 100%;
    display: flex;
    align-items: center
}

.advantage-index .container .content .left {
    width: 50%
}

.advantage-index .container .content .left .item {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    background-color: #e7e4e4;
}

.advantage-index .container .content .left .item:last-child {
    margin-bottom: 0
}

.advantage-index .container .content .left .item .title {
    display: flex;
    align-items: center;
    justify-content: center
}

.advantage-index .container .content .left .item .title .img {
    width: 31px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.advantage-index .container .content .left .item .title .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.advantage-index .container .content .left .item .title h3.big-title {
    width: calc(100% - 65px);
    padding: 0 20px;
    cursor: pointer
}

.advantage-index .container .content .left .item .title .icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-main);
    transform: rotate(0deg);
    transition: all 0.3s linear;
    cursor: pointer
}

.advantage-index .container .content .left .item .title .icon svg {
    fill: var(--color-main)
}

.advantage-index .container .content .left .item .title .icon.active {
    transform: rotate(90deg);
    transition: all 0.3s linear
}

.advantage-index .container .content .left .item .paragraph {
    display: none;
    padding: 10px 52px 0 51px
}

@media (max-width:767px) {
    .advantage-index .container .content .left .item .paragraph {
        padding-right: 15px;
        padding-left: 15px
    }
}

.advantage-index .container .content .right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.advantage-index .container .content .right .img {
    aspect-ratio: 488/512
}

.advantage-index .container .content .right .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain;
    height: 100%
}

@media (max-width:1024px) {
    .advantage-index .container .content {
        margin-bottom: 20px;
        flex-direction: column;
        gap: 20px
    }
}

@media (max-width:1024px) and (max-width:991px) {
    .advantage-index .container .content {
        margin-bottom: 20px
    }
}

@media (max-width:1024px) and (max-width:767px) {
    .advantage-index .container .content {
        margin-bottom: 15px
    }
}

@media (max-width:1024px) {

    .advantage-index .container .content .left,
    .advantage-index .container .content .right {
        width: 100%
    }
}

@media (max-width:1024px) {
    .advantage-index .container .content .right {
        display: flex;
        align-items: center;
        justify-content: center
    }
}

@media (max-width:767px) {
    .advantage-index .container .content {
        gap: 15px
    }
}

.performance-index {
    background: url("html/style/images/bg-performance.webp") no-repeat center;
    background-size: cover
}

@media (max-width:991px) {
    .performance-index {
        overflow: hidden
    }
}

.performance-index .container {
    display: flex;
    align-items: center;
    flex-direction: column
}

.performance-index .container h2.big-title {
    margin-bottom: 15px
}

.performance-index .container>.paragraph {
    margin-bottom: 55px
}

@media (max-width:991px) {
    .performance-index .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .performance-index .container>.paragraph {
        margin-bottom: 15px
    }
}

.performance-index .container .content {
    width: 100%;
    display: flex;
    align-items: center
}

.performance-index .container .content .img {
    width: 50%;
    aspect-ratio: 578/419
}

.performance-index .container .content .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.performance-index .container .content .process {
    width: 50%;
    padding-left: 55px
}

@media (max-width:1024px) {
    .performance-index .container .content .process {
        padding-left: 20px
    }
}

.performance-index .container .content .process .item {
    display: flex;
    align-items: center;
    margin-bottom: 60px
}

@media (max-width:991px) {
    .performance-index .container .content .process .item {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .performance-index .container .content .process .item {
        margin-bottom: 15px
    }
}

.performance-index .container .content .process .item:last-child {
    margin-bottom: 0
}

.performance-index .container .content .process .item .left {
    width: 85px;
    font-size: var(--fs-process);
    font-weight: 300;
    color: var(--color-white)
}

.performance-index .container .content .process .item .right {
    width: calc(100% - 85px)
}

.performance-index .container .content .process .item .right .paragraph {
    margin-bottom: 7px
}

.performance-index .container .content .process .item .right .process-bar {
    width: 100%;
    height: 8px;
    background: var(--color-process);
    border-radius: 360px;
    position: relative
}

.performance-index .container .content .process .item .right .process-bar .process-bar1 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #6363d9;
    width: 0;
    height: 8px;
    border-radius: 360px;
    transition: width 4s ease-in-out
}

.performance-index .container .content .process .item .right .process-bar .process-bar1::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-white)
}

@media (max-width:767px) {
    .performance-index .container .content {
        flex-direction: column;
        gap: 15px
    }

    .performance-index .container .content .img,
    .performance-index .container .content .process {
        width: 100%
    }

    .performance-index .container .content .process {
        padding-left: 0
    }
}

@media (max-width:991px) {
    .infrastructure-index {
        overflow: hidden
    }
}

.infrastructure-index .container {
    display: flex;
    align-items: center;
    flex-direction: column
}

.infrastructure-index .container h2.big-title {
    margin-bottom: 20px
}

@media (max-width:991px) {
    .infrastructure-index .container h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .infrastructure-index .container h2.big-title {
        margin-bottom: 15px
    }
}

.infrastructure-index .container>.paragraph {
    margin-bottom: 50px
}

@media (max-width:991px) {
    .infrastructure-index .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .infrastructure-index .container>.paragraph {
        margin-bottom: 15px
    }
}

.infrastructure-index .container .content {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width:1024px) {
    .infrastructure-index .container .content {
        gap: 20px;
        flex-wrap: wrap;
        align-items: stretch
    }
}

@media (max-width:767px) {
    .infrastructure-index .container .content {
        gap: 15px
    }
}

.infrastructure-index .container .content .item {
    width: calc((100% - 462px) / 2);
    position: absolute
}

.infrastructure-index .container .content .item h3.big-title {
    margin-bottom: 15px
}

.infrastructure-index .container .content .item:nth-child(odd) {
    right: calc((100% - 462px) / 2 + 462px);
    padding-right: 30px
}

.infrastructure-index .container .content .item:nth-child(odd) h3.big-title {
    text-align: right
}

.infrastructure-index .container .content .item:nth-child(odd) .paragraph {
    text-align: right
}

@media (max-width:1024px) {
    .infrastructure-index .container .content .item:nth-child(odd) h3.big-title {
        text-align: left
    }

    .infrastructure-index .container .content .item:nth-child(odd) .paragraph {
        text-align: left
    }
}

.infrastructure-index .container .content .item:nth-child(even) {
    left: calc((100% - 462px) / 2 + 462px);
    padding-left: 30px
}

.infrastructure-index .container .content .item:nth-child(1),
.infrastructure-index .container .content .item:nth-child(2) {
    top: 70px
}

.infrastructure-index .container .content .item:nth-child(3),
.infrastructure-index .container .content .item:nth-child(4) {
    top: 210px
}

.infrastructure-index .container .content .item:nth-child(5),
.infrastructure-index .container .content .item:nth-child(6) {
    top: 360px
}

@media (max-width:1024px) {
    .infrastructure-index .container .content .item {
        position: unset;
        width: calc(50% - 10px);
        padding: 15px !important;
        border-radius: 5px;
        background-color: var(--bg-service)
    }
}

@media (max-width:767px) {
    .infrastructure-index .container .content .item {
        width: 100%
    }
}

.infrastructure-index .container .content>.img {
    aspect-ratio: 462/454;
    width: 462px
}

@media (max-width:1024px) {
    .infrastructure-index .container .content>.img {
        width: 100%
    }
}

.infrastructure-index .container .content>.img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.customer-index {
    background: url("html/style/images/bg-customer-index.webp") no-repeat center;
    background-size: cover
}

@media (max-width:991px) {
    .customer-index {
        overflow: hidden
    }
}

.customer-index .container {
    display: flex;
    align-items: center;
    flex-direction: column
}

.customer-index .container h2.big-title {
    margin-bottom: 20px
}

@media (max-width:991px) {
    .customer-index .container h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .customer-index .container h2.big-title {
        margin-bottom: 15px
    }
}

.customer-index .container .paragraph {
    margin-bottom: 30px
}

@media (max-width:991px) {
    .customer-index .container .paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .customer-index .container .paragraph {
        margin-bottom: 15px
    }
}

.customer-index .container .slide-customer {
    width: 100%;
    margin-bottom: 40px
}

@media (max-width:991px) {
    .customer-index .container .slide-customer {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .customer-index .container .slide-customer {
        margin-bottom: 15px
    }
}

.customer-index .container .slide-customer .list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 35px
}

.customer-index .container .slide-customer .list .item {
    width: calc((100% - 70px) / 3)
}

@media (max-width:1024px) {
    .customer-index .container .slide-customer .list .item {
        width: calc((100% - 35px) / 2)
    }
}

@media (max-width:767px) {
    .customer-index .container .slide-customer .list .item {
        width: 100%
    }
}

.banner-ft-index {
    padding-bottom: 0
}

@media (max-width:991px) {
    .banner-ft-index {
        overflow: hidden
    }
}

.banner-ft-index .container .item {
    width: 100%
}

.banner-ft-index .container .item .img {
    width: 100%;
    aspect-ratio: 1178/310
}

.banner-ft-index .container .item .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain;
    height: 100%
}

.banner-ft-index .container .slide-banner-ft {
    width: 100%
}

@media (max-width:991px) {
    .partner-index {
        overflow: hidden
    }
}

.partner-index .container .slide-partner .img {
    display: flex;
    align-items: center;
    justify-content: center
}

.partner-index .container .slide-partner .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.partner-index .container .slide-partner .item {
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width:767px) {
    .partner-index .container .slide-partner .item {
        padding: 0 7.5px
    }
}

.partner-index .container .slide-partner .list {
    width: 100%;
    display: flex;
    align-items: center
}

.partner-index .container .slide-partner .list .img {
    width: 16.6666666667%
}

.partner-index .container .slide-partner .owl-stage {
    display: flex;
    align-items: stretch
}

.partner-index .container .slide-partner .owl-stage .owl-item .item {
    height: 100%
}

footer {
    background-color: var(--bg-footer)
}

footer .container .top {
    display: flex;
    align-items: flex-start;
    padding-top: 50px;
    padding-bottom: 35px;
    border-bottom: 1px solid var(--bd-footer)
}

@media (max-width:991px) {
    footer .container .top {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    footer .container .top {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

@media (max-width:1024px) {
    footer .container .top {
        flex-wrap: wrap;
        gap: 20px
    }
}

@media (max-width:767px) {
    footer .container .top {
        gap: 15px
    }
}

footer .container .top .row {
    width: 18%;
    padding-right: 50px
}

footer .container .top .row .big-title {
    margin-bottom: 15px
}

footer .container .top .row .paragraph ul li {
    margin-bottom: 5px
}

footer .container .top .row .paragraph ul li:last-child {
    margin-bottom: 0
}

footer .container .top .row:nth-child(1) {
    width: 46%;
    padding-right: 95px
}

footer .container .top .row:last-child {
    padding-right: 0
}

@media (max-width:1024px) {
    footer .container .top .row {
        width: calc(50% - 10px) !important;
        padding-right: 0 !important
    }
}

@media (max-width:767px) {
    footer .container .top .row {
        width: 100% !important
    }
}

footer .container .bottom {
    padding-top: 25px;
    padding-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media (max-width:991px) {
    footer .container .bottom {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    footer .container .bottom {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

@media (max-width:1024px) {
    footer .container .bottom {
        justify-content: center;
        gap: 10px;
        flex-direction: column
    }
}

footer .container .bottom .left {
    display: flex;
    align-items: center;
    width: calc(100% - 126px)
}

footer .container .bottom .left .logo {
    width: 146px;
    aspect-ratio: 146/25
}

footer .container .bottom .left .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

footer .container .bottom .left>p {
    padding-left: 20px;
    padding-right: 5px
}

footer .container .bottom .left .social-ft {
    display: flex;
    align-items: center;
    gap: 10px
}

footer .container .bottom .left .social-ft .icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-main)
}

footer .container .bottom .left .social-ft .icon svg {
    fill: var(--color-main)
}

footer .container .bottom .left .social-ft .icon:hover {
    background-color: var(--color-main)
}

footer .container .bottom .left .social-ft .icon:hover svg {
    fill: var(--bg-service)
}

@media (max-width:1024px) {
    footer .container .bottom .left {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center
    }

    footer .container .bottom .left>p {
        padding: 0
    }

    footer .container .bottom .left .social-ft {
        width: 100%;
        justify-content: center
    }
}

@media (max-width:767px) {
    footer .container .bottom .left>p {
        width: 100%;
        text-align: center
    }
}

footer .container .bottom>.img {
    aspect-ratio: 126/49;
    width: 126px
}

footer .container .bottom>.img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.path .container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 20px
}

@media (max-width:991px) {
    .path .container {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    .path .container {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

.path .container .icon svg {
    color: var(--color-white)
}

.path .container a:hover {
    color: var(--bg-header)
}

.blog {
    margin-bottom: 35px
}

@media (max-width:991px) {
    .blog {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .blog {
        margin-bottom: 15px
    }
}

.blog .container {
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: start
}

.blog .container .left {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-right: 30px
}

@media (max-width:1080px) {
    .blog .container .left {
        margin-bottom: 20px;
        padding-right: 0
    }

    .blog .container .left .page {
        margin-top: 0
    }
}

.blog .container .left .item {
    width: calc(50% - 10px)
}

.blog .container .left .item.main {
    width: 100%
}

@media (max-width:767px) {
    .blog .container .left .item {
        width: 100%
    }
}

@media (max-width:1024px) {
    .blog .container {
        display: block
    }

    .blog .container .left {
        width: 100%
    }
}

@media (max-width:1024px) and (max-width:767px) {
    .blog .container .left {
        gap: 15px
    }
}

.right-blog .category {
    width: 100%;
    padding: 20px 20px 25px 20px;
    border-radius: 10px;
    background-color: var(--bg-category);
    margin-bottom: 20px
}

.right-blog .category h2.big-title {
    margin-bottom: 10px
}

.right-blog .category .item {
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--bd-category)
}

.right-blog .category .item .icon svg {
    fill: var(--color-text)
}

.right-blog .category .item .paragraph {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2
}

.right-blog .category .item:last-child {
    padding-bottom: 0;
    border-bottom: none
}

.right-blog .category .item:hover .icon svg,
.right-blog .category .item.active .icon svg {
    fill: var(--color-main)
}

.right-blog .category .item:hover .paragraph,
.right-blog .category .item.active .paragraph {
    color: var(--color-main)
}

.right-blog .banner-blog {
    display: block;
    width: 100%;
    aspect-ratio: 326/412;
    border-radius: 15px;
    margin-bottom: 20px
}

@media (min-width:992px) {
    .right-blog .banner-blog.sticky {
        position: sticky;
        top: 120px;
        z-index: 1
    }
}

.right-blog .banner-blog img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width:1024px) {
    .right-blog {
        width: 100%
    }
}

.blog-detail {
    margin-bottom: 45px
}

@media (max-width:991px) {
    .blog-detail {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .blog-detail {
        margin-bottom: 15px
    }
}

.blog-detail .container {
    display: grid;
    grid-template-columns: 70% 30%
}

.blog-detail .container .left {
    padding-right: 30px
}

.blog-detail .container .left h1.big-title {
    margin-bottom: 15px
}

.blog-detail .container .left .date-share {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px
}

@media (max-width:991px) {
    .blog-detail .container .left .date-share {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .blog-detail .container .left .date-share {
        margin-bottom: 15px
    }
}

.blog-detail .container .left .date-share .date {
    display: flex;
    align-items: center;
    gap: 10px
}

.blog-detail .container .left .date-share .date .icon svg {
    fill: var(--color-text)
}

.blog-detail .container .left .date-share .share {
    width: 90px;
    height: 25px
}

.blog-detail .container .left>.paragraph {
    padding-bottom: 35px;
    border-bottom: 1px solid var(--bd-blog);
    margin-bottom: 25px
}

@media (max-width:991px) {
    .blog-detail .container .left>.paragraph {
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    .blog-detail .container .left>.paragraph {
        padding-bottom: 15px
    }
}

@media (max-width:991px) {
    .blog-detail .container .left>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .blog-detail .container .left>.paragraph {
        margin-bottom: 15px
    }
}

.blog-detail .container .left .blog-related .title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.blog-detail .container .left .blog-related .title h2.big-title {
    margin-bottom: 20px
}

@media (max-width:991px) {
    .blog-detail .container .left .blog-related .title h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .blog-detail .container .left .blog-related .title h2.big-title {
        margin-bottom: 15px
    }
}

.blog-detail .container .left .blog-related .title .slide-nav {
    display: flex;
    align-items: center;
    gap: 15px
}

.blog-detail .container .left .blog-related .title .slide-nav .prev,
.blog-detail .container .left .blog-related .title .slide-nav .next {
    cursor: pointer
}

.blog-detail .container .left .blog-related .title .slide-nav .prev svg,
.blog-detail .container .left .blog-related .title .slide-nav .next svg {
    fill: var(--color-main)
}

@media (max-width:1024px) {
    .blog-detail .container {
        display: block
    }

    .blog-detail .container .left {
        width: 100%;
        padding-right: 0
    }
}

.policy {
    margin-bottom: 60px
}

@media (max-width:991px) {
    .policy {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .policy {
        margin-bottom: 15px
    }
}

.policy .container {
    display: flex;
    align-items: flex-start;
    gap: 15px
}

.policy .container .left {
    width: 70%
}

.policy .container .left h1.big-title {
    margin-bottom: 25px
}

@media (max-width:991px) {
    .policy .container .left h1.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .policy .container .left h1.big-title {
        margin-bottom: 15px
    }
}

.contact .container .content {
    display: flex;
    align-items: center;
    margin-bottom: 40px
}

@media (max-width:991px) {
    .contact .container .content {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .contact .container .content {
        margin-bottom: 15px
    }
}

.contact .container .content .left {
    width: 50%;
    padding-right: 60px;
    position: relative;
    z-index: 99
}

.contact .container .content .left h2.big-title {
    margin-bottom: 30px
}

@media (max-width:991px) {
    .contact .container .content .left h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .contact .container .content .left h2.big-title {
        margin-bottom: 15px
    }
}

.contact .container .content .left .text {
    padding-bottom: 40px;
    margin-bottom: 35px;
    border-bottom: 1px solid var(--bd-contact)
}

@media (max-width:991px) {
    .contact .container .content .left .text {
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    .contact .container .content .left .text {
        padding-bottom: 15px
    }
}

@media (max-width:991px) {
    .contact .container .content .left .text {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .contact .container .content .left .text {
        margin-bottom: 15px
    }
}

.contact .container .content .left .text .item {
    display: flex;
    align-items: center;
    margin-bottom: 35px
}

@media (max-width:991px) {
    .contact .container .content .left .text .item {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .contact .container .content .left .text .item {
        margin-bottom: 15px
    }
}

.contact .container .content .left .text .item .img {
    width: 33px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.contact .container .content .left .text .item .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.contact .container .content .left .text .item .paragraph {
    width: calc(100% - 33px);
    padding-left: 15px
}

.contact .container .content .left .text .item .paragraph>p:first-child {
    margin-bottom: 10px
}

.contact .container .content .left .text .item .paragraph .phone {
    display: flex;
    align-items: center;
    gap: 25px
}

.contact .container .content .left .text .item .paragraph .phone a {
    position: relative
}

.contact .container .content .left .text .item .paragraph .phone a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 1px;
    height: 100%;
    background-color: var(--bd-contact)
}

@media (max-width:767px) {
    .contact .container .content .left .text .item .paragraph .phone a::before {
        display: none
    }
}

.contact .container .content .left .text .item .paragraph .phone a:last-child::before {
    display: none
}

@media (max-width:767px) {
    .contact .container .content .left .text .item .paragraph .phone {
        gap: 15px;
        flex-direction: column;
        align-items: flex-start
    }
}

.contact .container .content .left .text .item:last-child {
    margin-bottom: 0
}

.contact .container .content .left .social-contact .paragraph {
    margin-bottom: 25px
}

@media (max-width:991px) {
    .contact .container .content .left .social-contact .paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .contact .container .content .left .social-contact .paragraph {
        margin-bottom: 15px
    }
}

.contact .container .content .left .social-contact .list {
    display: flex;
    align-items: center;
    gap: 15px
}

.contact .container .content .left .social-contact .list .img {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: unset
}

.contact .container .content .left .social-contact .list .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.contact .container .content .left .social-contact .list .img .qr-image {
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 120px;
    aspect-ratio: 1188/1569;
    display: none
}

.contact .container .content .left .social-contact .list .img.active .qr-image {
    display: block
}

.contact .container .content .right {
    width: 50%
}

.contact .container .content .right form {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 35px 45px;
    border-radius: 15px;
    background-color: var(--bg-service)
}

.contact .container .content .right form h2.big-title {
    width: 100%;
    margin-bottom: 25px
}

@media (max-width:991px) {
    .contact .container .content .right form h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .contact .container .content .right form h2.big-title {
        margin-bottom: 15px
    }
}

.contact .container .content .right form .form-input,
.contact .container .content .right form .form-textarea {
    width: 100%;
    position: relative
}

.contact .container .content .right form .form-input .icon,
.contact .container .content .right form .form-textarea .icon {
    position: absolute;
    left: 15px
}

.contact .container .content .right form .form-input .icon svg,
.contact .container .content .right form .form-textarea .icon svg {
    fill: var(--color-main)
}

.contact .container .content .right form .form-input input,
.contact .container .content .right form .form-input textarea,
.contact .container .content .right form .form-textarea input,
.contact .container .content .right form .form-textarea textarea {
    width: 100%;
    background: var(--color-white);
    border-radius: 10px;
    padding: 10px 15px 10px 50px;
    font-size: var(--fs-paragraph)
}

.contact .container .content .right form .form-input input::placeholder,
.contact .container .content .right form .form-input textarea::placeholder,
.contact .container .content .right form .form-textarea input::placeholder,
.contact .container .content .right form .form-textarea textarea::placeholder {
    color: var(--color-placeholder);
    font-size: var(--fs-paragraph)
}

.contact .container .content .right form .form-input textarea,
.contact .container .content .right form .form-textarea textarea {
    resize: none;
    height: 150px
}

.contact .container .content .right form .form-input {
    margin-bottom: 10px
}

.contact .container .content .right form .form-input .icon {
    top: 50%;
    transform: translateY(-50%)
}

.contact .container .content .right form .form-textarea {
    margin-bottom: 15px
}

.contact .container .content .right form .form-textarea .icon {
    top: 10px
}

@media (max-width:1024px) {
    .contact .container .content {
        flex-direction: column
    }

    .contact .container .content .left {
        width: 100%;
        margin-bottom: 20px;
        padding-right: 0
    }
}

@media (max-width:1024px) and (max-width:991px) {
    .contact .container .content .left {
        margin-bottom: 20px
    }
}

@media (max-width:1024px) and (max-width:767px) {
    .contact .container .content .left {
        margin-bottom: 15px
    }
}

@media (max-width:1024px) {
    .contact .container .content .right {
        width: 100%
    }

    .contact .container .content .right form {
        padding: 20px
    }
}

@media (max-width:1024px) and (max-width:767px) {
    .contact .container .content .right form {
        padding: 15px
    }
}

.contact .container .banner-contact {
    width: 100%;
    margin-bottom: 60px
}

@media (max-width:991px) {
    .contact .container .banner-contact {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .contact .container .banner-contact {
        margin-bottom: 15px
    }
}

.contact .container .banner-contact .img {
    width: 100%;
    aspect-ratio: 1178/310;
    border-radius: 20px
}

.contact .container .banner-contact .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.contact .container .map {
    margin-top: 40px;
    width: 100%;
    aspect-ratio: 1178/450
}

@media (max-width:991px) {
    .contact .container .map {
        margin-top: 20px
    }
}

.contact .container .map iframe {
    width: 100%;
    height: 100%
}

.banner-ft {
    padding-top: 35px;
    padding-bottom: 35px
}

@media (max-width:991px) {
    .banner-ft {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    .banner-ft {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

@media (max-width:991px) {
    .banner-ft {
        overflow: hidden
    }
}

.banner-ft .img {
    width: 100%;
    aspect-ratio: 1178/310;
    border-radius: 20px;
    display: block;
    overflow: hidden
}

.banner-ft .img img {
    border-radius: 20px;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

@media (max-width:991px) {
    .about {
        overflow: hidden
    }
}

.about .container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px
}

.about .container .item {
    width: 33.3333333333%;
    display: flex;
    align-items: center;
    flex-direction: column
}

.about .container .item .img {
    width: 91px;
    height: 91px;
    border-radius: 50%;
    margin-bottom: 20px
}

@media (max-width:991px) {
    .about .container .item .img {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .about .container .item .img {
        margin-bottom: 15px
    }
}

.about .container .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about .container .item h3.big-title {
    min-height: 22px;
    margin-bottom: 20px
}

@media (max-width:991px) {
    .about .container .item h3.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .about .container .item h3.big-title {
        margin-bottom: 15px
    }
}

@media (max-width:1024px) {
    .about .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px
    }

    .about .container .item {
        width: calc(50% - 10px)
    }
}

@media (max-width:767px) {
    .about .container {
        gap: 15px
    }

    .about .container .item {
        width: 100%
    }
}

.advantage {
    background-color: var(--bg-advantage);
    overflow: hidden
}

.advantage .container h2.big-title {
    margin-bottom: 45px
}

@media (max-width:991px) {
    .advantage .container h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .advantage .container h2.big-title {
        margin-bottom: 15px
    }
}

.advantage .container .list {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 25px;
    position: relative
}

.advantage .container .list:before,
.advantage .container .list:after {
    content: "";
    position: absolute;
    width: 206px;
    height: 194px;
    background: url("html/style/images/bf-advantage.webp") no-repeat center;
    background-size: 100% 100%;
    z-index: 0;
    display: block
}

@media (max-width:767px) {

    .advantage .container .list:before,
    .advantage .container .list:after {
        display: none
    }
}

.advantage .container .list:before {
    top: -30px;
    left: -35px
}

.advantage .container .list:after {
    bottom: -30px;
    right: -35px
}

.advantage .container .list .item {
    position: relative;
    z-index: 1
}

@media (max-width:1024px) {
    .advantage .container .list {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap
    }

    .advantage .container .list .item {
        width: calc(50% - 10px)
    }

    .advantage .container .list .item::before {
        display: none !important
    }
}

@media (max-width:767px) {
    .advantage .container .list {
        gap: 15px
    }

    .advantage .container .list .item {
        width: 100%
    }
}

.statistical {
    background: url("html/style/images/bg-performance.webp") no-repeat center;
    background-size: cover
}

@media (max-width:991px) {
    .statistical {
        overflow: hidden
    }
}

.statistical .container h2.big-title {
    margin-bottom: 15px
}

.statistical .container>.paragraph {
    margin-bottom: 70px
}

@media (max-width:991px) {
    .statistical .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .statistical .container>.paragraph {
        margin-bottom: 15px
    }
}

.statistical .container .list {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.statistical .container .list .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 235px;
    aspect-ratio: 1;
    position: relative
}

.statistical .container .list .item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 235px;
    aspect-ratio: 1;
    background: url("html/style/images/item-statistical.webp") no-repeat center;
    background-size: 100% 100%;
    pointer-events: none
}

.statistical .container .list .item .data,
.statistical .container .list .item sup {
    font-size: var(--fs-data);
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
    color: var(--color-white)
}

.statistical .container .list .item p {
    padding: 0 45px
}

@media (max-width:1024px) {
    .statistical .container .list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px
    }

    .statistical .container .list .item {
        width: calc((100% - 20px) / 2)
    }

    .statistical .container .list .item::before {
        width: 100%
    }
}

@media (max-width:767px) {
    .statistical .container .list {
        gap: 15px
    }

    .statistical .container .list .item {
        width: calc((100% - 15px) / 2)
    }

    .statistical .container .list .item p {
        padding: 0 15px
    }
}

.teamwork {
    background-color: var(--bg-teamwork)
}

@media (max-width:991px) {
    .teamwork {
        overflow: hidden
    }
}

.teamwork .container h2.big-title {
    margin-bottom: 15px
}

.teamwork .container>.paragraph {
    margin-bottom: 65px
}

@media (max-width:991px) {
    .teamwork .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .teamwork .container>.paragraph {
        margin-bottom: 15px
    }
}

.teamwork .container .slide-teamwork {
    width: 100%;
    padding: 0 80px
}

@media (max-width:1024px) {
    .teamwork .container .slide-teamwork {
        padding: 0
    }
}

.teamwork .container .slide-teamwork .owl-nav .owl-prev,
.teamwork .container .slide-teamwork .owl-nav .owl-next {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    position: absolute;
    top: calc(50% - 30px);
    transform: translateY(-50%);
    margin: 0
}

.teamwork .container .slide-teamwork .owl-nav .owl-prev svg,
.teamwork .container .slide-teamwork .owl-nav .owl-next svg {
    fill: var(--color-main)
}

.teamwork .container .slide-teamwork .owl-nav .owl-prev {
    left: -80px
}

.teamwork .container .slide-teamwork .owl-nav .owl-next {
    right: -80px
}

.concept .container {
    display: flex;
    align-items: center;
    flex-direction: column
}

.concept .container .img {
    width: 85px;
    height: 71px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px
}

@media (max-width:991px) {
    .concept .container .img {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .concept .container .img {
        margin-bottom: 15px
    }
}

.concept .container .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.concept .container h2.big-title {
    margin-bottom: 35px
}

@media (max-width:991px) {
    .concept .container h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .concept .container h2.big-title {
        margin-bottom: 15px
    }
}

.concept .container .paragraph {
    padding: 0 130px
}

@media (max-width:1024px) {
    .concept .container .paragraph {
        padding: 0
    }
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden
}

.table-scroll table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px
}

@media (max-width:991px) {
    .table-scroll table {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .table-scroll table {
        margin-bottom: 15px
    }
}

.table-scroll table thead tr th {
    background: var(--color-main);
    color: var(--color-white);
    padding: 15px;
    vertical-align: top;
    border: none !important;
    white-space: nowrap
}

.table-scroll table thead tr th strong {
    color: var(--color-white)
}

.table-scroll table thead tr th:first-child {
    border-radius: 10px 0 0 0
}

.table-scroll table thead tr th:last-child {
    border-radius: 0 10px 0 0
}

.table-scroll table tbody tr td {
    padding: 15px;
    border: 1px solid var(--bd-table-compare);
    vertical-align: middle;
    background-color: var(--color-white)
}

.table-scroll table tbody tr td strong {
    font-weight: 600
}

.table-scroll table tbody tr td:first-child {
    text-align: left
}

.table-scroll table tbody tr td .sale b {
    display: none;
    color: var(--bg-sale);
    font-weight: 400;
    font-size: var(--fs-paragraph)
}

.table-scroll table tbody tr td .sale.active b {
    display: inline-block
}

.table-scroll table tbody tr td .price b {
    color: #5d5bd7;
    font-weight: 600
}

.table-scroll table tbody tr td .signup {
    height: 28px;
    width: 100px;
    font-weight: 600;
    font-size: var(--fs-paragraph);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 360px;
    background: linear-gradient(90deg, rgb(246, 133, 212) 0, rgb(185, 81, 235) 100%);
    border: 1px solid var(--color-white)
}

.table-scroll table tbody tr td .signup:hover {
    border: 1px solid var(--color-main);
    background: unset;
    color: var(--color-main)
}

.table-scroll table tbody tr:nth-child(even) td {
    background-color: var(--bg-table-compare)
}

.table-scroll table tbody .price {
    white-space: nowrap
}

@media (max-width:1024px) {
    .table-scroll table {
        width: 1180px
    }
}

@media (max-width:1024px) {
    .table-scroll table {
        width: 800px
    }
}

.table-scroll .note {
    font-style: italic;
    margin-bottom: 15px
}

.table-scroll.type1-price table thead tr th,
.table-scroll.type1-price table tbody tr td {
    white-space: nowrap;
    text-align: center
}

.table-scroll.type1-update table {
    width: 100%
}

.table-scroll.type1-update table thead tr th,
.table-scroll.type1-update table tbody tr td {
    white-space: nowrap;
    text-align: center
}

@media (min-width:992px) {

    .table-scroll.type1-update table thead tr th,
    .table-scroll.type1-update table tbody tr td {
        width: 33.3333333333%
    }
}

.table-scroll.type1-update table tbody tr td:nth-child(2) {
    color: var(--color-price);
    font-weight: bold
}

.table-scroll.type1-compare table thead tr th {
    width: 25%
}

.table-scroll.type5-price table thead tr th {
    width: 13%
}

.table-scroll.type5-price table thead tr th:nth-child(1) {
    width: 17.5%
}

.table-scroll.type5-price table thead tr th:nth-child(7) {
    width: 17.5%
}

.table-scroll.type5-compare table thead tr th {
    width: 40%
}

.table-scroll.type5-compare table thead tr th:nth-child(1) {
    width: 20%
}

@media (max-width:1024px) {

    .table-scroll.type6-compare table,
    .table-scroll.type6-price table {
        width: auto
    }

    .table-scroll.type6-compare table thead tr th,
    .table-scroll.type6-compare table tbody tr td,
    .table-scroll.type6-price table thead tr th,
    .table-scroll.type6-price table tbody tr td {
        white-space: nowrap;
        text-align: center
    }
}

.price-list {
    background: url("html/style/images/bg-price-list.webp") no-repeat center;
    background-size: 100% 100%
}

.price-list .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.price-list .container h2.big-title {
    margin-bottom: 20px
}

@media (max-width:991px) {
    .price-list .container h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .price-list .container h2.big-title {
        margin-bottom: 15px
    }
}

.price-list .container>.paragraph {
    width: 100%;
    margin-bottom: 25px;
    padding: 0 85px
}

@media (max-width:991px) {
    .price-list .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .price-list .container>.paragraph {
        margin-bottom: 15px
    }
}

@media (max-width:1024px) {
    .price-list .container>.paragraph {
        padding: 0
    }
}

.price-list .container .type-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden
}

.price-list .container .type-scroll .type {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px
}

@media (max-width:991px) {
    .price-list .container .type-scroll .type {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .price-list .container .type-scroll .type {
        margin-bottom: 15px
    }
}

.price-list .container .type-scroll .type .item {
    height: 42px;
    min-width: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--color-white);
    border-radius: 360px;
    cursor: pointer
}

.price-list .container .type-scroll .type .item .sale {
    font-size: var(--fs-sale);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--bg-sale);
    height: 21px;
    min-width: 41px;
    display: none;
    border-radius: 360px
}

.price-list .container .type-scroll .type .item.active .sale {
    display: flex;
    align-items: center;
    justify-content: center
}

.price-list .container .type-scroll .type .item:hover,
.price-list .container .type-scroll .type .item.show {
    background: linear-gradient(90deg, rgb(246, 133, 212) 0, rgb(185, 81, 235) 100%);
    color: var(--color-white)
}

.price-list .container .type-scroll .type .item:hover p,
.price-list .container .type-scroll .type .item.show p {
    color: var(--color-white)
}

.price-list .container .type-scroll .type .item:hover .sale,
.price-list .container .type-scroll .type .item.show .sale {
    background-color: var(--color-white);
    color: var(--color-sale)
}

@media (max-width:1024px) {
    .price-list .container .type-scroll .type {
        justify-content: flex-start;
        width: unset
    }

    .price-list .container .type-scroll .type .item {
        width: 155px
    }
}

.price-list .container .slide-price {
    width: 100%;
    margin-bottom: 35px
}

@media (max-width:991px) {
    .price-list .container .slide-price {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .price-list .container .slide-price {
        margin-bottom: 15px
    }
}

.price-list .container .slide-price .owl-nav .owl-prev,
.price-list .container .slide-price .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0
}

.price-list .container .slide-price .owl-nav .owl-prev:hover,
.price-list .container .slide-price .owl-nav .owl-next:hover {
    background-color: unset
}

.price-list .container .slide-price .owl-nav .owl-prev svg,
.price-list .container .slide-price .owl-nav .owl-next svg {
    fill: var(--color-main)
}

.price-list .container .slide-price .owl-nav .owl-prev {
    right: 100%
}

.price-list .container .slide-price .owl-nav .owl-next {
    left: 100%
}

.price-list.sslCertification .container>.paragraph {
    margin-bottom: 30px
}

@media (max-width:991px) {
    .price-list.sslCertification .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .price-list.sslCertification .container>.paragraph {
        margin-bottom: 15px
    }
}

.price-list.sslCertification .container .table-scroll {
    margin-bottom: 15px
}

.advantage-dedicated {
    background: url("html/style/images/bg-advantage-dedicated.webp") no-repeat center;
    background-size: 100% 100%
}

@media (max-width:1024px) {
    .advantage-dedicated {
        background-size: auto 100%
    }
}

.advantage-dedicated .container {
    display: flex;
    align-items: center;
    flex-direction: column
}

.advantage-dedicated .container h2.big-title {
    margin-bottom: 10px
}

.advantage-dedicated .container>.paragraph {
    margin-bottom: 60px
}

@media (max-width:991px) {
    .advantage-dedicated .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .advantage-dedicated .container>.paragraph {
        margin-bottom: 15px
    }
}

.advantage-dedicated .container .list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative
}

.advantage-dedicated .container .list .item {
    width: calc((100% - 377px) / 2);
    display: flex;
    align-items: flex-start;
    position: absolute
}

.advantage-dedicated .container .list .item .img {
    width: 91px;
    height: 91px
}

.advantage-dedicated .container .list .item .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.advantage-dedicated .container .list .item .text {
    width: calc(100% - 91px)
}

.advantage-dedicated .container .list .item .text h3.big-title {
    margin-bottom: 15px
}

.advantage-dedicated .container .list .item:nth-child(even) {
    flex-direction: row-reverse;
    left: 0
}

.advantage-dedicated .container .list .item:nth-child(even) .text {
    padding-right: 30px
}

.advantage-dedicated .container .list .item:nth-child(even) .text h3.big-title {
    text-align: right
}

.advantage-dedicated .container .list .item:nth-child(even) .text .paragraph {
    text-align: right
}

.advantage-dedicated .container .list .item:nth-child(odd) {
    right: 0
}

.advantage-dedicated .container .list .item:nth-child(odd) .text {
    padding-left: 30px
}

.advantage-dedicated .container .list .item:nth-child(1),
.advantage-dedicated .container .list .item:nth-child(2) {
    top: 0
}

.advantage-dedicated .container .list .item:nth-child(3),
.advantage-dedicated .container .list .item:nth-child(4) {
    top: 255px
}

.advantage-dedicated .container .list .center {
    width: 377px;
    height: 418px
}

.advantage-dedicated .container .list .center img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width:1024px) {
    .advantage-dedicated .container .list {
        gap: 20px;
        flex-wrap: wrap
    }

    .advantage-dedicated .container .list .item {
        position: unset;
        flex-direction: row !important;
        width: calc(50% - 10px)
    }

    .advantage-dedicated .container .list .item .text {
        width: calc(100% - 91px);
        padding-left: 15px !important;
        padding-right: 0 !important
    }

    .advantage-dedicated .container .list .item .text h3.big-title {
        text-align: left !important;
        margin-bottom: 15px
    }

    .advantage-dedicated .container .list .item .text .paragraph {
        text-align: left !important
    }

    .advantage-dedicated .container .list .center {
        display: none
    }
}

@media (max-width:767px) {
    .advantage-dedicated .container .list {
        gap: 15px
    }

    .advantage-dedicated .container .list .item {
        width: 100%
    }
}

.advantage-dedicated .container .content {
    width: 100%;
    display: flex;
    align-items: center
}

.advantage-dedicated .container .content .left {
    width: 50%;
    padding-right: 23.5px
}

.advantage-dedicated .container .content .left .img {
    width: 100%;
    aspect-ratio: 564/510
}

.advantage-dedicated .container .content .left .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.advantage-dedicated .container .content .right {
    width: 50%;
    padding-left: 30px
}

.advantage-dedicated .container .content .right .item {
    padding: 15px 0;
    border-bottom: 1px solid var(--color-white)
}

.advantage-dedicated .container .content .right .item .title {
    display: flex;
    align-items: center
}

.advantage-dedicated .container .content .right .item .title .icon {
    width: 35px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center
}

.advantage-dedicated .container .content .right .item .title .icon img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.advantage-dedicated .container .content .right .item .title h3 {
    width: calc(100% - 50px);
    padding-left: 20px;
    padding-right: 25px
}

.advantage-dedicated .container .content .right .item .title .btn-down {
    transform: rotate(0);
    transition: all 0.3s linear;
    cursor: pointer
}

.advantage-dedicated .container .content .right .item .title .btn-down svg {
    fill: var(--color-white)
}

.advantage-dedicated .container .content .right .item .paragraph {
    width: 100%;
    padding: 15px 40px 0 55px;
    display: none
}

.advantage-dedicated .container .content .right .item:first-child {
    padding-top: 0
}

.advantage-dedicated .container .content .right .item:last-child {
    padding-bottom: 0;
    border: 0
}

.advantage-dedicated .container .content .right .item.active .title .btn-down {
    transform: rotate(-180deg);
    transition: all 0.3s linear
}

@media (max-width:1024px) {
    .advantage-dedicated .container .content {
        flex-direction: column
    }

    .advantage-dedicated .container .content .left,
    .advantage-dedicated .container .content .right {
        width: 100%
    }

    .advantage-dedicated .container .content .left {
        padding-right: 0;
        margin-bottom: 20px
    }
}

@media (max-width:1024px) and (max-width:991px) {
    .advantage-dedicated .container .content .left {
        margin-bottom: 20px
    }
}

@media (max-width:1024px) and (max-width:767px) {
    .advantage-dedicated .container .content .left {
        margin-bottom: 15px
    }
}

@media (max-width:1024px) {
    .advantage-dedicated .container .content .right {
        padding-right: 0
    }
}

.advantage-dedicated.sharedWeb .container h2.big-title {
    margin-bottom: 60px
}

@media (max-width:991px) {
    .advantage-dedicated.sharedWeb .container h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .advantage-dedicated.sharedWeb .container h2.big-title {
        margin-bottom: 15px
    }
}

.quote {
    padding-bottom: 45px
}

@media (max-width:1024px) {
    .quote {
        padding-bottom: 30px
    }
}

@media (max-width:767px) {
    .quote {
        padding-bottom: 20px
    }
}

.quote .container {
    display: flex;
    align-items: center
}

.quote .container .left {
    width: 55%
}

.quote .container .left h2.big-title {
    margin-bottom: 25px
}

@media (max-width:991px) {
    .quote .container .left h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .quote .container .left h2.big-title {
        margin-bottom: 15px
    }
}

.quote .container .left .paragraph {
    width: 90%;
    margin-bottom: 30px
}

@media (max-width:991px) {
    .quote .container .left .paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .quote .container .left .paragraph {
        margin-bottom: 15px
    }
}

.quote .container .left form {
    width: 93%
}

.quote .container .left form .group-input {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

@media (max-width:991px) {
    .quote .container .left form .group-input {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .quote .container .left form .group-input {
        margin-bottom: 15px
    }
}

.quote .container .left form .group-input input,
.quote .container .left form .group-input select,
.quote .container .left form .group-input textarea {
    width: calc(50% - 10px);
    font-size: var(--fs-paragraph);
    color: var(--color-quote);
    padding: 10px 15px;
    border: 1px solid var(--bd-quote);
    border-radius: 5px
}

.quote .container .left form .group-input input::placeholder,
.quote .container .left form .group-input select::placeholder,
.quote .container .left form .group-input textarea::placeholder {
    font-size: var(--fs-paragraph);
    color: var(--color-quote)
}

.quote .container .left form .group-input.textarea input:nth-of-type(3) {
    width: 100%
}

.quote .container .left form .group-input textarea {
    height: 80px;
    width: 100%;
    resize: none
}

.quote .container .right {
    width: 45%;
    padding-left: 40px
}

.quote .container .right .img {
    width: 100%;
    aspect-ratio: 489/357
}

.quote .container .right .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width:1024px) {
    .quote .container {
        flex-direction: column
    }

    .quote .container .left {
        width: 100%;
        margin-bottom: 20px
    }
}

@media (max-width:1024px) and (max-width:991px) {
    .quote .container .left {
        margin-bottom: 20px
    }
}

@media (max-width:1024px) and (max-width:767px) {
    .quote .container .left {
        margin-bottom: 15px
    }
}

@media (max-width:1024px) {
    .quote .container .left .paragraph {
        width: 100%
    }
}

@media (max-width:1024px) {
    .quote .container .left form {
        width: 100%
    }
}

@media (max-width:1024px) {
    .quote .container .right {
        width: 100%;
        padding-left: 0
    }
}

@media (max-width:767px) {
    .quote .container .left form .group-input {
        gap: 15px
    }

    .quote .container .left form .group-input input,
    .quote .container .left form .group-input select {
        width: 100%
    }
}

.quote.sharedWeb .container .left {
    display: flex;
    align-items: flex-start;
    flex-direction: column
}

.quote.sharedWeb .container .left h2.big-title {
    margin-bottom: 20px
}

@media (max-width:991px) {
    .quote.sharedWeb .container .left h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .quote.sharedWeb .container .left h2.big-title {
        margin-bottom: 15px
    }
}

.quote.sharedWeb .container .left .paragraph {
    margin-bottom: 25px
}

@media (max-width:991px) {
    .quote.sharedWeb .container .left .paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .quote.sharedWeb .container .left .paragraph {
        margin-bottom: 15px
    }
}

.compare .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.compare .container h2.big-title {
    margin-bottom: 20px
}

@media (max-width:991px) {
    .compare .container h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .compare .container h2.big-title {
        margin-bottom: 15px
    }
}

.compare .container>.paragraph {
    margin-bottom: 25px;
    padding: 0 95px
}

@media (max-width:991px) {
    .compare .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .compare .container>.paragraph {
        margin-bottom: 15px
    }
}

@media (max-width:1024px) {
    .compare .container>.paragraph {
        padding: 0
    }
}

.compare.sslCertification {
    padding-bottom: 25px
}

.compare.sslCertification .table-scroll table {
    margin-bottom: 25px
}

@media (max-width:991px) {
    .compare.sslCertification .table-scroll table {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .compare.sslCertification .table-scroll table {
        margin-bottom: 15px
    }
}

.compare.sslCertification .table-scroll .note {
    font-style: italic;
    margin-bottom: 15px
}

.compare.cloud {
    padding-bottom: 0
}

.compare.cloud .container .table-scroll {
    margin-bottom: 30px
}

@media (max-width:991px) {
    .compare.cloud .container .table-scroll {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .compare.cloud .container .table-scroll {
        margin-bottom: 15px
    }
}

.advantage-cloud {
    background-color: var(--bg-advantage-cloud);
    padding-bottom: 235px
}

@media (max-width:1024px) {
    .advantage-cloud {
        padding-bottom: 30px
    }
}

@media (max-width:767px) {
    .advantage-cloud {
        padding-bottom: 20px
    }
}

.advantage-cloud .container h2.big-title {
    margin-bottom: 10px
}

.advantage-cloud .container>.paragraph {
    margin-bottom: 60px
}

@media (max-width:991px) {
    .advantage-cloud .container>.paragraph {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .advantage-cloud .container>.paragraph {
        margin-bottom: 15px
    }
}

.advantage-cloud .container .list {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.advantage-cloud .container .list .item {
    position: absolute;
    width: calc((100% - 373px) / 2);
    display: flex;
    align-items: flex-start
}

.advantage-cloud .container .list .item .img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 62px
}

.advantage-cloud .container .list .item .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain
}

.advantage-cloud .container .list .item .text {
    width: calc(100% - 56px)
}

.advantage-cloud .container .list .item .text h3.big-title {
    margin-bottom: 15px
}

.advantage-cloud .container .list .item:nth-child(odd) {
    flex-direction: row-reverse;
    left: 0
}

.advantage-cloud .container .list .item:nth-child(odd) .text {
    padding-right: 20px
}

.advantage-cloud .container .list .item:nth-child(odd) .text h3.big-title {
    text-align: right
}

.advantage-cloud .container .list .item:nth-child(odd) .text .paragraph {
    text-align: right
}

.advantage-cloud .container .list .item:nth-child(even) {
    right: 0
}

.advantage-cloud .container .list .item:nth-child(1),
.advantage-cloud .container .list .item:nth-child(2) {
    top: 15px
}

.advantage-cloud .container .list .item:nth-child(3),
.advantage-cloud .container .list .item:nth-child(4) {
    top: 270px
}

.advantage-cloud .container .list .center {
    width: 373px;
    height: 310px
}

.advantage-cloud .container .list .center img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width:1024px) {
    .advantage-cloud .container .list {
        gap: 20px;
        flex-wrap: wrap
    }

    .advantage-cloud .container .list .item {
        position: unset;
        width: calc(50% - 10px);
        flex-direction: row !important
    }

    .advantage-cloud .container .list .item .text {
        padding-left: 20px !important;
        padding-right: 0 !important
    }

    .advantage-cloud .container .list .item .text h3.big-title {
        text-align: left !important
    }

    .advantage-cloud .container .list .item .text .paragraph {
        text-align: left !important
    }

    .advantage-cloud .container .list .center {
        display: none
    }
}

@media (max-width:767px) {
    .advantage-cloud .container .list {
        gap: 15px
    }

    .advantage-cloud .container .list .item {
        width: 100%
    }

    .advantage-cloud .container .list .item .text {
        padding-left: 15px !important
    }
}

.benefit {
    background: url("html/style/images/bg-benifit.webp") center no-repeat;
    background-size: 100% 100%
}

.benefit .container h2.big-title {
    margin-bottom: 40px
}

@media (max-width:991px) {
    .benefit .container h2.big-title {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .benefit .container h2.big-title {
        margin-bottom: 15px
    }
}

.benefit .container .list {
    display: flex;
    align-items: stretch;
    gap: 20px
}

.benefit .container .list .item {
    width: 25%
}

@media (max-width:1024px) {
    .benefit .container .list {
        flex-wrap: wrap
    }

    .benefit .container .list .item {
        width: calc(50% - 10px)
    }
}

@media (max-width:767px) {
    .benefit .container .list .item {
        width: 100%
    }
}

.text-center {
    text-align: center
}

.type-table-price table thead tr th {
    font-weight: bold
}

.type-table-price table tbody tr td:first-child {
    font-weight: bold
}

.type-table-price table tbody tr td img {
    margin-bottom: -5px
}

.clrindexknh {
    margin: 30px 0;
    background-color: #e8e9ee;
    padding: 25px;
    border-radius: 15px
}

.clrindexknh svg {
    transition: transform 0.3s linear
}

.clrindexknh svg.active {
    transform: rotate(180deg)
}

.clrindexknh .indxtitle {
    cursor: pointer;
    color: var(--color-main);
    display: flex;
    align-items: center;
    gap: 15px;
    text-transform: uppercase;
    font-weight: 700
}

.clrindexknh .indxtitle svg:first-child {
    width: 20px;
    height: 20px
}

.clrindexknh .indxtitle svg {
    fill: var(--color-main)
}

.clrindexknh .indxtitle svg:last-child {
    margin-left: auto
}

.clrindexknh .ctindxknh {
    margin-top: 15px
}

.clrindexknh span {
    cursor: pointer
}

.clrindexknh span:hover {
    color: var(--color-main)
}

.clrindexknh h4,
.clrindexknh h5 {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600
}

.clrindexknh h6 {
    font-weight: 400;
    padding-left: 15px;
    font-size: 14px;
    margin-bottom: 15px
}

.clrindexknh.fixed {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    border-radius: 5px;
    width: 45px;
    height: 45px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    transition: all 0.3s linear;
    z-index: 10
}

.clrindexknh.fixed .indxtitle svg:first-child {
    width: 25px;
    height: 25px;
    cursor: pointer
}

.clrindexknh.fixed .wrapper {
    width: 270px;
    height: 370px;
    overflow: auto;
    border-radius: 0
}

.clrindexknh.fixed .wrapper .mucluc {
    position: sticky;
    top: 0;
    background-color: #e8e9ee
}

.clrindexknh.fixed .wrapper .table-of-content {
    opacity: 0;
    pointer-events: none
}

.clrindexknh.fixed.active {
    padding: 15px;
    width: 300px;
    height: 400px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4)
}

.clrindexknh.fixed.active .table-of-content {
    opacity: 1;
    pointer-events: all
}

.clrindexknh.fixed.none {
    display: none
}

.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: #f1f1f1
}

.popup-index {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s linear
}

@media (max-width:991px) {
    .popup-index {
        width: 80%
    }
}

@media (max-width:767px) {
    .popup-index {
        width: 90%;
        max-width: calc(100vw - 60px);
        max-height: calc(100vh - 60px);
        aspect-ratio: unset
    }
}

.popup-index.active {
    opacity: 1;
    pointer-events: all
}

.popup-index .img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain;
    height: auto;
    max-height: 60vh
}

.popup-index .exit-popup {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer
}

.popup-index .exit-popup svg {
    fill: var(--color-white);
    width: 20px;
    height: 20px
}