/*================*/
/*== 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;
}

/* A phone gets .fp-full, whose control strip is 2.8em rather than the 2.4em assumed above, so the
   exit icon settles lower than every other control. Match the strip it belongs to. */
.flowplayer.is-fullscreen.fp-full .fp-header {
    height: 2.8em;
}

/* Left to the rules above, the icon measures 27.2x41.1 and so overhangs the 2.4em header by 2.7px.
   In full screen the player is the screen, which puts that overhang past the bottom of the display
   and the rest of it in the corner a landscape phone gives to the system gesture bar. Too small to
   hit with a fingertip either way, at 27px against the 44px a touch target owes.
   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%;
    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;
}

/* 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;}