<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

​

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>

​

<style>

.search-btn-hung1001{text-align:center;font-size:20px;line-height:20px;cursor:pointer;color:#111;-webkit-transition:color .5s ease;-moz-transition:color .5s ease;-ms-transition:color .5s ease;transition:color .5s ease}

.search-btn-hung1001:hover{color:#2187e7}

.search-wrap-hung1001{height:100%;left:0;position:fixed;top:0;width:100%;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;-moz-transition:opacity .5s ease;-ms-transition:opacity .5s ease;transition:opacity .5s ease;z-index:9999}

.overlay-search-hung1001{height:100%;left:0;position:absolute;top:0;width:100%;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;-moz-transition:opacity .5s ease;-ms-transition:opacity .5s ease;transition:opacity .5s ease;z-index:9999}

.search-wrap-hung1001.active{visibility:visible;opacity:1}

.search-wrap-hung1001.active .overlay-search-hung1001{background:rgba(0,0,0,0.9);opacity:1;visibility:visible}

.search-wrap-hung1001 .search-form-hung1001{width:90%;left:50%;padding:50px;position:absolute;top:50%;-webkit-transform:scale(.3) translate(-85%,-50%);-moz-transform:scale(.3) translate(-85%,-50%);-ms-transform:scale(.3) translate(-85%,-50%);-o-transform:scale(.3) translate(-85%,-50%);transform:scale(.3) translate(-85%,-50%);-webkit-transition:all .5s ease 0s;-o-transition:all .5s ease 0s;transition:all .5s ease 0s;opacity:0;visibility:hidden;z-index:99999}

.search-wrap-hung1001.active .search-form-hung1001{-webkit-transform:scale(1) translate(-50%,-50%);-moz-transform:scale(1) translate(-50%,-50%);-ms-transform:scale(1) translate(-50%,-50%);-o-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1;visibility:visible;-webkit-transition:all .5s ease 0s;-o-transition:all .5s ease 0s;transition:all .5s ease 0s}

.search-wrap-hung1001 .search-form-hung1001 .search-field-hung1001{outline:none;background:transparent;border:0;padding:8px 0;float:left;width:90%;font-size:35px;font-family:"Times",monospace;border-bottom-style:dashed;border-bottom-width:1px;border-bottom-color:#fff;color:#fff;text-align:center}

.search-wrap-hung1001 .search-form-hung1001 .search-submit{font-size:40px;width:10%;cursor:pointer;color:#fff;background:transparent;border:none}

.search-wrap-hung1001 .search-form-hung1001 .search-submit:hover,.search-wrap-hung1001 .close:hover{color:#2187e7;-webkit-transition:color .5s;-o-transition:color .5s;transition:color .5s}

.search-wrap-hung1001 .close{color:#fff;cursor:pointer;font-size:40px;line-height:80px;position:absolute;right:30px;top:0;z-index:99999}

.search-field-hung1001::placeholder{color:#fff;opacity:1}

.search-field-hung1001:-ms-input-placeholder{color:#fff}

.search-field-hung1001::-ms-input-placeholder{color:#fff}

</style>

​

<div class='search-btn-hung1001'>