﻿#SubHotelIndex3{ padding: 30px 0 0;background: url(bgsub3.jpg.ashx) repeat;}
#SubHotelIndex3 .boxHeader{width: 1200px;margin: 0 auto 20px;text-align: center;position: relative;left: 200px;opacity: 0;}
#SubHotelIndex3 .boxHeader .titleHead{ font: normal 36px UtmBebas;color: #084a7a;display: inline-block;margin-bottom: 10px;}
#SubHotelIndex3 .boxHeader .desc{ font: normal 14px/24px Arial;color: #333;}
#SubHotelIndex3 .SlideSubGioithieu3{position: relative;left: -200px;opacity: 0;}
#SubHotelIndex3 ul{ margin: 0;padding: 0;list-style: none;}
#SubHotelIndex3 ul li{ float: left; /*width: 33.3%*/ width: 100%;position: relative;overflow: hidden}
#SubHotelIndex3 ul li *{ transition: 0.6s;}
#SubHotelIndex3 ul li .khungAnh{ width: 100%;height: 284px;}
#SubHotelIndex3 ul li .khungAnh .khungAnhCrop2 img{width: 100%;height: 284px;}
#SubHotelIndex3 ul li .infoItem{position: absolute;padding:60px 45px;box-sizing: border-box;width: 100%;height: 100%;top: 100%;left: 0;z-index: 4;text-align: center;transition: 0.8s;}
#SubHotelIndex3 ul li .infoItem .titleItem{ font: bold 16px/24px Arial;color: #fff;min-height: 30px;}
#SubHotelIndex3 ul li .infoItem .descItem{ font: normal 15px/24px Arial;color: #fff;}
#SubHotelIndex3 ul li .infoItem .zoomImg{ display: inline-block;background: url(icozoom.png.ashx) no-repeat center;width: 54px;height: 54px;margin-top: 10px;}
#SubHotelIndex3 ul li .bongmo{ position: absolute;top: 100%;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 3;}


#SubHotelIndex3 .SlideSubGioithieu3 .btnNextHotel3,#SubHotelIndex3 .SlideSubGioithieu3 .btnPrevHotel3{ display: inline-block;height: 52px;width: 52px;position: absolute;top: 45%;}
#SubHotelIndex3 .SlideSubGioithieu3 .btnNextHotel3{ background: url(nextSlide.png.ashx) no-repeat;right: 1%;opacity: 0.7}
#SubHotelIndex3 .SlideSubGioithieu3 .btnPrevHotel3{ background: url(prevSlide.png.ashx) no-repeat;left: 1%;opacity: 0.7}
#SubHotelIndex3 .SlideSubGioithieu3:hover .btnPrevHotel3,#SubHotelIndex3 .SlideSubGioithieu3:hover .btnNextHotel3{z-index: 10}
#SubHotelIndex3 .SlideSubGioithieu3 .btnPrevHotel3:hover,#SubHotelIndex3 .SlideSubGioithieu3 .btnNextHotel3:hover{ opacity: 1;}


/*#SubHotelIndex3 ul li:hover .bongmo{ top: 0;}
#SubHotelIndex3 ul li:hover .infoItem{ top: 0;}*/

#popupImageGioithieu{ border: 10px solid rgba(255, 255, 255, 0.5);width: 80%;border-radius: 15px;text-align: center;margin: 0 auto;background: #fff;display: none;box-sizing: border-box;position: relative}
#popupImageGioithieu .b-close{font: normal 20px UtmBebas;color: #fff;border-radius: 0;padding: 0 10px;position: absolute;right: -20px;top: -42px;}
#popupImageGioithieu *{ max-width: 100%;border-radius: 10px;}
#popupImageGioithieu .infoImages{ background: #fff;padding: 15px 15px 0;box-sizing: border-box;}
#popupImageGioithieu .infoImages .titleImg{ font: normal 24px UtmBebas;color: #084a7a;}
#popupImageGioithieu .infoImages .descImg{ font: normal 14px/24px Arial;color: #333;}

.b-modal{ background: rgba(0, 0, 0, 0.8);}


#SubHotelIndex3 .owl-prev{background: url(prevSlide.png.ashx) no-repeat;left: 1%;opacity: 0.7; display: inline-block;height: 52px;width: 52px;position: absolute;top: 45%;text-indent: 9999px}
#SubHotelIndex3 .owl-next{background: url(nextSlide.png.ashx) no-repeat;right: 1%;opacity: 0.7; display: inline-block;height: 52px;width: 52px;position: absolute;top: 45%;text-indent: 9999px}
#SubHotelIndex3 .owl-next:hover,#SubHotelIndex3 .owl-prev:hover{opacity: 1}

@media (max-width:1000px) {
    #SubHotelIndex3 .boxHeader{ width: inherit;left: inherit;opacity: 1;}
    #SubHotelIndex3 .boxHeader .desc{ width: 97%;margin: 0px auto}
    #SubHotelIndex3 .SlideSubGioithieu3{ left: inherit;opacity: 1}
    #SubHotelIndex3 ul li .infoItem{padding: 25px 45px}

}