* {
  box-sizing:border-box;
}

img {
  max-width:100%;
}

.floating {
  position:fixed;
  left:2px;
  top:2x;
  z-index:1000;
}

.floating .floating__icon {
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  background:#fa9709;
  color:#fff;
  border:5px solid rgba(254,239,185,.8);
  border-radius:50%;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -ms-border-radius:50%;
  -o-border-radius:50%;
  transition:all .1s linear;
  -webkit-transition:all .1s linear;
  -moz-transition:all .1s linear;
  -ms-transition:all .1s linear;
  -o-transition:all .1s linear;
  -webkit-box-shadow:6px 9px 21px -10px rgba(0,0,0,.7);
  -moz-box-shadow:6px 9px 21px -10px rgba(0,0,0,.7);
  box-shadow:6px 9px 21px -10px rgba(0,0,0,.7);
}

.floating .floating__icon:before {
  content:'';
  left:20px;
  top:31%;
  position:absolute;
  width:0;
  height:0;
  border-style:solid;
  border-width:10px 17.3px 10px 0;
  border-color:transparent #feefb9 transparent transparent;
  transition-delay:5s;
  transition:all .2s linear;
  -webkit-transition:all .2s linear;
  -moz-transition:all .2s linear;
  -ms-transition:all .2s linear;
  -o-transition:all .2s linear;
  opacity:0;
}

.floating .floating__icon:focus {
  outline:0;
}

.floating__content {
  position:absolute;
  top:0;
  left:75px;
  padding:8px;
  background:#feefb9;
  border:solid 2px #9b7e50;
  visibility:hidden;
  transform:scale(0) translateY(-50%);
  -webkit-transform:scale(0) translateY(-50%);
  -moz-transform:scale(0) translateY(-50%);
  -ms-transform:scale(0) translateY(-50%);
  -o-transform:scale(0) translateY(-50%);
  transition:all .1s linear;
  -webkit-transition:all .1s linear;
  -moz-transition:all .1s linear;
  -ms-transition:all .1s linear;
  -o-transition:all .1s linear;
  opacity:0;
  -webkit-box-shadow:6px 9px 21px -10px rgba(0,0,0,.7);
  -moz-box-shadow:6px 9px 21px -10px rgba(0,0,0,.7);
  box-shadow:6px 9px 21px -10px rgba(0,0,0,.7);
  border-radius:40px;
  display:flex;
}

.floating__content [class*=icons] {
  display:inline-block;
  width:40px;
  height:40px;
  margin:0 5px;
  background-size:cover;
}

.floating__content [class*=icons]:hover {
  background-size:cover;
}

.floating.active .floating__content {
  visibility:visible;
  transform:scale(1);
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  opacity:1;
}

.floating.active .floating__icon {
  transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
}

.floating.active .floating__icon:before {
  opacity:1;
  left:15px;
  top:-20px;
  transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
}

.icons-ft-gem {
  background:url(images/ft-gem.png) no-repeat;
}
.icons-ft-gem:hover {
  background:url(images/ft-gem_hover.png) no-repeat;
} 
.icons-ft-apk {
  background:url(images/ft-apk.png) no-repeat;
}
.icons-ft-apk:hover {
  background:url(images/ft-apk_hover.png) no-repeat;
} 
.icons-ft-shop {
  background:url(images/ft-shop.png) no-repeat;
}
.icons-ft-shop:hover {
  background:url(images/ft-shop_hover.png) no-repeat;
} 
.icons-ft-home {
  background:url(images/ft-home.png) no-repeat;
}

.icons-ft-home:hover {
  background:url(images/ft-home_hover.png) no-repeat;
}

.icons-ft-naptien {
  background:url(images/ft-naptien.png) no-repeat;
}

.icons-ft-naptien:hover {
  background:url(images/ft-naptien_hover.png) no-repeat;
}

.icons-ft-sukien {
  background:url(images/ft-sukien.png) no-repeat;
}

.icons-ft-sukien:hover {
  background:url(images/ft-sukien_hover.png) no-repeat;
}

.icons-ft-nhanqua {
  background:url(images/ft-nhanqua.png) no-repeat;
}

.icons-ft-nhanqua:hover {
  background:url(images/ft-nhanqua_hover.png) no-repeat;
}

.icons-ft-fanpage {
  background:url(images/ft-fanpage.png) no-repeat;
}

.icons-ft-fanpage:hover {
  background:url(images/ft-fanpage_hover.png) no-repeat;
}

.icons-ft-thoat {
  background:url(images/ft-thoat.png) no-repeat;
}

.icons-ft-thoat:hover {
  background:url(images/ft-thoat_hover.png) no-repeat;
}
.icons-ft-dt {
  background:url(images/ft-dt.png) no-repeat;
}

.icons-ft-dt:hover {
  background:url(images/ft-dt_hover.png) no-repeat;
}