/*================*/
/*== FlowPlayer ==*/
/*================*/
/*#region Flowplayer*/
@media (max-width: 1270px) {
    .Chapter.container {
        width: inherit !important;
        margin-left:15px;
        margin-right:15px;
    }
}

.flowplayer {
      height: 470px;
      width: 100% !important;
      background-color: none !important;
      background-image:none !important;
      direction: ltr !important;
      display:block;
      border-radius:0!important;
}


.flowplayer .fp-player{background-image:none !important; background-color:white !important; height:470px;}
.flowplayer.is-fullscreen .fp-player{height:auto;}

.smartphone .flowplayer, .free-videos-page .flowplayer{height:auto!important;}
.smartphone .fp-player, .free-videos-page .fp-player{height:auto!important;}

.flowplayer .iosMask{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


.flowplayer.is-playing, .flowplayer.is-playing .fp-player {background-color: transparent!important; background-image:none!important;}
.flowplayer.is-splash, .flowplayer.fp-message, .flowplayer .fp-header {background-color: transparent!important; background-image:none!important;}
.flowplayer.is-paused .fp-ui, .flowplayer.is-mouseover .fp-ui, .flowplayer.fp-ui-shown .fp-ui {}



.flowplayer .fp-header{display:none;}

/* In full screen the panel-footer sits off-screen, leaving no way out of the player.
   Bring back Flowplayer's own exit icon and dock it to the right of the control bar. */
.flowplayer.is-fullscreen .fp-header {
    display: block;
    top: initial;
    bottom: 0;
    height: 2.4em;
    padding: 0;
    text-align: right;
    background-image: none;
    z-index: 3;
}

.flowplayer.is-fullscreen .fp-header .fp-share,
.flowplayer.is-fullscreen .fp-header .fp-unload {
    display: none;
}

.flowplayer.is-fullscreen .fp-header .fp-fullscreen {
    float: none;
    margin: 0 .6em;
    line-height: 2.4em;
    background: none;
}

/* Keep the volume slider clear of the exit icon. */
.flowplayer.is-fullscreen .fp-controls {
    padding-right: 3em;
}
/*#endregion Flowplayer*/

/*============*/
/* Video list */
/*============*/
/*#region Video list*/
#player-frame{overflow-x:hidden;}

#videos-frame .panel-body,
#videos-frame.col-lg-3 .panel-body{ height:542px;overflow-y:auto;}
#videos-frame .panel-body .topics-list{height:100%!important; width:100%;}
.panel-body{overflow-y:hidden!important; padding:10px 5px;}
.panel-body .topics-list{overflow-y:auto;}
.panel-body .videos-list li {
    padding: 0 10px;
    color: #898989;
    cursor: pointer;
}
    .panel-body .videos-list > li.active {
        color: #c93737;
    }
    .col-md-12 .videos-list > li {
        float: right;
        width: 33%;
    }
    .videos-list li i.fa{margin-left:5px;}

.free-videos-page .panel-body{height:auto!important; max-height:542px;}
.free-videos-page .panel-footer .liScreenSize{display:none;}

.col-md-4 > .panel > .panel-body > ul {
    overflow-x: hidden;
    overflow-y: auto;
}
/*#endregion Video list*/

/*========================*/
/*== Next video ==*/
/*========================*/
/*#region Next video*/
.flowplayer .endscreen {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 60%;
  
  background-color: #aaa;
  border:solid 1px #777;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  
  text-align: center;
  font-size: 14px;

  /* do not show endscreen by default - a simpler, non-animated alternative would be: display: none; */
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  transition: opacity .5s;
}
    .flowplayer .endscreen h3 {
      font-size: 160%;
      font-weight: bold;
      color: #000;
      margin-top: 10%;
    }
    .flowplayer .endscreen h4 {
      font-size: 120%;
      font-weight:bold;
      color: #333;
    }

.flowplayer.is-finished .endscreen {
  /* the player UI has z-index: 11, overlay it */
  z-index: 12;
 
  /* show endscreen - a simpler alternative would be:  display: block; */
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.flowplayer .endscreen #next-video {
    width: 50%;
    height: 52px;
    border: 1px solid #F55821;
    border-radius: 26px;
    background-color: #F55821;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    padding: 10px 20px;
}
}
.flowplayer .endscreen #next-video:hover {background-color: #F55821;
}
.flowplayer .endscreen #next-video:active {background-color: #F55821;
}
.flowplayer .endscreen #next-video:focus{outline-width: 0;}

    
.flowplayer.fp-full .endscreen h3{font-size:140%; margin-top:4%;}
.flowplayer.fp-full .endscreen h4{margin-bottom:5px;}
.flowplayer.fp-full .endscreen #next-video{padding:10px 30px; margin:5px 0;}

#player-frame #next-ctrl .text-info{cursor:pointer;}

/*== bottom link ==*/
#player-frame .next-view {
    /*    position:relative!important;
    top:initial!important;
    left:initial!important;
    right:initial!important;
    height:auto!important;*/
    display: none !important;
}
    #player-frame .next-view .text-center{
        padding-top:0!important;
    }
    #player-frame .next-view .text-info{
        background-image:none!important;
        background-color:initial!important;
        height:auto!important;
        width:auto!important;
        font:inherit!important;
        color:#31708f;
        text-decoration:underline;
    }


/*#endregion Next video*/
     
