body,div,span,h1,h2,h3,h4,h5,h6,object,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,select,textarea,input,
html,iframe,article,aside,canvas,details,figcaption,figure,footer,hgroup,menu,header,nav,section,summary,time,mark,audio,video{margin:0;padding:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,hgroup,menu,nav,section{display:block;}
@font-face{font-family: 'CenturBold'; src: url('fonts/UTMCenturBold.eot'); font-weight: bold; font-style: normal;
    src: url('fonts/UTMCenturBold.eot?#iefix') format('embedded-opentype'), url('fonts/UTMCenturBold.woff2') format('woff2'), url('fonts/UTMCenturBold.woff') format('woff'), url('fonts/UTMCenturBold.ttf') format('truetype'), url('fonts/UTMCenturBold.svg#UTMCenturBold') format('svg');
}
body{background:#fff;font:15px/1.6 Roboto,Arial,Verdana,sans-serif;color:#333;}
h1,h2,h3,h4,h5,h6{margin:0;}
a{color:#0782c1;text-decoration:none;outline:0;}
img{display:block;max-width:100%;}
select,textarea,input:not([type='radio']):not([type='checkbox']){box-sizing:border-box;width:100%;height:40px;border:1px solid #d7d7d7;font:14px Roboto;outline:0;-moz-appearance:none;-webkit-appearance:none;transition:all 0.25s ease 0s;}
select,input[type='date'],input[type='time']{background:#fff url(images/select.png) right 9px center no-repeat;}select,button,input[type='submit']{cursor:pointer;}
select,input[type='text'],input[type='number'],input[type='password']{text-indent:10px;}
input[type='submit']{background:#dc241a;border:0!important;text-transform:uppercase;text-indent:0;color: #fff;}
input[type='submit']:hover{background: #0292db;}
textarea{display:block;height:90px;padding:10px;}
textarea::placeholder,input::placeholder{color:#a7a7a7;}
.form-item{position: relative; margin-bottom: 25px;}
.form-item span{display: block; margin-bottom: 5px;}
.form-item input.error,.form-item textarea.error{border:1px solid #ed1c24;}
.form-item i{position:absolute;right:10px;bottom:10px;display:none;width:22px;background:#d7d7d7;border-radius:50%;font-style:normal;text-align:center;color:#fff;cursor:pointer;}
.form-item label{position:absolute;top:100%;left:0;font-size:12px;color:#ed1c24;}
.wrap{position:relative;margin:auto;}.wow{opacity:0;}
.clear{width:0;height:0;font-size:0;clear:both;overflow:hidden;zoom:1;}.clear:before,.clear:after{content:'';display:block;height:0;overflow:hidden;}.clear:after{clear: both;}
.header-top{position: relative; z-index: 92;}
.logo{position: relative; float: left;}
.logo a{display: block;}
.logo a span{position: absolute; width: 0; height: 0; overflow: hidden;}
.name{float: left; text-align: center;}
.name p:nth-child(1){font-family: CenturBold; text-transform: uppercase; color: #0292db;}
.name p:nth-child(2){font-family: CenturBold; text-transform: uppercase; color: #dc241a; text-shadow:
    0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3,
    0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3, 0 0 3px #f3f3f3;}
.name p:nth-child(3){color: #0292db;}
.button{position: absolute; right: 0;}
.button a{float: left; display: block; padding: 0 12px; background: #0292db no-repeat top 9px right 12px; border-radius: 3px; line-height: 30px; color: #fff; transition: all 0.25s ease 0s;}
.button a:hover{background-color: #dc241a;}
.button a:nth-child(1){padding-right: 23px; background-image: url(images/right.png);}
.button a:nth-child(2){margin-left: 10px;}
.search{position: absolute; right: 0; width: 250px; height: 40px; margin: auto;}
.search input[type='text']{float: left; width: calc(100% - 40px); background: #eee; border: 0; text-indent: 15px;}
.search input[type='submit']{float: right; width: 40px; background: #eee url(images/search.png) no-repeat center;}
.main-prev{margin-bottom: 20px;}
.main-toc{position: relative; margin-bottom: 20px; padding: 10px 10px 10px 15px; background: #f7f7f7; border: 1px solid #d7d7d7;}
.main-toc-title{font-size: 18px;}
.main-toc-button{position: absolute; top: 10px; right: 10px; width: 28px; cursor: pointer;}
.main-toc-button:active{transform: translateY(1px);}
.main-toc-button i{text-align: center; line-height: 28px; color: #dc241a;}
.main-toc-list{box-sizing: border-box; counter-reset: item; padding: 5px 0 0 5px;}
.main-toc-list ul{list-style: none;}
.main-toc-list ul li a{font-size: 16px; color: #333;}
.main-toc-list ul li a:hover{text-decoration: underline;}
.main-toc-list ul ul li a{font-size: 15px;}
.main-toc-list ul ul ul li a{font-size: 14px;}
.main-toc-list > ul > li > a:before{counter-increment: item; content: counters(item,"")" "; font-size: 16px;}
.main-toc-list > ul > ul{counter-reset: itemitem; padding-left: 14px;}
.main-toc-list > ul > ul > li > a:before{counter-increment: itemitem; content: counters(item,"")"." counters(itemitem,"")" "; font-size: 15px;}
.main-toc-list > ul > ul > ul{counter-reset: itemitemitem; padding-left: 25px;}
.main-toc-list > ul > ul > ul > li > a:before{counter-increment: itemitemitem; content: counters(item,"")"."counters(itemitem,"")"."counters(itemitemitem,"")" ";}
.main-toc-list-2{display: none;}
.main-detail ul, .main-detail ol{margin-left: 35px;}
.main-detail img{display: inline-block!important; max-width: 100%; height: auto!important; margin: 0!important;}   
.main-detail table{width: 100%!important; border-collapse: collapse; border-color: #d7d7d7;}
.main-detail iframe{margin: 0 auto!important;}
.main-detail h2{font-size: 20px; font-weight: 700;}
.main-detail h3{font-size: 18px; font-weight: 700;}
.main-detail h4{font-size: 16px; font-weight: 500;}
.main-share{margin: 27px 0 18px; text-align: right; line-height: 9px;}
.main-page{text-align: center; margin-bottom: 30px;}
.main-page li{display: inline-block; margin: 0 5px;}
.main-page li a{display: block; width: 35px; background: #f3f3f3; font-weight: 700; line-height: 35px; color: #333; transition: all 0.25s ease 0s;}
.main-page li a:hover, .main-page li a.active{background: #0292db; color: #fff;}
.footer-top{padding: 50px 0 30px; background: #0292db; border-top: 0; line-height: 20px; color: #fff;}
.footer-top ul{list-style: none;}
.footer-top a{color: #fff;}
.footer-info li{margin-bottom: 5px; padding-left: 25px; line-height: 25px;}
.footer-info li:nth-child(1){position: relative; margin-bottom: 0; padding: 0; font-size: 18px; font-weight: 500; text-transform: uppercase; line-height: 1.6;}
.footer-info li:nth-child(1):after{content: ''; display: block; width: 75px; height: 1px; margin: 5px 0 30px; background: #fff;}
.footer-info li.f-local{background: url(images/a.png) no-repeat center left;}
.footer-info li.f-phone{background: url(images/p.png) no-repeat center left;}
.footer-info li.f-hotline{padding-left: 0;}
.footer-info li.f-email{margin-bottom: 0; background: url(images/e.png) no-repeat center left;}
.footer-list{float: left; padding-top: 64px;}
.footer-list ul li{position: relative; margin-bottom: 5px; padding-left: 15px; line-height: 25px;}
.footer-list li:nth-child(5){margin-bottom: 0;}
.footer-list ul li:after{content: ''; position: absolute; bottom: 9px; left: 0; width: 6px; height: 6px; background: #fff; border-radius: 50%;}
.footer-right{position: relative; margin-top: 20px;}
.footer-right p{font-size: 18px; text-transform: uppercase;}
.footer-social{position: absolute; top: 0; left: 100px;}
.footer-social a{float: left;}
.footer-social a:nth-child(1){margin-right: 20px;}
.footer-bottom{background: #0179b6; border-top: 1px solid #3ca4d8; text-align: center; color: #fff;}
.footer-bottom a{color: #fff;}
.footer-fixed{position: fixed; top: 0; right: 5px; bottom: 0; height: 134px; margin: auto; z-index: 99991;}
.footer-fixed a{display: block; width: 30px; height: 30px; margin-bottom: 5px; background-size: contain; box-shadow: 0 0 3px 1px rgba(0,0,0,0.25);}
.footer-fixed a:nth-child(1){background-image: url(images/facebook.png);}
.footer-fixed a:nth-child(2){background-image: url(images/messenger.png);}
.footer-fixed a:nth-child(3){background-image: url(images/zalo.png);}
.footer-fixed a:nth-child(4){background-image: url(images/email.png); margin-bottom: 0}
.footer-register{position: fixed; bottom: 0; left: 15px; display: block; padding: 7px 20px 5px; background: #dc241a; border-radius: 10px 10px 0 0; font-size: 18px; font-weight: 500; color: #fff; z-index: 99991;}
.footer-register i{margin-right: 15px;}
.top{position: fixed; right: 10px; display: none; width: 40px; background: #333; text-align: center; line-height: 40px; color: #fff; opacity: 0.5; cursor: pointer; z-index: 99991;}
.top:hover{opacity: 0.75;}
.icon-bar {
    position: fixed;
    bottom: 5px;
    left: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  #foo {
    display:flex;
    align-items:center;
   }



   @import url('https://fonts.googleapis.com/css?family=Barlow');

   body1 {
     background: #310404 url(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     font-family: 'Barlow', sans-serif;
   }
   .container1 {
     width: 100%;
     position: relative;
     overflow: hidden;
   }
   a {
     text-decoration: none;
   }
   h1.main, p.demos {
     -webkit-animation-delay: 18s;
     -moz-animation-delay: 18s;
     -ms-animation-delay: 18s;
     animation-delay: 18s;
   }
   .sp-container {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     z-index: 0;
     background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
     background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
     background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
     background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
   }
   .sp-content {
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0px;
     top: 0px;
     z-index: 1000;
   }
   .sp-container h2 {
     position: absolute;
     top: 50%;
     line-height: 100px;
     height: 90px;
     margin-top: -50px;
     font-size: 90px;
     width: 100%;
     text-align: center;
     color: transparent;
     -webkit-animation: blurFadeInOut 3s ease-in backwards;
     -moz-animation: blurFadeInOut 3s ease-in backwards;
     -ms-animation: blurFadeInOut 3s ease-in backwards;
     animation: blurFadeInOut 3s ease-in backwards;
   }
   .sp-container h2.frame-1 {
     -webkit-animation-delay: 0s;
     -moz-animation-delay: 0s;
     -ms-animation-delay: 0s;
     animation-delay: 0s;
   }
   .sp-container h2.frame-2 {
     -webkit-animation-delay: 3s;
     -moz-animation-delay: 3s;
     -ms-animation-delay: 3s;
     animation-delay: 3s;
   }
   .sp-container h2.frame-3 {
     -webkit-animation-delay: 6s;
     -moz-animation-delay: 6s;
     -ms-animation-delay: 6s;
     animation-delay: 6s;
   }
   .sp-container h2.frame-4 {
     font-size: 200px;
     -webkit-animation-delay: 9s;
     -moz-animation-delay: 9s;
     -ms-animation-delay: 9s;
     animation-delay: 9s;
   }
   .sp-container h2.frame-5 {
     -webkit-animation: none;
     -moz-animation: none;
     -ms-animation: none;
     animation: none;
     color: transparent;
     text-shadow: 0px 0px 1px #fff;
   }
   .sp-container h2.frame-5 span {
     -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
     -moz-animation: blurFadeIn 1s ease-in 12s backwards;
     -ms-animation: blurFadeIn 3s ease-in 12s backwards;
     animation: blurFadeIn 3s ease-in 12s backwards;
     color: transparent;
     text-shadow: 0px 0px 1px #fff;
   }
   .sp-container h2.frame-5 span:nth-child(2) {
     -webkit-animation-delay: 13s;
     -moz-animation-delay: 13s;
     -ms-animation-delay: 13s;
     animation-delay: 13s;
   }
   .sp-container h2.frame-5 span:nth-child(3) {
     -webkit-animation-delay: 14s;
     -moz-animation-delay: 14s;
     -ms-animation-delay: 14s;
     animation-delay: 14s;
   }
   .sp-globe {
     position: absolute;
     width: 282px;
     height: 273px;
     left: 50%;
     top: 50%;
     margin: -137px 0 0 -141px;
     background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
     -webkit-animation: fadeInBack 3.6s linear 14s backwards;
     -moz-animation: fadeInBack 3.6s linear 14s backwards;
     -ms-animation: fadeInBack 3.6s linear 14s backwards;
     animation: fadeInBack 3.6s linear 14s backwards;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
     filter: alpha(opacity=30);
     opacity: 0.3;
     -webkit-transform: scale(5);
     -moz-transform: scale(5);
     -o-transform: scale(5);
     -ms-transform: scale(5);
     transform: scale(5);
   }
   .sp-circle-link {
     position: absolute;
     left: 50%;
     bottom: 100px;
     margin-left: -50px;
     text-align: center;
     line-height: 100px;
     width: 100px;
     height: 100px;
     background: #fff;
     color: #3f1616;
     font-size: 25px;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     -webkit-animation: fadeInRotate 1s linear 16s backwards;
     -moz-animation: fadeInRotate 1s linear 16s backwards;
     -ms-animation: fadeInRotate 1s linear 16s backwards;
     animation: fadeInRotate 1s linear 16s backwards;
     -webkit-transform: scale(1) rotate(0deg);
     -moz-transform: scale(1) rotate(0deg);
     -o-transform: scale(1) rotate(0deg);
     -ms-transform: scale(1) rotate(0deg);
     transform: scale(1) rotate(0deg);
   }
   .sp-circle-link:hover {
     background: #85373b;
     color: #fff;
   }
   /**/
   
   @-webkit-keyframes blurFadeInOut {
     0% {
       opacity: 0;
       text-shadow: 0px 0px 40px #fff;
       -webkit-transform: scale(1.3);
     }
     20%, 75% {
       opacity: 1;
       text-shadow: 0px 0px 1px #fff;
       -webkit-transform: scale(1);
     }
     100% {
       opacity: 0;
       text-shadow: 0px 0px 50px #fff;
       -webkit-transform: scale(0);
     }
   }
   @-webkit-keyframes blurFadeIn {
     0% {
       opacity: 0;
       text-shadow: 0px 0px 40px #fff;
       -webkit-transform: scale(1.3);
     }
     50% {
       opacity: 0.5;
       text-shadow: 0px 0px 10px #fff;
       -webkit-transform: scale(1.1);
     }
     100% {
       opacity: 1;
       text-shadow: 0px 0px 1px #fff;
       -webkit-transform: scale(1);
     }
   }
   @-webkit-keyframes fadeInBack {
     0% {
       opacity: 0;
       -webkit-transform: scale(0);
     }
     50% {
       opacity: 0.4;
       -webkit-transform: scale(2);
     }
     100% {
       opacity: 0.2;
       -webkit-transform: scale(5);
     }
   }
   @-webkit-keyframes fadeInRotate {
     0% {
       opacity: 0;
       -webkit-transform: scale(0) rotate(360deg);
     }
     100% {
       opacity: 1;
       -webkit-transform: scale(1) rotate(0deg);
     }
   }
   /**/
   
   @-moz-keyframes blurFadeInOut {
     0% {
       opacity: 0;
       text-shadow: 0px 0px 40px #fff;
       -moz-transform: scale(1.3);
     }
     20%, 75% {
       opacity: 1;
       text-shadow: 0px 0px 1px #fff;
       -moz-transform: scale(1);
     }
     100% {
       opacity: 0;
       text-shadow: 0px 0px 50px #fff;
       -moz-transform: scale(0);
     }
   }
   @-moz-keyframes blurFadeIn {
     0% {
       opacity: 0;
       text-shadow: 0px 0px 40px #fff;
       -moz-transform: scale(1.3);
     }
     100% {
       opacity: 1;
       text-shadow: 0px 0px 1px #fff;
       -moz-transform: scale(1);
     }
   }
   @-moz-keyframes fadeInBack {
     0% {
       opacity: 0;
       -moz-transform: scale(0);
     }
     50% {
       opacity: 0.4;
       -moz-transform: scale(2);
     }
     100% {
       opacity: 0.2;
       -moz-transform: scale(5);
     }
   }
   @-moz-keyframes fadeInRotate {
     0% {
       opacity: 0;
       -moz-transform: scale(0) rotate(360deg);
     }
     100% {
       opacity: 1;
       -moz-transform: scale(1) rotate(0deg);
     }
   }
   /**/
   
   @keyframes blurFadeInOut {
     0% {
       opacity: 0;
       text-shadow: 0px 0px 40px #fff;
       transform: scale(1.3);
     }
     20%, 75% {
       opacity: 1;
       text-shadow: 0px 0px 1px #fff;
       transform: scale(1);
     }
     100% {
       opacity: 0;
       text-shadow: 0px 0px 50px #fff;
       transform: scale(0);
     }
   }
   @keyframes blurFadeIn {
     0% {
       opacity: 0;
       text-shadow: 0px 0px 40px #fff;
       transform: scale(1.3);
     }
     50% {
       opacity: 0.5;
       text-shadow: 0px 0px 10px #fff;
       transform: scale(1.1);
     }
     100% {
       opacity: 1;
       text-shadow: 0px 0px 1px #fff;
       transform: scale(1);
     }
   }
   @keyframes fadeInBack {
     0% {
       opacity: 0;
       transform: scale(0);
     }
     50% {
       opacity: 0.4;
       transform: scale(2);
     }
     100% {
       opacity: 0.2;
       transform: scale(5);
     }
   }
   @keyframes fadeInRotate {
     0% {
       opacity: 0;
       transform: scale(0) rotate(360deg);
     }
     100% {
       opacity: 1;
       transform: scale(1) rotate(0deg);
     }
   }
   * {box-sizing: border-box;}

   .headerman {
    display: table;
  }
  
  .imgman {
    vertical-align: middle;
    display: table-cell;
  }
  .spanman {
    vertical-align: middle;
    display: table-cell;
  }