

/*============ MOBILE =================*/
@media all and (max-width: 599px){
    .layout_5_ma div{
        float: left;
    }

    .wrap_top_5_ma{
        width: 100%;
        display: inline-table;
    }

    .top_5_tang,
    .top_5_giam,
    .top_5_thanh_khoan{
        display: inline-table;
    }



    .icon_ma_tang{
        width: 12%;
        height: 50px;
        background: url("../img/bg-5-tang.jpg") no-repeat;
        background-size: cover;
        margin-right: 8px;
    }
    .ma_tang{
        background: url("../img/bg-5-tang.jpg") no-repeat;
        background-size: cover;
    }



    .icon_ma_tang img{
        width: 30px;
        margin-top: 10px;
        margin-left: 3px;
    }


    .icon_ma_giam{
        width: 12%;
        height: 50px;
        background: url("../img/bg-5-giam.jpg") no-repeat;
        background-size: cover;
        margin-right: 8px;
    }
    .ma_giam{
        background: url("../img/bg-5-giam.jpg") no-repeat;
        background-size: cover;
    }


    .icon_ma_giam img{
        width: 30px;
        margin-top: 10px;
        margin-left: 3px;
    }


    .icon_ma_thanh_khoan{
        width: 12%;
        height: 50px;
        background: url("../img/bg-5-thanh-khoan.jpg") no-repeat;
        background-size: cover;
        margin-right: 8px;
    }
    .ma_thanh_khoan{
        background: url("../img/bg-5-thanh-khoan.jpg") no-repeat;
        background-size: cover;
    }


    .icon_ma_thanh_khoan img{
        width: 30px;
        margin-top: 10px;
        margin-left: 3px;
    }





    .all_ma{
        width: 85%;
        height: 50px;
    }
    .all_ma ul li{
        width: 20%;
        float: left;
    }
    .all_ma div{
        width: 100%;
    }
    div.ten_ma{
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #fff;
        width: 80%;
        margin-left: 5px;
    }
    div.gia_tri{
        color: #fff;
        font-size: 12px;
        text-align: center;
        width: 80%;
        margin-left: 10px;
    }
}















/*==========       COMPUTER    =========================*/


@media all and (min-width: 599px){

    .line_ma{
        border-bottom: 1px solid #fff;
        width: 40% !important;
        margin-left: 25%;
    }
    .layout_5_ma div{
        float: left;
    }

    .wrap_top_5_ma{
        width: 100%;
        display: inline-table;
    }

    .top_5_tang,
    .top_5_giam,
    .top_5_thanh_khoan{
        display: inline-table;
    }



    .icon_ma_tang{
        width: 80px;
        height: 80px;
        background: url("../img/bg-5-tang.jpg") no-repeat;
        background-size: cover;
        margin-right: 8px;
    }
    .ma_tang{
        background: url("../img/bg-5-tang.jpg") no-repeat;
        background-size: cover;
    }



    .icon_ma_tang img{
        width: 60px;
        margin-top: 15px;
        margin-left: 10px;
    }


    .icon_ma_giam{
        width: 80px;
        height: 80px;
        background: url("../img/bg-5-giam.jpg") no-repeat;
        background-size: cover;
        margin-right: 8px;
    }
    .ma_giam{
        background: url("../img/bg-5-giam.jpg") no-repeat;
        background-size: cover;
    }


    .icon_ma_giam img{
        width: 60px;
        margin-top: 15px;
        margin-left: 10px;
    }


    .icon_ma_thanh_khoan{
        width: 80px;
        height: 80px;
        background: url("../img/bg-5-thanh-khoan.jpg") no-repeat;
        background-size: cover;
        margin-right: 8px;
    }
    .ma_thanh_khoan{
        background: url("../img/bg-5-thanh-khoan.jpg") no-repeat;
        background-size: cover;
    }


    .icon_ma_thanh_khoan img{
        width: 60px;
        margin-top: 15px;
        margin-left: 10px;
    }





    .all_ma{

        width: 900px;
        height: 80px;
    }
    .all_ma ul li{
        width: 20%;
        float: left;
    }
    .all_ma div{
        width: 100%;
    }
    div.ten_ma{
        color: #fff;
        font-size: 35px;
        font-weight: bold;
        text-align: center;

        width: 80%;
        margin-left: 10px;
    }
    div.gia_tri{
        color: #fff;
        font-size: 20px;
        text-align: center;
        width: 80%;
        margin-left: 10px;
    }
}
