/***********************************************************/
/* Bảng: Không cuộn ngang và  không phân nhóm              */
/***********************************************************/

@media (min-width: 768px){
    [data-ui-id="tbl-ui-0101"]{width:100%; line-height:initial;}
    [data-ui-id="tbl-ui-0101"] thead th{font-weight:bold; padding: 13px 5px; font-size:15px;}
    [data-ui-id="tbl-ui-0101"] tbody td{padding: 10px 5px; border-top: 1px solid rgba(0,0,0,.15)}
}
@media (max-width: 767px){
    [data-ui-id="tbl-ui-0101"]{width:100%; position:relative;}
    [data-ui-id="tbl-ui-0101"]:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0; border:1px solid rgba(0,0,0,.15); border-radius:7px;}
    [data-ui-id="tbl-ui-0101"] thead th{display:none;}
    [data-ui-id="tbl-ui-0101"] tbody tr{ }
    [data-ui-id="tbl-ui-0101"] tbody tr td{display:block; text-align:right;padding: 7px 15px; position:relative; z-index:2; }
    [data-ui-id="tbl-ui-0101"] tbody tr td:before{content: attr(data-label);font-weight: 500; float:left;}
    [data-ui-id="tbl-ui-0101"] tbody tr td:first-child{padding-top:14px;}
    [data-ui-id="tbl-ui-0101"] tbody tr td:last-child{ border-bottom:1px solid rgba(0,0,0,.15); padding-bottom:14px;}
    [data-ui-id="tbl-ui-0101"] tbody tr:last-child td:last-child{border-bottom:none; border-radius: 0 0 7px 7px;}
    [data-ui-id="tbl-ui-0101"] tbody tr:first-child td:first-child{border-bottom:none; border-radius: 7px 7px 0 0;}
}

/***********************************************************/
/* Bảng: Không cuộn ngang và phân nhóm                     */
/***********************************************************/

@media (min-width: 768px){
    [data-ui-id="tbl-ui-0102"]{width:100%; line-height:initial;}
    [data-ui-id="tbl-ui-0102"] thead th{font-weight:bold; padding: 13px 5px; font-size:15px;}
    [data-ui-id="tbl-ui-0102"] tbody td{padding: 10px 5px; border-top: 1px solid rgba(0,0,0,.15) ; position:relative;}
    [data-ui-id="tbl-ui-0102"] tbody tr.rowGroup td{background:rgba(0,0,0,.04); font-weight:500; cursor:pointer; } 
    [data-ui-id="tbl-ui-0102"] tbody tr.rowGroup td:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f0dc"; position:absolute; right:10px; font-size:10px; width: 16px; height:16px; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 1px rgba(0,0,0,.07); border-radius:2px; background:rgba(255,255,255,.5)}

}
@media (max-width: 767px){
    [data-ui-id="tbl-ui-0102"]{width:100%; position:relative;}
    [data-ui-id="tbl-ui-0102"]:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0; border:1px solid rgba(0,0,0,.15); border-radius:7px;}
    [data-ui-id="tbl-ui-0102"] thead th{display:none;}
    [data-ui-id="tbl-ui-0102"] tbody tr{ }
    [data-ui-id="tbl-ui-0102"] tbody tr td{display:block; text-align:right;padding: 7px 15px; position:relative; z-index:2; }
    [data-ui-id="tbl-ui-0102"] tbody tr:not(.rowGroup) td:before{content: attr(data-label);font-weight: 500; float:left;}
    [data-ui-id="tbl-ui-0102"] tbody tr td:first-child{padding-top:14px;}
    [data-ui-id="tbl-ui-0102"] tbody tr td:last-child{ border-bottom:1px solid rgba(0,0,0,.15); padding-bottom:14px;}
    [data-ui-id="tbl-ui-0102"] tbody tr:last-child td:last-child{border-bottom:none; border-radius: 0 0 7px 7px;}
    [data-ui-id="tbl-ui-0102"] tbody tr:first-child td:first-child{border-bottom:none; border-radius: 7px 7px 0 0;}
    [data-ui-id="tbl-ui-0102"] tbody tr.rowGroup td{background:rgba(0,0,0,.04); cursor:pointer; text-align:left; font-weight:bold; border-bottom:none; } 
    [data-ui-id="tbl-ui-0102"] tbody tr.rowGroup td:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f0dc"; position:absolute; right:10px; font-size:10px; width: 16px; height:16px; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 1px rgba(0,0,0,.07); border-radius:2px; background:rgba(255,255,255,.5)}
}