* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.layout .header .prtLogoIntroduce .logo_introduce .introduce {
    margin-bottom: 10px;
}

.main .under .listcode .list-content .list-box1 label {
    font-size: 13px;
    color: white;
    padding: 2px;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}


@media only screen and (max-width: 240px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 10px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 8px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        max-height: 90px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 25px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 7px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 7px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 9px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 13px;
        padding: 2px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 8px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 8px 8px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 10px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 12px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 60%;
    }

    .layout .main .sidebar {
        width: 40%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 16px;
    }

    .titleCode h1 {
        font-size: 10px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 62px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 6.5px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 11px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 8px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 10px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 7px;
                color: #981313;
            }

        /*.main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }*/

        .main .under .listcode .list-content .addtocard a {
            padding: 2px 5px;
            text-decoration: none;
            background: #0094ff;
            color: white;
            font-size: 6px;
            color: red;
            font-style: italic;
            border-radius: 2px;
        }

            .main .under .listcode .list-content .addtocard a:hover {
                background: #45ad26;
            }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 8px;
            padding: 0px 2px;
            margin: 1px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 11px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 8px;
                font-weight: bold;
                padding: 1px 4px;
                margin: 1px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 20px;
            padding: 1px;
            font-size: 7px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 12px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 10px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 8px;
            font-weight: bold;
            padding: 2px 1px;
            font-weight: normal;
            color: white;
            margin: 0px 1px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 8px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 5px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 5px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 9px;
            margin: 0;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 7px;
            padding: 1px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 10px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 6px;
            color: #981313;
            padding: 1px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 5px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 30px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 7px;
                padding: 1px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 8px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 10px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 50px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content p {
        font-size: 9px;
    }
    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 8px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 50px;
        }
}

@media only screen and (min-width: 241px) and (max-width: 280px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 10px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 8px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        max-height: 90px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 25px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 7px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 7px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 9px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 13px;
        padding: 2px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 8px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 8px 8px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 10px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 12px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 65%;
    }

    .layout .main .sidebar {
        width: 35%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 16px;
    }

    .titleCode h1 {
        font-size: 10px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 70px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 6.5px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 11px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 8px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 10px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 7px;
                color: #981313;
            }

        /*.main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }*/

        .main .under .listcode .list-content .addtocard a {
            padding: 2px 5px;
            text-decoration: none;
            background: #0094ff;
            color: white;
            font-size: 6px;
            color: red;
            font-style: italic;
            border-radius: 2px;
        }

            .main .under .listcode .list-content .addtocard a:hover {
                background: #45ad26;
            }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 8px;
            padding: 0px 2px;
            margin: 1px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 11px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 8px;
                font-weight: bold;
                padding: 1px 4px;
                margin: 1px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 20px;
            padding: 1px;
            font-size: 7px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 12px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 10px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 8px;
            font-weight: bold;
            padding: 2px 1px;
            font-weight: normal;
            color: white;
            margin: 0px 1px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 8px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 5px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 5px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 9px;
            margin: 0;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 7px;
            padding: 1px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 10px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 6px;
            color: #981313;
            padding: 1px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 5px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 30px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 7px;
                padding: 1px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 8px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 10px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 50px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content p {
        font-size: 9px;
    }
    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 8px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 50px;
        }
}

@media only screen and (min-width: 281px) and (max-width: 320px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 10px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 8px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        max-height: 100px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 25px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 8px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 8px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 9px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 13px;
        padding: 2px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 8px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 8px 8px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 10px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 12px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 65%;
    }

    .layout .main .sidebar {
        width: 35%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 16px;
    }

    .titleCode h1 {
        font-size: 11px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 80px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 8px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 13px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 9px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 12px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 8px;
                color: #981313;
            }

        /*.main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }*/

        .main .under .listcode .list-content .addtocard a {
            padding: 2px 5px;
            text-decoration: none;
            background: #0094ff;
            color: white;
            font-size: 8px;
            color: red;
            font-style: italic;
            border-radius: 2px;
        }

            .main .under .listcode .list-content .addtocard a:hover {
                background: #45ad26;
            }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 9px;
            padding: 0px 2px;
            margin: 1px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 12px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 9px;
                font-weight: bold;
                padding: 1px 4px;
                margin: 1px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 20px;
            padding: 1px;
            font-size: 8px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 8px;
            font-weight: bold;
            padding: 4px 2px;
            font-weight: normal;
            color: white;
            margin: 0px 2px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 6px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 6px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 10px;
            margin: 0;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 8px;
            padding: 1px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 6px;
            color: #981313;
            padding: 1px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 5px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 30px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 8px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 10px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 50px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content p {
        font-size: 9px;
    }
    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 8px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 50px;
        }
}

