﻿
@media only screen and (min-width: 800px) {
    .ancuon {
        height: 600px;
        overflow: auto;
        border: 1px solid #babcbf
    }

    .fixbut {
        position: fixed;
        bottom: 10%;
        max-width: 50%;
        right: 0;
        padding: 15px;
        margin: 5px;
        z-index: 0;
        box-shadow: -2px -2px 2px rgba(0,0,0,0.2);
        -moz-transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        background-color: #f8d8d8;
        border-radius: 5px;
        -webkit-animation: myfirst 1s; /* Chrome, Safari, Opera */
        animation: myfirst 1s;
    }

        .fixbut:hover {
            background-color: #edeeb5;
            padding: 20px;
            -moz-transform: scale(1.5);
            box-shadow: -5px -5px 5px rgba(0,0,0,0.2);
            border: 1px solid #babcbf;
        }



    @-webkit-keyframes myfirst {
        0% {
            background-color: #fbeaea;
            bottom: 10%;
            max-width: 50%;
            right: -20px;
        }

        100% {
            background-color: #f8d8d8;
            bottom: 10%;
            max-width: 50%;
            right: 0;
        }
    }



    .divChay {
        position: fixed;
        top: 40%;
        left: 40%;
        z-index: 11998
    }

    .divLonMo {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #808080;
        opacity: 0.7;
        z-index: 999
    }

    .divLon {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999
    }

    .divnho {
        max-width: 400px;
        height: auto;
        top: 25%;
        margin: 0 auto;
        position: relative;
        background-color: #fff;
        opacity: 1;
        z-index: 999
    }

    .divnhotraloi {
        max-width: 800px;
        min-height: 500px;
        height: 550px;
        top: 5%;
        margin: 0 auto;
        position: relative;
        background-color: #fff;
        opacity: 1;
        z-index: 999
    }

    .divnhoview {
        max-width: 95%;
        max-height: 95%;
        top: 5%;
        margin: 0 auto;
        position: relative;
        background-color: #fff;
        opacity: 1;
        z-index: 999
    }
   
    }

@media only screen and (max-width: 800px) {
    .fixbut {
        position: fixed;
        bottom: 10%;
        max-width: 50%;
        right: 0;
        padding: 15px;
        margin: 5px;
        z-index: 0;
        box-shadow: -2px -2px 2px rgba(0,0,0,0.2);
        -moz-transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        background-color: #f8d8d8;
        border-radius: 5px;
        -webkit-animation: myfirst 1s; /* Chrome, Safari, Opera */
        animation: myfirst 1s;
    }

    .divLonMo {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #808080;
        opacity: 0.5;
        z-index: 999
    }

    .divLon {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999
    }

    .divnho {
        width: 90%;
        height: auto;
        top: 25%;
        margin: 0 auto;
        position: fixed;
        background-color: #fff;
        opacity: 1;
        z-index: 999
    }

    .divnhotraloi {
        max-width: 90%;
        min-height: 500px;
        height: 500px;
        top: 5%;
        margin: 0 auto;
        position: relative;
        background-color: #fff;
        opacity: 1;
        z-index: 999
    }

    #unseen table td:nth-child(2),
    #unseen table th:nth-child(2) {
        display: none;
    }

    #nhapdiemtc table td:nth-child(1),
    #nhapdiemtc table th:nth-child(1),
    #nhapdiemtc table td:nth-child(4),
    #nhapdiemtc table th:nth-child(4) {
        display: none;
    }

    .Ghichu {
        width: 100px;
    }

    .ancuon {
        height: auto;
        overflow: auto;
        border: 0px solid #babcbf
    }

    #flip-scroll .cf:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    #flip-scroll * html .cf {
        zoom: 1;
    }

    #flip-scroll *:first-child + html .cf {
        zoom: 1;
    }

    #flip-scroll table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }

    #flip-scroll th,
    #flip-scroll td {
        margin: 0;
        vertical-align: top;
    }

    #flip-scroll th {
        text-align: left;
    }

    #flip-scroll table {
        display: block;
        position: fixed;
        width: 100%;
    }

    #flip-scroll thead {
        display: block;
        float: left;
    }

    #flip-scroll tbody {
        display: block;
        width: auto;
        position: relative;
        overflow-x: auto;
        white-space: nowrap;
    }

    #flip-scroll thead tr {
        display: block;
    }

    #flip-scroll th {
        display: block;
        text-align: right;
    }

    #flip-scroll tbody tr {
        display: inline-block;
        vertical-align: top;
    }

    #flip-scroll td {
        display: block;
        min-height: 1.25em;
        text-align: left;
    }


    /* sort out borders */

    #flip-scroll th {
        border-bottom: 1px solid #babcbf;
        padding-bottom: 8px;
        border-left: 0;
    }

    #flip-scroll td {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    #flip-scroll tbody tr {
        border-left: 1px solid #babcbf;
    }

    #flip-scroll th:last-child,
    #flip-scroll td:last-child {
        border-bottom: 1px solid #babcbf;
    }


   

        /* Force table to not be like tables anymore */
        #no-more-tables table,
        #no-more-tables thead,
        #no-more-tables tbody,
        #no-more-tables th,
        #no-more-tables td,
        #no-more-tables tr {
            display: block;
        }

            /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        #no-more-tables tr {
            border: 1px solid #ccc;
        }

        #no-more-tables td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 5%;
            white-space: normal;
            text-align: left;
        }

        #no-more-tables td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                text-align: left;
                font-weight: bold;
            }

            /*
	Label the data
	*/
            #no-more-tables td:before {
                content: attr(data-title);
            }

      
    



    #hocphanKCT table td:nth-child(2),
    #hocphanKCT table th:nth-child(2),
    #hocphanKCT table td:nth-child(8),
    #hocphanKCT table th:nth-child(8),
    #hocphanKCT table td:nth-child(6),
    #hocphanKCT table th:nth-child(6),
    #hocphanKCT table td:nth-child(7),
    #hocphanKCT table th:nth-child(7),
    #hocphanKCT table td:nth-child(11),
    #hocphanKCT table th:nth-child(11) {
        display: none;
    }
}


