/*================*/
/*== 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.
   2.8em, not the 2.4em of the icon's own line-height: the icon is an inline-block that measures
   41.1px, so a 2.4em (38.4px) strip leaves it hanging 2.7px out the bottom — and in full screen
   the bottom of the player is the bottom of the screen, so that overhang is simply gone. */
.flowplayer.is-fullscreen .fp-header {
    display: block;
    top: initial;
    bottom: 0;
    height: 2.8em;
    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;
}

/* Chrome paints a Cast button of its own into the video's shadow DOM, out of reach of the layout
   above, and it lands on the volume slider. Nothing here casts, so take it away. Each name gets its
   own rule on purpose: one selector Chrome no longer knows would void the whole list. */
.flowplayer video::-webkit-media-controls-overlay-cast-button {
    display: none !important;
}

.flowplayer video::-internal-media-controls-overlay-cast-button {
    display: none !important;
}

.flowplayer video::-webkit-media-controls-cast-button {
    display: none !important;
}

/* The icon clears the bottom now, but at 27px wide it is still under the 44px a touch target owes,
   and it hugs the corner a landscape phone gives to the system gesture bar. Fingers only — a mouse
   hits 27px fine, and widening it on desktop would only crowd the control bar.
   Deliberately no env(safe-area-inset-*) here: no layout sets viewport-fit=cover, so it reads 0. */
.smartphone .flowplayer.is-fullscreen .fp-header {
    height: 3.6em;
}

.smartphone .flowplayer.is-fullscreen .fp-header .fp-fullscreen {
    min-width: 48px;
    height: 48px;
    line-height: 48px;
    margin: 0 .8em .6em 0;
    text-align: center;
    touch-action: manipulation;
}

/* Widened icon, so the volume slider needs to give up a little more room than the 3em above. */
.smartphone .flowplayer.is-fullscreen .fp-controls {
    padding-right: 4em;
}
/*#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 {
    background-color: #00a6bc;
    padding: 20px 30px;
    margin: 15px 0;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    font-size: 110%;
    color: #eee;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: background-color .1s;
    -moz-transition: background-color .1s;
    transition: background-color .1s;
}
.flowplayer .endscreen #next-video:hover {background-color: #00afc6;}
.flowplayer .endscreen #next-video:active {background-color: #009db2;}
.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;
    
}
    #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: 170px;
}
    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%;
    position:fixed;
    background:#000;
    top:0;
    left:0;
    z-index:100000;
}

.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.
   Held clear of the player's own control strip: in .fp-full that is a 2.8em bar plus the timeline
   and its 1.2em grab area above it, and it ends with flowplayer's own full screen toggle, which
   would otherwise sit directly under this button. */
.videoFullScreen .fullscreen-close{
    position:absolute;
    bottom:76px;
    right:12px;
    z-index:3;
    width:56px;
    height:56px;
    line-height:56px;
    text-align:center;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

.videoFullScreen .fullscreen-close:before{
    font-family:flowplayer;
    font-size:26px;
    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;}