.TD-CSS{
    padding: 0;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    --mau-chu:#000;
    --mau-thuong-hieu:#420064;
    --mau-chu-nhat-1: #272727;
    --mau-chu-nhat-2: #494949;
    --mau-chu-nhat-3: #797979;
    --mau-chu-nhat-5: #a0a0a0;
    --mau-chu-phu-1:#55a2e0;
    --mau-chu-phu-2:#1a9424;
    --mau-chu-canh-bao:#eb0d0d;
    --mau-vien-1: #000;
    --mau-vien-2: #494949;
    --mau-vien-3: #a7a7a7;
    --mau-nen:#fff;
    --mau-nen-phu-1:#8c62bd;
    --mau-nen-phu-1h:#6d449c;
    --mau-nen-blend-1:#e6e6e6;
    --mau-nen-blend-2:#f1f1f1;
    --mau-nen-blend-5:#525252;
    --mau-nen-blend-10:#222222;
    --mau-chu-nghich-dao:#fff;
    --mau-nen-nghich-dao:#000;
    color: var(--mau-chu);
}

.bblr::before{
    content: "";
    position: absolute;
    top: 0;right: 0; bottom: 0;left: 0;
    background-color: #0000004b;
    backdrop-filter: blur(2px);
}
.ick:nth-of-type(1):checked~div .labelcheck:nth-of-type(1)::before{
    background-color: #55a2e0;
}
.ick:nth-of-type(2):checked~div .labelcheck:nth-of-type(2)::before{
    background-color: #55a2e0;
}
.labelcheck::before{
    content: "";
    transform: rotate(45deg);
    outline: 2px solid #55a2e0;
    outline-offset: .15em;
    outline-style:groove;
    height: .5em;
    margin-right: .8em;
    display: inline-block;
    width: .5em;

}
/* ======================================================== Khung input có title===============*/
.d_input_loai_1 {
    display: flex;
    min-width: 5em;
    width: fit-content;
    flex-direction: column;
    --radb: .3em;
    --brdwi: 1px;
    --mau-vien-toi: #844186;
    --mau-chu-dao: #b473d3;
}

.d_input_loai_1:focus-within {
    --brdwi: 2px;
}

