<div class="contact-module flex">
  <div class="flex-align">
    <div class="contact-module-content flex">
      <div>
        <div class="contact-title">
          <div class="contact-text-wrapper">
            <div>
              <h3 class="text-center">Hãy liên hệ ngay với chúng tôi để được tư vấn miễn phí</h3>
            </div>
            <div class="flex-center">
              <div class="is-divider"></div>
            </div>
            <div class="text-center">
              <div><a href="tel:0123456789" rel="nofollow">0123.456.789</a><span> | </span><a href="tel:0123987654" rel="nofollow">0123.987.654</a></div>
              <div><span>Email: [email protected]</span></div>
            </div>
          </div>
        </div>
        <div class="contact-set flex text-center">
          <div class="w-50">
            <a href="http://zalo.me/0123456789" rel="noopener nofollow" target="_blank" title="Chat Zalo">
              <div class="flex-center"><span class="flex has-icon zalo-icon"></span></div>
              <div>
                <h4>Chat Zalo</h4>
                <p>Chat trực tuyến với NTLRUBY</p>
              </div>
            </a>
          </div>
          <div></div>
          <div class="w-50">
            <a href="/p/lien-he.html" title="Liên hệ">
              <div class="flex-center"><span class="has-icon contact-icon"></span></div>
              <div>
                <h4>Gửi yêu cầu</h4>
                <p>NTLRUBY sẽ phản hồi ngay khi nhận được yêu cầu</p>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="contact-module-title flex-center">
      <div>Liên hệ</div>
    </div>
  </div>
</div>

.flex{display:-ms-flexbox;display:-webkit-flex;display:flex}.align-center{-webkit-align-items:center;align-items:center}
.flex-align{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.flex-center{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;justify-content:center}
.text-center{text-align:center}
.w-50{float:left;width:50%}
.zalo-icon:before,.contact-icon:before{content:"";display:inline-block;vertical-align:middle;width:48px;height:48px;background-position:center center;background-repeat:no-repeat}
.zalo-icon:before{background-color:#018fe5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='%23fff' d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");background-size:55%}
.contact-icon:before{background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M22.407%200h-21.1C.586%200%200%20.586%200%201.306v21.1c0%20.72.586%201.306%201.306%201.306h21.1c.72%200%201.306-.586%201.306-1.305V1.297C23.702.587%2023.117%200%2022.407%200zm-9.094%2018.046c0%20.41-.338.737-.738.737H3.9c-.41%200-.738-.337-.738-.737v-1.634c0-.408.337-.737.737-.737h8.675c.41%200%20.738.337.738.737v1.634zm7.246-5.79c0%20.408-.338.737-.738.737H3.89c-.41%200-.737-.338-.737-.737v-1.634c0-.41.337-.737.737-.737h15.923c.41%200%20.738.337.738.737v1.634h.01zm0-5.8c0%20.41-.338.738-.738.738H3.89c-.41%200-.737-.338-.737-.738V4.822c0-.408.337-.737.737-.737h15.923c.41%200%20.738.338.738.737v1.634h.01z%22/%3E%3C/svg%3E);background-color:#00aeef;background-size:43%}
.contact-module{position:fixed;top:50%;left:-450px;transform:translate(-0%,-50%);max-width:480px;z-index:20;transition:left .7s}
.contact-module:hover{left:0}
.contact-module-content{background:#fff;padding:20px;border-radius:0 4px 4px 0;box-shadow:rgba(0,0,0,0.3) 0 0 6px,rgba(0,0,0,0.15) 0 1px 6px}
.contact-module-content>div>div:nth-of-type(1){margin-bottom:20px}
.contact-module-content>div>div:nth-of-type(2){background:#dadce0;opacity:.7;padding:10px;border-radius:4px}
.contact-module-content>div>div:nth-of-type(2)>div:nth-of-type(2){width:2px;background:#00aeef;margin:0 10px}
.contact-text-wrapper h3{line-height:1.5;opacity:.8;text-transform:uppercase;cursor:default}
.contact-module-content a{color:#212529}
.contact-module-title{background:#00aeef;border:1px solid #00aeef;border-radius:0 4px 4px 0;color:#fff;width:30px;height:100px}
.contact-module-title>div{transform:rotate(-90deg);white-space:nowrap;letter-spacing:3px;font-size:90%;font-weight:500}
.contact-module-content .has-icon{width:48px;height:48px;border-radius:50%;overflow:hidden}
.contact-set a>div:nth-of-type(2){line-height:1.4}.contact-set h4{margin-bottom:5px}
.contact-text-wrapper>div:nth-of-type(3){line-height:1.6}
.contact-text-wrapper>div:nth-of-type(3) a{font-size:1.2rem;font-weight:500}
.contact-text-wrapper>div:nth-of-type(3) a+span{font-size:1.4rem;opacity:.7}
.is-divider{display:block;margin: .7em 0 .5em;background:rgba(0,0,0,0.1);width:100%;max-width:50px;height:2px}
@media(min-width:1025px){.contact-module-title{cursor:pointer}}
@media(max-width:480px){.contact-module{display:none!important}}