/*================*/
/*== 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 and for iframe embedding, where the Fullscreen API is unavailable.
   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.
   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;
}

/* Upright layer: the rotator's edges meet the screen's, so the insets map straight across. */
.videoFullScreen .rotator:not(.rotated) .fullscreen-close{
    bottom:calc(76px + env(safe-area-inset-bottom, 0px));
    right:calc(12px + env(safe-area-inset-right, 0px));
}

/* Rotated a quarter turn clockwise by LayoutFullScreenLayer(): the rotator's bottom edge now runs
   along the screen's left edge and its right edge along the screen's bottom, so the insets swap. */
.videoFullScreen .rotator.rotated .fullscreen-close{
    bottom:calc(76px + env(safe-area-inset-left, 0px));
    right:calc(12px + env(safe-area-inset-bottom, 0px));
}

.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;}