@media (max-width: 1199px){
    #UserScreen .parent .title span.text{ font-size: 14px }
    #UserScreen{ display: block }
    #UserScreen .colleft,
    #UserScreen .colright{ width: 100%; margin: 0; padding: 0 }
    #header .logo{ margin: auto }
    #menuMain{ padding: 0; justify-content: flex-end }
    #menuMain ul{ width: auto }
    #menuMain ul.left li{ flex: auto }
    #menuMain ul li > a{ padding: 0 20px }
    #lstStatus a{ flex-direction: column; padding: 5px 0; width: calc((100% - 50px) / 6); margin-right: 10px }
    #lstStatus a span{ display: block; margin: 3px 0 !important; text-align: center }
    #lstStatus a span:first-child{ font-size: 25px }
    #lstStatus a span:last-child{ font-size: 12px; margin-left: 0; line-height: 15px }
    #lstCheckStatus a{ flex-direction: column; padding: 5px 0; width: calc((100% - 50px) / 6); margin-right: 10px }
    #lstCheckStatus a span{ display: block; margin: 3px 0 !important; text-align: center }
    #lstCheckStatus a span:first-child{ font-size: 25px }
    #lstCheckStatus a span:last-child{ font-size: 12px; margin-left: 0; line-height: 15px }
    .w90{ width: calc(100% - 20px) }
    .table th,
    .table td{ min-width: 130px }
    .table th.w50px,
    .table td.w50px{ min-width: 50px }
    #gridData:after{ content: "<< Vuốt sang 2 bên để xem đầy đủ >>"; position: fixed; bottom: 40px; text-align: center; display: block; font-weight: bold; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #e79c5e }
    #UserScreen .parent.thongke{ margin-top: 40px }
}
@media (max-width: 991px){
    #loginForm .wrap{ display: block; width: 80%; }
    #loginForm .wrap .left{ margin: auto; margin-bottom: 10px }
    #loginForm .wrap .right{ margin: 0 }
    #header.navbar-fixed-top .navbar-brand{ flex-direction: column; align-items: center }
    #header .slogan span{ display: inline-block }
    .navbar-fixed-top .navbar-brand img{ height: 50px }
    #menuMain{ width: 100%; justify-content: center }
    #lstStatus a{ justify-content: flex-start }
    #header .logo{ padding-bottom: 0 }
}
@media (max-width: 767px){
    #loginForm .wrap{ display: block; width: 90%; position: relative; padding-bottom: 150px }
    #loginForm .wrap .left{ width: 100% }
    #loginForm .wrap .left .logo{ display: flex; margin-bottom: 5px; align-items: center }
    #loginForm .wrap .left .logo p{ flex: 1; margin-bottom: 0; margin-left: 20px }
    #loginForm .wrap .left .logo span{ font-size: 25px; text-align: left }
    #loginForm .wrap .left .info{ position: absolute; bottom: 10px; }
    #menuLeft .open{ top: 150px }
    #lstStatus{ display: block; max-width: 100%; overflow: auto }
    #lstStatus a{ white-space: nowrap; width: auto; padding: 10px; display: table-cell; margin: 0 10px; border-right: 5px solid #fff; border-radius: 0; border-color: #fff }
    #lstStatus a span{ white-space: nowrap; width: auto; display: inline-block; vertical-align: middle; padding: 0; vertical-align: middle; margin: 0 !important; }
    #lstStatus a span:last-child{ margin-left: 5px !important; margin-top: 5px !important }
}
@media (max-width: 479px){
    #loginForm .wrap{ width: calc(100% - 20px) }
    #loginForm .wrap .left .logo{ display: block; }
    #loginForm .wrap .left .logo p{ margin-left: 0 }
    #loginForm .wrap .left .logo span{ font-size: 22px; text-align: center }
    #loginForm .wrap .right #basic-form{ padding: 15px }
    #loginForm .wrap .left .info *{ font-size: 14px }
    #gridData:after{ bottom: 60px }
    #header .slogan span{ display: block; }
    #menuLeft .open{ top: 250px }
    #UserScreen{ padding: 0 10px }
    #thongkeHome #searchForm.thongke{ width: 100% }
    #searchForm.thongke .item{ flex-direction: column; }
    #searchForm.thongke .item > p:first-child ~ *{ width: 100% }
    #UserScreen .parent.thongke .title span.text{ padding: 8px 10px 10px 10px }
    #thongkeHome .openSearch{ left: 145px }
    #thongkeHome .openSearch span{ display: none }
    #header .container-fluid{ padding: 0 10px }
    #header .logo_top{ display: flex; justify-content: space-between; width: 100%; align-items: center }
    #header .logo_top .logo{ z-index: 98; flex: 1 }
    .openList{ width: 40px; height: 40px; display: block; z-index: 98 }
    .openList hr{ border: 2px solid #fff; transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; background: #fff; margin: 7px 0 }
    .openList.ac{ position: relative }
    .openList.ac hr:nth-child(2){ opacity: 0 }
    .openList.ac hr:nth-child(1){ transform: rotate(135deg) translateX(10px) translateY(-9px); -moz-transform: rotate(135deg) translateX(10px) translateY(-9px); border-color: #fff; background: #fff }
    .openList.ac hr:nth-child(3){ transform: rotate(-135deg) translateX(6px) translateY(6px); -moz-transform: rotate(-135deg) translateX(6px) translateY(6px); border-color: #fff; background: #fff }
    #overlay{ position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 49; display: block; top: 0; left: 0; display: none }
    #menuMain{ position: fixed; left: -100%; top: 70px; width: 100%; height: calc(100% - 70px); overflow-y: auto; background: #e79c5e; z-index: 51; transform: none; -moz-transform: none; transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; box-sizing: border-box; padding: 10px 0; margin: 0; display: block; }
    #menuMain.ac{ left: 0 }
    #menuMain ul{ display: block }
    #menuMain ul li{ display: block; height: auto; text-align: left; white-space: normal; padding: 0 !important }
    #menuMain ul li a{ height: auto; text-align: left; padding: 7px 10px !important; display: block }
    #menuMain ul li ul{ width: 100%; opacity: 1; visibility: visible; position: relative }
    #menuMain ul li .tar{ text-align: left }
    .lstbtnMenuRes{ display: flex !important; align-items: center; margin: 5px 0 }
    .lstbtnMenuRes > *{ margin: 0 7px }
    #notifications{ width: 100% }
}
@media (max-width: 320px){
    #loginForm .wrap .left .info *{ font-size: 12px } 
}