﻿

    @media only screen and (min-width:996px) {
        #myCarouselContent1 {
            margin-top: 50px;
            height: 352px;
        }

        #myCarouselContent9 {
            margin-top: 50px;
            height: 320px;
        }
    }

    @media only screen and (max-width:575px) {
        #myCarouselContent1 img {
            width: 95px;
            height: 130px;
            object-fit: cover;
        }
        #myCarouselContent9 .icon-top {
            height: 120px;
        }

        #myCarouselContent9 {
            padding-bottom: 20px;
            padding-top: 20px;
        }
    }

    @media only screen and (min-width:576px) and (max-width:768px) {
        #myCarouselContent1 img {
            width: 95px;
            height: 130px;
            object-fit: cover;
        }
        #myCarouselContent9 .icon-top {
            height: 120px;
        }
        #myCarouselContent9 {
            padding-bottom: 20px;
            padding-top: 20px;
        }
    }

    @media only screen and (min-width:769px) and (max-width:1024px) {
        #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;
        }

        #myCarouselContent1 img {
            width: 95px;
            height: 130px;
            object-fit: cover;
        }
        #myCarouselContent9 .icon-top {
            height: 120px;
        }
        #myCarouselContent9{
            padding-bottom: 20px;
            padding-top: 20px;
        }
    }

    @media only screen and (min-width:1025px) and (max-width:1280px) {
        #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left {
            width: 180px !important;
            height: 250px !important;
        }

        #myCarouselContent1 img {
            width: 100px;
            height: 140px;
            object-fit: cover;
        }
        #myCarouselContent9 .icon-top {
            height: 110px;
        }
    }

    @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;
            }

        #myCarouselContent1 img {
            width: 110px;
            height: 150px;
            object-fit: cover;
        }
        #myCarouselContent9 .icon-top {
            height: 120px;
        }
    }

    @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;
            }

        #myCarouselContent1 img {
            width: 120px;
            height: 160px;
            object-fit: cover;
        }
        #myCarouselContent9 .icon-top {
            height: 150px;
        }
       
    }

    @media only screen and (min-width:1920px) {
        #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-left {
            width: 180px !important;
            height: 250px !important;
        }

        #myCarouselContent1 img {
            width: 130px;
            height: 180px;
            object-fit: cover;
        }
        #myCarouselContent9 .icon-top {
            height: 180px;
        }
    }

    #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;
}
.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: #9e250d !important;
    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 !important;
}
#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:3px;padding: 0px;}
#divContentSlider #myCarouselContent2 .carousel-inner .item .box-center:nth-child(2n){margin:3px;padding: 0px;}

#divContentSlider #myCarouselContent3 .carousel-inner .item .img-thumbnail{ width:120px;height:180px;margin:auto; }
#divContentSlider #myCarouselContent3 .carousel-inner .item .col-lg-3 {width:24%;}
#divContentSlider #myCarouselContent3 .carousel-inner .item .box-center{background-color:rgba(17, 34, 110, 0.6);margin:10px 5px 10px 5px;padding: 6px 0px 6px 6px;}
#divContentSlider #myCarouselContent3 .carousel-inner .item .box-center:nth-child(2n){background-color:rgba(205, 38, 33, 0.6);height:90%; margin:10px 5px 10px 5px;padding: 6px 0px 6px 6px;}

#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{
    height: auto;
}
#divContentSlider #myCarouselContent1 .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{
    width: 180px;
    height: 100%;
    margin:auto;
}
    #divContentSlider #myCarouselContent1 .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 {
    display: none;
}
#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-top{
    
}
    #divContentSlider #myCarouselContent1 .carousel-inner .item .box-center .icon-top .img-thumbnail {
        width: 100% !important;
        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; */ 
    }


#divContentSlider #myCarouselContent1 .carousel-inner .item .box-center:hover .summary#divContentSlider #myCarouselContent2 .carousel-inner .item .box-center:hover .summary {
    opacity: 1;
}
#divContentSlider #myCarouselContent1 .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 {
    display: -webkit-box; /* Kích hoạt hộp linh hoạt */
    -webkit-box-orient: vertical; /* Hướng dọc */
    overflow: hidden; /* Ẩn phần nội dung thừa */
    text-overflow: ellipsis; /* Thêm dấu "..." */
    -webkit-line-clamp: 4; /* Giới hạn số dòng hiển thị là 3 */
    line-height: 1.5; /* Đặt chiều cao dòng */
}



/*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;
}
