Possible Conflict w/ Bootstrap 5 / Custom CSS (???)

Hi - brand new to dt (impressive so far!) and I'm running into what seems to be a few conflicts with bootstrap and custom classes...

environment:
- bootstrap 5.0.1
- jquery 3.6.0
- dt src https://cdn.datatables.net/v/bs5/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/cr-1.5.4/date-1.1.0/fc-3.3.3/fh-3.1.9/kt-2.6.2/r-2.2.9/rg-1.1.3/rr-1.2.8/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.js"></script>

problem(s):
the following worked before dt install, but are not working now:
- some bs5 classes (e.g. table-hover)
- my custom classes (e.g. xmd-table-bordered-outside that formats top, bot, left and right side borders)

the following dt classes are not working:
- cell-border, row-border
- dt-head-right

comments/questions:
- I'm guessing this is a specificity issue (?) -or- a sequencing issue in imports
- should I simply comment out the bootstrap _table.scss import and use only dt classes?
- do you recommend downloading the whole pkg and integrating the dt scss into my build (bootstrap + custom scss)?

test case:
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html

table tags:

<

table id="table-sandbox"
class="table table-striped // vanila bs5 class - workinng
table-hover // vanilla bs5 class - not working
cell-border row-border // dt classes - not working
dt-head-right // dt class - not working
xmd-table-bordered-outside // my custom class - not working
">
<thead>...

dt function;
$ ( '#table-sandbox' ).DataTable ( {
autoWidth: true,
fixedHeader: {
header: true,
headerOffset: $('#xmd-navbar').height()
},
scrollX: true,
scrollY: true,

            columnDefs: [ {
                width: "25px",
                targets: [ 0 ]
            }, {
                width: "100px",
                targets: [ 1,2, 3, 4, 5 ]
            }
            ],

        } );

Thx in advance and again - great product!