@media(max-width:1600px){
    #login{ position: relative; padding:30px 0 }
}
@media(max-width:1170px){
    .wrp { width: calc(100% - 40px)}
    #container .colleft .colleft{ width:100% }  
    #container .colleft{ width:22% } 
    .wraper{ margin-left:auto; width: 100% }
    .menu-bar { width: calc(100vw - 24px); padding: 9px 12px;}
    .panigation .home-page { width: unset; }
    .body table .action a { padding: 5px 10px; margin:3px }
    .infomation .wrp{ width: calc(100% - 40px); }
    #user-info{ margin-right:12px }
    header{ display:block }
    header#home .title {margin: 12px auto 0 1%;}
    #DMcanbo .title a { width: 80%; padding: 5px 10px; }
    #DMcanbo .listDMcanbo { padding: 15px 17px; height: calc(100% - 70px ); }
    #DMcanbo .listDMcanbo ul li { padding: 10px 10px; }
    #DMcanbo .listDMcanbo ul li .info a { padding-left: 10px; margin-top:10px }
    #DMcanbo .listDMcanbo ul li .info span { font-size: 15px; }
    #TKbieudo { margin-bottom: 10px; }
    #TKbieudo .detail { padding: 20px; }
    #TKbieudo .detail .statistic-left .note-classify { margin-top: 30px; margin-bottom: 20px; }
    #TKbieudo .detail .statistic-right { padding-top: 30px; }
    #TKbieudo .detail .statistic-right .level { padding-left: 30px; }
    #TKbieudo .detail .statistic-right .chart { margin-right: 34px; }
    #DSbaocao .listdetail { padding: 17px 0; }
    #DSbaocao .listdetail .item { padding: 18px; padding-bottom: 10px; }
    
}
@media(max-width:991px){
    header#home .title { width: 42%; }
    header#home .floatImg { width: 53.7%; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    #container{ padding:10px 0 }

    .wraper{ margin: 0 auto;}
    header#home .title { margin-top: 10px}
    #container .colleft.DMcanbo { width: 100%; position: static; max-width: unset; margin-right:0 }
    #DMcanbo .listDMcanbo { padding-bottom:3px; margin-bottom: 10px;}
    #DMcanbo .listDMcanbo ul{ display:flex; flex-wrap:wrap }
    #DMcanbo .listDMcanbo ul li{ width: calc(80%/3); margin-right:auto; margin-bottom: 10px; }
    #DMcanbo .listDMcanbo ul li:nth-child(3n){ margin-right:0 }
    #DMcanbo .title a { display: inline-block; padding: 5px 25px; width:unset }
    #DMcanbo .title a img{ vertical-align: middle; }
    #DMcanbo .title a span{ vertical-align: middle; margin-top:0 }

    header{ padding: 10px 0; position: relative; z-index: 9999;}
    header .wImage{ width: 100%; margin-right:auto }
    header .menu{ display: block; width:35px; padding:5px 10px }
    header .menu hr{ height: 3px; border:none; outline:none; background:white; border-radius:2px; margin:0.5em 0;}
    header .menu.active{ margin-left:auto }
    header .menu.active hr:first-child{ transform: rotate(135deg) translateX(10px) translateY(-8px); }
    header .menu.active hr:nth-child(2){ opacity: 0; }
    header .menu.active hr:last-child{ transform: rotate(-135deg) translateX(7px) translateY(6px); }

    header .menu-bar{ z-index: 9999 ;width:50vw; height: 100vh; position: fixed; margin-top:0; top:137px; top:0; left:-100%; background:#0287d2; overflow: auto; }
    header .menu-bar .overlay{ position: fixed; width: calc( 50vw - 24px ); height: 100%; z-index: 0; background: rgba(0, 0, 0, 0.5); top:137px; top: 0; right: -100%; }
    header .menu-bar .overlay.active{ right: 0; }
    header .menu-bar ul{ display: block;}
    .menu-bar>ul>li{ margin: 15px 0; }
    .menu-bar>ul>li>a { background: #0076b9; }
    .menu-bar li.active>a { color: #cd3300; background: #ffc000; }
    .menu-bar li.active>a img{ filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg); }
    header .menu-bar li a{ display: block; width: auto;}
    header .menu-bar.active{ left:0 }
    header .menu-bar.active ul{ display: block;}
    header .menu-bar.active .submenu{ display: none;}
    header .menu-bar.active li a{ font-weight: bold; font-size:15px }
    header .menu-bar.active li.active .submenu{ display: block; position: static; background: #0c9cdc; width: 100%; z-index: 0; max-width: unset}
    header .menu-bar.active li.active .submenu li{ margin-right: 0; }
    header .menu-bar.active li.active .submenu a{ width: auto; font-size:13px; font-weight: 400; border-bottom:1px solid #0874b1 }
    header .menu-bar.active li.active .submenu a:hover{ background: #0d7bad }

    .searchForm{ padding:10px}
    .searchForm form #keyword{ width:21% }
    .updatingForm form{ width: calc(100% - 24px); }
    .updatingForm .wrap-item { margin-bottom: 50px; }
    .updatingForm .title { margin: 25px 0 15px 0;}
    .updatingForm .dotInput.job{ flex-grow:1 }
    .updatingForm .inlineInput { margin: auto 30px; flex-wrap: wrap; }
    .updatingForm .optionInput{ width:100%; margin-top:5px }
    .updatingForm .optionInput.majority{ width:100% }
    .updatingForm .inlineInput .optionInput:first-child .select { margin-right: 0; }
    .updatingForm .inlineInput:last-child{ margin-bottom: 30px; }
    .updatingForm .wrap-btn{ margin-top:20px; margin-bottom:35px }

    .mauhoso{ padding:5% 20px; }
    .bankhaicanhan .content .item.txtarea{ flex-wrap: wrap }
    .bankhaicanhan .content .item.txtarea textarea{ width: 100%; flex:unset; margin-left:15px }
}
@media(max-width:767px){

    #DMcanbo .listDMcanbo ul li{ width: calc(80%/2);}
    #DMcanbo .listDMcanbo ul li:nth-child(3n){ margin-right:auto }
    #DMcanbo .listDMcanbo ul li:nth-child(2n){ margin-right:0 }
    #TKbieudo .detail { padding: 13px; }
    #TKbieudo .detail .statistic-left{ width:45%; margin-right:auto }
    #TKbieudo .detail .statistic-right .chart{ margin-right:0 }
    #TKbieudo .detail .statistic-right .level { padding-left:0 }
    #DSbaocao .listdetail .item .thumb { max-width: 70px; }
    .infomation .wrp { width: calc(100% - 12px); }
    header .dropList{ display: block; position: relative; width:30px; padding-top:6px; margin-left:10px; float:left }
    header .wImage { width: 50%; margin-left: 10px; }
    header#home .wImage {width: auto;} 
    #user-info a{ padding: 4px 10px; }
    header .menu{ float:left }
    header .menu.active{ float: right; }
    header .nav-bar .wraper::after{ content:''; clear:both; display:block}
    header .dropList hr{ height: 3px; border:none; outline:none; background:white; border-radius:3px; margin:0.5em 0 }
    header .dropList .dot{ position:absolute; background: rgb(255, 255, 255); width:6px; height: 6px; border-radius: 50%; }
    header .dropList hr:first-child{ transform: rotate(90deg) translateX(11px) translateY(-8px); }
    header .dropList hr:nth-child(n+2){ transform: rotate(90deg) translateX(0px); }
    header .dropList hr:nth-child(n+3){ transform: rotate(90deg) translateX(-11px) translateY(8px); }
    header .dropList .dot:nth-child(n+4){ left: 4px; top:24px }
    header .dropList .dot:nth-child(n+5){ left: 12px; top:16px }
    header .dropList .dot:nth-child(n+6){ left: 20px; top:31px }
    header .dropList.active .dot:nth-child(n+4){ top:16px }
    header .dropList.active .dot:nth-child(n+5){ top:31px }
    header .dropList.active .dot:nth-child(n+6){ top:21px }

    .body table .action a span.hide{ display: none; }
    #container{ padding:8px }
    #container .colleft{ position: absolute; width:30%; left:-100%; z-index: 1; height: 100%; }
    #container .colleft.active{ left:0 }
    .listInfo .summary .detail { padding: 25px 30px; }
    .listInfo .summary p.title span { padding: 5px 5px 5px 20px; }
    .listInfo{ background:white; box-shadow:0 0 15px rgba(0, 0, 0, 0.09); padding-bottom: 15px; }
    .updatingForm form{ width: calc(100% - 24px); }
    .updatingForm .title { margin: 25px 0 15px 0;}
    .updatingForm .inlineInput { margin: auto 30px; flex-wrap: wrap; }
    .updatingForm .optionInput{ width:100%; margin-top:5px }
    .updatingForm .inlineInput .optionInput:first-child .select { margin-right: 0; }
    .updatingForm .inlineInput:last-child{ margin-bottom: 30px; }
    .updatingForm .wrap-btn{ margin-top:20px; margin-bottom:35px }
}

@media(max-width:575px){
    header#home .title { width: 100%; margin: 10px; }
    header#home .floatImg { display: none; }
    header .dropList{ margin-left:auto}
    #user-info a{ padding: 4px 10px; }
    #container .colleft{ width:45% } 
    .panigation{ flex-wrap:wrap }
    .panigation .home-page{ width:100% }
    .panigation .home-page a{ padding:8px 10px}
    .panigation ul{ flex:1; margin:0 8px; justify-content: center; }
    .panigation ul li:last-child{ margin-right:0 }
    .listTitle .title a{ padding:15px; padding-right: 0; width: calc(100% - 20px) }
    .listInfo .summary .detail { padding: 15px 24px;}
    .infomation { margin: 0; }
    .updatingForm .title p{ font-size: 21px;}

    #DMcanbo .title a { padding: 5px 15px; }
    #TKbieudo .title a, #DSbaocao .title a { padding: 5px 15px; width:80%; display: flex; }
    #TKbieudo .detail .statistic-left { width: 100%; margin-right: auto; }
    #TKbieudo .detail .statistic-right { width: 80%; height: 300px; margin: 0 auto; }
}
@media(max-width:479px){
    header .menu-bar { width: 60vw; }
    header .menu-bar .overlay{ width:calc( 40vw - 24px ) }
    header .wImage { width: 100%; margin: 0 10px 10px 10px; }
    #user-info{ margin: 0 auto 5px auto; padding-left: 30px }
    #container .colleft{ width:56% } 
    #login-form{ padding: 20px 40px; }
    #login .title h1 span:first-child{ font-size:27px }
    #login .title h1 span:last-child{ font-size:32px }
    #login-form .title{ margin-bottom: 30px; }
    #login-form form div input { padding: 6px; width: calc(100% - 14px)}
    #login-form form div { margin: 10px 0; }
    #login-form form div button{ font-size: 14px; line-height: 35px; }
    #login .foot p{ font-size:14px }
    .updatingForm .wrap-item { margin-bottom: 30px; }
    .updatingForm .inlineInput { margin: auto 15px; }
    .updatingForm .dotInput{ flex-wrap: wrap;}
    .updatingForm form { width: calc(100% - 10px); }
    .updatingForm .wrap-btn{ margin-top:20px; margin-bottom:20px }
    .updatingForm .wrap-btn button { padding: 6px 10px; }
    #TKbieudo .detail .statistic-right { width: 100%; }
}
@media(max-width:375px){
    #user-info{ padding:0 }
    #login-form { padding: 10px 20px; }
    #login-form form div input { width: calc(100% - 13px ); }
    #login-form form div.flex{ flex-wrap:wrap }
    #login-form form div button{ width:100% }
    #login-form form div button:first-of-type{ margin:0; margin-bottom: 10px; }
    header .dropList{ margin-left:5px }
    .updatingForm .wrap-item { margin-bottom: 20px; }
    .updatingForm .wrap-btn {padding: 0 10px; }
    .updatingForm .wrap-btn button { padding: 6px 10px; width: calc(100% - 20px); margin-left: 0; margin-top:10px }
    #DMcanbo .listDMcanbo ul li { width: 80%; margin-left: auto; margin-right: auto; }
    #DMcanbo .listDMcanbo ul li:nth-child(2n){ margin-right: auto; }
    #DSbaocao .listdetail .item { padding: 10px;}
    #DSbaocao .listdetail .item .thumb { margin-right: 10px;}
    #TKbieudo .detail .statistic-type .optionInput .select-styled,
     #TKbieudo .detail .more-fillter .item .optionInput .select-styled { text-indent: 10px; }
    #TKbieudo .detail .statistic-type .optionInput .select-options li,
     #TKbieudo .detail .more-fillter .item .optionInput .select-options li { text-indent: 10px;}
    #TKbieudo .detail .statistic-type .optionInput .select-styled:after{ right:5px }
    #TKbieudo .detail .statistic-right .level li { margin-right: 11px; }
    #TKbieudo .detail .statistic-right .level li::after { right: -11px; }
}