﻿#ArticleListing.GalleryListing{ margin-bottom: 50px;}
#ArticleListing .item .image .iconVideo {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 40px;
    background: url('img/iconvideo.png')no-repeat center center;
    width: 97px;
    height: 97px;
    margin: auto auto !important;
}
@media screen and (max-width: 767px) {
    #ArticleListing .item .image .iconVideo{ width: 40px;height: 40px;top: 40px;background-size: 100% 100%;}
    #ArticleListing.GalleryListing{ margin-bottom: 20px;}
}

/**Khung popup tối*/
#fadePopupVideo{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background:url('img/bg_popup.png') repeat;  position:fixed;z-index:9999999;}
/*Khung popup sáng*/
#lightPopupVideo{position:fixed;display:none;top:100px;z-index: 9999999999;width: 100%;left: 0}
#VideoFrame2 img{width:100% !important; height:100%  !important;}

#VideoFrame2{position:relative;background:url(img/bgpopupvideo.png) repeat;padding:6px;border:solid 1px #d4d4d4;border-radius: 3px;width: 614px;margin: 0 auto}
#lightPopupVideo a.btclose{width:28px;height:28px;background:url(img/btCloseVideo.png) no-repeat;display:block;position:absolute;top:0px;right:0px;z-index:2}
#VideoPlayerTitle2{position:absolute;top:10px;left:0;z-index:3;text-align:center;width:100%;height:20px;font:normal 12px/20px Arial;color:#fff;text-transform:uppercase;display:none}
#VideoFrame2 iframe{z-index:999999999999;width: 600px;height: 338px;}

@media screen and (min-width:0px) and (max-width:320px) {
   
      #VideoFrame2{width: 100%;}
       #VideoFrame2 iframe {
            width: 100%;
            height: 181px !important;
        }
}

@media screen and (min-width:321px) and (max-width:360px) {
  
   #VideoFrame2{width: 100%;}
   #VideoFrame2 iframe{ width: 100% !important;height: 181px !important}
}

@media screen and (min-width:361px) and (max-width:560px) {
 
   #VideoFrame2{width: 100%;}
   #VideoFrame2 iframe{ width: 100% !important;height: 181px !important}
}

@media screen and (min-width:561px) and (max-width:767px) {
   #VideoFrame2{width: 520px}
   #VideoFrame2 img{ width: 506px !important;height: 270px !important}
   #VideoFrame2 iframe{ width: 506px !important;height: 270px !important}
}

/*Gallery detail*/
.ProductDetail{position: absolute;top: 15px;left:0;right:0;bottom:0;z-index: 999999;}
.ProductDetail .overlay{    
    background:url('img/bg_popup.png') repeat;
    top:0;left:0;right:0;bottom:0;
    z-index: 9999999;   
    position:fixed;
    z-index:999999;
}
.ProductDetail .GalleryDetailW100H100{position:relative; height:100%; width:100%;}
.ProductDetail .GalleryDetailW100H100 .GalleryBox a.btclose {
        width: 41px;
        height: 41px;
        background: url(img/btClose.png) no-repeat;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1003;
        cursor:pointer;
    }
.ProductDetail .GalleryDetailW100H100 .GalleryBox .btnPrev,.ProductDetail .GalleryDetailW100H100 .GalleryBox .btnNext{
        display: block;
        position: absolute;
        top: 32%;
        z-index: 99999999;
        cursor:pointer;
        width:29px;
        height:53px;
        font-size:0;
}
.ProductDetail .GalleryDetailW100H100 .GalleryBox .btnNext{right: -40px;background:url('img/next.png') no-repeat;}
.ProductDetail .GalleryDetailW100H100 .GalleryBox .btnPrev{left: -40px;background:url('img/prev.png') no-repeat;}
.ProductDetail .GalleryDetailW100H100 .GalleryBox {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto auto;
        max-width: 1000px;
        z-index: 999999;
}
.ProductDetail .GalleryDetailW100H100 .GalleryBox .caption h1 {
    color: #fff;
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 15px;
    width: 100%;float: left;
}
.GalleryBoxMobile .caption h1 {
    color: #f0c568;
    font-size: 25px;
    text-transform: uppercase;
    margin: 15px 0;
    width: 100%;
    float: left;
}
   
.ProductDetail .GalleryDetailW100H100 .GalleryBox .GalleryBoxContent{width:100%;height:100%;}
@media screen and (max-width: 1023px) {
      .ProductDetail,.GalleryListing { display: none;}
      .GalleryBoxMobile{ display: block !important;}
      .GalleryBoxMobile img{ max-width: 100% !important;margin-bottom: 10px;}
       .boxArticleLisating .CaptionMenu  .CaptionBox  .lanhdao{ right: 15px;}
  }
  @media screen and (min-width: 1024px) {
      .GalleryBoxMobile{ display: none !important;}
      .ProductDetail,.GalleryListing { display: block;}
  }

 .wrapper{ position: relative;}