@media only screen and (min-width: 321px) and (max-width: 353px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 12px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 9px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        max-height: 100px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 30px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 8px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 8px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 9px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 13px;
        padding: 2px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 9px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 8px 8px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 10px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 13px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 65%;
    }

    .layout .main .sidebar {
        width: 35%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 16px;
    }

    .titleCode h1 {
        font-size: 11px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 95px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 9px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 15px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 10px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 14px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 10px;
                color: #981313;
            }

        /*.main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }*/

        .main .under .listcode .list-content .addtocard a {
            padding: 2px 5px;
            text-decoration: none;
            background: #0094ff;
            color: white;
            font-size: 10px;
            color: red;
            font-style: italic;
            border-radius: 2px;
        }

            .main .under .listcode .list-content .addtocard a:hover {
                background: #45ad26;
            }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 10px;
                font-weight: bold;
                padding: 2px 6px;
                margin: 2px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 8px;
            font-weight: bold;
            padding: 4px 2px;
            font-weight: normal;
            color: white;
            margin: 0px 2px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 12px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 8px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 8px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 13px;
            margin: 0;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 9px;
            padding: 1px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 8px;
            color: #981313;
            padding: 2px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 5px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 30px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 13px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 70px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content p {
        font-size: 9px;
    }
    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 8px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 50px;
        }
}

@media only screen and (min-width: 354px) and (max-width: 360px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 13px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 10px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 110px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 35px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 9px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 9px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 10px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 14px;
        padding: 2px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 10px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 8px 8px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 11px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 15px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 60%;
    }

    .layout .main .sidebar {
        width: 40%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 16px;
    }

    .titleCode h1 {
        font-size: 11px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 95px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 10px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 16px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 11px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 15px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 10px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 10px;
                color: red;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 10px;
                font-weight: bold;
                padding: 2px 6px;
                margin: 2px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 8px;
            font-weight: bold;
            padding: 4px 2px;
            font-weight: normal;
            color: white;
            margin: 0px 2px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 16px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 11px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 16px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 13px;
            color: #981313;
            padding: 2px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 90px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 12px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 60px;
        }
}

@media only screen and (min-width: 361px) and (max-width: 375px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 13px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 10px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 110px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 35px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 9px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 9px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 10px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 14px;
        padding: 2px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 10px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 8px 8px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 11px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 15px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 60%;
    }

    .layout .main .sidebar {
        width: 40%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 16px;
    }

    .titleCode h1 {
        font-size: 11px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 95px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 10px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 16px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 11px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 15px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 10px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 10px;
                color: red;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 10px;
                font-weight: bold;
                padding: 2px 6px;
                margin: 2px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 8px;
            font-weight: bold;
            padding: 4px 2px;
            font-weight: normal;
            color: white;
            margin: 0px 2px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 16px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 11px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 16px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 13px;
            color: #981313;
            padding: 2px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 90px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 12px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 60px;
        }
}

@media only screen and (min-width: 376px) and (max-width: 384px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 13px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 10px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 110px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 35px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 9px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 9px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 10px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 14px;
        padding: 2px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 10px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 8px 8px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 11px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 15px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 60%;
    }

    .layout .main .sidebar {
        width: 40%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 16px;
    }

    .titleCode h1 {
        font-size: 11px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 100px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 10px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 16px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 11px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 15px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 10px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 10px;
                color: red;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 10px;
                font-weight: bold;
                padding: 2px 6px;
                margin: 2px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 8px;
            font-weight: bold;
            padding: 4px 2px;
            font-weight: normal;
            color: white;
            margin: 0px 2px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 16px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 11px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 16px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 13px;
            color: #981313;
            padding: 2px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 90px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 12px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 60px;
        }
}

