﻿.search-box .filter-bar{position:relative; top: 0px; left: 0px; width: 100%; height: auto;  padding: 15px 0px; margin: 0px; display:grid; grid-template-columns: 150px 1fr max-content; grid-gap: 15px;}
.search-box .filter-bar button{display:grid; grid-template-columns: max-content 1fr; grid-gap: 5px; align-content:center; align-items: center;}
.search-box .filter-bar button:before{content: "\f002"; position:relative; top: 0px; left: 0px; transform:unset;}
.search-box .result{position:relative; top: 0px; left: 0px; width: 100%; height:auto; margin-bottom: 15px;}
.search-box .result table{border-color: #2b7dbc;}
.search-box .result table tr th{background-color: #2b7dbc; color: #fff;}
.search-box .result table tr th:first-child{width: 70px; min-width: 70px; max-width: 70px;}
.search-box .result table tr th:nth-child(2){width: 150px; min-width: 150px; max-width: 150px;}
.search-box .result table tr th:nth-child(4){width: 200px; min-width: 200px; max-width: 200px;}
.search-box .result table tr th:nth-child(5){width: 120px; min-width: 120px; max-width: 120px;}
.search-box .result table tr th,
.search-box .result table tr td{border-right-color: #2b7dbc; border-bottom-color: #2b7dbc;}
.search-box .result table tr td{text-align:center;}
.search-box .result table tr td:nth-child(3){text-align:left;}
.search-box .result table tr td a{color: #2b7dbc;}
.search-box .result table tr td a:hover{color: #CC0000;}
.search-box .result .pager{border-color: #2b7dbc;}
.search-box .result .pager li{border-color: #2b7dbc;}
.search-box .result .pager .item.selected{background-color: #2b7dbc; color: #fff;}

.info-box{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 15px 0px; border: 1px solid #2b7dbc; border-radius: 5px; overflow:hidden;}
.info-box .info-box-header{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 10px; background-color: #2b7dbc; color: #fff; text-transform: uppercase; font-weight: 400;}
.info-box .info-box-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; margin: 0px;}
.info-box .info-box-body .row span:first-child{font-weight: 300; color: #999; margin-right: 5px;}
.info-box .info-box-body .row span:last-child{font-weight: 400;}

.search-box .result table.nth-list tr th[data-field='CBNTHCCCDNgayCap']{width: 120px; min-width: 120px; max-width: 120px;}
.search-box .result table.nth-list tr th[data-field='CBNTHFromDate']{width: 200px; min-width: 200px; max-width: 200px;}
.search-box .nth-list td:nth-child(2), .search-box .nth-list td:nth-child(6), .search-box .nth-list td:nth-child(7){text-align: left;}

@media (max-width: 750px) {
    
}

@media (max-width: 600px) {
    .search-box .filter-bar > input:nth-child(2){grid-column-start: 2; grid-column-end: 4;}
    .search-box .filter-bar > button{grid-column-start: 3;}
}

@media (max-width: 450px) {
    .banner .container{padding-top: 0px;}
    .top-bar .menu{white-space:nowrap;}
    .top-bar .menu li{margin-right: 0px;}
    .search-box .filter-bar > input{grid-column-start: 1 !important; grid-column-end: 4;}
    .search-box .result table{border: 0px;}
    .search-box .result table tr th, .search-box .result table tr td{border-right: 0px !important;}
    .search-box .result table tr:first-child{display:none;}
    .search-box .result table tr{border : 1px solid #b8c7d4; border-radius: 5px; margin-bottom: 15px; display:block;}
    .search-box .result table tr td:first-child{display:none;}
    .search-box .result table.cb-list tr td:nth-child(5){text-align: right !important;}
    .search-box .result table.cb-list tr td:nth-child(5):before{display:none;}
}





