@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');/* font-family: 'Playball', cursive; */

.clear
{
	clear:both;
}
html, body{width: 100%; height: auto;  font-family: 'Playball', cursive;  background-image: url("../images/bodybackground1.png");  background-attachment: fixed;   /* font-family: Dancing Script;  font uon luon */}
.carousel-inner img {width: 100%;}
.nav-item a{color: #fff!important;font-weight: bold; font-size: 14px; font-family: arial}
@media (min-width: 1600px){
	.laptop-menu{display: block}
	.mobile-menu{display: none}
	.slidee{display: block}
	.slidee-mobile{display: none}
	.menulaptop-logo{display: block}
	.menumobile-logo{display: none}
    .slidemini_laptop{display: block;}
    .slidemini_mobile{display: none;}
    .footer_laptop{display: block}
    .footer_mobile{display: none}
}
@media (max-width: 1600px){
	.laptop-menu{display: block}
	.mobile-menu{display: none}
	.slidee{display: block}
	.slidee-mobile{display: none}
	.menulaptop-logo{display: block}
	.menumobile-logo{display: none}	
    .slidemini_laptop{display: block;}
    .slidemini_mobile{display: none;}
    .footer_laptop{display: block}
    .footer_mobile{display: none}
}

@media (max-width: 800px){
	.laptop-menu{display: none}
	.mobile-menu{display: block}
	.slidee{display: none}
	.slidee-mobile{display: block}
	.menulaptop-logo{display: none}
	.menumobile-logo{display: block}
    .slidemini_laptop{display: none;}
    .slidemini_mobile{display: block;}
    .map{height: 500px}
    .footer_laptop{display: none}
    .footer_mobile{display: block}
.new_time{width: 50%;}
}
.map{width: 100%;padding: 0px 0 0 0!important;}
/* ..........hover run.............. */
.navbar li a {
    color: white !important;
      display: inline-block;
	  vertical-align: middle;
	  -webkit-transform: perspective(1px) translateZ(0);
	  transform: perspective(1px) translateZ(0);
	  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	  position: relative;
	  overflow: hidden;
}
.navbar li a:before { 
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: rgba(255,191,0,1);
  height: 2px;
   color: rgba(255,191,0,1) !important;;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;

}

  .navbar li a:hover:before, .navbar li a:focus:before, .navbar li a:active:before {
  right: 0;
  color: rgba(255,191,0,1) !important;;
}
.navbar li a:hover {
    color: rgba(255,191,0,1)!important;
    transition: all 0.4s ease!important;
} 
.click{border-bottom:3px solid rgba(255,191,0,1); }
/* ......................... */
.ul_menumobile{background: rgba(0,0,0,0.4); padding: 10px; }
/* nav menu mobile 1 */

.animated-icon1{
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon1 span{
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon1 span {
background: rgba(255,191,0,1);
}
.animated-icon1 span:nth-child(1) {
top: 0px;
}
.animated-icon1 span:nth-child(2) {
top: 10px;
}
.animated-icon1 span:nth-child(3) {
top: 20px;
}
.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* --------end nav menu mobile 1 ----------- */
.btn:hover{background:rgba(255,255,255,0.6)!important; color: #000; border: 1px solid #000;}

/* ------------booking termin----------------- */
.section {
    position: relative;
    height: 500px;
    top: 68px;
}

.section .section-center {
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

#booking {
    font-family: 'Raleway', sans-serif
}

.booking-form {
    position: relative;
    max-width: 642px;
    width: 100%;
    margin: auto;
    padding: 40px;
    overflow: hidden;
    background-image: url('../images/001.jpg');
    background-size: cover;
    border-radius: 5px;
    z-index: 20;
    margin-top: 15px;
}

.booking-form::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6); /* lam nen toi lai */
    z-index: -1
}

.booking-form .form-header {
    text-align: center;
    position: relative;
    margin-bottom: 30px
}

.booking-form .form-header h1 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 30px;
    margin: 0px;
    color: #fff
}

.booking-form .form-group {
    position: relative;
    margin-bottom: 30px
}

.booking-form .form-control {
    background-color: rgba(255, 255, 255, 0.5);
    height: 40px;
    padding: 0px 25px;
    border: none;
    border-radius: 40px;
    color: #fff;
    -webkit-box-shadow: 0px 0px 0px 2px transparent;
    box-shadow: 0px 0px 0px 2px transparent;
    -webkit-transition: 0.2s;
    transition: 0.2s
}

.booking-form .form-control::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5)
}

.booking-form .form-control:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5)
}

.booking-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5)
}

.booking-form .form-control:focus {
    -webkit-box-shadow: 0px 0px 0px 2px #ff8846;
    box-shadow: 0px 0px 0px 2px #ff8846
}



.booking-form input[type="date"].form-control:invalid {
    color: rgba(255, 255, 255, 0.5)
}

.booking-form input[type="date"].form-control+.form-label {
    opacity: 1;
    top: 10px
}

.booking-form select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.booking-form select.form-control:invalid {
    color: rgba(255, 255, 255, 0.5)
}

.booking-form select.form-control+.select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 32px;
    line-height: 32px;
    height: 32px;
    text-align: center;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px
}

.booking-form select.form-control+.select-arrow:after {
    content: '\279C';
    display: block;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.booking-form select.form-control option {
    color: #000
}

.booking-form .form-label {
    position: absolute;
    top: -10px;
    left: 25px;
    opacity: 0;
    color: #ff8846;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    height: 15px;
    line-height: 15px;
    -webkit-transition: 0.2s all;
    transition: 0.2s all
}

.booking-form .form-group.input-not-empty .form-control {
    padding-top: 16px
}

.booking-form .form-group.input-not-empty .form-label {
    opacity: 1;
    top: 10px
}

.booking-form .submit-btn {
    color: #fff;
    background-color: #e35e0a;
    font-weight: 700;
    height: 40px;
    padding: 10px 30px;
    width: 60%;
    border-radius: 40px;
    border: none;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1.3px;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;

}

.booking-form .submit-btn:hover,
.booking-form .submit-btn:focus {
    opacity: 0.9
}
/* --------------end booking termin--------------- */
.zoomimg:hover{
        -webkit-transform:scale(1.3); /*Webkit: Scale up image to 1.2x original size*/
        -moz-transform:scale(1.3); /*Mozilla scale version*/
        -o-transform:scale(1.3); /*Opera scale version*/        
        }
.zoomimg{ 
        -webkit-transform:scale(1); /*Webkit: Scale down image to 0.8x original size*/
        -moz-transform:scale(1); /*Mozilla scale version*/)
        -o-transform:scale(1); /*Opera scale version*/
        -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.5s; /*Mozilla duration version*/
        -o-transition-duration: 0.5s; /*Opera duration version*/        
    }
    #sizeimagesk{ width:100%; height:auto;overflow: hidden;}

.fontgiachitiet{margin-top: 5px !important;border-bottom: 1px dotted rgba(214,214,214,0.5)}
/* Mui ten lên dau trang */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 3%;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 35px;
    background: #e35e0a;
    color: #fff;
    cursor: pointer;
    border-radius: 2px;
    transition: opacity 0.5s;
    opacity: 0;
    border:2px solid black;
    border-radius: 25px;
    border: 2px solid #e35e0a;
}
#back-to-top:hover {
    background: #34c3ee;
}
#back-to-top.show {
    opacity: 1;
}