@media only screen and (min-width: 385px) and (max-width: 390px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 13px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 10px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 120px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 35px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 9px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 9px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 10px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 14px;
        padding: 2px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 10px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 8px 8px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 11px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 16px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 65%;
    }

    .layout .main .sidebar {
        width: 35%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 18px;
    }

    .titleCode h1 {
        font-size: 12px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 110px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 11px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 16px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 11px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 15px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 10px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 8px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 12px;
                font-weight: bold;
                padding: 2px 8px;
                margin: 2px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 12px;
            font-weight: bold;
            padding: 4px 2px;
            font-weight: normal;
            color: white;
            margin: 0px 2px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 16px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 11px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 16px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 13px;
            color: #981313;
            padding: 2px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 90px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 12px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 60px;
        }
}

@media only screen and (min-width: 391px) and (max-width: 414px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 14px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 11px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 130px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 40px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 10px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 10px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 11px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 15px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 10px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 8px 8px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 11px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 16px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 65%;
    }

    .layout .main .sidebar {
        width: 35%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 18px;
    }

    .titleCode h1 {
        font-size: 12px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 110px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 11px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 16px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 11px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 15px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 10px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 8px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 12px;
                font-weight: bold;
                padding: 2px 8px;
                margin: 2px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 12px;
            font-weight: bold;
            padding: 4px 2px;
            font-weight: normal;
            color: white;
            margin: 0px 2px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 16px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 11px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 16px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 13px;
            color: #981313;
            padding: 2px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 90px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 12px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 60px;
        }
}

@media only screen and (min-width: 415px) and (max-width: 480px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 15px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 12px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 130px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 40px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 10px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 10px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 60px;
        width: 55%;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 11px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 15px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 35%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 10px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 12px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 18px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 65%;
    }

    .layout .main .sidebar {
        width: 35%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 18px;
    }

    .titleCode h1 {
        font-size: 12px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 115px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 11px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 18px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 11px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 15px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 10px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 8px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 12px;
                font-weight: bold;
                padding: 2px 8px;
                margin: 2px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 12px;
            font-weight: bold;
            padding: 4px 2px;
            font-weight: normal;
            color: white;
            margin: 0px 4px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 16px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 11px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 16px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 13px;
            color: #981313;
            padding: 2px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 90px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 12px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 8px;
            }

        .layout .footer .f-row2 img {
            width: 60px;
        }
}

@media only screen and (min-width: 481px) and (max-width: 540px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 3px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 16px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 13px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 150px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 50px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 12px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 13px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 80px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 12px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 17px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 13px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 20px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 70%;
    }

    .layout .main .sidebar {
        width: 30%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 20px;
    }

    .titleCode h1 {
        font-size: 13px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 95px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 10px;
            color: #fff;
            letter-spacing: 1px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 18px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 11px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 15px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 10px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 13px;
                font-weight: bold;
                padding: 4px 10px;
                margin: 2px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 13px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 14px;
            font-weight: bold;
            padding: 4px 2px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 16px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 11px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 16px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 13px;
            color: #981313;
            padding: 2px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 90px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 10px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}

@media only screen and (min-width: 541px) and (max-width: 600px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 18px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 14px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 12px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 17px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 14px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 22px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 25px;
    }

    .titleCode h1 {
        font-size: 15px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 110px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 11px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 20px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 12px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 18px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 11px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 14px;
                font-weight: bold;
                padding: 4px 10px;
                margin: 4px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 15px;
            font-weight: bold;
            padding: 4px 6px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 10px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 16px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 11px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 16px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 13px;
            color: #981313;
            padding: 2px;
            font-weight: normal;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px 0px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 8px;
                font-weight: normal;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 90px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}

