/* --- ORANGE (#FF8200) --- */
.bg-orange { background-color: #FF8200 !important; }
.text-orange { color: #FF8200 !important; }
a.text-orange:focus, a.text-orange:hover { color: #e67000 !important; }

.btn-orange { color: #fff; background-color: #FF8200; border-color: #FF8200; }
.btn-orange:hover { color: #fff; background-color: #e67000; border-color: #e67000; }
.btn-orange:focus { box-shadow: 0 0 0 0.2rem #FF820080; }
.btn-orange:not(:disabled):not(.disabled):active { color: #fff; background-color: #e67000; border-color: #e67000; }

.btn-outline-orange { color: #FF8200; border-color: #FF8200; }
.btn-outline-orange:hover { color: #fff; background-color: #FF8200; border-color: #FF8200; }
.btn-outline-orange:focus { box-shadow: 0 0 0 0.2rem #FF820080; }
.btn-outline-orange:not(:disabled):not(.disabled):active { color: #fff; background-color: #FF8200; border-color: #FF8200; }

.btn-orange .badge { color: #FF8200; background-color: #ffffff; }

/* --- PURPLE (#c66ad8) --- */
.bg-purple { background-color: #c66ad8 !important; }
.text-purple { color: #c66ad8 !important; }
a.text-purple:focus, a.text-purple:hover { color: #c66ad8 !important; }

.btn-purple { color: #fff; background-color: #c66ad8; border-color: #c66ad8; }
.btn-purple:hover { color: #fff; background-color: #c66ad8; border-color: #c66ad8; }
.btn-purple:focus { box-shadow: 0 0 0 0.2rem #c66ad880; }
.btn-purple:not(:disabled):not(.disabled):active { color: #fff; background-color: #c66ad8; border-color: #c66ad8; }

.btn-outline-purple { color: #c66ad8; border-color: #c66ad8; }
.btn-outline-purple:hover { color: #fff; background-color: #c66ad8; border-color: #c66ad8; }
.btn-outline-purple:focus { box-shadow: 0 0 0 0.2rem #c66ad880; }
.btn-outline-purple:not(:disabled):not(.disabled):active { color: #fff; background-color: #c66ad8; border-color: #c66ad8; }

/* --- BLUE (#25238f) - MỚI --- */
.bg-blue { background-color: #25238f !important; }
.text-blue { color: #25238f !important; }
a.text-blue:focus, a.text-blue:hover { color: #25238f !important; }

.btn-blue { color: #fff; background-color: #25238f; border-color: #25238f; }
.btn-blue:hover { color: #fff; background-color: #2a28a6; border-color: #2a28a6; }
.btn-blue:focus { box-shadow: 0 0 0 0.2rem #25238f80; }
.btn-blue:not(:disabled):not(.disabled):active { color: #fff; background-color: #2a28a6; border-color: #2a28a6; }

.btn-outline-blue { color: #25238f; border-color: #25238f; }
.btn-outline-blue:hover { color: #fff; background-color: #25238f; border-color: #25238f; }
.btn-outline-blue:focus { box-shadow: 0 0 0 0.2rem #25238f80; }
.btn-outline-blue:not(:disabled):not(.disabled):active { color: #fff; background-color: #25238f; border-color: #25238f; }










.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.show>.btn-warning.dropdown-toggle {
    color: #212529;
    background-color: #d37200;
    border-color: #c66800;
}






.btn-toggle {
    margin: 0 4rem;
    padding: 0;
    position: relative;
    border: none;
    height: 1.5rem;
    width: 3rem;
    border-radius: 1.5rem;
    color: #6b7381;
    background: #bdc1c8
}

.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
    outline: none
}

.btn-toggle:before,
.btn-toggle:after {
    line-height: 1.5rem;
    width: 4rem;
    text-align: center;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    bottom: 0;
    transition: opacity .25s
}

.btn-toggle:before {
    content: "off";
    left: -4rem
}

.btn-toggle:after {
    content: "on";
    right: -4rem;
    opacity: .5
}

.btn-toggle>.handle {
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 1.125rem;
    background: #fff;
    transition: left .25s
}

.btn-toggle.active {
    transition: background-color .25s
}

.btn-toggle.active>.handle {
    left: 1.6875rem;
    transition: left .25s
}

.btn-toggle.active:before {
    opacity: .5
}

.btn-toggle.active:after {
    opacity: 1
}

.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
    line-height: -.5rem;
    color: #fff;
    letter-spacing: .75px;
    left: .4125rem;
    width: 2.325rem
}

.btn-toggle.btn-sm:before {
    text-align: right
}

.btn-toggle.btn-sm:after {
    text-align: left;
    opacity: 0
}

.btn-toggle.btn-sm.active:before {
    opacity: 0
}

.btn-toggle.btn-sm.active:after {
    opacity: 1
}

.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
    display: none
}

.btn-toggle:before,
.btn-toggle:after {
    color: #6b7381
}

.btn-toggle.active {
    background-color: #29b5a8
}

.btn-toggle.btn-lg {
    margin: 0 5rem;
    padding: 0;
    position: relative;
    border: none;
    height: 2.5rem;
    width: 5rem;
    border-radius: 2.5rem
}

.btn-toggle.btn-lg:focus,
.btn-toggle.btn-lg.focus,
.btn-toggle.btn-lg:focus.active,
.btn-toggle.btn-lg.focus.active {
    outline: none
}

.btn-toggle.btn-lg:before,
.btn-toggle.btn-lg:after {
    line-height: 2.5rem;
    width: 5rem;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    bottom: 0;
    transition: opacity .25s
}

.btn-toggle.btn-lg:before {
    content: "off";
    left: -5rem
}

.btn-toggle.btn-lg:after {
    content: "on";
    right: -5rem;
    opacity: .5
}

.btn-toggle.btn-lg>.handle {
    position: absolute;
    top: .3125rem;
    left: .3125rem;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 1.875rem;
    background: #fff;
    transition: left .25s
}

.btn-toggle.btn-lg.active {
    transition: background-color .25s
}

.btn-toggle.btn-lg.active>.handle {
    left: 2.8125rem;
    transition: left .25s
}

.btn-toggle.btn-lg.active:before {
    opacity: .5
}

.btn-toggle.btn-lg.active:after {
    opacity: 1
}

.btn-toggle.btn-lg.btn-sm:before,
.btn-toggle.btn-lg.btn-sm:after {
    line-height: .5rem;
    color: #fff;
    letter-spacing: .75px;
    left: .6875rem;
    width: 3.875rem
}

.btn-toggle.btn-lg.btn-sm:before {
    text-align: right
}

.btn-toggle.btn-lg.btn-sm:after {
    text-align: left;
    opacity: 0
}

.btn-toggle.btn-lg.btn-sm.active:before {
    opacity: 0
}

.btn-toggle.btn-lg.btn-sm.active:after {
    opacity: 1
}

.btn-toggle.btn-lg.btn-xs:before,
.btn-toggle.btn-lg.btn-xs:after {
    display: none
}

.btn-toggle.btn-sm {
    margin: 0 .5rem;
    padding: 0;
    position: relative;
    border: none;
    height: 1.5rem;
    width: 3rem;
    border-radius: 1.5rem
}

.btn-toggle.btn-sm:focus,
.btn-toggle.btn-sm.focus,
.btn-toggle.btn-sm:focus.active,
.btn-toggle.btn-sm.focus.active {
    outline: none
}

.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
    line-height: 1.5rem;
    width: .5rem;
    text-align: center;
    font-weight: 600;
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    bottom: 0;
    transition: opacity .25s
}

.btn-toggle.btn-sm:before {
    content: "off";
    left: -.5rem
}

.btn-toggle.btn-sm:after {
    content: "on";
    right: -.5rem;
    opacity: .5
}

.btn-toggle.btn-sm>.handle {
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 1.125rem;
    background: #fff;
    transition: left .25s
}

.btn-toggle.btn-sm.active {
    transition: background-color .25s
}

.btn-toggle.btn-sm.active>.handle {
    left: 1.6875rem;
    transition: left .25s
}

.btn-toggle.btn-sm.active:before {
    opacity: .5
}

.btn-toggle.btn-sm.active:after {
    opacity: 1
}

.btn-toggle.btn-sm.btn-sm:before,
.btn-toggle.btn-sm.btn-sm:after {
    line-height: -.5rem;
    color: #fff;
    letter-spacing: .75px;
    left: .4125rem;
    width: 2.325rem
}

.btn-toggle.btn-sm.btn-sm:before {
    text-align: right
}

.btn-toggle.btn-sm.btn-sm:after {
    text-align: left;
    opacity: 0
}

.btn-toggle.btn-sm.btn-sm.active:before {
    opacity: 0
}

.btn-toggle.btn-sm.btn-sm.active:after {
    opacity: 1
}

.btn-toggle.btn-sm.btn-xs:before,
.btn-toggle.btn-sm.btn-xs:after {
    display: none
}

.btn-toggle.btn-xs {
    margin: 0;
    padding: 0;
    position: relative;
    border: none;
    height: 1rem;
    width: 2rem;
    border-radius: 1rem
}

.btn-toggle.btn-xs:focus,
.btn-toggle.btn-xs.focus,
.btn-toggle.btn-xs:focus.active,
.btn-toggle.btn-xs.focus.active {
    outline: none
}

.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
    line-height: 1rem;
    width: 0;
    text-align: center;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    bottom: 0;
    transition: opacity .25s
}

.btn-toggle.btn-xs:before {
    content: "off";
    left: 0
}

.btn-toggle.btn-xs:after {
    content: "on";
    right: 0;
    opacity: .5
}

.btn-toggle.btn-xs>.handle {
    position: absolute;
    top: .125rem;
    left: .125rem;
    width: .75rem;
    height: .75rem;
    border-radius: .75rem;
    background: #fff;
    transition: left .25s
}

.btn-toggle.btn-xs.active {
    transition: background-color .25s
}

.btn-toggle.btn-xs.active>.handle {
    left: 1.125rem;
    transition: left .25s
}

.btn-toggle.btn-xs.active:before {
    opacity: .5
}

.btn-toggle.btn-xs.active:after {
    opacity: 1
}

.btn-toggle.btn-xs.btn-sm:before,
.btn-toggle.btn-xs.btn-sm:after {
    line-height: -1rem;
    color: #fff;
    letter-spacing: .75px;
    left: .275rem;
    width: 1.55rem
}

.btn-toggle.btn-xs.btn-sm:before {
    text-align: right
}

.btn-toggle.btn-xs.btn-sm:after {
    text-align: left;
    opacity: 0
}

.btn-toggle.btn-xs.btn-sm.active:before {
    opacity: 0
}

.btn-toggle.btn-xs.btn-sm.active:after {
    opacity: 1
}

.btn-toggle.btn-xs.btn-xs:before,
.btn-toggle.btn-xs.btn-xs:after {
    display: none
}

.btn-toggle.btn-secondary {
    color: #6b7381;
    background: #bdc1c8
}

.btn-toggle.btn-secondary:before,
.btn-toggle.btn-secondary:after {
    color: #6b7381
}

.btn-toggle.btn-secondary.active {
    background-color: #ff8300
}





.btn-mautim {
    color: #ffffff;
    background-color: #c66ad8;
    border-color: #130269;
}

.btn-mautim:hover,
.btn-mautim:focus,
.btn-mautim:active,
.btn-mautim.active,
.open .dropdown-toggle.btn-mautim {
    color: #ffffff;
    background-color: #49247A;
    border-color: #130269;
}

.btn-mautim:active,
.btn-mautim.active,
.open .dropdown-toggle.btn-mautim {
    background-image: none;
}

.btn-mautim.,
.btn-mautim[],
fieldset[] .btn-mautim,
.btn-mautim.:hover,
.btn-mautim[]:hover,
fieldset[] .btn-mautim:hover,
.btn-mautim.:focus,
.btn-mautim[]:focus,
fieldset[] .btn-mautim:focus,
.btn-mautim.:active,
.btn-mautim[]:active,
fieldset[] .btn-mautim:active,
.btn-mautim..active,
.btn-mautim[].active,
fieldset[] .btn-mautim.active {
    background-color: #c66ad8;
    border-color: #130269;
}

.btn-mautim .badge {
    color: #c66ad8;
    background-color: #ffffff;
}