﻿

@media  only screen and (max-width:768px) {
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-top .img-thumbnail {
        max-width: 160px !important;
    }
    #myCarouselContent2 {
        height: auto !important;
        overflow: hidden;
    }
}
@media only screen and  (min-width:769px) and (max-width:1023px) {
	#content-slider.nav-tabs > li > a{font-size: 22px;}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center{height:auto;}
    /*#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .title{display:none;}*/
    /*#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center.rightest {display:none;}
    #divContentSlider #myCarouselContent2 .carousel-inner .item .box-center.rightest {display:none;}
    #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center.rightest {display:none;}
    #divContentSlider #myCarouselContent4 .carousel-inner .item .box-center.rightest {display:none;}*/
    
    #divContentSlider #myCarouselContent1 .carousel-inner .item .col-lg-3 {width:23.5%;}
    #divContentSlider #myCarouselContent2 .carousel-inner .item .col-lg-3 {width:23.5%;}
    /*#divContentSlider #myCarouselContent3 .carousel-inner .item .col-lg-3 {width:32%;}
    #divContentSlider #myCarouselContent4 .carousel-inner .item .col-lg-3 {width:32%;}*/
    /*#divContentSlider #myCarouselContent2 .carousel-inner .item .box-center .title{display:none;}*/
    #divContentSlider #myCarouselContent2 .carousel-inner .item .img-thumbnail{ width:100% !important;}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left{width: 180px !important;/*height: 250px !important;*/}

    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-top .img-thumbnail {
        max-width: 190px !important;
    }
}
@media only screen and (min-width:1024px) and (max-width:1280px) {
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left{width: 180px !important;height: 250px !important;}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-top .img-thumbnail {
        max-width: 210px !important;
    }
}
@media  only screen and (min-width:1281px) and (max-width:1366px) {
	#content-slider.nav-tabs > li > a{font-size: 16px;}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center{/*height:310px;*/}
	#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left{width: 130px !important;height: 130px !important;}
}
@media  only screen and (min-width:1367px) and (max-width:1920px) {
	#content-slider.nav-tabs > li > a{font-size: 16px;}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center{ /*height:310px;*/}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left{width: 180px !important;height: 250px !important;}
    #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center .icon-left{width: 180px !important;height: 250px !important;}
}
@media  only screen and (min-width:1920px) {
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left{width: 180px !important;height: 250px !important;}
    #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center .icon-left{width: 180px !important;height: 250px !important;}
}

#content-slider{
    max-width:1170px;
    /*background:rgba(220, 181, 65, 0.6);*/
    margin: 0 auto;
    border-top-right-radius: 6px;
    border-top-left-radius:6px;
}
.top-tabs{
    /*background-color:rgba(220, 181, 65, 0.6);*/
    /*background:#d8d8d8 url("images/master-containter-bg.png") no-repeat center top ;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;*/
}
.tabs-slide{
    padding:0px;
}
.tab-content
{
    overflow:auto;
    margin:auto;
    max-width:1170px;
    padding-left:10px;
}
.tab-content .box-body {
	padding:3px 0px;
}
#divContentSlider .carousel .carousel-indicators{top: 98%;margin-bottom: 0px;}
#divContentSlider .carousel .carousel-indicators .active{background: #428bca;}
#divContentSlider .carousel .carousel-indicators li{background: #cecece;}
#divContentSlider .carousel-inner{width:100%; margin:auto;height:auto;padding:0px;border-radius: 6px;}
#divContentSlider .carousel-inner .active.left { left: -16.7%; }
#divContentSlider .carousel-inner .next        { left:  16.7%; }
#divContentSlider .carousel-inner .prev        { left: -16.7%; }
#divContentSlider .carousel-control {
    top: 50%;
    position: absolute;
    color: blue;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
}
#divContentSlider .carousel-control.left{
	opacity: 0;
	left:0px;
}
#divContentSlider .carousel-control.right{
	opacity: 0;
	right:25px;
}
#divContentSlider .carousel-control .fa{
    font-size:2.5rem;
}
#divContentSlider:hover .carousel-control.left
, #divContentSlider:hover .carousel-control.right{
    color: blue;
    opacity: 0.9;
}




#divContentSlider #myCarouselContent1 .carousel-inner .item img-thumbnail{ width:150px;height:450px }
#divContentSlider #myCarouselContent1 .carousel-inner .item .col-lg-3 {width:24%;}
#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center{margin:3px 0px;padding: 0px;}
#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center:nth-child(2n){margin:3px 0px;padding: 0px;}

#divContentSlider #myCarouselContent2 .carousel-inner .item .img-thumbnail{ /*width:70% */;height:142px }
#divContentSlider #myCarouselContent2 .carousel-inner .item .col-lg-3 {width:24%;}
#divContentSlider #myCarouselContent2 .carousel-inner .item .box-center{margin:0px;padding: 0px;}
#divContentSlider #myCarouselContent2 .carousel-inner .item .box-center:nth-child(2n){margin:0px;padding: 0px;}

#divContentSlider #myCarouselContent3 .carousel-inner .item img-thumbnail {
    width: 150px;
    height: 450px
}

#divContentSlider #myCarouselContent3 .carousel-inner .item .col-lg-3 {
    width: 24%;
}