@media only screen and (min-width: 601px) and (max-width: 640px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 20px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 15px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 13px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 17px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 15px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 25px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 25px;
    }

    .titleCode h1 {
        font-size: 15px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 120px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 11px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 20px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 12px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 18px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 11px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 14px;
                font-weight: bold;
                padding: 4px 10px;
                margin: 4px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 2px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 15px;
            font-weight: bold;
            padding: 4px 6px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 16px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 12px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 12px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 18px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 12px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 18px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 11px;
            padding: 2px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 12px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 90px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}

@media only screen and (min-width: 641px) and (max-width: 712px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 20px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 15px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 15px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 20px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 17px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 30px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 30px;
    }

    .titleCode h1 {
        font-size: 16px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 130px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 11px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 20px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 12px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 18px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 11px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 17px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 15px;
                font-weight: bold;
                padding: 4px 10px;
                margin: 4px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 3px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 15px;
            font-weight: bold;
            padding: 4px 6px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 17px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 12px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 12px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 20px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 13px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 18px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 12px;
            padding: 2px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 35px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 13px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 13px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 100px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}

@media only screen and (min-width: 713px) and (max-width: 768px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 20px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 15px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 15px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 20px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 17px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 33px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 30px;
    }

    .titleCode h1 {
        font-size: 16px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 120px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 11px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 20px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 12px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 18px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 11px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 17px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 15px;
                font-weight: bold;
                padding: 4px 10px;
                margin: 4px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 3px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 15px;
            font-weight: bold;
            padding: 4px 6px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 20px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 22px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 14px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 20px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 12px;
            padding: 2px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 40px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 14px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 13px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 100px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}

@media only screen and (min-width: 769px) and (max-width: 800px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 20px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 15px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 15px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 20px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 17px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 37px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 30px;
    }

    .titleCode h1 {
        font-size: 18px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 120px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 12px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 22px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 12px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 20px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 11px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 17px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 15px;
                font-weight: bold;
                padding: 4px 10px;
                margin: 4px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 3px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 15px;
            font-weight: bold;
            padding: 4px 6px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 25px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 15px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 22px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 14px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 22px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 12px;
            padding: 2px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 45px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 14px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 14px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 100px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}


@media only screen and (min-width: 801px) and (max-width: 820px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 20px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 15px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 15px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 20px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 17px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 37px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 30px;
    }

    .titleCode h1 {
        font-size: 18px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 120px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 12px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 22px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 12px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 20px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 11px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 17px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 15px;
                font-weight: bold;
                padding: 4px 10px;
                margin: 4px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 3px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 15px;
            font-weight: bold;
            padding: 4px 6px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 25px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 15px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 22px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 14px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 22px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 12px;
            padding: 2px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 45px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 14px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 14px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 100px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}

@media only screen and (min-width: 821px) and (max-width: 912px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 20px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 15px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 15px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 20px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 17px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 40px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 30px;
    }

    .titleCode h1 {
        font-size: 18px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 120px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 12px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 22px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 12px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 20px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 11px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 10px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 17px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 15px;
                font-weight: bold;
                padding: 4px 10px;
                margin: 4px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 3px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 15px;
            font-weight: bold;
            padding: 4px 6px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 25px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 15px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 22px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 14px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 22px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 12px;
            padding: 2px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 45px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 14px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 14px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 100px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}

@media only screen and (min-width: 913px) and (max-width: 1024px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 20px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 15px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 4px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 15px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 20px;
        padding: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 17px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 45px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 30px;
    }

    .titleCode h1 {
        font-size: 18px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 120px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 12px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 25px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 13px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 22px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 12px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 13px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 17px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 17px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 17px;
                font-weight: bold;
                padding: 6px 13px;
                margin: 6px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 3px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 17px;
            font-weight: bold;
            padding: 6px 8px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 25px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 15px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 13px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 22px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 14px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 22px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 12px;
            padding: 2px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 50px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 14px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 14px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 14px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 100px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 20px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 15px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 15px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 20px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 17px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 50px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 30px;
    }

    .titleCode h1 {
        font-size: 20px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 160px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 14px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 30px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 14px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 25px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 13px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 14px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 17px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 17px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 17px;
                font-weight: bold;
                padding: 6px 10px;
                margin: 6px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 3px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 17px;
            font-weight: bold;
            padding: 6px 8px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 30px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 20px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 14px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 25px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 15px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 25px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 15px;
            padding: 2px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 70px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 16px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 15px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 15px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 100px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}

