::-webkit-scrollbar {width:0; height:.1vw}
::-webkit-scrollbar-track {background-color:#686868}
@font-face {font-family: 'HDfont';src:url(HDfont.ttf)}
@keyframes animate {0% {transform:translateX(0) translateY(0) rotate(0deg); opacity:1; border-radius:0} 100% {transform:translateX(36.8vw) translateY(-136vh) rotate(1080deg); opacity:.68; border-radius:68%}}
* {margin:0; padding:0; border:0}
*:focus {outline:none}
a {text-decoration:none; cursor:pointer}
body {color:#383838; font-family:"Arial",sans-serif; font-size:1.2vw; line-height:1.68vw; font-weight:400; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none}
button {color:#fff!important; font-family:Calibri; font-size:1.5vw; font-weight:bold; padding:.38vw 1.3vw .4vw 1.3vw; border-radius:.36vw; cursor:pointer; box-shadow:0 2px 3px #888}
h1 {font-size:3.3vw; line-height:3.68vw; font-family: 'HDfont', Calibri, Arial; font-weight:normal; text-shadow:2px 2px 2px #fff, 3px 3px 3px #333638}
h2 {font-family: 'HDfont', Calibri, Arial; font-size:2.5vw; line-height:3.68vw; font-weight:normal; text-transform:uppercase}
h3 {font-size:1.86vw; line-height:2.5vw; font-weight:bold; color:#fff}
header {height:6.8vw; box-shadow:0 0 .68vw #131618}
hr {width:10vw; height:0; border:0; margin:1vw 28.2vw}
html {height:100%}
iframe {width:100vw; height:30vw}
img {border:0; max-width:100%}
input {box-shadow:0 1px 2px rgba(68,68,68,.68); color:#000; font-size:1.2vw; padding:.9vw 1vw .68vw 1vw; width:23vw; margin:1vw 0 1.68vw 0; border-radius:.36vw; border:0; box-shadow:0 2px 3px #888}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; -moz-appearance: none; appearance: none}
table {width:100%}
td {padding:.86vw; background:#fff}
th {text-align:center; font-weight:bold; line-height:3.2vw; padding:.0 .86vw; white-space:nowrap !important; color:#fff}
.HDbanner {height:40vw; width:100vw}
.HDcopy {background:rgba(0,0,0,.9); line-height:3vw; padding:0 6vw; text-align:left; color:#aaa}
.HDcopy a {float:right; color:#666; position:relative; z-index:1; font-size:1vw}
.HDclear {clear:both; line-height:0; height:0; margin:0; padding:0}
.HDclose {width:2vw; height:2vw; position:fixed; z-index:999999; top:8vh; right:16vw; opacity:0;}
.HDfooter {float:left; width:30vw; margin:0 0 0 6vw; text-align:left; font-size:1.2vw; line-height:2vw; color:#fff}
.HDfooter hr {margin:1vw 0; width:5vw; border-color:#fff}
.HDfooter img {height:3.68vw; width:auto}
.HDform {text-align:center; position:relative; z-index:1; padding:16.8vw; margin:-13vw 0; line-height:1.86vw; background:linear-gradient(-177deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 19.8%,#fff 20%, #fff 80%,rgba(0,0,0,0) 80.2%, rgba(0,0,0,0)100%)}
.HDgallery {width:100vw; height:31.8vw; position:relative; z-index:9; animation: fadeInAnimation ease 2s; animation-iteration-count: 1; animation-fill-mode: forwards}
.HDgallery-img {width:50vw; height:28vw; margin:0; padding:0; position:relative; -webkit-transform-style:preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;-ms-transform-style: preserve-3d; transform-style:preserve-3d; -webkit-perspective:68vw; -moz-perspective:68vw; -o-perspective:68vw; -ms-perspective:68vw; perspective:68vw}
.HDgallery-img img {background:#000; width:50vw; height:28vw; border:solid .15vw #000; border-radius:.68vw; display:block; position:absolute; left:0; top:0; box-shadow:0 1.68vw 3.68vw #000}
.HDgallery-img img.HDtransition {-webkit-transition: all .86s ease-in-out;-moz-transition:all .86s ease-in-out; -o-transition:all .86s ease-in-out; -ms-transition:all .86s ease-in-out; transition:all .86s ease-in-out}
.HDgallery nav {width:6.8vw; position:absolute; z-index:1000; bottom:0; left:50%; margin-left:-2vw}
.HDgallery nav span{text-indent: -200vw; float: left; cursor:pointer; width:1.68vw; height:1.86vw; opacity:.68; background:transparent url("/HDImage/skin/arrows.png") no-repeat top left; background-size:auto 100%}
.HDgallery nav span:hover{opacity: 1}
.HDgallery nav span.HDnext{background-position:top right; margin-left:1vw}
.HDintro {text-align:center; font-size:1.36vw; position:relative; z-index:1; padding:16.8vw; margin:-13vw 0; line-height:2vw; background:linear-gradient(177deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 19.8%,#fff 20%, #fff 80%,rgba(0,0,0,0) 80.2%, rgba(0,0,0,0)100%)}
.HDmaps {position:relative; z-index:1; opacity:0.8; float:right; width:55vw; margin:0 6vw -6vw 0; border-radius:5px}
.HDmaps iframe {width:55vw; height:16.8vw; border:0; border-radius:5px; margin-bottom:-.5vw}
.HDpattern {padding:0 0 10vw 0}
.HDservice {color:#fff; float:left; text-align:left; width:25vw; margin:3.68vw 0 3.68vw 6.33vw}
.HDservice a {position:relative; z-index:1}
.HDservice hr {width:25vw; border-color:#fff; margin:1vw 0}
.HDservice img {float:left; width:auto; height:5vw; margin:0 .68vw .68vw 0}
.HDservice .close {width:2vw; line-height:2vw; background:red; color:#fff; border-radius:100%; text-align:center; position:absolute; top:8vh; right:16vw; cursor:pointer}
.HDservice .content {opacity:0; margin-top:-100vh; width:100vw; height:100vh; background:rgba(0,0,0,.68); position:fixed; z-index:999999; top:0; left:0; moz-transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; transition:all .5s ease-in-out}
.HDservice .detail {width:60vw; height:70vh; padding:5vh 3vw; margin:10vh 17vw; background:#fff; color:#383838; text-align:justify; overflow-y:scroll}
.HDservice .detail img {width:60vw; height:auto}
.HDservice .title {font-size:2vw; line-height:2.5vw; font-family: 'HDfont', Calibri, Arial;}
.HDservice .desc {font-size:1.5vw; margin:1vw 0}
.HDservice span:hover> .content {opacity:1; margin:0}
.HDsquares {position:fixed; top:0; left:0; width:100vw; height:100vh; overflow: hidden}
.HDsquares li {position:absolute; display:block; list-style:none; width:3.68vw; height:3.68vw; background:rgba(255,255,255,.2); animation:animate 20s linear infinite; bottom:-16.8vh}
.HDsquares li:nth-child(1) {left:-16.8%; width:8vw; height:8vw; animation-delay:0s}
.HDsquares li:nth-child(2) {left:18.6%; width:6.8vw; height:6.8vw; animation-delay:3s; animation-duration: 16.8s}
.HDsquares li:nth-child(3) {left:36.8%; width:3vw; height:3vw; animation-delay:6s}
.HDsquares li:nth-child(4) {left:50%; width:6vw; height:6vw; animation-delay:0s; animation-duration:8.6s}
.HDsquares li:nth-child(5) {left:25%; width:1.68vw; height:1.68vw; animation-delay:0s}
.HDsquares li:nth-child(6) {left:68%; width:1.68vw; height:1.68vw; animation-delay:3s}
.HDsquares li:nth-child(7) {left:3.68%; width:8.6vw; height:8.6vw; animation-delay:8s}
.HDsquares li:nth-child(8) {left:16.8%; width:3.68vw; height:3.68vw; animation-delay:9s; animation-duration:18.6s}
.HDsquares li:nth-child(9) {left:-25%; width:1.86vw; height:1.86vw; animation-delay:3s; animation-duration:16.8s}
.HDsquares li:nth-child(10) {left:70%; width:9vw; height:9vw; animation-delay:0s; animation-duration:6.8s}
.HDtitle {padding:10vw 16.8vw .68vw 16.8vw; text-align:center}
.HDtitle h2 {color:#fff!important}
.HDtitle hr {border-color:#fff}
.HDzalo {margin-top:1.3vw; padding:.5vw 1.36vw; background:url(/HDImage/skin/zalo.png) center; background-size:100% 100%; border:solid .1vw #0072b2; moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; transition:all .3s ease-in-out}
.HDzalo:hover {background:url(/HDImage/skin/zalo.png) center; background-size:110% 110%;border:solid .1vw #0072b2}