/*==========================*/
/*== Flowplayer Controls  ==*/
/*==========================*/
/*#region Controls*/

.flowplayer .fp-timeline:hover{cursor:pointer!important;}

.panel-footer small{margin:auto 5px;}
.panel-footer .popover.top {
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
.panel-footer .popover.top kbd{
    background-color:#ffffbe;
    color:black;
    text-decoration:none;
    border:none;
    box-shadow:none;
}

.panel-footer .popover .popover-title{
    color:#333;
}

.smartphone .panel-footer{padding:5px 15px;}
.ios .panel-footer{display:block;}
.ios .panel-footer .liScreenSize .playerToggleFullWidth{display:none;}


    .smartphone .panel-footer ul.list-inline{
        margin-bottom:0;
        padding-bottom:0;
    }
        .smartphone .panel-footer ul.list-inline li.full{
            display: block;
            margin-top: 5px;
            margin-bottom: 5px;
            width:100%;
        }
            .smartphone .panel-footer ul.list-inline li select{
                width:auto;
                clear:none;
                display:inline;
                margin-right:10px;
                margin-bottom:0;
            }
.smartphone .smartphone-hide{display:none!important;}

/*#endregion Controls*/
    
/*=========================*/
/*== Add to cart buttons ==*/
/*=========================*/
/*#region Add to cart*/
.add-to-cart .first{text-align:left;}
.add-to-cart .btn-group{width: 250px; margin-bottom: 10px;}
.add-to-cart .btn-group button{width:100%;}
@media (max-width:768px) {
    .add-to-cart .btn-group {
        width: 100% !important;
        text-align: center !important;
    }
}
/*#endregion Add to cart*/

/*==========================================================*/
/*== About us popup screen when right click on the player ==*/
/*==========================================================*/
/*#region Context menu*/
.flowplayer * {
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    text-decoration: inherit;
    font-size: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    list-style-type: none;
}

.flowplayer .fp-context-menu {
    position: absolute;
    display: none;
    z-index: 1001;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #aaa;
    -webkit-box-shadow: 0 0 4px #888;
    -moz-box-shadow: 0 0 4px #888;
    box-shadow: 0 0 4px #888;
    width: 222px;
}
    flowplayer .fp-context-menu.fp-active {
        display: block;
    }

    .flowplayer .fp-context-menu li {
        text-align: center !important;
        padding: 10px;
        color: #444 !important;
        font-size: 11px !important;
        margin: 0 -10px 0 -10px;
    }
        .flowplayer .fp-context-menu li:hover {
            background-color:#eee;
        }

    .flowplayer .fp-context-menu li a {
        color: #00a7c8 !important;
        font-size: 12px !important;
        background-color:transparent!important;
    }
    .flowplayer .fp-context-menu li a:hover{background-color:transparent!important;}
/*#endregion Context menu*/


/*#region videoFullScreen*/
/* Emulated full screen for iOS, which has no Fullscreen API. The .rotator is sized and
   (in portrait) rotated a quarter turn by LayoutFullScreenLayer(); everything inside it,
   the exit button included, turns with it and so reads as landscape. */
.videoFullScreen{
    width:100%;
    height:100%;
    /* Dynamic viewport units follow the browser's collapsing toolbars; the percentages above are
       the fallback for engines without them. LayoutFullScreenLayer() then overrides both with a
       measured pixel size, which is the only value iOS gets consistently right. */
    width:100dvw;
    height:100dvh;
    position:fixed;
    background:#000;
    top:0;
    left:0;
    z-index:100000;
}

/* Holds the document still behind the layer. The offsetting top is set by OpenFullScreenLayer()
   to the scroll position, so pinning the body does not jump the page back to the start. */
body.videoFullScreenOpen{
    position:fixed;
    left:0;
    right:0;
    width:100%;
    overflow:hidden;
}

.videoFullScreen .rotator{
    position:absolute;
    overflow:hidden;
}

.videoFullScreen .video{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.videoFullScreen .video #player,
.videoFullScreen .video .fp-player{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    /* Beats the white .fp-player background above, so letterbox bars stay dark. */
    background-color:#000 !important;
}

.videoFullScreen .video .fp-engine{
    object-fit:contain;
}

/* Bottom-right exit button, mirroring the control-bar placement on Android and desktop.
   Deliberately not called .close — Bootstrap's .close would drag in opacity:.2 and float:right. */
.videoFullScreen .fullscreen-close{
    position:absolute;
    bottom:10px;
    right:10px;
    z-index:2;
    width:44px;
    height:44px;
    line-height:44px;
    text-align:center;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.videoFullScreen .fullscreen-close:before{
    font-family:flowplayer;
    font-size:22px;
    content:"\e016";
}

.is-fullscreen video {
    background-color: #fff;
}

/*#endregion videoFullScreen*/

/*TBD !!!*/
.innerbody.hocnhuy.Chapter {width:auto!important;}
.innerbody.hocnhuy.Chapter .content.ltr{width:1270px; margin-left:auto; margin-right:auto;}
.innerbody.hocnhuy.Chapter .content.ltr .page-header{margin-top:15px;}
.innerbody.hocnhuy.Chapter .content.ltr #player-frame {float: right;}
.innerbody.hocnhuy.Chapter .content.ltr .panel-body{height:525px!important;}

.innerbody.hocnhuy.Chapter #books-frame .panel-body{height:auto!important; padding:10px;}