@media only screen and (max-width: 540px) {
    .divLonMo {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #808080;
        opacity: 0.5;
        z-index: 999
    }

    .divLon {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999
    }

    .divnho {
        width: 90%;
        height: auto;
        top: 25%;
        margin: 0 auto;
        position: relative;
        background-color: #fff;
        opacity: 1;
        z-index: 999
    }

    .divnhotraloi {
        max-width: 90%;
        min-height: 500px;
        height: 550px;
        top: 5%;
        margin: 0 auto;
        position: relative;
        background-color: #fff;
        opacity: 1;
        z-index: 999
    }


    @-webkit-keyframes myfirst {
        0% {
            background-color: #fbeaea;
            bottom: 10%;
            max-width: 100%;
            right: -20px;
        }

        100% {
            background-color: #f8d8d8;
            bottom: 10%;
            max-width: 100%;
            right: 0;
        }
    }

    .Ghichu {
        width: 50px;
    }

    .ancuon {
        height: auto;
        overflow: hidden;
        border: 0px solid #babcbf
    }

    .hiencuon {
        height: auto;
        overflow: auto;
        border: 0px solid #babcbf
    }

    #unseen table td:nth-child(4),
    #unseen table th:nth-child(4),
    #unseen table td:nth-child(7),
    #unseen table th:nth-child(7),
    #unseen table td:nth-child(8),
    #unseen table th:nth-child(8) {
        display: none;
    }


    #hocphan table td:nth-child(1),
    #hocphan table th:nth-child(1),
    #hocphan table td:nth-child(2),
    #hocphan table th:nth-child(2),
    #hocphan table td:nth-child(4),
    #hocphan table th:nth-child(4),
    #hocphan table td:nth-child(5),
    #hocphan table th:nth-child(5) {
        display: none;
    }





    #nhapdiemtc table td:nth-child(2),
    #nhapdiemtc table th:nth-child(2),
    #nhapdiemtc table td:nth-child(1),
    #nhapdiemtc table th:nth-child(1),
    #nhapdiemtc table td:nth-child(4),
    #nhapdiemtc table th:nth-child(4) {
        display: none;
    }

    #hocphanKCT table td:nth-child(1),
    #hocphanKCT table th:nth-child(1),
    #hocphanKCT table td:nth-child(2),
    #hocphanKCT table th:nth-child(2),
    #hocphanKCT table td:nth-child(3),
    #hocphanKCT table th:nth-child(3),
    #hocphanKCT table td:nth-child(6),
    #hocphanKCT table th:nth-child(6),
    #hocphanKCT table td:nth-child(7),
    #hocphanKCT table th:nth-child(7),
    #hocphanKCT table td:nth-child(8),
    #hocphanKCT table th:nth-child(8),
    #hocphanKCT table td:nth-child(9),
    #hocphanKCT table th:nth-child(9),
    #hocphanKCT table td:nth-child(10),
    #hocphanKCT table th:nth-child(10),
    #hocphanKCT table td:nth-child(11),
    #hocphanKCT table th:nth-child(11) {
        display: none;
    }

    #hocphanBDiem table td:nth-child(1),
    #hocphanBDiem table th:nth-child(1),
    #hocphanBDiem table td:nth-child(2),
    #hocphanBDiem table th:nth-child(2),
    #hocphanBDiem table td:nth-child(4),
    #hocphanBDiem table th:nth-child(4) {
        display: none;
    }

    #hocphi table td:nth-child(1),
    #hocphi table th:nth-child(1),
    #hocphi table td:nth-child(2),
    #hocphi table th:nth-child(2) {
        display: none;
    }

    .fixbut {
        position: fixed;
        bottom: 10%;
        max-width: 100%;
        right: 0;
        padding: 15px;
        margin: 5px;
        z-index: 0;
        box-shadow: -2px -2px 2px rgba(0,0,0,0.2);
        -moz-transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        background-color: #f8d8d8;
        border-radius: 5px;
        -webkit-animation: myfirst 1s; /* Chrome, Safari, Opera */
        animation: myfirst 1s;
    }


    .divnho {
        position: fixed;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        position: relative;
        background-color: #fff;
        opacity: 1;
        z-index: 999
    }

    .modal-content {
        background-color: #f4f4f4;
        margin: 5% auto;
        width: 95%;
        box-shadow: 0 5px 8px 0px rgba(0, 0, 0, 0.2), 0 7px 20px 0px rgba(0, 0, 0, 0.17);
        animation-name: modalopen;
        animation-duration: 1s;
    }

    .modal-header {
        background: Olive;
        padding: 5px;
        color: #fff;
    }

    .modal-body {
        padding: 5px 5px;
    }
}
