/*
Theme Name: Webdaitin.com
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.showinfo{text-align:justify;
position:absolute;
width:100%;
height:100%;
display:flex;
padding:5px 15px;
font-size:13px;
color:#fff;
z-index:6;
opacity:1;
transform:scaleY(0);
transform-origin:50% 100%;
transition-property:transform;
transition-duration:.3s;
transition-timing-function:ease-out;
background:#21417ab3}
.showinfo ul li{margin-bottom:0}
.product-small:hover .showinfo{transform:scaleY(1);
top:0}
.product-small:hover .showinfo a{color:#fff}
#video-du-an,#anh-360,#hinh-anh-du-an {
	background: white;
    border-radius: 16px;
    box-shadow: 0 3px 6px 0 #2e36521a;
    padding: 15px;
    margin-bottom: 20px;
}
/*.sphere_wrap {
  cursor: move;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
}*/
.sphere_wrap {
	position: relative;
}
#sphere canvas {
	width: 100% !important;
	height: auto !important;
}
.controls {
  width: 290px;
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.controls ul {
	list-style: none;
}
.controls li {
  cursor: pointer;
  width: 40px;
  height: 40px;
  opacity: 0;
  position: relative;
  float: left;
  margin: 0 10px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.35);
  -webkit-transition: box-shadow 0.5s ease, opacity 0.25s ease;
  transition: box-shadow 0.5s ease, opacity 0.25s ease;
}

.sphere_wrap:hover .controls li {
  opacity: 1;
}

.controls li:hover {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
}

.controls li.controls__zoom-in:before {
  content: "";
  width: 2px;
  height: 20px;
  position: absolute;
  top: 10px;
  left: 19px;
  background-color: #7acbe4;
}

.controls li.controls__zoom-in:after {
  content: "";
  width: 20px;
  height: 2px;
  position: absolute;
  top: 19px;
  left: 10px;
  background-color: #7acbe4;
}

.controls li.controls__zoom-out:after {
  content: "";
  width: 20px;
  height: 2px;
  position: absolute;
  top: 19px;
  left: 10px;
  background-color: #7acbe4;
}

.controls li.controls__switch-prev {
  margin-right: 35px;
}

.controls li.controls__switch-next {
  margin-left: 35px;
}

.controls li[class*="switch"]:after {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  top: 12px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.controls li.controls__switch-prev:after {
  right: 10px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-color: #7acbe4;
}

.controls li.controls__switch-next:after {
  left: 10px;
  border-right: 2px solid transparent;
  border-top: 2px solid transparent;
  border-color: #7acbe4;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}