@media only screen and (min-width: 1280px) {
    /*====== Header ======*/
    .layout .header .prtUser .user {
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .layout .header .prtUser .user ul li {
            padding: 2px;
            margin: 0;
        }

            .layout .header .prtUser .user ul li img {
                width: 20px;
            }

            .layout .header .prtUser .user ul li a {
                font-size: 15px;
                padding: 4px;
            }

    .layout .header .prtLogoIntroduce .logo_introduce .introduce {
        min-height: 170px;
    }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce img.logo {
            width: 60px;
        }

        .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li {
            color: white;
            font-size: 13px;
            font-family: "Croissant One";
            font-style: italic;
        }

            .layout .header .prtLogoIntroduce .logo_introduce .introduce .content ul li img {
                vertical-align: middle;
                width: 14px;
                margin-right: 2px;
                margin-bottom: 2px;
            }

    .layout .header .prtLogoIntroduce img.img-menu {
        max-height: 90px;
    }

    .layout .header .prtLogoIntroduce .store ul li span {
        font-size: 15px;
    }

    .layout .header .prtLogoIntroduce .store ul li img {
        width: 20px;
    }

    /*====== Search ======*/
    .header .prtSearch {
        margin-top: 2px;
    }

        .header .prtSearch .searchInput {
            width: 20%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            outline-style: none;
            background-color: white;
            background-image: url("../images/icon/search.png");
            background-size: 10px 10px;
            background-position: 2px 5px;
            background-repeat: no-repeat;
            padding: 2px 10px 1px 15px;
        }

    /*====== menu fake ======*/
    .layout .prtMenuFake .fake h2 {
        font-size: 17px;
    }

    .layout .prtMenuFake .fake ul li img {
        width: 50px;
    }
    /*====== Layout ======*/
    .layout .main .content {
        width: 75%;
    }

    .layout .main .sidebar {
        width: 25%;
    }
    /*====== Tieu de ======*/
    .titleCode img {
        width: 30px;
    }

    .titleCode h1 {
        font-size: 20px;
        padding: 3px;
    }
    /*====== Danh sach ======*/

    .main .under .listcode .list-content {
        max-width: 180px;
        position: relative;
        margin: 5px 2px;
        display: block;
    }

        .main .under .listcode .list-content .list-box1 label {
            font-size: 14px;
            color: #fff;
            letter-spacing: 1.5px;
        }

        .main .under .listcode .list-content .list-box1 img.list-imgbook {
            width: 100%;
            margin-top: 3px;
        }

        .main .under .listcode .list-content .list-box1 img.list-play {
            width: 30px;
            position: absolute;
            top: 50%;
            right: -5%;
            cursor: pointer;
            opacity: .3;
        }

            .main .under .listcode .list-content .list-box1 img.list-play:hover {
                opacity: 1;
            }

        .main .under .listcode .list-content .list-box2 {
            position: relative;
            width: 100%;
            display: block;
            border: 1px solid #45ad26;
            border-radius: 15px 0px 15px 0px;
            padding: 5px;
            text-align: justify;
        }

            .main .under .listcode .list-content .list-box2 .list-title {
                font-family: "Croissant One";
                font-size: 14px;
                color: #0094ff;
                font-style: italic;
            }

            .main .under .listcode .list-content .list-box2 .list-dollar {
                text-align: right;
            }

                .main .under .listcode .list-content .list-box2 .list-dollar img {
                    width: 25px;
                }

            .main .under .listcode .list-content .list-box2 .list-price {
                font-size: 13px;
                color: #981313;
            }

        .main .under .listcode .list-content .addtocard {
            text-align: right;
            font-size: 18px;
            margin: 5px;
        }

            .main .under .listcode .list-content .addtocard a {
                padding: 2px 5px;
                text-decoration: none;
                background: #0094ff;
                color: white;
                font-size: 14px;
                font-style: italic;
                border-radius: 2px;
            }

                .main .under .listcode .list-content .addtocard a:hover {
                    background: #45ad26;
                }


    /*======phan trang ======*/
    .main .under .phantrang .baoquanh {
        margin-top: 0;
    }

        .main .under .phantrang .baoquanh .phantrang a {
            font-size: 17px;
            padding: 0px 4px;
            margin: 2px;
        }

        .main .under .phantrang .baoquanh .findPage label {
            font-size: 17px;
        }

        .main .under .phantrang .baoquanh .phantrang .hienthitrang {
            display: block;
        }

            .main .under .phantrang .baoquanh .phantrang .hienthitrang a {
                font-size: 17px;
                font-weight: bold;
                padding: 6px 10px;
                margin: 6px;
            }

        .main .under .phantrang .baoquanh .findPage input[type=text] {
            width: 30px;
            padding: 3px;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .main .under .phantrang .baoquanh .findPage #btnfindpage {
            font-size: 15px;
        }

        .main .under .phantrang .baoquanh .pmsg {
            font-size: 14px;
        }

        .main .under .phantrang .baoquanh .phantrang a.alink {
            font-size: 17px;
            font-weight: bold;
            padding: 6px 8px;
            font-weight: normal;
            color: white;
            margin: 0px 5px;
        }

    /*====== Side bar ======*/
    /*====== Side bar ======*/
    .layout .main .sidebar .p-sidebar {
        margin-top: 1px;
        overflow: hidden;
    }

        .layout .main .sidebar .p-sidebar .coding .vn img {
            width: 30px;
        }

        .layout .main .sidebar .p-sidebar .coding .vn span {
            font-size: 20px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li span {
            font-size: 14px;
        }

        .layout .main .sidebar .p-sidebar .coding ul li img {
            width: 25px;
        }


        .layout .main .sidebar .p-sidebar .coding ul li a {
            font-size: 15px;
            padding: 2px;
            margin: 0px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user img {
            width: 25px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user span {
            font-size: 15px;
            padding: 2px;
        }

        .layout .main .sidebar .p-sidebar .sidebar-user ul li {
            margin: 2px;
        }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li .avatar {
                width: 70px;
            }

            .layout .main .sidebar .p-sidebar .sidebar-user ul li a {
                font-size: 16px;
                padding: 2px;
                margin: 0px;
            }

        .layout .main .sidebar .p-sidebar .sidebar-user p {
            font-size: 15px;
        }

    .layout .main .sidebar .recent-post .title p {
        font-size: 15px;
        letter-spacing: normal;
        padding: 2px;
    }

    .layout .main .sidebar .recent-post #article .recent-post-content img {
        max-width: 100px;
    }

    /*====== Footer ======*/
    /*====== Footer ======*/
    .layout .footer {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

        .layout .footer .pa-footer {
            width: 100%;
            height: inherit;
        }

            .layout .footer .pa-footer .f-row1 .f-title h1 {
                font-size: 17px;
            }

            .layout .footer .pa-footer .f-row1 .f-img img {
                width: 50px;
            }

            .layout .footer .pa-footer .f-row1 .f-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

                .layout .footer .pa-footer .f-row1 .f-menu li {
                    padding: 2px;
                }

                    .layout .footer .pa-footer .f-row1 .f-menu li a {
                        font-size: 13px;
                    }

            .layout .footer .pa-footer f-row2 img {
                width: 60px;
            }


        .layout .footer .f-row-title {
            position: absolute;
            top: 10px;
            left: 50%;
            width: 50%;
            overflow-wrap: break-word;
        }

            .layout .footer .f-row-title .p-f-title {
                font-size: 13px;
            }

        .layout .footer .f-row2 img {
            width: 70px;
        }
}