#divContentSlider #myCarouselContent3 .carousel-inner .item .box-center {
    margin: 3px 0px;
    padding: 0px;
}

    #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center:nth-child(2n) {
        margin: 3px 0px;
        padding: 0px;
    }

#divContentSlider #myCarouselContent4 .carousel-inner .item           {height:100%;}
#divContentSlider #myCarouselContent4 .carousel-inner .item .img-thumbnail       {width:250px;height:150px;}
#divContentSlider #myCarouselContent4 .carousel-inner .item .text-center{padding:0px;text-align:center;}
#divContentSlider #myCarouselContent4 .carousel-inner .item .col-lg-3 {width:24%;}
#divContentSlider #myCarouselContent4 .carousel-inner .item .box-center{background-color:rgba(17, 34, 110, 0.6);margin:10px 5px 10px 5px;padding: 10px 0px 12px 6px;}
#divContentSlider #myCarouselContent4 .carousel-inner .item .box-center:nth-child(2n){background-color:rgba(205, 38, 33, 0.6);height:85%; margin:10px 5px 10px 5px;padding: 10px 0px 12px 6px;}


#divContentSlider .item:not(.prev) {visibility: visible;}
#divContentSlider .item.right:not(.prev) {visibility: hidden;}
#divContentSlider .rightest{ visibility: visible;}
.tabs-slide .tab-content #newbook .box{background:transparent;}
.tabs-slide .tab-content #news .box{background:transparent;}
.tabs-slide .tab-content #notifications .box{background:transparent;}
.tabs-slide .tab-content #greatbook .box{background:transparent;}
.tabs-slide .tab-content #materiallink .box{background:transparent;}

#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center, #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center {
    overflow: hidden;
}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .title, #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center .title {
        margin: auto;
        text-align: center;
    }
#divContentSlider #myCarouselContent2 .carousel-inner .item .box-center .title {
    /*display:none;*/
    margin: auto;
    text-align: center;
}
#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left, #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left {
    width: 180px;
    height: 100%;
    margin: auto;
}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left .img-thumbnail, #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center .icon-left .img-thumbnail {
        width: 100% !important;
        height: 100% !important;
    }
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left .summary, #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center .icon-left .summary {
        display: none;
    }
#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-top, #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center .icon-top {
    width: 250px;
    height: 135px;
    margin: auto;
}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-top .img-thumbnail {
        width: 100% !important;
        height: 100% !important;
    }
    #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center .icon-top .img-thumbnail {
        object-fit: contain;
        height: 100% !important;
    }
#divContentSlider #myCarouselContent2 .carousel-inner .item .box-center .icon-left{
    width: 100%;
    height: 150px;
    margin:auto;
}
    #divContentSlider #myCarouselContent2 .carousel-inner .item .box-center .icon-left .img-thumbnail {
        width: 100% !important;
        height: 100% !important;
    }
    #divContentSlider #myCarouselContent2 .carousel-inner .item .box-center .icon-top{
    /* height: 180px; */
    overflow: hidden;
    position: relative;
    background:transparent;
    margin:auto;
    text-align:center;
}
    #divContentSlider #myCarouselContent2 .carousel-inner .item .box-center .icon-top .img-thumbnail {
       /* width: 100% !important;*/ 
       /* height: 100% !important; */ 
       object-fit:contain;
    }


#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center:hover .summary, #divContentSlider #myCarouselContent2 .carousel-inner .item .box-center:hover .summary, #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center:hover .summary {
    opacity: 1;
}
#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .summary, #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center .summary {
    display: none;
    width: 100%;
    height: auto;
    text-align: justify;
    color: black;
    padding-right: 6px;
}
#divContentSlider #myCarouselContent2 .carousel-inner .item .box-center .summary {
    width: 100%;
    height: 100%;
    text-align: justify;
    color: black;
    color: black;
    padding-right: 6px;
    display: none;
}


#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .title a
, #divContentSlider #myCarouselContent2 .carousel-inner .item .box-center .title a
, #divContentSlider #myCarouselContent3 .carousel-inner .item .box-center .title a
, #divContentSlider #myCarouselContent4 .carousel-inner .item .box-center .title a {
    /*color:white;*/
}



/*Tab style*/
#content-slider.nav-tabs > li > a {
    background: white;
    color: #024282;
    margin: 0 auto;
    padding: 8px 15px;
    text-transform: uppercase;
    font-weight: bold;
    border-top: 3px solid;
    border-radius: 6px 6px 0px 0px;
}
#content-slider.nav-tabs > li:hover > a {
    border-radius: 6px 6px 6px 6px;
    border-top: 3px solid #cd2621;
    border-bottom: 3px solid #024282;
    background: #ddd;
    padding: 8px 15px;
    color: #cd2621;
    text-transform: uppercase;
    font-weight: bold;
}
#content-slider.nav-tabs > li.active > a,
#content-slider.nav-tabs > li.active > a:focus,
#content-slider.nav-tabs > li.active > a:hover {
    background: #cd2621 none repeat scroll 0% 0%;
    color: white;
    text-decoration: none;
    border-radius: 6px 6px 6px 6px;
    border-top: 3px solid #cd2621;
}

/* Chỉnh chiều cao slide show */
#myCarouselContent2 {
    height:250px;
    overflow:hidden;
}