@import url('reset.css');
@import url('global.css');
@import url('global-mobile.css');
@import url('master-mobile.css');

@media all and (min-width: 1000px) {
    #list_cat li {
        border: 1px solid #A0C73F;
        float: left;
        width: 200px;
        height: 220px;
        overflow: hidden;
        margin-right: 18px;
        margin-bottom: 18px;
        border-radius: 0px 25px 0px 25px;
        box-shadow: 3px 2px 5px black;
        position: relative;
    }

    #list_cat img {
        display: block;
        top: 0px;
        width: 200px;
        height: 240px;
    }

    #list_cat span {
        position: absolute;
        bottom: 0px;
        display: block;
        text-align: center;
        background: #A0C73F;
        width: 200px;
        height: 50px;
        line-height: 50px;
        left: 0px;
        transition: 1s;
    }

    #list_cat li:hover span {
        left: -200px;
        transition: 1s;
    }

    #list_cat li:active {
        border: 1px solid #EFBFB3;
    }

    .pagenum {
        margin-bottom: 20px;
        clear: both;
    }

        .pagenum span {
            float: left;
            line-height: 25px;
            margin-right: 5px;
        }

        .pagenum ul li {
            float: left;
        }

        .pagenum li em {
            border: 1px solid;
            line-height: 25px;
            margin-right: 5px;
            padding: 6px 10px;
        }

        .pagenum li a {
            display: block;
            padding: 5px 10px;
            margin-right: 5px;
            background: green;
            color: #FFF;
        }

            .pagenum li a:hover {
                background: pink;
                color: green;
                text-decoration: none;
                box-shadow: 2px 2px 2px #000;
            }

            .pagenum li a:active {
                background: #000;
                color: #FFF;
            }

    #list_pro li {
        border: 1px solid #A0C73F;
        float: left;
        width: 310px;
        height: 465px;
        overflow: hidden;
        margin-right: 18px;
        margin-bottom: 18px;
        border-radius: 0px 25px 0px 25px;
        box-shadow: 3px 2px 5px black;
        position: relative;
    }

    #list_pro em {
        display: block;
        position: absolute;
        top: 2px;
        left: 2px;
        font-weight: bold;
        font-family: cursive;
        height: 20px;
        padding: 5px 10px;
        background: #90DA11;
        border-radius: 10px;
        box-shadow: 2px 2px 5px #375612;
    }

    #list_pro img {
        display: block;
        top: 0px;
        width: 100%;
        height: 100%;
    }

    #list_pro span {
        position: absolute;
        bottom: 0px;
        display: block;
        text-align: center;
        font-size: 16px;
        background: #A0C73F;
        width: 100%;
        height: 50px;
        line-height: 50px;
        left: 0px;
        transition: 1s;
    }

    #list_pro li:hover span {
        left: -310px;
        transition: 1s;
    }

    #list_pro li:active {
        border: 1px solid #EFBFB3;
    }

    .ynghia_detail .img {
        float: left;
    }

    #list_topic li {
        float: left;
        margin-right: 27px;
        margin-bottom:25px;
        border-radius: 0px 25px 0px 25px;
        box-shadow: 3px 2px 5px black;
        overflow: hidden;
    }

        #list_topic li:nth-child(3n) {
            margin-right: 0px;
        }

    #list_topic a {
        display: block;
        border: 1px solid;
        position: relative;
        width: 200px;
        min-height: 200px;
    }

        #list_topic a:hover span {
            transition: 1s;
            bottom: 170px;
            color: #FFF;
        }

        #list_topic a:active span {
            color: blue;
        }

    #list_topic img {
        dipplay: block;
        width: 200px;
        height: 200px;
        position: absolute;
    }

    #list_topic span {
        position: absolute;
        width: 100%;
        background: #A0C73F;
        line-height: 30px;
        padding-left: 5px;
        bottom: 0px;
        transition: 1s;
    }

    .btn {
        padding: 5px 10px;
        margin: 10px 10px;
        box-shadow: 2px 2px 5px green;
        cursor: pointer;
    }

        .btn:hover {
            color: blue;
        }

        .btn:active {
            box-shadow: 2px 2px 2px blue;
            background: #000;
            color: #FFF;
        }
}