.d_input_loai_1>div {
    padding-bottom: .1em;
    padding-left:  .1em;;
    padding-right:  .1em;;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.d_input_loai_1.ipt>div{
    padding-right:  .3em;;
}
.d_input_loai_1>span {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.d_input_loai_1>span::after {
    content: " ";
    margin-left: 2px;
    border-right: var(--brdwi) solid var(--mau-vien-toi);
    flex: auto;
    border-top-right-radius: var(--radb);
    min-width: 15px;
    transform: translateY(50%);
    border-top: var(--brdwi) solid var(--mau-vien-toi);
}

.d_input_loai_1>span::before {
    content: " ";
    margin-right: 2px;
    transform: translateY(50%);
    border-top-left-radius: var(--radb);
    border-left: var(--brdwi) solid var(--mau-vien-toi);
    width: 10px;
    border-top: var(--brdwi) solid var(--mau-vien-toi);
}


.d_input_loai_1>div:nth-of-type(1)::before {
    height: calc(100% - 9px);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    border-right: var(--brdwi) solid var(--mau-vien-toi);
    border-left: var(--brdwi) solid var(--mau-vien-toi);
    margin-left: auto;
    margin-right: auto;
    border-bottom-left-radius: var(--radb);
    border-bottom-right-radius: var(--radb);
    border-bottom: var(--brdwi) solid var(--mau-vien-toi);
}

.d_input_loai_1.ipt>div::after {
    content: "";
    width: 6px;
    animation: xoay_input 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    opacity: 0;
    margin-bottom: .5em;
    transition: opacity .4s;
    height: 6px;
    background-color: var(--mau-chu-dao);
}

.d_input_loai_1>div>input {
    border: none;
    background: none;
    outline: none;
    flex: auto;
    margin-left: 2px;
    margin-right: 2px;
    padding-bottom: 2px;
}
.d_input_loai_1>div>input[type="date"]{
    min-width: 8em;
    min-height: 1.5em;
}
.d_input_loai_1>div>textarea {
    resize: none;
    border: none;
    min-width: 16em;
    min-height: 3em;
    flex: auto;
    outline: none;
}
.d_input_loai_1>div:focus-within::after {
    opacity: 1;
    animation-play-state: running;
}

/* ======================================================== Khung input có title===============*/

.chHoverShow>.chForShow{display: none;}
.chHoverShow:hover>.chForShow{display: block;}
.TD-CSS input:focus { outline-color: var(--mau-chu-nhat-3);}
/* Định nghĩa width */
.chwF>*{width: fit-content;}
.wF{width: fit-content;}
.w100vw{width: 100vw;}
.Mw100p{max-width: 100%;}
.Mw50vw{max-width: 50vw;}
.mw100p{min-width: 100%;}
.mw50vw{min-width: 50vw;}
.mw30e{min-width: 30em;}
.Mw3{max-width: 15em;}
.Mw2{max-width: 10em;}
.mw3{min-width: 15em;}
.mw2{min-width: 10em; }
.mw1{min-width: 5em; }
.Mw2e{max-width: 2em;}
.Mw1{max-width: 5em;}
.Mw8e{max-width: 8em;}
.Mw7e{max-width: 7em;}
.Mw6e{max-width: 6em;}
.w4e{width: 4em;}
.mwM{min-width: max-content;}
.w100p{width: 100%;}

/*Định nghĩa height*/
.h100vh{height: 100vh;}
.h100p{height: 100%;}
.hF{height: fit-content;}
.Mh1{max-height: 5em;}
.Mh2e{max-height: 2em;}
.Mh3{max-height: 15em;}
.Mh100p{max-height: 100%;}
.Mh80p{max-height: 80%;}
.Mh80vh{max-height: 80vh;}
.Mh60vh{max-height: 60vh;}
.mh3{min-height: 15em;}
.mh100p{min-height: 100%;}
.mh100vh{min-height: 100vh;}

/* Định nghĩa margin */
.chmt01>*{margin-top: .1em;}
.chm01>*{margin: .1em;}.chm02>*{margin: .2em;}
.chm03>*{margin: .3em;}
.chmtA>*{margin-top: auto;}
.m0{margin: 0;}
.m01{margin: .1em;}
.mV0{margin-top: 0; margin-bottom: 0;}
.mH0{margin-left: 0;margin-right: 0;}
.m03{margin: .3em;}
.m1{margin: 1em;}
.mA{margin: auto;}
.mt2{margin-top: 2em;}
.mt5{margin-top: 5em;}
.mt01{margin-top: .1em;}
.mt02{margin-top: .2em;}
.mt1{margin-top: 1em;}
.mt03{margin-top: .3em;}
.mr1{margin-right: 1em;}
.mr2{margin-right: 2em;}
.mrA{margin-right: auto;}
.mt05{margin-top: .5em;}
.mr05{margin-right: .5em;}
.mr03{margin-right: .3em;}
.mr02{margin-right: .2em;}
.mtA{margin-top: auto;}
.mVA{margin-top: auto; margin-bottom: auto;}
.mb03{margin-bottom: .3em;}
.mb05{margin-bottom: .5em;}
.ml05{margin-left: .5em;}
.mb02{margin-bottom: .2em;}
.ml02{margin-left: .2em;}
.ml03{margin-left: .3em;}
.ml1{margin-left: 1em;}
.ml2{margin-left: 2em;}
.mb1{margin-bottom: 1em;}
.mlA{margin-left: auto;}
.mH1{margin-left: 1em; margin-right: 1em;}
.mV1{margin-top: 1em; margin-bottom: 1em;}
.mV05{margin-top: 0.5em; margin-bottom: 0.5em;}
.mH05{margin-left: .5em; margin-right: .5em;}
.mH03{margin-left: .3em; margin-right: .3em;}


/*padding*/
.chp05>*{padding: .5em;}
.chp1>*{padding: 1em;}
.p05{padding: .5em;}
.pr03{padding-right: .3em;}
.pr05{padding-right: .5em;}
.p02{padding: .2em;}.p03{padding: .3em;}.p01{padding: .1em;}
.pl1{padding-left: 1em;}
.pl05{padding-left: 0.5em;}
.pl03{padding-left: 0.3em;}
.pr1{padding-right: 1em;}
.p1{padding: 1em;}
.pH05{padding-left: .5em;padding-right: .5em;}
.pH03{padding-left: .3em;padding-right: .3em;}
.pH1{padding-left: 1em;padding-right: 1em;}.ph2{padding-left: 2em;padding-right: 2em;}
.pV05{padding-top: .5em;padding-bottom: .5em;}
.pV03{padding-top: .3em;padding-bottom: .3em;}
.pV1{padding-top: 1em;padding-bottom: 1em;}
.pt03{padding-top: .3em;}
.pt1{padding-top: 1em;}
.pt3{padding-top: 3em;}
.pb1{padding-bottom: 1em;}
.pb03{padding-bottom: 0.3em;}
.pb05{padding-bottom: 0.5em;}

/* Định nghĩa box-sizing */
.bsB{box-sizing: border-box;}

.oyS{overflow-y: scroll;}
/* Định nghĩa border-radius */
.chbr05>*{border-radius: .5em;}
.br05{border-radius: .5em;}
.br1{border-radius: 1em;}
.olTH{
    transition: box-shadow .4s;
}
.olTH:focus-within{
    box-shadow: 0 0 .2em .06em var(--mau-thuong-hieu); /* Hiệu ứng mờ ảo */
}
/* border*/
.bN{border: none;}

.ofC{object-fit: contain;}
.oH{overflow: hidden;}
/* Định nghĩa display */
.dB{ display: block;}
.dF{display: flex;}
.dG{display: grid;}
.aC{align-items: center;}

/* flex option*/
.chfb100p>*{flex-basis: 100%;}
.fwW{flex-wrap: wrap;}
.fdC{flex-direction: column;}
.fg1{flex-grow: 1;}
.fb40p{flex-basis: 40%;}
.fb30p{flex-basis: 30%;}
.fA{flex: auto;}
.chfA>*{flex: auto;}
.aiE{align-items: end;}

.jcC{justify-content: center;}
.jcB{justify-content: space-between;}
.jcA{justify-content: space-around;}

/* Định nghĩa gap */
.g1{gap: 1em;}
.g05{gap: .5em;}
.g2{gap: 2em;}
.g3{gap: 3em;}


/* Định nghĩa màu chữ - color */
.cal{color: var(--mau-chu-canh-bao);}

/*Định nghĩa background*/
.chbcb5>*{background-color: var(--mau-nen-blend-5);}
.chbcb10>*{background-color: var(--mau-nen-blend-10);}
.chbcb2>*{background-color: var(--mau-nen-blend-2);}
.chbcp1>*{background-color: var(--mau-nen-phu-1);}
.bcd{background-color: var(--mau-nen);}
.bcb1{background-color: var(--mau-nen-blend-1);}
.bcb2{background-color: var(--mau-nen-blend-2);}
.bcb5{background-color: var(--mau-nen-blend-5);}
.bcb10{background-color: var(--mau-nen-blend-10);}
.bcp1{background-color: var(--mau-nen-phu-1);}
.bcp1h:hover{background-color: var(--mau-nen-phu-1h);}
.bgN{background: none;}

.w6em{width: 6em;}
/* định nghĩa font*/
.chcI>*{color: inherit;}
.chfwB>*{font-weight: bold;}
.chcn1>*{color: var(--mau-chu-nhat-1);}
.chcn2>*{color: var(--mau-chu-nhat-2);}
.chcn3>*{color: var(--mau-chu-nhat-3);}
.chcp1>*{color: var(--mau-chu-phu-1);}
.chfsM>*{font-size: medium;}
.ffI{font-family: inherit;}
.fsM{font-size: medium;}
.fsS{font-size: small;}
.fsL{font-size: large;}
.fsXL{font-size: x-large;}
.fwB{font-weight: bold;}
.cI{color: inherit;}
.cInv{color: var(--mau-chu-nghich-dao);}
.cNm{color: var(--mau-chu);}
.cn1{color: var(--mau-chu-nhat-1);}
.cn2{color: var(--mau-chu-nhat-2);}
.cn5{color: var(--mau-chu-nhat-5);}
.cp1{color: var(--mau-chu-phu-1);}
.cp2{color: var(--mau-chu-phu-2);}
.taR{text-align: right;}

.aiC{align-items: center;}
.chtdN>*{text-decoration: none;}
.tdN{text-decoration: none;}
.taC{text-align: center;}

.bb1S1{ border-bottom: 1px solid var(--mau-vien-1);}
.bb1S2{ border-bottom: 1px solid var(--mau-vien-2);}
.bb1S3{ border-bottom: 1px solid var(--mau-vien-3);}
.wwB{word-wrap: break-word;}
.wsP{white-space: pre;}
.wMxCt{width: max-content;}
/*curosr*/
.cP{cursor: pointer;}
.peN{pointer-events: none;}

.bS1{
    box-shadow: rgba(0, 0, 0, 0.24) 0px .1em .6em;
}


/*Transition*/
.tSbc03{transition: background-color .3s;}

.tUC{text-transform: capitalize;}
/* Định nghĩa align*/
.asS{ align-self: start;}
.b1S5{
    border: 1px solid var(--mau-nen-blend-5);
}
.btn1{
    cursor: pointer;
    transition: background-color .4s;
    font-family: inherit;
    font-size: medium;
    padding: .5em;
    background-color: var(--mau-nen-phu-1);
    border-radius: .5em;
    font-weight: bold;
    color: var(--mau-chu-nghich-dao);
    border: none;
}
.btn1:hover{
    background-color: var(--mau-nen-phu-1h);
}
.dN{display: none;}
/* Position*/
.pR{position: relative;}
.pA{position: absolute;}
.pF{position: fixed;}
.i40{top: 0;bottom: 0; left: 0;right: 0;}
.t0{top: 0;}.r0{right: 0;}.l0{left: 0;}.b0{bottom: 0;}
.l100p{left: 100%;}
.r100p{right: 100%;}
.t100p{top: 100%;}
.oN{
    outline: none;
}
.mat{
    position: absolute;
    right: .6em;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.clb::before{
    content: "";
    width: .3em;
    height: .3em;
    margin-right: .8em;
    margin-left: .8em;
    transform: rotate(45deg);
    outline: .13em solid var(--mau-thuong-hieu);
    outline-offset: .15em;   
}
#luuDN:checked+label::before{
     background-color: var(--mau-thuong-hieu);
}

/*Định nghĩa table*/
table.c3taC>tbody>tr>td:nth-of-type(3){text-align: center;}
@keyframes xoay_input {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@media (max-width: 640px) {
    .ss-dN{ display: none;}
    .ss-jcC{justify-content: center;}
    .ss-jcFS{justify-content: flex-start;}
    .ss-tbl3c td:not(:nth-of-type(1)):not(:nth-of-type(2)):not(:last-of-type),
    .ss-tbl3c th:not(:nth-of-type(1)):not(:nth-of-type(2)):not(:last-of-type){
        display: none;
    }
    .ss-fA{flex: auto;}
    .ss-mw95vw{min-width: 95vw;}
    .ss-fdC{flex-direction: column !important;}
  }
@media (min-width: 641px) and (max-width: 768px) {
    .s-dN{ display: none;}
    .s-jcB{justify-content: center;}
}
@media (min-width: 769px) and (max-width: 1024px) {
    .m-dN{ display: none;}
}
@media (min-width: 1025px) and (max-width: 1280px) {
    .l-dN{ display: none;}
}
@media (min-width: 1281px) {
    .ll-dN{ display: none;}
}