:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #ffffff;
  --border-color: #FFFFFF;
  --accent-color: #00FFFF;
  --header-bg: #dc5831;
}

.dark-mode {
  --bg-color: #060A10;
  --text-color: #FFFFFF;
  --card-bg: #0A1018;
  --border-color: #162032;
  --accent-color: #00FFFF;
  --header-bg: #0A1018;
}

.dark-mode,
.dark-mode body,
.dark-mode html,
body.dark-mode,
html.dark-mode {
  background-color: #060A10 !important;
  color: #FFFFFF !important;
}

.dark-mode .dashboard-container,
.dark-mode .dashboard-card,
.dark-mode .modal-content,
.dark-mode .table,
.dark-mode .table tr,
.dark-mode .table td,
.dark-mode .table th,
.dark-mode .card,
.dark-mode .panel,
.dark-mode .box,
.dark-mode .container,
.dark-mode .main-content,
.dark-mode .content-wrapper,
.dark-mode .page-content,
.dark-mode .section,
.dark-mode .widget,
.dark-mode .stat-box,
.dark-mode .info-box,
.dark-mode .summary-box,
.dark-mode .bg-white,
.dark-mode .note-wrap,
.dark-mode ol.breadcrumb,
.dark-mode .nav.tab-page,
.dark-mode .content-wrap.container,
.dark-mode .detail-sp-ck,
.dark-mode .info-shop-ck,
.dark-mode .info-pro-ck,
.dark-mode .sidenav-ck,
.dark-mode .sidenav-menu,
body.dark-mode .dashboard-container,
body.dark-mode .dashboard-card,
body.dark-mode .modal-content,
body.dark-mode .table,
body.dark-mode .table tr,
body.dark-mode .table td,
body.dark-mode .table th,
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .container,
body.dark-mode .main-content,
body.dark-mode .content-wrapper,
body.dark-mode .page-content,
body.dark-mode .section,
body.dark-mode .widget,
body.dark-mode .stat-box,
body.dark-mode .info-box,
body.dark-mode .summary-box,
body.dark-mode .bg-white,
body.dark-mode .note-wrap,
body.dark-mode ol.breadcrumb,
body.dark-mode .nav.tab-page,
body.dark-mode .content-wrap.container,
body.dark-mode .detail-sp-ck,
body.dark-mode .info-shop-ck,
body.dark-mode .info-pro-ck,
body.dark-mode .sidenav-ck,
body.dark-mode .sidenav-menu,
body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .card-footer,
body.dark-mode .list-group-item,
body.dark-mode .dropdown-menu,
body.dark-mode .popover,
body.dark-mode .tab-content,
body.dark-mode .nav-tabs .nav-link,
body.dark-mode .modal-header,
body.dark-mode .modal-body,
body.dark-mode .modal-footer {
  background-color: #0A1018 !important;
  color: #FFFFFF !important;
  border-color: #162032 !important;
}

.dark-mode input:not([type="submit"]):not([type="button"]),
body.dark-mode input:not([type="submit"]):not([type="button"]) {
  background-color: #060A10 !important;
  color: #FFFFFF !important;
  border-color: #162032 !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder,
.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode .form-control::placeholder {
  color: #7A8FA8 !important;
}

/* =============================================================================
   DARK MODE BUTTON & INPUT BUTTON RULES
   ============================================================================= */
/* =============================================================================
   DARK MODE BUTTON & INPUT BUTTON CONTRAST RULES
   ============================================================================= */
/* ALL BUTTONS IN DARK MODE - GLOBAL RADIUS (6px), BORDER (1px solid), AND BASE CONTRAST */
body.dark-mode button,
body.dark-mode .btn,
body.dark-mode a.btn,
body.dark-mode input[type="button"],
body.dark-mode input[type="submit"],
.dark-mode button,
.dark-mode .btn,
.dark-mode a.btn,
.dark-mode input[type="button"],
.dark-mode input[type="submit"] {
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Nền màu XANH DƯƠNG (#2196F3, #007bff, #00BFFF, #1E90FF, #4169E1) -> chữ TRẮNG (#FFFFFF) */
.dark-mode .btn-primary,
.dark-mode .btn-info,
body.dark-mode .btn-primary,
body.dark-mode .btn-info,
.dark-mode button.btn-primary,
.dark-mode button.btn-info,
body.dark-mode button.btn-primary,
body.dark-mode button.btn-info,
.dark-mode [style*="background: #2196F3"],
.dark-mode [style*="background-color: #2196F3"],
.dark-mode [style*="background: #007bff"],
.dark-mode [style*="background-color: #007bff"],
.dark-mode [style*="background: #2563eb"],
.dark-mode [style*="background-color: #2563eb"],
body.dark-mode [style*="background: #2196F3"],
body.dark-mode [style*="background-color: #2196F3"],
body.dark-mode [style*="background: #007bff"],
body.dark-mode [style*="background-color: #007bff"],
body.dark-mode [style*="background: #2563eb"],
body.dark-mode [style*="background-color: #2563eb"] {
    background-color: #2196F3 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.dark-mode .btn-primary *,
.dark-mode .btn-info *,
body.dark-mode .btn-primary *,
body.dark-mode .btn-info * {
    color: #ffffff !important;
}

/* Nền màu CAM (#FF9800, #FFA500) -> chữ TRẮNG (#FFFFFF) */
.dark-mode .btn-warning,
body.dark-mode .btn-warning,
.dark-mode button.btn-warning,
body.dark-mode button.btn-warning,
.dark-mode [style*="background: #FF9800"],
.dark-mode [style*="background-color: #FF9800"],
.dark-mode [style*="background: #FFA500"],
.dark-mode [style*="background-color: #FFA500"],
.dark-mode [style*="background: #f97316"],
.dark-mode [style*="background-color: #f97316"],
body.dark-mode [style*="background: #FF9800"],
body.dark-mode [style*="background-color: #FF9800"],
body.dark-mode [style*="background: #FFA500"],
body.dark-mode [style*="background-color: #FFA500"],
body.dark-mode [style*="background: #f97316"],
body.dark-mode [style*="background-color: #f97316"] {
    background-color: #FF9800 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.dark-mode .btn-warning *,
body.dark-mode .btn-warning * {
    color: #ffffff !important;
}

/* Nền màu XANH LÁ (#4CAF50, #28A745) -> chữ TRẮNG (#FFFFFF) */
.dark-mode .btn-success,
body.dark-mode .btn-success,
.dark-mode button.btn-success,
body.dark-mode button.btn-success,
.dark-mode [style*="background: #4CAF50"],
.dark-mode [style*="background-color: #4CAF50"],
.dark-mode [style*="background: #28A745"],
.dark-mode [style*="background-color: #28A745"],
.dark-mode [style*="background: #10b981"],
.dark-mode [style*="background-color: #10b981"],
body.dark-mode [style*="background: #4CAF50"],
body.dark-mode [style*="background-color: #4CAF50"],
body.dark-mode [style*="background: #28A745"],
body.dark-mode [style*="background-color: #28A745"],
body.dark-mode [style*="background: #10b981"],
body.dark-mode [style*="background-color: #10b981"] {
    background-color: #28A745 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.dark-mode .btn-success *,
body.dark-mode .btn-success * {
    color: #ffffff !important;
}

/* Nền màu ĐỎ (#F44336, #DC3545) -> chữ TRẮNG (#FFFFFF) */
.dark-mode .btn-danger,
body.dark-mode .btn-danger,
.dark-mode button.btn-danger,
body.dark-mode button.btn-danger,
.dark-mode [style*="background: #F44336"],
.dark-mode [style*="background-color: #F44336"],
.dark-mode [style*="background: #DC3545"],
.dark-mode [style*="background-color: #DC3545"],
.dark-mode [style*="background: #ef4444"],
.dark-mode [style*="background-color: #ef4444"],
body.dark-mode [style*="background: #F44336"],
body.dark-mode [style*="background-color: #F44336"],
body.dark-mode [style*="background: #DC3545"],
body.dark-mode [style*="background-color: #DC3545"],
body.dark-mode [style*="background: #ef4444"],
body.dark-mode [style*="background-color: #ef4444"] {
    background-color: #DC3545 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.dark-mode .btn-danger *,
body.dark-mode .btn-danger * {
    color: #ffffff !important;
}

/* Nền màu KRYPHOS OBSIDIAN (#060A10, #0A1018, #162032) -> chữ TRẮNG (#FFFFFF) */
.dark-mode .btn-dark,
.dark-mode .btn-secondary,
.dark-mode .btn[class*='dark'],
.dark-mode button[class*='dark'],
body.dark-mode .btn-dark,
body.dark-mode .btn-secondary,
body.dark-mode .btn[class*='dark'],
body.dark-mode button[class*='dark'] {
    background-color: #162032 !important;
    color: #ffffff !important;
    border: 1px solid #060A10 !important;
    border-radius: 6px !important;
}

.dark-mode .btn-dark *,
.dark-mode .btn-secondary *,
.dark-mode .btn[class*='dark'] *,
.dark-mode button[class*='dark'] *,
body.dark-mode .btn-dark *,
body.dark-mode .btn-secondary *,
body.dark-mode .btn[class*='dark'] *,
body.dark-mode button[class*='dark'] * {
    color: #ffffff !important;
}

/* Nền màu TRẮNG/XÁM NHẠT (#fff, #f8f9fa, #eee) -> chữ ĐEN (#060A10) */
.dark-mode .btn-light,
.dark-mode button.btn-light,
.dark-mode a.btn-light,
.dark-mode .btn-default,
.dark-mode button.btn-default,
.dark-mode a.btn-default,
.dark-mode .btn-white,
.dark-mode button.btn-white,
.dark-mode a.btn-white,
body.dark-mode .btn-light,
body.dark-mode button.btn-light,
body.dark-mode a.btn-light,
body.dark-mode .btn-default,
body.dark-mode button.btn-default,
body.dark-mode a.btn-default,
body.dark-mode .btn-white,
body.dark-mode button.btn-white,
body.dark-mode a.btn-white,
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background-color: #fff"],
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background-color: #ffffff"],
.dark-mode [style*="background: #f8f9fa"],
.dark-mode [style*="background-color: #f8f9fa"],
.dark-mode [style*="background: #eee"],
.dark-mode [style*="background-color: #eee"],
.dark-mode [style*="background: #e2e8f0"],
.dark-mode [style*="background-color: #e2e8f0"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background-color: #f8f9fa"],
body.dark-mode [style*="background: #eee"],
body.dark-mode [style*="background-color: #eee"],
body.dark-mode [style*="background: #e2e8f0"],
body.dark-mode [style*="background-color: #e2e8f0"] {
    background-color: #f8f9fa !important;
    color: #060A10 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.dark-mode .btn-light *,
.dark-mode button.btn-light *,
.dark-mode a.btn-light *,
.dark-mode .btn-default *,
.dark-mode button.btn-default *,
.dark-mode a.btn-default *,
.dark-mode .btn-white *,
.dark-mode button.btn-white *,
.dark-mode a.btn-white *,
body.dark-mode .btn-light *,
body.dark-mode button.btn-light *,
body.dark-mode a.btn-light *,
body.dark-mode .btn-default *,
body.dark-mode button.btn-default *,
body.dark-mode a.btn-default *,
body.dark-mode .btn-white *,
body.dark-mode button.btn-white *,
body.dark-mode a.btn-white * {
    color: #060A10 !important;
}




.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.clearfix:before {
  display: table;
  content: " ";
}

body {
  background: #f0f4f5;
  font-size: 15px;
}

#header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
}

#header .navbar-nav .nav-item {
  padding-right: 1rem;
}

#header .navbar-nav .nav-item .fa {
  padding-right: 5px;
}

#header .navbar-nav .nav-item:last-child {
  padding-right: 0;
}

#header .nav-link {
  color: #fff;
  position: relative;
}

#header .nav-link > .fa {
  color: #dc5831;
}

#header .nav-link > .fa.fa-shopping-cart,
#header .nav-link > .fa.fa-bell {
  color: #000;
  font-size: 20px;
}

#header .nav-link > .fa.fa-bell {
  pointer-events: none;
}

#header .nav-link > .fa:nth-of-type(1) {
  padding-right: 5px;
}

#header .nav-link > .badge {
  position: absolute;
  top: 0;
  right: 5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0;
  margin: 0;
  color: #fff;
  background: #dc5831;
  border-radius: 50%;
  font-size: 10px;
}

#cart-group .btn-cart > .badge {
  position: absolute;
  top: 0;
  right: 5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0;
  margin: 0;
  color: #fff;
  background: #dc5831;
  border-radius: 50%;
  font-size: 10px;
}

.sidenav-menu {
  background: #060A10;
  width: 50px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.sidenav-menu:hover {
  width: 250px;
}

.sidenav-menu:hover ~ .main-content {
  padding-left: 250px;
}

.sidenav-menu.show {
  width: 250px;
}

.sidenav-menu.show .menu-list {
  overflow: auto;
}

.sidenav-menu.show ~ .main-content {
  padding-left: 250px;
}

.sidenav-menu .menu-list {
  list-style: none;
  position: relative;
  height: calc(100vh - 0px);
  padding-right: 15px;
}

.sidenav-menu .menu-list > .menu-item > .menu-link {
  text-transform: uppercase;
}

.sidenav-menu .menu-list > .menu-item > .sub-menu-list {
  position: relative;
}

.sidenav-menu .menu-list > .menu-item > .sub-menu-list > .menu-item {
  position: relative;
}

.sidenav-menu .menu-list > .menu-item > .sub-menu-list > .menu-item:after {
  content: "";
  left: -19px;
  position: absolute;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8e8e8e;
}

.menu-item.step-active:after {
  background: #28a745;
}

.menu-item.step-active > .menu-link:before {
  content: "";
  position: absolute;
  width: 3px;
  top: 0;
  bottom: 0;
  left: -16px;
  background: #28a745;
}

.sidenav-menu .menu-list > .menu-item > .sub-menu-list:before {
  content: "";
  position: absolute;
  left: 50px;
  width: 2px;
  height: 100%;
  top: 0;
  background: #e8e8e8;
}

.sidenav-menu .menu-list .menu-item {
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sidenav-menu .menu-list .menu-item span.badge {
  background: #f8ad01;
  display: inline-block;
  height: 25px;
  padding: 0 5px;
  line-height: 25px !important;
  color: #fff;
}

.sidenav-menu .menu-list .menu-item .menu-link {
  position: relative;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 10px 0;
  color: #555;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  text-decoration: none;
}

.sidenav-menu .menu-list .menu-item .menu-link.active {
  color: #28a745;
}

.sidenav-menu .menu-list .menu-item .menu-link:hover {
  color: #28a745;
}

.sidenav-menu .menu-list .menu-item .menu-link .fa {
  width: 50px;
  text-align: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.sidenav-menu .menu-list .menu-item .menu-link.has-sub-menu.active:after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

.sidenav-menu .menu-list .menu-item .menu-link.has-sub-menu:after {
  content: "\f107";
  position: absolute;
  font-family: "Font Awesome 5 Free";
  right: 0;
  top: 50%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-weight: 900;
}

.sidenav-fixed {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1000;
}

.sidenav-fixed.sidenav-left {
  left: 0;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.35);
}

.main-content {
  padding-left: 50px;
  /* padding-right: 30px; */
  padding-top: 15px;
  padding-bottom: 15px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.content-wrap {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.content-wrap.container {
  background: #fff;
}

.sidebar-right {
  width: 25%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.search-bar {
  overflow: hidden;
  border-radius: 25px;
}

.search-bar select {
  width: 150px;
}

.search-bar .form-control {
  border: 0;
  border-radius: 0;
}

.search-bar .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0;
}

.search-bar .search-button {
  padding: 0 30px;
  background: #20ab52;
  display: block;
  height: 38px;
  line-height: 38px;
  color: #fff;
}

.select-wrap {
  position: relative;
  border-right: 1px solid #e1e1e1;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-right: 0;
}

.select-wrap:after {
  content: "\f0d7";
  font-family: "FontAwesome";
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.nav.tab-page .nav-item .nav-link.active {
  background: #6c7da7 !important;
}
.bg-primary {
  background: #6c7da7 !important;
}
.bg-white {
  background-color: #fff;
}
ol.breadcrumb {
  background: #fff;
  border-radius: 0;
  padding: 0.5rem 1rem;
  border: 1px solid #e1e1e1;
}

.navbar-brand img {
  width: 30px;
  height: 30px;
}

.nav.tab-page {
  border: 1px solid #e1e1e1;
  background: #fff;
  overflow: hidden;
}

.nav.tab-page .nav-item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}

.nav.tab-page .nav-item .nav-link {
  border-radius: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.nav.tab-page .nav-item .nav-link:hover {
  background: #f8f8f8;
}

.nav.tab-page .nav-item .nav-link .fa {
  margin-right: 5px;
}

.nav.tab-page .nav-item .nav-link.active {
  color: #fff;
  background: #088fc4;
}

.info-with-badge {
  position: relative;
}

.info-with-badge .badge {
  display: inline-block;
  width: auto;
  height: 20px;
  line-height: 20px;
  margin-left: 3px;
  color: #fff;
  background: #dc5831;
  border-radius: 4px;
  font-size: 10px;
  padding: 0 5px;
  margin-top: -17px;
  vertical-align: middle;
}

table.table.tb-info {
  table-layout: auto;
  width: 100%;
}

table.table.tb-info tr td {
  padding: 5px 0;
  vertical-align: middle;
}

table.table.tb-info.column-2 tr td {
  width: 50%;
  word-break: break-word;
}

table.table.tb-info.column-2 tr td:first-child {
  padding-right: 10px;
}

table.table.tb-info.column-2 tr td .btn {
  white-space: nowrap;
}

.primary-card .card-body,
.primary-card .card-header {
  padding: 5px 15px;
}

.primary-card .card-header .title.text-18 {
  font-size: 18px;
}

.primary-card .card-header .title > .fa {
  margin-right: 5px;
}

.tb-info.info-cus tbody tr td.lb i {
  width: 30px;
  display: inline-block;
  text-align: center;
}

.checkbox-wrap {
  position: relative;
}

.styled-checkbox {
  position: absolute;
  opacity: 0;
}

.styled-checkbox:focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}

.styled-checkbox + label:before {
  content: "";
  margin-right: 5px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
}

.styled-checkbox:hover + label:before {
  background: #dc5831;
}

.styled-checkbox:checked + label:before {
  background: #dc5831;
}

.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}

.styled-checkbox:disabled + label:before {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #ddd;
}

.styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  background: white;
  width: 2px;
  height: 2px;
  -webkit-box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
    4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white,
    4px -6px 0 white, 4px -8px 0 white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.toggle-lock .styled-checkbox + label:before {
  border: 1px solid #e1e1e1;
  border-radius: 50%;
}

.toggle-lock .styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  background: white;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -webkit-box-shadow: none;
  box-shadow: none;
  /* transform: none; */
}

.logo-brand {
  height: 56px;
  background: #505c7b;
}

.logo-brand .navbar-brand {
  width: 50px;
  text-align: center;
  margin: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.logo-brand .brand-name {
  white-space: nowrap;
}

#header .navbar {
  padding-left: 65px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

.primary-card .table {
  margin-bottom: 0;
}

.sidebar-right {
  padding-left: 15px;
}

.sidebar-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 71px;
}

.note-wrap {
  background: #fff;
  border: 1px solid #e1e1e1;
  padding: 10px;
}

.chat-content-wrap .chat-body {
  height: 330px;
  overflow: hidden;
  position: relative;
}

.chat-content-wrap .chat-body .chat-item {
  margin-bottom: 15px;
  padding: 10px 15px;
}

.chat-content-wrap .chat-body .chat-item .avatar-chat {
  display: inline-block;
  position: relative;
}

.chat-content-wrap .chat-body .chat-item .avatar-chat img {
  width: 35px;
  height: 35px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.chat-content-wrap .chat-body .chat-item .user-content {
  padding: 10px;
  font-size: 12px;
  position: relative;
}

.chat-content-wrap .chat-body .chat-item .user-content hr {
  margin: 5px 0;
}

.chat-content-wrap .chat-body .chat-item .user-content.bubble-right {
  position: relative;
  margin-left: 1rem;
  color: #fff;
  border-radius: 0.3rem;
  background-color: #2196f3;
}

.chat-content-wrap .chat-body .chat-item .user-content.bubble-right hr {
  border-color: #fff;
}

.chat-content-wrap .chat-body .chat-item .user-content.bubble-right:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  margin-top: -16px;
  margin-right: -8px;
  content: "";
  border: 10px solid transparent;
  border-right: 0;
  border-left-color: #2196f3;
}

.chat-content-wrap .chat-body .chat-item .user-content.bubble {
  position: relative;
  margin-left: 15px;
  border-radius: 0.3rem;
  background: #eceff1;
}

.chat-content-wrap .chat-body .chat-item .user-content.bubble hr {
  border-color: #e1e1e1;
}

.chat-content-wrap .chat-body .chat-item .user-content.bubble:after {
  position: absolute;
  top: 50%;
  left: -9px;
  width: 0;
  height: 0;
  margin-top: -20px;
  content: "";
  border: 10px solid transparent;
  border-right-color: #eceff1;
  border-left: 0;
}

.chat-content-wrap .chat-body .chat-item .user-content p {
  margin-bottom: 5px;
}

.chat-content-wrap .chat-body .chat-item .user-content p.time {
  position: absolute;
  top: 100%;
  color: #707070;
  margin-top: 2px;
  right: 0;
}

.chat-content-wrap .chat-footer .send-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -1px;
  border: 1px solid #e1e1e1;
}

.chat-content-wrap .chat-footer .send-text .btn-send {
  border-left: 1px solid #e1e1e1;
  border-radius: 0;
  background: #088fc4;
  color: #fff;
}

.chat-content-wrap .chat-footer .send-text input.form-control {
  border: 0;
  border-radius: 0;
}

.chat-content-wrap .chat-footer .send-text input.form-control:focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.cus-support {
  margin: 0 -1px -1px;
}

.pos-relative {
  position: relative;
}

.navbar-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.dropdown-profile {
  padding: 10px;
}

#header .right-nav {
  margin-left: auto;
  color: #fff;
}

#header .right-nav .login-register {
  list-style-type: none;
}

#header .right-nav .login-register li {
  display: inline-block;
  position: relative;
}

#header .right-nav .login-register li + li {
  padding-left: 10px;
  margin-left: 6px;
}

#header .right-nav .login-register li a {
  color: inherit;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#header .right-nav .login-register li a:hover {
  color: #28a745;
}

#header .right-nav .acc-info {
  position: relative;
  margin-right: 15px;
  color: inherit;
}

#header .right-nav .acc-info:hover .status-desktop {
  display: block;
}

#header .right-nav .acc-info .acc-info-btn {
  line-height: 20px;
  display: block;
  padding: 5px 0;
}

#header .right-nav .acc-info .acc-info-btn .icon {
  margin-right: 5px;
}

@media screen and (max-width: 991px) {
  #header .right-nav .acc-info:hover .status-desktop,
  #header .right-nav .acc-info:focus .status-desktop {
    display: none;
  }
}

#header .status-desktop {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 99;
  width: 300px;
  max-height: 400px;
}

#header .status-desktop .status-wrap {
  position: relative;
  left: 0;
  top: 26px;
  width: 300px;
  font-size: 14px;
  line-height: 30px;
  font-weight: 500;
  color: black;
  background-color: white;
}

#header .status-desktop .status-wrap:after {
  content: "";
  display: inline-block;
  width: 0;
  position: absolute;
  bottom: 100%;
  right: 20px;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #28a745;
}

#header .status-desktop .status__header {
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  background-color: #28a745;
}

#header .status-desktop .status__header::before {
  content: "";
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-image: url(../images/status-header-bg.png);
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: calc(100% + 23px);
}

#header .status-desktop .status__header h4 {
  color: white;
  font-size: 24px;
  z-index: 1;
}

#header .status-desktop .status__body > *:not(.links) {
  padding: 10px 20px;
}

#header .status-desktop .status__body > div:nth-child(odd) {
  background-color: #f8f8f8;
}

#header .status-desktop .status__body .level__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#header .status-desktop .status__body .level__info .rank {
  font-weight: bold;
}

#header .status-desktop .status__body .level__process {
  background: #ebebeb;
  border-radius: 12px;
  height: 20px;
  width: 100%;
  padding: 2px;
  margin: 5px 0;
  overflow: hidden;
}

#header .status-desktop .status__body .level__process span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: 9px;
  background-color: #28a745;
  background-image: -webkit-repeating-linear-gradient(
    135deg,
    transparent 0px,
    transparent 7px,
    rgba(255, 255, 255, 0.6) 7px,
    rgba(255, 255, 255, 0.6) 9px
  );
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 7px,
    rgba(255, 255, 255, 0.6) 7px,
    rgba(255, 255, 255, 0.6) 9px
  );
  background-size: 50px 50px;
  background-position: 0 0;
  overflow: hidden;
  -webkit-animation: move 4s linear infinite;
  animation: move 4s linear infinite;
}

#header .status-desktop .status__body .balance {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

#header .status-desktop .status__body .balance__number {
  margin-left: 10px;
  font-weight: bold;
}

#header .status-desktop .status__body .balance__number .vnd {
  color: #28a745;
}

#header .status-desktop .status__body .links > a {
  padding: 10px 20px;
  display: block;
  text-align: start;
  color: #000;
}

#header .status-desktop .status__body .links > a i {
  float: right;
  line-height: 2;
  color: #28a745;
}

#header .status-desktop .status__body .links > a:hover {
  color: #28a745;
}

#header .status-desktop .status__footer .ft-btn {
  font-size: 13px;
  display: block;
  width: 100%;
  padding: 10px 0;
  border-radius: unset;
  background-color: #28a745;
  color: white;
  text-align: center;
}

#header .status-mobile {
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  right: -300px;
  padding: 20px 10px 10px 10px;
  overflow-y: auto;
  max-width: 300px;
  width: 100%;
  -webkit-box-shadow: -2px 0px 2px #00000045;
  box-shadow: -2px 0px 2px #00000045;
  z-index: 9999;
  background-color: #000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

#header .status-mobile.open {
  right: 0;
}

#header .status-mobile .username {
  color: #fff;
  margin-bottom: 10px;
  text-transform: uppercase;
  text-align: center;
}

#header .status-mobile .user-menu-logo {
  margin-bottom: 15px;
  display: block;
  text-align: center;
}

#header .status-mobile .user-menu-logo img {
  max-height: 50px;
  margin: auto;
}

#header .status-mobile .user-info {
  margin-bottom: 15px;
  text-align: center;
}

#header .status-mobile .user-info .money {
  color: #fff;
}

#header .status-mobile .user-info .vip {
  text-transform: uppercase;
  color: #28a745;
  font-weight: bold;
}

#header .status-mobile .nav-percent {
  width: 100%;
  min-height: 8px;
  border-radius: 8px;
  background-color: #e1e1e1;
  position: relative;
  margin-bottom: 15px;
}

#header .status-mobile .nav-percent-ok {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #28a745;
  border-radius: 8px;
}

#header .status-mobile .menu-in-profile {
  list-style-type: none;
  margin-bottom: 15px;
}

#header .status-mobile .menu-in-profile > li:not(:last-child) {
  border-bottom: 1px solid #595959;
}

#header .status-mobile .menu-in-profile > li > a {
  padding: 15px 0;
  display: block;
  text-align: left;
  text-transform: uppercase;
  color: #fff;
}

#header .status-mobile .menu-in-profile > li > a > i {
  margin-right: 10px;
  color: #a2a2a2;
  font-size: 18px;
  width: 20px;
}

#header .status-mobile .main-btn {
  display: block;
  color: #000;
}

@media screen and (max-width: 991px) {
  #header .status-mobile {
    display: block;
  }
}

#header .overlay-status-mobile {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  display: none;
  z-index: 9998;
}

@-webkit-keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

#header .overlay-status-mobile {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.comment-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 0;
}

.comment-item ~ .sub-comment {
  padding: 0 0 0 54px;
}

.comment-item ~ .sub-comment .comment-avatar .avatar {
  margin-top: 5px;
}

.comment-item ~ .sub-comment .comment-avatar .avatar img {
  width: 32px;
  height: 32px;
}

.comment-item .comment-avatar .avatar img {
  width: 42px;
  height: 42px;
  -o-object-fit: cover;
  object-fit: cover;
}

.comment-item .comment-avatar .avatar {
  border-radius: 50%;
  overflow: hidden;
  width: auto;
  height: auto;
  display: block;
  margin-right: 5px;
}

.comment-item .comment-content {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.comment-item .comment-box {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.comment-wrap textarea {
  overflow: hidden;
  height: 38px;
  border-radius: 18px;
  line-height: 1.5;
  min-height: 38px;
}

.comment-wrap textarea:focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.comment-lists {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-lists .comment-info {
  padding: 10px;
  background: #eef1f3;
  border-radius: 7px;
  line-height: inherit;
}

.comment-lists .comment-info > a {
  color: #007bff;
  font-weight: 600;
}

.comment-lists .comment-info .content-cmt {
  color: #1d2129;
}

.comment-lists .comment-meta {
  margin-top: 5px;
}

.comment-lists .comment-meta .action {
  margin-right: 15px;
  color: #6598c6;
}

.comment-lists .comment-meta .time {
  color: #707070;
}

.cmt-area {
  position: relative;
  background-color: #f2f3f5;
  border: 1px solid #ccd0d5;
  border-radius: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.cmt-area .cmt-action {
  -ms-flex-item-align: end;
  align-self: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 32px;
  margin-left: 12px;
  margin-right: 8px;
}

@media screen and (max-width: 480px) {
  .cmt-area .cmt-action {
    height: 30px;
  }
}

.cmt-area .cmt-action .btn-action {
  padding: 0 5px;
  display: inline-block;
  color: #b5b5b5;
  font-size: 14px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.cmt-area .cmt-action .btn-action:hover {
  color: #707070;
}

.cmt-area .cmt-action .btn-action.send {
  margin-left: 15px;
}

.cmt-area .text-area {
  cursor: text;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  line-height: 16px;
  overflow: hidden;
  padding: 8px 12px;
}

.cmt-area div.form-control {
  overflow: hidden;
  resize: none;
  height: auto;
  border-radius: 0;
  outline: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  word-break: break-all;
  line-height: 1.5;
  border: 0;
  background: transparent;
  padding: 0 5px;
  margin-bottom: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.cmt-area div.form-control:focus {
  background: transparent;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#facebook-area .right-area {
  width: 100%;
}

#facebook-area .right-area .search-box {
  width: 90%;
}

#facebook-area .right-area .search-box .search-area {
  width: 100%;
}

#facebook-area .bell-box .fa-bell {
  position: relative;
  margin-right: 10px;
  margin-bottom: 15px;
}

#facebook-area .bell-box .fa-bell span {
  position: absolute;
  top: -10px;
  background: #ff3322;
  display: inline-block;
  padding: 2px;
  font-size: 12px;
  right: -7px;
}

.comment-form-wrap .cmt-area {
  width: 100%;
}

.comment-block {
  height: 40vh;
  overflow: hidden;
  position: relative;
}

.right-area .search-box {
  position: relative;
  margin-right: 10px;
}

.right-area .search-box input.search-area {
  padding: 0 30px 0 10px;
  height: 30px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

.right-area .search-box input.search-area:focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.right-area .search-box input.search-area::-webkit-input-placeholder,
.right-area .search-box input.search-area::-webkit-placeholder {
  color: #fff;
}

.right-area .search-box input.search-area::placeholder,
.right-area .search-box input.search-area::-webkit-placeholder {
  color: #fff;
}

.right-area .search-box .search-button {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #fff;
}

.right-area .btn.update {
  height: 30px;
  padding: 0 10px;
  line-height: 30px;
  border: 1px solid #fff;
  border-radius: 0;
  color: #fff;
}

/*
 * Container style
 */

.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
   * Scrollbar rail styles
   */

.hideMe {
  display: none;
}

.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
   * Scrollbar thumb styles
   */

.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */

@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}

.cta-area {
  padding: 10px 15px 0;
}

#facebook-area .card-body .badge {
  font-size: 0.8rem;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  color: #fff;
  margin-right: 5px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#facebook-area .card-body .badge:hover {
  opacity: 0.7;
}

#facebook-area .card-body .badge.thongbao {
  background: #3a97fd;
}

#facebook-area .card-body .badge.thoathuan {
  background: #f79e11;
}

#facebook-area .card-body .badge.dongy {
  background: #20ab52;
}

#facebook-area .card-body .badge.huy {
  background: #d9534f;
}

#facebook-area .card-body .badge.mat {
  background: #0054a6;
}

#facebook-area .card-body .badge.cho {
  background: #ed145b;
}

#facebook-area .card-body .text-area .badge {
  margin-bottom: 0;
}

.history-wrap {
  padding: 10px;
}

.box {
  border: 1px solid #e1e1e1;
  margin-bottom: 10px;
  padding: 10px;
}

.box a {
  color: #393939;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.box a:hover {
  color: #088fc4;
}

.box:last-child {
  margin-bottom: 0;
}

.box .time {
  font-size: 14px;
  color: #393939;
}

.box p.text-danger {
  font-size: 14px;
  margin-bottom: 0;
}

.table.centered tr td,
.table.centered tr th {
  text-align: center;
}

.table tr td,
.table tr th {
  vertical-align: middle;
}

.table-action .btn {
  border-radius: 0;
  margin-left: -1px;
  white-space: nowrap;
}

thead.bg-light-grey tr th {
  background: #ececec;
}

.table.table-order-info tr td {
  background: #fff;
}

.profile-info .avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.sidenav-menu .user-info {
  margin-left: 10px;
}

.sidenav-menu .user-info .user-name {
  font-weight: bold;
}

.sidenav-menu .user-info .balance {
  color: #666666;
  font-size: 14px;
}

.sidenav-menu .profile-item {
  padding: 10px;
  border-bottom: 1px solid #e1e1e1;
}

.sidenav-menu .menu-toggle {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.sidenav-menu .menu-toggle .fa {
  font-size: 25px;
  display: inline-block;
  padding: 5px;
  color: #fff;
}

.sidenav-menu .profile-info {
  display: none !important;
}

.sidenav-menu .profile-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sidenav-menu .profile-item p {
  margin-bottom: 0;
}

.sidenav-menu.show .profile-info,
.sidenav-menu:hover .profile-info {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

#sidenav-menu.show .has-sub-menu.active + .sub-menu-list {
  display: block;
}

.sub-menu-list {
  padding-left: 65px;
  width: 100%;
  display: none;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.sub-menu-list .sub-menu-list {
  padding-left: 15px;
}

.sub-menu-list .sub-menu-list .menu-item {
  font-size: 14px;
}

.filter-wrap input.search-area {
  width: 200px;
}

.filter-wrap select {
  max-width: 200px;
  min-width: 150px;
  background: transparent;
  margin-right: 10px;
}

.filter-wrap .btn {
  white-space: nowrap;
}

.filter-wrap .action-filter {
  margin-left: 10px;
}

.action-filter .btn,
.product-action .btn {
  margin: 0 1px;
}

.table-order-info tr td p {
  white-space: nowrap;
}

.form-control:focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.page-search {
  position: relative;
}

.page-search input {
  background: transparent;
  padding-right: 30px;
}

.page-search input:focus {
  background: transparent;
}

.page-search .search-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.pagination-wrap .page-item .page-link {
  background: transparent;
  border: 1px solid #ced4da;
  line-height: 1.35;
}

.pagination-wrap .page-item .page-link.active {
  background: #088fc4;
  color: #fff;
}

a {
  color: #088fc4;
}

.collapse-toggle .fa {
  font-size: 18px;
  color: #fff;
}

.collapse-toggle.collapsed .fa-minus:before {
  content: "\f067";
}
.addition-service {
  padding: 10px;
}
.add-service-check {
  display: inline-flex;
}
.addition-service .checkbox-wrap {
  margin-right: 10px;
}

.filter-order .action-filter .btn {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  white-space: nowrap;
  border-radius: 0;
}

.checkbox-wrap.muahang .styled-checkbox:checked + label:before,
.checkbox-wrap.muahang .styled-checkbox:hover + label:before {
  background: #3da4ce;
}

.checkbox-wrap.muahoatoc .styled-checkbox:checked + label:before,
.checkbox-wrap.muahoatoc .styled-checkbox:hover + label:before {
  background: #e74761;
}

.checkbox-wrap.shiphoatoc .styled-checkbox:checked + label:before,
.checkbox-wrap.shiphoatoc .styled-checkbox:hover + label:before {
  background: #59ca6d;
}

.checkbox-wrap.macca .styled-checkbox:checked + label:before,
.checkbox-wrap.macca .styled-checkbox:hover + label:before {
  background: #00aeef;
}

.checkbox-wrap.baohiem .styled-checkbox:checked + label:before,
.checkbox-wrap.baohiem .styled-checkbox:hover + label:before {
  background: #c69c6d;
}

.checkbox-wrap.donggo .styled-checkbox:checked + label:before,
.checkbox-wrap.donggo .styled-checkbox:hover + label:before {
  background: #1cbbb4;
}

.checkbox-wrap.kiemdem .styled-checkbox:checked + label:before,
.checkbox-wrap.kiemdem .styled-checkbox:hover + label:before {
  background: #f7941d;
}

.order-item-wrap .product-item .product-image img {
  width: 150px;
  height: 150px;
  -o-object-fit: cover;
  object-fit: cover;
}

.order-item-wrap .product-item .product-image-order img {
  width: 80px;
  height: 80px;
  -o-object-fit: cover;
  object-fit: cover;
}

.order-item-wrap .product-item .product-info {
  margin-right: 10px;
}

.order-item-wrap .right-content {
  height: 100%;
}

.order-item-wrap .right-content .box-area {
  height: 100%;
}

.order-item-wrap .right-content .box-area .tab-pane {
  height: 100%;
}

.order-item-wrap .product-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.order-item-wrap .product-action .btn {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  white-space: nowrap;
}

.order-item-wrap .product-hd {
  height: 40px;
  line-height: 40px;
}

.order-item-wrap .product-attribute {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.order-item-wrap .product-attribute .product-action .btn {
  border-radius: 0;
}

.order-item-wrap .product-attribute .box-area {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.order-item-wrap .product-attribute .box-area textarea {
  border-radius: 4px;
  background: #ececec;
  border: 1px solid #e1e1e1;
  width: 100%;
  padding: 10px;
  height: 100%;
  min-height: 75px;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}

.order-item-wrap .product-attribute .box-area textarea:focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.order-item-wrap .product-attribute .nav {
  margin-bottom: 5px;
}

.order-item-wrap .product-attribute .nav .nav-link {
  padding: 0 1rem;
  height: 35px;
  line-height: 35px;
}

table.table thead tr th {
  padding: 0.5rem;
}

.step-order {
  position: relative;
  border-bottom: 1px solid #e1e1e1;
}

.step-order > .col {
  padding: 15px 0;
}

/* .step-order > .col.active .step-text .text {
  visibility: visible;
} */

.step-order > .col.active .img-block {
  border-color: #5bc0de;
}

.step-order > .col.active .img-block .fa {
  color: #5bc0de;
}

.step-text {
  position: relative;
  padding: 0 0 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e1e1e1;
}

.step-text .text {
  visibility: visible;
  padding: 0 10px;
}

.step-text .step {
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
}

.step-text .txt {
  color: #777;
}

.step-order .nav-link:before {
  content: "";
  width: 0;
  height: 0;
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  border-bottom: 9px solid #088fc4;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  display: none;
}
.step-order .active.nav-link:before {
  border-bottom-color: #5bc0de;
  display: block;
}
.step-order .img-block {
  width: 60px;
  height: 60px;
  border: 1px solid #e1e1e1;
  display: inline-block;
  border-radius: 50%;
  font-size: 35px;
  position: relative;
  margin-bottom: 15px;
}

.step-order .img-block .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #088fc4;
}

.card-header .left-area .checkbox-wrap .styled-checkbox + label:before {
  border-radius: 0;
}

.product-hd .delete-product {
  font-size: 20px;
  color: #333;
}

.order-action-all {
  border: 1px solid #e1e1e1;
  background: #f5f5f5;
  padding: 10px;
}

.filter-wrap .input-field + .action-filter .btn {
  border-radius: 0;
}

.notification-wrap {
  position: relative;
}

.notification-wrap .nav-link.open + .notification-content {
  display: block;
}

.notification-wrap .notification-content {
  display: none;
  position: absolute;
  width: 360px;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #e1e1e1;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}

.notification-wrap .notification-content .noti-bd {
  height: 350px;
  position: relative;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.notification-wrap .notification-content .noti-bd .list-noti .noti-link {
  display: block;
  color: #000;
  padding: 10px 10px;
  border-bottom: 1px solid #e1e1e1;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.notification-wrap .notification-content .noti-bd .list-noti .noti-link:hover {
  color: #088fc4;
}

.notification-wrap .notification-content .noti-bd .list-noti .noti-link p {
  margin-bottom: 0;
}

.notification-wrap .notification-content .noti-bd .list-noti .noti-link .time {
  font-weight: 500;
}

.notification-wrap
  .notification-content
  .noti-bd
  .list-noti
  .noti-link
  .content {
  font-weight: 300;
}

.notification-wrap .notification-content .noti-hd {
  font-size: 14px;
}

.notification-wrap .notification-content .noti-hd h6 {
  color: #000;
  white-space: nowrap;
  font-size: 14px;
  margin-bottom: 0;
}

.notification-wrap .notification-content .noti-hd > p {
  text-align: center;
  margin-bottom: 0;
  color: #000;
}

.notification-wrap .notification-content .noti-ft {
  text-align: center;
}

.notification-wrap .notification-content .noti-hd,
.notification-wrap .notification-content .noti-ft {
  padding: 10px;
}

.map-container {
  padding-top: 30px;
}

.title-name {
  display: inline-block;
  margin: 15px auto;
  border-bottom: 1px solid #ea4335;
  color: #ea4335;
  text-transform: uppercase;
}

.map-box {
  position: relative;
  margin-top: 20px;
}

.map-box .map-info-box {
  position: absolute;
  width: 100%;
  top: 0;
  text-align: center;
}

.map-box .map-info-box ul {
  display: inline-block;
  margin: 0 auto;
  padding-left: 0;
  float: right;
  margin-right: 50px;
  width: 65%;
}

.map-box ul li {
  width: 33.3333%;
  display: inline-block;
  margin-left: -3px;
  vertical-align: top;
  color: #000;
  padding-right: 20px;
  list-style: none;
}

.map-box ul li .box {
  background: #fff;
  border: 1px solid #e1e1e1;
  box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.2);
  padding: 30px;
}

.map-box ul li .box h4 {
  font-size: 18px;
  color: #a1a1a1;
  font-weight: 700;
  margin: 0;
}

.map-box ul li .box p {
  font-size: 18px;
}

.map-box iframe {
  width: 100%;
}

.footer-wrap {
  background: #20ab52;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

.hide-on-desktop {
  display: none;
}

/***login register*/

.login-page {
  padding: 15px 0px;
  overflow: hidden;
  width: 450px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  margin-top: 40px;
}

.login-page .banner-login img {
  width: 100%;
}

.login-page .panel-login .panel-heading a {
  font-size: 25px;
}

.login-page .panel-login .panel-body ul {
  margin: 0 auto;
  overflow: hidden;
  display: inline-block;
}

.login-page .panel-login .panel-body ul li {
  list-style: none;
  float: left;
  cursor: pointer;
  padding: 5px 10px;
}

.login-page .panel-login .panel-body ul li .fa-facebook {
  color: #4267b2;
  font-size: 20px;
  margin-right: 5px;
}

.login-page .panel-login .panel-body ul li .fa-google {
  color: #ff3322;
  font-size: 18px;
  margin-right: 5px;
}

.login-page .panel-login .panel-body p {
  clear: both;
}

.login-page .panel-login .form-group input {
  border-radius: 35px;
  height: 40px;
}

.login-page .panel-login .form-group input.btn-login {
  background: #dc5831;
  color: #fff;
}

.login-page .panel-login .form-group .btn-register {
  border-radius: 35px;
  height: 40px;
  background: #60c082;
  color: #fff;
  display: block;
  width: 100%;
  line-height: 40px;
}

.register-page .panel-heading {
  margin-bottom: 15px;
}

.readAready label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.readAready label input {
  height: 24px !important;
  margin-right: 10px;
}

.status-mobile span.close-profile {
  font-size: 24px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.3);
  color: #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  position: absolute;
  line-height: 40px;
  left: 15px;
  top: 15px;
}

.mobile-only {
  display: none;
}

.footer-wrapper {
  width: calc(100% - 50px);
  float: right;
}

footer {
  background: url(../assets/images/footer-bg.png);
  padding-top: 300px;
  background-size: cover;
  margin-top: -100px;
  color: #fff;
  margin-top: -285px;
  z-index: 7;
  position: relative;
}

footer .footer-box ul li {
  list-style: none;
}

footer .footer-box ul li a {
  color: #fff;
  font-size: 14px;
  text-align: left;
  float: left;
  margin: 1px 0px;
}

footer .footer-box strong {
  text-align: left;
  float: left;
  display: block;
  width: 100%;
}

footer .footer-box p {
  clear: both;
  text-align: left;
}

footer .footer-box h3 {
  text-align: left;
  font-size: 20px;
}

footer .first-footer-box h3 {
  text-align: center;
}

footer .first-footer-box .row {
  margin-bottom: 10px;
}

footer .footer-bottom {
  clear: both;
  overflow: hidden;
  padding: 10px 0;
  border-top: 1px solid #fff;
  margin-top: 20px;
  width: 100%;
}

footer .footer-bottom .copyright {
  text-align: left;
}

footer .footer-bottom .col-md-6 {
  float: left;
}

footer .footer-bottom ul.social-network {
  padding-left: 0;
  overflow: hidden;
  float: right;
}

footer .footer-bottom ul.social-network li {
  list-style: none;
  float: left;
}

footer .footer-bottom ul.social-network li a {
  color: #fff;
  display: inline-block;
  padding-bottom: 5px;
  border: 1px solid #fff;
  width: 30px;
  text-align: center;
  height: 25px;
  line-height: 25px;
  margin-right: 10px;
}

/*dashboard*/

.dashboard-page {
  background: #fff;
  padding: 30px 0px;
}

.dashboard-page h2 {
  font-size: 20px;
  margin-bottom: 20px;
}

.dashboard-page .product-item {
  /* overflow: hidden; */
}

.dashboard-page .product-item .product-box {
  min-width: 180px;
  padding: 10px;
  height: 150px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px #ccc;
  box-shadow: 0px 0px 10px #ccc;
  display: table;
  margin-right: 15px;
  float: left;
  position: relative;
  margin-bottom: 15px;
}

.dashboard-page .product-item .product-box a {
  overflow: hidden;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.dashboard-page .product-item .product-box a .fa {
  display: block;
  text-align: center;
  font-size: 35px;
  color: #dc5831;
}

.dashboard-page .product-item .product-box a .fab {
  display: block;
  text-align: center;
  font-size: 35px;
  color: #dc5831;
}

.dashboard-page .product-item .product-box a span {
  display: block;
  text-align: center;
  color: #000;
  margin-top: 10px;
}

.dashboard-page .product-item .product-box:hover {
  background: #dc5831;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.dashboard-page .product-item .product-box:hover .fa {
  color: #fff;
}

.dashboard-page .product-item .product-box:hover .fab {
  color: #fff;
}

.dashboard-page .product-item .product-box:hover span {
  color: #fff;
}

.tk-table {
  margin-top: 30px;
  clear: both;
}

.tk-table h2 {
  padding-top: 15px;
}

/**toan bo page*/

.toanbo-page .order-box .checkbox-wrap {
  margin-left: 10px;
}

.toanbo-page #search-orderitem select {
  margin-right: 10px;
}

@media screen and (max-width: 767px) and (min-width: 320px) {
  .toanbo-page #search-orderitem select {
    width: 40%;
  }
  .toanbo-page #search-orderitem .input-field {
    width: 46%;
  }
  .toanbo-page #search-orderitem label[for="checkbox-all-page"] {
    width: 10%;
  }
  .toanbo-page #search-orderitem .action-filter {
    width: 90%;
    float: right;
    margin-left: 9.5%;
    margin-top: 10px;
  }
  .toanbo-page #search-orderitem .action-filter .btn-outline-danger {
    width: 44%;
    margin-right: 9px;
  }
  .toanbo-page #search-orderitem .action-filter .btn-outline-primary {
    width: 51%;
  }
  .toanbo-page .filter-order .page-reload {
    width: 9%;
  }
  .toanbo-page .filter-order .page-reload a {
    padding: 0px;
    border: none;
    margin-top: -10px;
  }
  .toanbo-page .filter-order nav {
    width: 91%;
  }
  .toanbo-page .filter-order nav ul li a {
    padding: 7px 9px;
  }
  .toanbo-page #dulieu_toanbo > .card-header > .row .col-md-2:first-child {
    width: 42%;
    float: left;
    padding-right: 0px;
  }
  .toanbo-page #dulieu_toanbo > .card-header > .row .col-md-2:nth-child(2) {
    width: 58%;
    float: left;
    padding-left: 0;
  }
  .toanbo-page #dulieu_toanbo > .card-header > .row .col-md-8 {
    padding-left: 0;
    margin-top: 5px;
  }
  .dashboard-page .product-item {
    display: block !important;
  }
  .dashboard-page .product-item .product-box {
    /* width: 28%; */
    margin-bottom: 15px;
    float: left;
    min-width: initial;
    background: #fff;
    border: 1px solid #f1f0f0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  /* .dashboard-page .product-item .product-box:nth-child(even) {
    margin-right: 0px;
  } */
  .tk-table {
    clear: both;
    margin-top: 10px;
  }
  .login-page {
    width: 100%;
  }
  .map-box iframe {
    width: 100%;
    height: 100%;
  }
  .register-page input[name="last_name"] {
    margin-top: 10px;
  }
  .login-page .panel-login .form-group .btn-register {
    margin-top: 10px;
  }
  .image-login {
    display: none;
  }
  .map-box {
    position: relative;
    margin-top: 0;
  }
  .map-box .map-info-box {
    position: initial;
    width: 100%;
    top: 0;
    text-align: center;
    margin-bottom: 0px;
    overflow: hidden;
  }
  .map-box .map-info-box ul {
    margin-right: 0;
    width: 100%;
  }
  .map-box ul li {
    width: 100%;
    display: inline-block;
    margin-left: 0;
    vertical-align: top;
    color: #000;
    padding-right: 0;
    list-style: none;
    margin-bottom: 20px;
  }
  footer {
    padding-top: 10px;
    background-size: cover;
    margin-top: 0px;
    color: #fff;
    background: #16254c;
    padding-bottom: 20px;
  }
  footer .first-footer-box ul {
    overflow: hidden;
  }
  footer .first-footer-box .row {
    width: 58%;
    float: left;
    margin-bottom: 10px;
  }
  footer .first-footer-box p {
    display: none;
  }
  footer .footer-box h3 {
    margin-top: 20px;
  }
  footer .footer-bottom {
    width: 100%;
  }
  footer .footer-bottom .col-md-6:first-child {
    width: 40%;
    float: left;
  }
  footer .footer-bottom .col-md-6:last-child {
    width: 60%;
    float: left;
  }
  footer .first-footer-box .row img {
    width: 100%;
  }
  .footer-wrapper {
    width: 100%;
  }
  .order-item-wrap .product-info .product-action {
    margin-top: 0px;
  }
  .product-attribute tbody tr td > span:last-child {
    width: 60%;
    display: inline-block;
  }
  .product-attribute tbody tr td > span:first-child {
    width: 40%;
    display: inline-block;
  }
  /* .order-item-wrap .product-attribute.right-content {
        margin-top: -20px;
    } */
  .order-item-wrap .product-attribute.right-content .product-hd {
    margin-bottom: 8px;
  }
  .order-item-wrap .product-action {
    margin-bottom: 5px;
  }
  .product-item .product-info .product-image {
    max-height: 84px;
  }

  .sticky {
    display: none !important;
  }
}

/* huyen sua css */

/* #region trang tab-sanpham */

.order-item-wrap .product-attribute .box-area.box-price {
  border: 1px solid #e5e5e5;
  border-top: none;
  background: #f3f3f3;
}

.order-item-wrap .product-attribute .box-area .card-price .list-item {
  padding: 0.2rem 0.25rem;
  border-top: 1px solid #e5e5e5;
}

/* Trang chu, muc chức năng */

.dashboard-page .product-item .product-box .badge {
  position: absolute;
  top: 20%;
  left: 53%;
  /* right: 5px; */
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 20px;
  padding: 0;
  border: 1px solid;
  margin: 0;
  background: #fff;
  color: #dc5831;
  border-radius: 50%;
  font-size: 10px;
}

.dashboard-page .product-item .product-box:hover .badge {
  color: #dc5831;
}

/* thông báo */
.notification-wrap {
  position: relative;
}

.notification-wrap .nav-link.open + .notification-content {
  display: block;
}

.notification-wrap .noti-content {
  display: none;
  position: absolute;
  width: 360px;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #e1e1e1;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}

.notification-wrap .noti-content .noti-bd {
  height: 256px;
  position: relative;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.notification-wrap .noti-content .noti-bd .list-noti .noti-link {
  display: block;
  color: #000;
  padding: 10px 10px;
  border-bottom: 1px solid #e1e1e1;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.notification-wrap .noti-content .noti-bd .list-noti .noti-link:hover {
  color: #088fc4;
}

.notification-wrap .noti-content .noti-bd .list-noti .noti-link p {
  margin-bottom: 0;
}

.notification-wrap .noti-content .noti-bd .list-noti .noti-link .content {
  font-weight: 300;
}

.notification-wrap .noti-content .noti-hd {
  font-size: 14px;
}

.notification-wrap .noti-content .noti-hd h6 {
  color: #000;
  white-space: nowrap;
  font-size: 14px;
  margin-bottom: 0;
}

.notification-wrap .noti-content .noti-hd {
  word-wrap: break-word;
}

.notification-wrap .noti-content .noti-ft {
  text-align: center;
}

.notification-wrap .noti-content .noti-hd,
.notification-wrap .noti-content .noti-ft {
  padding: 10px;
}
.notification-wrap .noti-content h2 {
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.875rem;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.notification-wrap .noti-content .noti-bd .content {
  font-size: 0.75rem;
  line-height: 0.9375rem;
  color: rgba(0, 0, 0, 0.54);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.notification-wrap .noti-content .noti-bd .col-2 {
  padding-right: 0px;
}
.notification-wrap .noti-content .noti-bd .col-10 {
  padding-left: 5px;
}
.notification-wrap:hover .noti-content {
  display: block;
}
.notification-wrap .noti-content .noti-bd li:hover {
  background: #f5f5f5;
}
.img-respon {
  max-width: 100%;
}

/* tab info của ví tiền */
.infor-vitien .primary-card .card-body .value .va-width {
  width: 100%;
}

/* tab sản phẩm trang orderDetail */
.form-select-search {
  border: 1px solid #ebe8e8;
  border-radius: 20px;
}
.form-select {
  border: none;
  padding: 8px;
  outline: none;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-right: 1px solid #ebe8e8;
  background: #f0f4f5;
}

.group-search {
  position: relative;
  margin-left: 3px;
}
.group-search .btn {
  padding: 0.375rem 1.96rem;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.input-search {
  border: none;
  outline: none;
  padding: 0 15px;
  width: 89%;
  background: #f0f4f5;
}

/* sửa phần hiển thị sản phẩm ở tab-sản phẩm của order */
.list-product {
  border-top: 1px solid #e1e1e1;
}
.list-product a {
  color: #212529;
}
.list-product a:hover {
  color: rgb(219, 12, 12);
}
.list-product .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.list-product .row .col-product {
  padding-left: 5px;
  padding-right: 5px;
}

.name-product .id-product {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.list-product .product-group ul {
  display: inline-flex;
  margin: 5px 0;
}
.list-product .product-group ul li {
  list-style: none;
  margin-right: 10px;
}
.list-product .item-product .product-group ul li:last-child {
  margin-right: 0 !important;
}
.list-product .item-product:last-child {
  border: none !important;
}
.list-product .item-product .product-image img {
  height: 110px;
  width: 110px;
}
.list-product .name-product {
  margin: 0 -10px;
}
.name-product .des-product {
  border: 1px dashed #e1e1e1;
  padding: 5px;
  height: 80px;
  font-size: 14px;
  line-height: 1.5;
}
.name-product .des-product .text-note {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.name-product .des-product:hover {
  border: 1px dashed rgb(219, 12, 12);
}
.name-product .des-product:hover .fa-eye {
  color: rgb(219, 12, 12);
}
.fr {
  float: right;
}
.list-product .product-group .bell-noti {
  display: block;
  border: 1px dashed rgb(209, 14, 14);
  position: absolute;
  border-radius: 20px;
  background: #fff;
  bottom: 23px;
  width: 145px;
  z-index: 3;
  /* right: 0; */
}
.list-product .product-group .bell-noti {
  right: 80px;
}
.list-product .product-group .mess-internal .bell-noti {
  right: -80px;
}
.list-product .product-group .mess-noti .bell-noti:after {
  content: "";
  border-top: 5px solid rgb(209, 14, 14);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  width: 0;
  height: 0;
  display: inline-block;
  position: relative;
  float: right;
  top: 5px;
  right: 20px;
}
.list-product .product-group .mess-internal .bell-noti:after {
  content: "";
  border-top: 5px solid rgb(209, 14, 14);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  width: 0;
  height: 0;
  display: inline-block;
  position: relative;
  float: right;
  top: 5px;
  right: 100px;
}

.list-product .product-group .noti-bell {
  position: relative;
}
.list-product .product-group .noti-bell .bell-noti .text-noti {
  padding: 5px;
}
.list-product .product-group .noti-bell .fa-bell.have-noti {
  color: rgb(209, 14, 14);
  position: relative;
  animation: ringbell 0.1s linear 0.1s infinite alternate;
}
.view-mobile .noti-bell .fa-bell.have-noti {
  color: rgb(209, 14, 14);
  position: relative;
  animation: ringbell 0.1s linear 0.1s infinite alternate;
}
@keyframes ringbell {
  0% {
    left: 0px;
    top: 0px;
  }
  25% {
    left: 5px;
    top: 0px;
  }
}

/*#region HOTLINE*/
.fixed_left ul li {
  position: relative;
  margin-bottom: 5px;
}

.fixed_left {
  position: fixed;
  right: 10px;
  top: 55%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 9999999;
}

.fixed_left ul {
  list-style: none;
  display: flex;
  flex-flow: column;
}

.fixed_left ul li .play-now {
  background-position: bottom center;
  background-repeat: no-repeat;
  position: relative;
  display: block;
}

.fixed_left ul li.fbmess .play-now {
  background-image: url(./../images/mess.png);
}
.fixed_left ul li.phone .play-now {
  background-position: bottom center;
  background-image: url(./../images/phone.png);
}
.fixed_left ul li.ring-bell .play-now {
  background-image: url(./../images/icon-bell-yellow.png);
}
.fixed_left ul li.back-to-top .play-now {
  background-image: url(./../images/backtotop.png);
}
.fixed_left ul li.zalomess .play-now {
  background-image: url(./../images/zalo.png);
}

.play-now {
  position: fixed;
  left: 25px;
  bottom: -5px;
  display: none;
  border-radius: 50%;
  z-index: 10;
  width: 41px;
  height: 41px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  transform-origin: center center;
}

.play-now .ripple,
.play-now .ripple:before,
.play-now .ripple:after {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 34px;
  width: 34px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform-origin: center;
  transform-origin: center center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 0 rgba(80, 170, 178, 0.3);
  -moz-box-shadow: 0 0 0 0 rgba(80, 170, 178, 0.3);
  -ms-box-shadow: 0 0 0 0 rgba(80, 170, 178, 0.3);
  -o-box-shadow: 0 0 0 0 rgba(80, 170, 178, 0.3);
  box-shadow: 0 0 0 0 rgba(80, 170, 178, 0.3);
  -webkit-animation: ripple 3s infinite;
  -moz-animation: ripple 3s infinite;
  -ms-animation: ripple 3s infinite;
  -o-animation: ripple 3s infinite;
  animation: ripple 3s infinite;
}

.play-now .ripple:before {
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  -ms-animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  animation-delay: 0.9s;
  content: "";
  position: absolute;
}

.play-now .ripple:after {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
  content: "";
  position: absolute;
}

@-webkit-keyframes ripple {
  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes ripple {
  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

#facebook-area {
  display: none;
}
.ring-bell:hover #facebook-area {
  display: block;
  width: 350px;
  position: absolute;
  right: 25px;
  top: -227px;
}
.fixed_left ul li .play-now .badge-bell {
  position: absolute;
  top: 0;
  right: 0;
  position: absolute;
  top: -5px;
  right: 0;
  background: rgb(219, 18, 18);
  color: #fff;
  width: 20px;
  height: 24px;
  text-align: center;
  border-radius: 50%;
}
/* #endregion Fixed */
/* cart */
.type-product ul {
  display: inline-flex;
}
.type-product ul li {
  list-style: none;
  padding: 0 5px;
}
.type-product ul li:first-child {
  padding: 0 15px;
}
.type-product ul li a {
  padding: 7px 10px;
  border: 1px solid #e1e1e1;
  text-transform: uppercase;
}
.type-product ul li a:hover {
  background: #0378ee;
  color: #fff !important;
}
.img-pro-cart {
  width: 110px;
}

.table-cart .table th,
.table-cart .table td {
  padding: 5px;
}

.table-cart .name-product {
  text-align: left !important;
}
.step1-page {
  position: relative;
}
.container-fluid .tb-total {
  background-color: #088fc4;
}
.container-fluid .tb-total th,
.container-fluid .tb-total td {
  padding: 3px 5px;
  color: #fff;
}

.container-fluid .table-buy {
  position: fixed;
  width: 85%;
  right: 75px;
  bottom: -16px;
  z-index: 9;
}

/* tracking */
.items-page .list-product .name-product {
  margin: 0 -15px 0 -20px;
}

.items-page .tb-info-order td {
  padding: 0.15rem;
}

.input-group-addon-ce {
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  border-left: 0;
}
.input-group-addon-ce > i {
  margin-top: 4px;
}
.btn-thongke {
  padding-left: 0;
  padding-right: 0;
}
/* order-number-detail */
.order-number-detail .table th {
  font-weight: 600;
}
.order-number-detail .table {
  background: #fff;
}
.order-number-detail .table img {
  width: 110px;
  height: 110px;
}
.text-blue {
  color: #4eb0d9;
  font-weight: 600;
}

/* responsive */
.view-mobile {
  display: none;
}
.btn-plus {
  background: #fff;
  border: 1px solid #e1e1e1;
  width: 30px;
  padding: 0 10px;
}
/* trang home chietkhau */
.menu-header {
  position: relative;
}
.hidden-lg-md {
  display: none;
}
/* #region top_bar */
.header_top_bar {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  overflow: hidden;
  color: #fff;
  background: #4d4d4d;
}

.header_top_bar .contact_top li {
  float: left;
  color: #ffffff;
  list-style: none;
}
.header_top_bar .contact_top a {
  color: #fff;
  text-decoration: none;
}

.header_top_bar .contact_top .li_contact {
  padding-left: 20px;
  position: relative;
}

.header_top_bar .contact_top.right {
  float: right;
}
a.ww.text-color {
  margin-left: 15px;
}

.header_top_bar .contact_top .li_contact .badge {
  position: absolute;
  background: #ed1b24;
  top: 4px;
  right: -9px;
  font-size: 11px;
  padding: 2px 3px;
}
/* #endregion top_bar */
/* #region wrap_header */
.hidden-lg {
  display: none;
}
.wrap_header_top {
  position: relative;
  /* height: 94px; */
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  background: #fff;
}
.header_top {
  margin-bottom: 0px;
  /* height: 94px; */
}

span.str {
  font-weight: 600;
  white-space: nowrap;
  font-size: 12px;
}

.header_top .head_content {
  /* height: 94px; */
  position: relative;
  padding: 0;
  border-top: 1px solid #ebebeb;
}
.header_top .head_content .logo_top {
  /* height: 94px; */
  text-align: center;
  float: left;
}
.header_top .head_content .logo_top a {
  display: block;
  line-height: 75px;
  text-align: left;
}
.header_top .head_content .logo_top a img {
  margin-left: 0px;
  max-width: 100%;
  height: 60px;
}

.search_header {
  margin: 19px 0px 0px;
}
.header_search .form-inline {
  border: 1px solid #f26522;
  border-radius: 20px;
}
.bo-ra-left {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border: none;
}
.bo-ra-right {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border: none;
  color: #fff;
  background: #f26522;
}
.search_header ul {
  list-style: none;
  display: inline-flex;
}
.search_header ul li {
  margin-right: 20px;
  font-size: 12px;
}
.head_content .phone {
  text-align: center;
  padding: 15px 10px;
  background: #f3f3f3;
}
.head_content .phone .color-orange {
  font-size: 21px;
}
.main-navigation {
  background: #f26522;
  color: #fff;
}
.main-navigation .navbar {
  padding: 0;
}
.main-navigation .navbar .nav-item .nav-link {
  color: #fff;
  padding: 10px 25px;
}
.main-navigation .navbar .active,
.main-navigation .navbar .nav-item:hover {
  background: #fb991e;
}
.home-chietkhau-page .navbar {
  position: inherit;
}
.home-chietkhau-page .navbar-toggler {
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  position: absolute;
  top: 20px;
  right: 30px;
  border: 1px solid #f26522;
  /* line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem; */
}
.home-chietkhau-page .navbar-toggler-icon {
  display: block;
  width: 1.5em;
  margin: 4px 0;
  outline: none;
  height: 3px;
  vertical-align: middle;
  content: "";
  background: #f26522;
  background-size: 100% 100%;
}
.home-chietkhau-page button:focus {
  outline: none;
}
.home-chietkhau-page .navbar-collapse.show {
  position: absolute;
  top: 53px;
  right: 0;
  width: 50%;
  z-index: 2;
  background: #f26522;
}
/* #region chietkhau */
.banner-chietkhau nav {
  width: 200px;
  background: #fff;
  padding: 5px 10px;
}
.banner-chietkhau nav ul {
  list-style: none;
  margin-bottom: 12px;
}
.banner-chietkhau nav ul li {
  padding: 0 0 7px;
}
.banner-chietkhau nav ul li .color-orange {
  font-weight: 700;
}
.banner-chietkhau nav ul li a {
  color: #333;
}
.banner-chietkhau nav ul li a:hover {
  color: #f26522;
}
.banner-chietkhau .banner-small {
  background: #fff;
  display: inline-flex;
  /* padding: 2px 0; */
}
.banner-chietkhau .banner-small .img-respon {
  padding: 0 1px;
}

.banner-chietkhau .banner-left {
  padding: 5px 10px 14px;
  background: #fff;
}
.title-all {
  font-size: 24px;
  margin: 10px 0;
  padding-left: 5px;
  text-transform: uppercase;
  border-left: 4px solid #f26522;
}
.banner-chietkhau .box-sale {
  background: #f26522;
  border-radius: 20px;
  padding: 0 5px;
  color: #fff;
}
.banner-chietkhau .text-sale {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #f26522;
}

.box-noti-sale {
  border: 1px solid #f26522;
  margin: 10px 0;
  background: #fff6ec;
  padding: 5px 10px;
  color: #f26522;
}

.item-flash {
  background: #fff;
}
.item-flash .header-item-flash {
  padding: 0 15px;
}
.flash-sale .item-flash .time-remain {
  margin: 13px 0 0 15px;
}
.flash-sale .item-flash .clock {
  background: #5f3d3d;
  color: #fff;
  padding: 3px 5px;
  border-radius: 50%;
}
.item-flash .header-item-flash .text-right {
  padding-top: 11px;
}
.flash-sale .item-flash .body-item-flash .box-number-pro {
  background-color: #fff6ec;
}
.box-number-pro {
  border: 1px solid #f26522;
  padding: 0 5px;
  border-radius: 5px;
  color: #f26522;
}
.flash-sale .item-flash .body-item-flash .price-flash {
  margin-top: 25px;
}
.flash-sale .item-flash .body-item-flash .price-flash .color-orange {
  font-size: 25px;
}
.flash-sale .item-flash .body-item-flash .price-flash small {
  text-decoration: line-through;
}
.flash-sale .item-flash .body-item-flash .bn-two {
  background: #f6e5e2;
  padding: 10px;
  border-radius: 5px;
}
.flash-sale .item-flash .body-item-flash .banner-item-flash {
  padding: 15px 15px 0;
}
.slide-item-flash {
  padding: 0 25px 10px;
}
.flash-sale .item-flash .body-item-flash .slide-item-flash .item-slide {
  position: relative;
}
.flash-sale
  .item-flash
  .body-item-flash
  .slide-item-flash
  .item-slide
  .top-num {
  position: absolute;
  top: 0;
  left: 0;
  color: #f26522;
  padding: 2px 10px;
  background: #ebebeb;
}
.text-40 {
  font-size: 40px;
}
.font-500 {
  font-weight: 500;
}
.title-ctr {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.display-2line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tb-flash-sale {
  margin: 0 14px;
}
.tb-flash-sale .hover-flash-sale:hover,
.bn-two:hover {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24);
  border-color: rgba(250, 80, 0, 0.54);
}
.color-grey {
  color: rgb(93, 88, 88);
}
.color-orange {
  color: #f26522;
}
.color-red {
  color: rgb(202, 13, 13);
}
.text-25 {
  font-size: 25px;
}
.text-20 {
  font-size: 20px;
}
.text-18 {
  font-size: 18px !important;
}
.text-line {
  text-decoration: line-through;
}
.side-nav-home {
  background: #fff;
  margin-left: -15px;
}
.side-nav-home .header-item-flash {
  padding: 1px 15px;
}
.side-nav-home .body-item-side {
  background: url(./../images/bg-slide.png);
  position: relative;
  background-size: cover;
  padding: 5px;
}
.side-nav-home .name-brand {
  padding: 20px 5px 5px;
}
.side-nav-home .body-item-side .text {
  text-transform: uppercase;
  font-size: 13px;
}

.side-nav-home .body-item-side .item-side {
  margin: 0 0 17px 0;
}
.sidenav-ck .item-side figure {
  float: left;
  width: 120px;
  margin: 0 5px 0 0;
}
.side-nav-home .body-item-side .item-side .ct-right {
  line-height: 1.2;
  padding-top: 30px;
  padding-bottom: 20px;
}
.slide-item-flash .col-item-slide {
  padding: 0 5px 10px;
}
.tb-flash-sale .hover-flash-sale {
  border: 1px solid #f0f4f5;
  padding: 10px;
}
.list-pro .item-list-pro {
  border: 1px solid #f0f4f5;
  padding: 0 15px;
}
.display-color-ck {
  padding: 0 15px;
}
.display-color-ck .color-ck {
  padding: 2px;
}
@media screen and (min-width: 1024px) {
  .slide-item-flash .col-item-slide {
    width: 20%;
  }
  .list-pro .item-list-pro {
    width: 20%;
  }
  .tb-flash-sale .hover-flash-sale {
    width: 50%;
  }
  .info-shop-ck .slide-item-flash .col-item-slide {
    width: 25%;
  }
  .display-color-ck .color-ck {
    width: 14%;
  }
}
@media screen and (max-width: 1024px) and (min-width: 992px) {
  .list-pro .item-list-pro {
    width: 25%;
  }
  .slide-item-flash .col-item-slide {
    width: 25%;
  }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  .list-pro .item-list-pro {
    width: 33.33%;
  }
  .slide-item-flash .col-item-slide {
    width: 33.33%;
  }
  .display-color-ck .color-ck {
    width: 20%;
  }
}
@media screen and (max-width: 767px) {
  .list-pro .item-list-pro {
    width: 50%;
  }
  .slide-item-flash .col-item-slide,
  .info-shop-ck .slide-item-flash .col-item-slide {
    width: 50%;
  }
  .tb-flash-sale .hover-flash-sale {
    width: 100% !important;
  }
  .detail-sp-ck .col-12.pl-0 {
    padding-left: 15px !important;
  }
  .display-color-ck .color-ck {
    width: 12%;
  }
}
@media screen and (max-width: 425px) {
  .display-color-ck .color-ck {
    width: 15%;
  }
}
@media screen and (max-width: 320px) {
  .list-pro .item-list-pro {
    width: 100%;
  }
  .slide-item-flash .col-item-slide {
    width: 100%;
  }
  .display-color-ck .color-ck {
    width: 20%;
  }
}

.list-pro .row {
  margin: 0 -2px;
}
.list-pro .item-list-pro:hover {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24);
  border-color: rgba(250, 80, 0, 0.54);
  border: 1px solid #f26522;
}
.list-pro .item-list-pro .table td {
  border: none;
  padding: 0;
}
.list-pro .item-list-pro .box-number-pro {
  font-size: 13px;
}

.pagination-home .pagination .page-item {
  margin: 0 3px;
}
.pagination-home .pagination .page-item .page-link {
  color: #333;
}
.pagination-home .pagination .page-item.active .page-link {
  background: #f26522;
  border-color: #f26522;
  color: #fff;
}
.pagination-home .pagination .page-item .page-link:hover {
  background-color: #f26522;
  color: #fff;
}

.footer-home {
  margin-top: 20px;
}
.footer-home footer {
  background: #333333;
  padding-top: 0;
  margin-top: 0;
}
.box-contact {
  background: #444444;
  padding: 7px 0;
}

.footer-home .header_search .form-inline {
  border: none;
}
.footer-home .header_search {
  min-width: 500px;
}
.footer-home .title-footer {
  text-transform: uppercase;
}

.footer-home .content-footer {
  font-size: 14px;
  padding: 10px 0 0;
}
.footer-home footer .footer-bottom {
  padding: 10px 0 0;
}
.footer-home footer .footer-bottom ul.social-network li a {
  border: none;
  border-radius: 5px;
}
.bg-fb {
  background: #3c5b9b;
}
.bg-twitter {
  background: #359bed;
}

.bg-google-plus {
  background: #e33729;
}
.bg-linkedin {
  background: #007fab;
}
/* #endregion chietkhau */
.tab-info-sp .addition-service .checkbox-wrap {
  margin-right: 7px;
}
.tab-info-sp .addition-service {
  position: relative;
}
.tab-info-sp .addition-service .pagination-wrap {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
}
.cart-footer .pagination-wrap {
  right: 5px;
}
/* aside sidebar */
.responsive-sidebar {
  position: fixed;
  left: 0;
  top: 20%;
  background: #4b4b4b;
  padding: 0px;
  z-index: 9999;
  padding-bottom: 10px;
}
.responsive-sidebar .sidebar-menu {
  padding-left: 0px;
}
.responsive-sidebar .sidebar-menu li {
  list-style: none;
  display: block;
  clear: both;
  float: left;
  position: relative;
  width: 100%;
}
.responsive-sidebar .sidebar-menu li.active a {
  background: #f45722;
}
.responsive-sidebar .sidebar-menu li a:hover {
  background: #f45722;
  text-decoration: none;
}
.responsive-sidebar .sidebar-menu > li > a {
  width: 50px;
  text-align: center;
}
.responsive-sidebar .sidebar-menu li a {
  color: #fff;
  padding: 12px 5px 12px 5px;
  display: inline-block;
  position: relative;
}
.responsive-sidebar .sidebar-menu > li > a i {
  font-size: 20px;
}
.responsive-sidebar .sidebar-menu > li:hover .treeview-menu {
  visibility: visible;
  opacity: 1;
}
.responsive-sidebar .sidebar-menu li .treeview-menu {
  position: absolute;
  top: 0;
  left: 50px;
  z-index: 9999;
  background: #252525;
  width: 200px;
  padding: 10px;
  text-align: left;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  visibility: hidden;
  opacity: 0;
}
.responsive-sidebar .sidebar-menu li .treeview-menu span {
  color: #fff;
  float: left;
  border-bottom: 1px solid #fff;
  display: block;
  width: 100%;
  text-align: center;
  padding-bottom: 5px;
}
.responsive-sidebar .sidebar-menu li .treeview-menu a {
  display: block;
}

/* sanpham chiết khấu */
.detail-sp-ck {
  padding: 10px;
  margin-bottom: 15px;
}
.detail-sp-ck .pri-sp-ck {
  background: url(./../assets/images/bg-gia-ck.png) no-repeat 100%;
  padding: 0 0 5px 10px;
}
.star-border {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #e1e2e6;
}

.info-shop-ck {
  padding: 1px 0;
}
.info-shop-ck .title-side-ck {
  margin: 9px 10px;
}
.sidenav-sp-ck {
  padding: 1px 10px;
  margin-left: -15px;
  margin-bottom: 15px;
}
.title-side-ck {
  font-size: 18px;
  margin: 9px 0;
  padding-left: 5px;
  font-weight: 700;
  border-left: 4px solid #f26522;
}
.sidenav-sp-ck .item-side {
  margin-bottom: 10px;
}
.sidenav-sp-ck .item-side a {
  color: #333;
}
.info-shop-ck .slide-item-flash {
  padding: 0 25px;
}
.info-shop-ck .slide-item-flash .col-item-slide {
  padding: 0 5px;
}
.info-shop-ck .slide-item-flash .col-item-slide .table td {
  border: none;
  padding: 5px 0;
}

.carousel-dot-ck {
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
  padding-left: 0;
  list-style: none;
}
.carousel-dot-ck .item-dot {
  padding: 0 5px;
}
.carousel-dot-ck .item-dot:first-child {
  padding-left: 0;
}
.carousel-dot-ck .item-dot:last-child {
  padding-right: 0;
}
.border-size {
  border: 1px solid #e1e1e1;
  width: 35px;
  height: 30px;
  padding: 2px 5px;
  text-align: center;
  margin: 0 2px;
}
.bor-status {
  padding: 2px 5px;
  border: 1px solid;
  color: red;
}
.input-number-ck {
  border: 1px solid #e1e1e1;
  border-radius: 0;
  outline: none;
}
.input-number-ck.input-number {
  text-align: center;
  width: 70px;
}
.group-addcart .box-number-pro {
  padding: 5px 10px;
}
.group-addcart .btn-buy-ck {
  margin-left: 10px;
  padding: 5px 30px;
  background-color: #f26522;
  color: #fff;
}

.share-ck a {
  color: #fff;
  display: inline-block;
  width: 30px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
}
.bor-ri {
  border-right: 1px solid #e1e1e1;
}
.info-pro-ck .nav-tabs .nav-link {
  border: none;
  color: #000000;
  font-weight: 700;
  background-color: #fff;
}
.info-pro-ck .nav-tabs .nav-link.active,
.info-pro-ck .nav-tabs .nav-item.show .nav-link {
  border-bottom: 2px solid #f26522;
}
.info-pro-ck .tab-content {
  padding: 7px 10px;
}

/* danh mục bài viết */
.news-ck .content-left,
.news-ck .content-right {
  background: #fff;
  padding: 5px 10px;
}

/* .news-ck .content-left {
  padding: 5px 15px;
} */

.news-ck .content-left .title-side-ck {
  border-bottom: 1px dashed #e1e1e1;
}

.news-ck .related-item {
  padding: 10px 0;
  border-bottom: 1px dashed #c7c5c5;
}

.news-ck .related-posts .content-post {
  margin-left: -20px;
}

.news-ck .related-posts .content-post .link-ct-ck {
  font-size: 18px;
  color: #0d72c7;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.news-ck .related-posts .content-post .content-des {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.news-ck .font-sm-news {
  font-size: 12px;
  font-weight: 600;
}
.news-ck .link-view a {
  color: #0d72c7 !important;
  text-decoration: underline;
}
.news-ck .divCont .img-detail {
  margin-bottom: 10px;
}
.news-ck .divCont ul {
  margin-left: 20px;
}
.news-ck .related-posts .related-item:last-child {
  border-bottom: none;
}

.fixTopHeader {
  color: #000000;
  background-color: #ffffff;
  height: 50px;
  z-index: 9;
  width: 100%;
  display: none;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.35);
}
.fixTopHeader .contact_fix_top {
  display: inline-flex;
  margin: 10px 0 0;
}
.fixTopHeader .contact_fix_top .li_fix {
  list-style: none;
  padding-left: 20px;
  position: relative;
}
.fixTopHeader .contact_fix_top .li_fix a {
  color: #000000;
}
.fixTopHeader .contact_fix_top .li_fix .badge {
  position: absolute;
  background: #ed1b24;
  color: #fff;
  top: -3px;
  right: -9px;
  font-size: 11px;
  padding: 2px 3px;
}
.sticky {
  display: block;
  position: fixed;
  top: 0;
}
/* @media screen and (max-width: 992px); */

/* #region tab-thong tin */
.thongtin-item-wrap {
  padding: 15px;
}
.title-tt {
  font-size: 20px;
}
/* #endregion tab-thong tin */

/* #region soan mail*/
.mail-page {
  margin-left: 60px;
  background: #f5f5f5;
  padding-top: 20px;
}

.title-mail {
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
}

.bg-blue {
  background: #6c7da7;
}
.color-white {
  color: #fff;
}
.bg-sky {
  background: #00aeef !important;
  color: #fff !important;
}
.name-pro {
  text-transform: uppercase;
  color: #00aeef;
  align-items: center;
}

.text-ari textarea {
  width: 100%;
  border: 1px solid #eee;
  padding: 3px;
}
.tb-in {
  border: 1px solid #eee;
  margin: 10px;
  padding: 10px 0;
}

.proInfo .des-product {
  border: 1px dashed #e1e1e1;
  padding: 5px;
  height: 70px;
  font-size: 14px;
  line-height: 1.5;
}
.proInfo .des-product:hover {
  border: 1px dashed rgb(219, 12, 12);
}

.table.tb-orderNumber tr td {
  padding: 4px 7px;
}
.table.tb-orderNumber {
  border: 1px solid #dee2e6;
}

.bg-xam {
  background: rgb(248, 246, 246);
}
.bg-cam {
  background: orange !important;
  color: #fff !important;
}
/* #endregion soan mail */
/* Mã vận đơn chiết khấu */
.ma-van-don {
  border: 1px solid #e1e1e1;
}
.step-code .step .col-2 {
  flex: 0 0 10%;
  max-width: 10%;
}
.step-code .step .col-1 {
  flex: 0 0 5%;
  max-width: 5%;
}
.step-code .step .col-9 {
  flex: 0 0 85%;
  max-width: 85%;
}
.step {
  align-items: center;
  padding: 7px 0;
}
.bs-line {
  min-width: 1px;
  width: 2px;
  min-height: 44px;
  position: absolute;
  left: 21px;
  top: 18px;
  background-color: rgba(0, 0, 0, 0.12);
}

/* css mail */
.email-cc-button {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  z-index: 1;
}

.user-email .left-panel {
  float: left;
}
tags-input .autocomplete > .suggestion-list > .selected {
  background-color: #d4d4d4;
}
.user-email .right-panel {
  float: left;
  margin-left: 5px;
  margin-top: 7px;
}
.user-email .right-panel span:first-child {
  font-size: 16px;
}
.user-email .right-panel span:nth-child(2) {
  font-size: 14px;
  color: gray;
}
.user-email .right-panel span:last-child {
  display: block;
  font-size: 14px;
  font-style: italic;
}
.cut-text { 
	width: 150px; 
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
  }

/*****************globals*************/
/* body {
  font-family: 'open sans';
  overflow-x: hidden; } */

/* img {
  max-width: 100%; } */

/* .preview {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (max-width: 996px) {
    .preview {
      margin-bottom: 20px; } }

.preview-pic {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.preview-thumbnail.nav-tabs {
  border: none;
  margin-top: 15px; }
  .preview-thumbnail.nav-tabs li {
    width: 18%;
    margin-right: 2.5%; }
    .preview-thumbnail.nav-tabs li img {
      max-width: 100%;
      display: block; }
    .preview-thumbnail.nav-tabs li a {
      padding: 0;
      margin: 0; }
    .preview-thumbnail.nav-tabs li:last-of-type {
      margin-right: 0; } */

.tab-content {
  overflow: hidden; }
  .tab-content img {
    width: 100%;
    -webkit-animation-name: opacity;
            animation-name: opacity;
    -webkit-animation-duration: .3s;
            animation-duration: .3s; }

.card-productDetail {
  margin-top: 50px;
  background: #eee;
  padding: 3em;
  line-height: 1.5em; }

@media screen and (min-width: 997px) {
  .wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; } }

.details {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }

.colors {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.product-title, .price, .sizes, .colors {
  text-transform: UPPERCASE;
  font-weight: bold; }

.checked, .price span {
  color: #ff9f1a; }

.product-title, .rating, .product-description, .price, .vote, .sizes {
  margin-bottom: 15px; }

.product-title {
  margin-top: 0; }

.size {
  margin-right: 10px; }
  .size:first-of-type {
    margin-left: 40px; }

.color {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  height: 2em;
  width: 2em;
  border-radius: 2px; }
  .color:first-of-type {
    margin-left: 20px; }

.add-to-cart, .like {
  background: #ff9f1a;
  padding: 1.2em 1.5em;
  border: none;
  text-transform: UPPERCASE;
  font-weight: bold;
  color: #fff;
  -webkit-transition: background .3s ease;
          transition: background .3s ease; }
  .add-to-cart:hover, .like:hover {
    background: #b36800;
    color: #fff; }

.not-available {
  text-align: center;
  line-height: 2em; }
  .not-available:before {
    font-family: fontawesome;
    content: "\f00d";
    color: #fff; }

.orange {
  background: #ff9f1a; }

.green {
  background: #85ad00; }

.blue {
  background: #0076ad; }

.tooltip-inner {
  padding: 1.3em; }

/* @-webkit-keyframes opacity {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
            transform: scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes opacity {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
            transform: scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } } */

.checked > .ic-check-search{
    display: block;
}
.checked span.ic-check-search {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    overflow: hidden;
    text-indent: -99em;
    display: block;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(../images/property-icon.png);
}
.pd-text {
    margin-left: 0;
    position: relative;
}
.pd-property {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #ccc;
    margin: 1px 4px 10px 4px;
    padding: 0;
    cursor: pointer;
    height: 42px;
    min-width: 42px;
    border-radius: 0px;
}
.pd-text .pd-property:hover, 
.pd-text .pd-property.checked {
    border: 1px solid #f15922;
}
.pd-property .pd-item-search .pi-color {
    height: 40px;
    min-width: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
    padding-left: 3px;
    padding-right: 3px;
}

.pd-property-image {
  position: relative;
  display: inline-block;
  vertical-align: top;
  border: 1px solid #ccc;
  margin: 1px 4px 10px 4px;
  padding: 0;
  cursor: pointer;
  height: 82px;
  min-width: 82px;
  border-radius: 0px;
}      

.pd-text .pd-property-image:hover, 
.pd-text .pd-property-image.checked {
    border: 1px solid #f15922;
}

.pd-property-image .pd-item-search .pi-color {
  height: 80px;
  min-width: 80px;
  float: left;
  text-align: center;
  line-height: 80px;
  padding-left: 3px;
  padding-right: 3px;
}

.disabledLink {
  color: #ccc;
  pointer-events:none;

}

/* === COMPREHENSIVE DARK MODE OVERRIDES FOR MAIDZO.VN === */
.dark-mode,
.dark-mode body,
.dark-mode html,
body.dark-mode,
html.dark-mode {
  background-color: #060A10 !important;
  color: #FFFFFF !important;
}

body.dark-mode,
.dark-mode {
  --bg-color: #060A10;
  --text-color: #FFFFFF;
  --card-bg: #0A1018;
  --border-color: #162032;
  --accent-color: #00FFFF;
  --header-bg: #060A10;
}

/* Base Cards, Tables, Containers, Panels & Content Areas */
body.dark-mode .dashboard-container,
body.dark-mode .dashboard-card,
body.dark-mode .modal-content,
body.dark-mode .modal-body,
body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .card-footer,
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .container,
body.dark-mode .main-content,
body.dark-mode .content-area,
body.dark-mode .content-wrapper,
body.dark-mode .page-content,
body.dark-mode .section,
body.dark-mode .widget,
body.dark-mode .stat-box,
body.dark-mode .info-box,
body.dark-mode .summary-box,
body.dark-mode .header-container,
body.dark-mode .navbar,
body.dark-mode .sidebar,
body.dark-mode .sidebar-menu,
body.dark-mode .sidebar-item,
body.dark-mode .sidenav-ck,
body.dark-mode .sidenav-menu,
body.dark-mode .footer,
body.dark-mode .order-table,
body.dark-mode .order-row,
body.dark-mode .order-detail,
body.dark-mode .order-header,
body.dark-mode .tracking-table,
body.dark-mode .tracking-card,
body.dark-mode .tracking-item,
body.dark-mode .cart-table,
body.dark-mode .cart-item,
body.dark-mode .cart-summary,
body.dark-mode .wallet-card,
body.dark-mode .transaction-table,
body.dark-mode .transaction-row,
body.dark-mode .filter-bar,
body.dark-mode .search-box,
body.dark-mode .note-wrap,
body.dark-mode ol.breadcrumb,
body.dark-mode .nav.tab-page,
body.dark-mode .content-wrap.container,
body.dark-mode .detail-sp-ck,
body.dark-mode .info-shop-ck,
body.dark-mode .info-pro-ck,
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-gray,
body.dark-mode .list-group-item,
body.dark-mode .tab-pane,
body.dark-mode .popover {
  background-color: #0A1018 !important;
  color: #FFFFFF !important;
  border-color:  #162032 !important;
}

/* Tables Specific */
body.dark-mode .table {
  --bs-table-bg: transparent !important;
  background-color: #0A1018 !important;
  color: #FFFFFF !important;
  border-color:  #162032 !important;
}
body.dark-mode .table thead,
body.dark-mode .table tbody,
body.dark-mode .table th,
body.dark-mode .table td {
  background-color: #0A1018 !important;
  color: #FFFFFF !important;
  border-color:  #162032 !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #060A10 !important;
}
body.dark-mode .table-hover > tbody > tr:hover {
  background-color: #162032 !important;
}
body.dark-mode .table-bordered {
  border-color:  #162032 !important;
}

/* Form input {
  background-color: #060A10 !important;
  color: #FFFFFF !important;
  border-color: #0A1018 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode .form-control::placeholder {
  color: #a0a0a0 !important;
}

/* Pagination */
body.dark-mode .pagination .page-link,
body.dark-mode .page-link {
  background-color: #0A1018 !important;
  border-color:  #162032 !important;
  color: #FFFFFF !important;
}
body.dark-mode .pagination .page-item.active .page-link,
body.dark-mode .page-item.active .page-link {
  background-color: #162032 !important;
  border-color:  #162032 !important;
  color: #ffffff !important;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
  background-color: #0A1018 !important;
  border-color:  #162032 !important;
}
body.dark-mode .dropdown-item {
  color: #FFFFFF !important;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: #162032 !important;
  color: #ffffff !important;
}

/* Tabs & Nav */
body.dark-mode .nav-tabs {
  border-color:  #162032 !important;
}
body.dark-mode .nav-tabs .nav-link {
  color: #FFFFFF !important;
  border-color: transparent !important;
}
body.dark-mode .nav-tabs .nav-link.active {
  background-color: #0A1018 !important;
  border-color: #162032 #162032 #0A1018 !important;
  color: #ffffff !important;
}
body.dark-mode .navbar {
  background-color: #162032 !important;
}
body.dark-mode .navbar-nav .nav-link,
body.dark-mode .sidebar-link {
  color: #FFFFFF !important;
}

/* Modal Headers & Footers Borders */
body.dark-mode .modal-header {
  border-color:  #162032 !important;
}
body.dark-mode .modal-footer {
  border-color:  #162032 !important;
}
body.dark-mode .card-header {
  border-color:  #162032 !important;
}

/* Alerts & Badges & Progress */
body.dark-mode .alert-info {
  background-color: #162032 !important;
  border-color: #0A1018 !important;
  color: #FFFFFF !important;
}
body.dark-mode .alert-warning {
  background-color: #332200 !important;
  border-color: #665500 !important;
  color: #ffcc00 !important;
}
body.dark-mode .progress {
  background-color: #162032 !important;
}
body.dark-mode .badge {
  color: #FFFFFF !important;
}
body.dark-mode .text-muted,
body.dark-mode .text-secondary {
  color: #a0a0a0 !important;
}
body.dark-mode .text-dark {
  color: #FFFFFF !important;
}

/* Buttons */
body.dark-mode .btn-light {
  background-color: #0A1018 !important;
  border-color:  #162032 !important;
  color: #FFFFFF !important;
}
body.dark-mode .btn-outline-secondary {
  border-color:  #162032 !important;
  color: #FFFFFF !important;
}
body.dark-mode .btn-outline-secondary:hover {
  background-color: #162032 !important;
  color: #ffffff !important;
}

/* Links & Headings */
body.dark-mode a {
  color: #4da6ff !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode p, body.dark-mode span, body.dark-mode label,
body.dark-mode .title, body.dark-mode .text {
  color: #FFFFFF !important;
}

/* === SUPPLEMENT 2 — Dashboard + Order + Bootstrap Components === */

/* Tables — full coverage */
body.dark-mode .table-bordered,
body.dark-mode .table-bordered td,
body.dark-mode .table-bordered th {
    border-color:  #162032 !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #060A10 !important;
}
body.dark-mode .table-hover > tbody > tr:hover {
    background-color: #162032 !important;
}
body.dark-mode .table thead,
body.dark-mode .table thead th,
body.dark-mode .table thead td {
    background-color: #162032 !important;
    border-color: #0A1018 !important;
}
body.dark-mode .table td,
body.dark-mode .table th {
    border-color:  #162032 !important;
}

/* Dropdown — full coverage */
body.dark-mode .dropdown-menu {
    background-color: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .dropdown-item {
    color: #FFFFFF !important;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .dropdown-divider {
    border-color:  #162032 !important;
}

/* Pagination — full coverage */
body.dark-mode .page-link {
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .page-link:hover {
    background-color: #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .page-item.active .page-link {
    background-color: #162032 !important;
    border-color:  #162032 !important;
    color: #fff !important;
}
body.dark-mode .page-item.disabled .page-link {
    background-color: #060A10 !important;
    border-color:  #162032 !important;
    color: #666 !important;
}

/* Nav tabs — full coverage */
body.dark-mode .nav-tabs {
    border-color:  #162032 !important;
}
body.dark-mode .nav-tabs .nav-link {
    color: #FFFFFF !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
body.dark-mode .nav-tabs .nav-link:hover {
    border-color: #162032 #162032 #162032 !important;
    background-color: #0A1018 !important;
}
body.dark-mode .nav-tabs .nav-link.active {
    background-color: #0A1018 !important;
    border-color: #162032 #162032 #0A1018 !important;
    color: #FFFFFF !important;
}
body.dark-mode .tab-content {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
}

/* Alerts */
body.dark-mode .alert-danger {
    background-color: #330000 !important;
    border-color: #660000 !important;
    color: #ff6666 !important;
}
body.dark-mode .alert-success {
    background-color: #003300 !important;
    border-color: #006600 !important;
    color: #66ff66 !important;
}

/* Tags / Badges */
body.dark-mode .badge-light {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
}

/* Modal — full coverage */
body.dark-mode .modal-header {
    border-bottom: 1px solid #0A1018 !important;
}
body.dark-mode .modal-footer {
    border-top: 1px solid #0A1018 !important;
}
body.dark-mode .modal-backdrop.show {
    opacity: 0.7 !important;
}
body.dark-mode .close {
    color: #FFFFFF !important;
    text-shadow: none !important;
}

/* Form controls — full coverage */
body.dark-mode .form-control:focus {
    border-color: #00FFFF !important;
    box-shadow: 0 0 0 0.2rem rgba(233, 69, 96, 0.25) !important;
}
body.dark-mode select {
  background-color: #060A10 !important;
    color: #FFFFFF !important;
}
body.dark-mode .input {
  background-color: #060A10 !important;
    border-color: #0A1018 !important;
    color: #FFFFFF !important;
}

/* Misc */
body.dark-mode hr {
    border-color:  #162032 !important;
}

/* Sidebar — full coverage */
body.dark-mode .sidebar-link {
    color: #FFFFFF !important;
}
body.dark-mode .sidebar-link:hover {
    background-color: #0A1018 !important;
    color: #fff !important;
}
body.dark-mode .sidenav-menu .menu-list .menu-item .menu-link {
    color: #FFFFFF !important;
}
body.dark-mode .sidenav-menu .menu-list .menu-item .menu-link:hover {
    color: #fff !important;
    background-color: #0A1018 !important;
}
body.dark-mode .sidenav-menu .menu-list .menu-item .menu-link.active {
    color: #4da6ff !important;
}
body.dark-mode .sidenav-menu .menu-list > .menu-item > .sub-menu-list:before {
    background-color: #0A1018 !important;
}
body.dark-mode .logo-brand {
    background-color: #162032 !important;
}

/* Breadcrumb */
body.dark-mode ol.breadcrumb li a {
    color: #4da6ff !important;
}

/* Status desktop dropdown */
body.dark-mode .status-wrap {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
}

/* === SUPPLEMENT 3 — Dark Mode Comprehensive Fix for Filter Bar, Tabs, Filters, Financial Summary, Order Cards & Pages === */

/* Page & Container Backgrounds */
body.dark-mode .order-page,
body.dark-mode .cart-page,
body.dark-mode .content-page,
body.dark-mode .content-wrap,
body.dark-mode .content-wrap.container,
body.dark-mode div.order-page,
body.dark-mode div.cart-page {
    background: #060A10 !important;
    background-color: #060A10 !important;
    color: #FFFFFF !important;
}

body.dark-mode .content-page .card,
body.dark-mode .card.border-0 {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    color: #FFFFFF !important;
}

body.dark-mode .page-title-modern,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #ffffff !important;
}

/* Filter bar / Navigation tabs (.modern-tab-list, .modern-tab-item, .modern-tab-link) */
body.dark-mode .modern-tab-list {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    border-bottom: 1px solid #162032 !important;
}

body.dark-mode .modern-tab-item {
    border-color:  #162032 !important;
}

body.dark-mode .modern-tab-link {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    color: #a0aec0 !important;
    border-color:  #162032 !important;
}

body.dark-mode .modern-tab-link:hover,
body.dark-mode .modern-tab-link:focus {
    background: #162032 !important;
    background-color: #162032 !important;
    color: #ffffff !important;
}

body.dark-mode .modern-tab-link.active {
    background: #162032 !important;
    background-color: #162032 !important;
    color: #60a5fa !important;
    border-bottom: 3px solid #60a5fa !important;
    font-weight: 700 !important;
}

body.dark-mode .modern-tab-link .badge {
    background-color: #00FFFF !important;
    color: #ffffff !important;
}

/* Mobile Filter Toggle Button & Desktop Filter Section */
body.dark-mode .mobile-filter-toggle-btn,
body.dark-mode button.mobile-filter-toggle-btn {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
    border-color:  #162032 !important;
}

body.dark-mode .desktop-filters {
    background-color: #0A1018 !important;
    border: 1px solid #162032 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
}

body.dark-mode .desktop-filters label,
body.dark-mode .desktop-filters .text-muted {
    color: #7A8FA8 !important;
}

body.dark-mode .desktop-filters .form-control {
  background-color: #060A10 !important;
    color: #ffffff !important;
    border-color: #1e293b !important;
}

body.dark-mode .desktop-filters .form-control::placeholder,
body.dark-mode .desktop-filters input::placeholder {
    color: #94a3b8 !important;
}

/* Modern Order Cards & Financial Summary Box */
body.dark-mode .modern-order-card {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Financial Info Grid inside order cards (override inline style background: #f8fafc) */
body.dark-mode .modern-order-card div[style*="background"],
body.dark-mode .modern-order-card div[style*="background-color"] {
    background: #162032 !important;
    background-color: #162032 !important;
    border-color: #1e293b !important;
}

body.dark-mode .modern-order-card div[style*="border-top"],
body.dark-mode .modern-order-card div[style*="borderTop"] {
    border-top-color: #334155 !important;
}

body.dark-mode .modern-order-card div[style*="border-bottom"],
body.dark-mode .modern-order-card div[style*="borderBottom"] {
    border-bottom-color: #334155 !important;
}

body.dark-mode .modern-order-card img {
    border-color:  #162032 !important;
}

body.dark-mode .modern-order-card .text-muted,
body.dark-mode .modern-order-card span.text-muted {
    color: #94a3b8 !important;
}

body.dark-mode .modern-order-card .text-dark,
body.dark-mode .modern-order-card span.text-dark {
    color: #e2e8f0 !important;
}

body.dark-mode .modern-order-card strong {
    color: #e2e8f0 !important;
}

body.dark-mode .modern-order-card strong[style*="color: #1e293b"],
body.dark-mode .modern-order-card strong[style*="color:#1e293b"],
body.dark-mode .modern-order-card span[style*="color: #1e293b"],
body.dark-mode .modern-order-card a[style*="color: #1e293b"] {
    color: #f1f5f9 !important;
}

body.dark-mode .modern-order-card span[style*="color: #64748b"],
body.dark-mode .modern-order-card div[style*="color: #64748b"] {
    color: #7A8FA8 !important;
}

body.dark-mode .modern-order-card a[style*="color: #2563eb"] {
    color: #60a5fa !important;
}

body.dark-mode .border-right-md {
    border-color:  #162032 !important;
}

/* Selected orders banner (Thanh toán gộp) */
body.dark-mode div[style*="background: #eff6ff"],
body.dark-mode div[style*="background:#eff6ff"],
body.dark-mode div[style*="background: rgb(239, 246, 255)"] {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #93c5fd !important;
}

/* Badges styling in dark mode — Kryphos Obsidian Emerald palette */
body.dark-mode .badge-pastel-danger {
    background-color: rgba(255, 61, 87, 0.12) !important;
    color: #ff3d57 !important;
    border: 1px solid rgba(255, 61, 87, 0.30) !important;
}
body.dark-mode .badge-pastel-warning {
    background-color: rgba(255, 179, 0, 0.12) !important;
    color: #ffb300 !important;
    border: 1px solid rgba(255, 179, 0, 0.30) !important;
}
body.dark-mode .badge-pastel-info {
    background-color: rgba(0, 201, 255, 0.12) !important;
    color: #00c9ff !important;
    border: 1px solid rgba(0, 201, 255, 0.30) !important;
}
body.dark-mode .badge-pastel-primary {
    background-color: rgba(0, 201, 255, 0.12) !important;
    color: #00c9ff !important;
    border: 1px solid rgba(0, 201, 255, 0.30) !important;
}
body.dark-mode .badge-pastel-success {
    background-color: rgba(0, 255, 135, 0.12) !important;
    color: #00ff87 !important;
    border: 1px solid rgba(0, 255, 135, 0.30) !important;
}


/* Additional white background cleanups */
body.dark-mode div[style*="background: #ffffff"],
body.dark-mode div[style*="background:#ffffff"],
body.dark-mode div[style*="background: rgb(255, 255, 255)"] {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
}

body.dark-mode div[style*="background: #f8fafc"],
body.dark-mode div[style*="background:#f8fafc"],
body.dark-mode div[style*="background: rgb(248, 250, 252)"] {
    background: #162032 !important;
    background-color: #162032 !important;
    border-color: #0A1018 !important;
}

/* === SUPPLEMENT 4 — CATCH-ALL: override mọi inline white background === */

/* CATCH-ALL: mọi div/span/section có style background trắng */
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background-color:#ffffff"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color:white"] {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
}

body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background-color: #f8fafc"],
body.dark-mode [style*="background-color:#f8fafc"] {
    background: #162032 !important;
    background-color: #162032 !important;
}

body.dark-mode [style*="background: #f0f4f5"],
body.dark-mode [style*="background:#f0f4f5"] {
    background: #060A10 !important;
    background-color: #060A10 !important;
}

body.dark-mode [style*="background: #060A10"],
body.dark-mode [style*="background:#060A10"] {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
}

body.dark-mode [style*="background: #eceff1"],
body.dark-mode [style*="background:#eceff1"] {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
}

body.dark-mode [style*="background: #e1e1e1"],
body.dark-mode [style*="background:#e1e1e1"] {
    background: #162032 !important;
    background-color: #162032 !important;
}

body.dark-mode [style*="background: #f8f8f8"],
body.dark-mode [style*="background:#f8f8f8"] {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
}

/* CATCH-ALL: border màu trắng/xám nhạt */
body.dark-mode [style*="border-color: #e1e1e1"],
body.dark-mode [style*="border-color:#e1e1e1"],
body.dark-mode [style*="border: 1px solid #e1e1e1"],
body.dark-mode [style*="border:1px solid #e1e1e1"],
body.dark-mode [style*="border-bottom: 1px solid #e1e1e1"],
body.dark-mode [style*="border-bottom:1px solid #e1e1e1"],
body.dark-mode [style*="border-top: 1px solid #e1e1e1"],
body.dark-mode [style*="border-top:1px solid #e1e1e1"] {
    border-color: #162032 !important;
}

/* CATCH-ALL: color text tối/xám */
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #555"],
body.dark-mode [style*="color:#555"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: #707070"],
body.dark-mode [style*="color:#707070"],
body.dark-mode [style*="color: #8e8e8e"],
body.dark-mode [style*="color:#8e8e8e"],
body.dark-mode [style*="color: black"],
body.dark-mode [style*="color:black"],
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:#000"] {
    color: #FFFFFF !important;
}

/* Table-specific catch-all */
body.dark-mode table,
body.dark-mode table tr,
body.dark-mode table td,
body.dark-mode table th,
body.dark-mode table tbody,
body.dark-mode table thead {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
    border-color:  #162032 !important;
}

body.dark-mode table tr:hover {
    background-color: #162032 !important;
}

/* Form catch-all */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode button {
    border-color:  #162032 !important;
}

/* Div catch-all cho container page */
body.dark-mode #page,
body.dark-mode .page,
body.dark-mode .app,
body.dark-mode #app,
body.dark-mode .wrapper,
body.dark-mode .container-fluid,
body.dark-mode .row,
body.dark-mode .col,
body.dark-mode .col-*,
body.dark-mode [class*="col-"],
body.dark-mode .panel-body,
body.dark-mode .panel-heading,
body.dark-mode .panel-footer,
body.dark-mode .well,
body.dark-mode .jumbotron,
body.dark-mode .thumbnail,
body.dark-mode .media,
body.dark-mode .media-body {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* Breadcrumb override lại cho chắc */
body.dark-mode .breadcrumb {
    background-color: #0A1018 !important;
}
body.dark-mode .breadcrumb-item.active {
    color: #FFFFFF !important;
}

/* Accordion / Collapse */
body.dark-mode .accordion,
body.dark-mode .accordion-item,
body.dark-mode .accordion-header,
body.dark-mode .accordion-button,
body.dark-mode .accordion-body,
body.dark-mode .collapse,
body.dark-mode .collapsing {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
    border-color:  #162032 !important;
}

/* Tooltip / Popover */
body.dark-mode .tooltip-inner {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
}
body.dark-mode .popover {
    background-color: #0A1018 !important;
}
body.dark-mode .popover-header {
    background-color: #162032 !important;
    color: #FFFFFF !important;
    border-bottom-color: #0A1018 !important;
}
body.dark-mode .popover-body {
    color: #FFFFFF !important;
}

/* Offcanvas */
body.dark-mode .offcanvas,
body.dark-mode .offcanvas-header,
body.dark-mode .offcanvas-body {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
}

/* Toast */
body.dark-mode .toast {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
}
body.dark-mode .toast-header {
    background-color: #162032 !important;
    color: #FFFFFF !important;
}

/* Spinner (loading) */
body.dark-mode .spinner-border,
body.dark-mode .spinner-grow {
    color: #00FFFF !important;
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-track {
    background: #060A10 !important;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #162032 !important;
}

/* Navbar dropdown override */
body.dark-mode .navbar-nav .dropdown-menu {
    background-color: #0A1018 !important;
}

/* Sidebar nhỏ gọn override */
body.dark-mode .sidebar-mini,
body.dark-mode .sidebar-collapse,
body.dark-mode .sidebar-wrapper {
    background-color: #162032 !important;
}

/* Footer */
body.dark-mode footer,
body.dark-mode .footer {
    background-color: #162032 !important;
    color: #FFFFFF !important;
}

/* Status bar / notification bar */
body.dark-mode .status-bar,
body.dark-mode .notification-bar,
body.dark-mode .alert-bar {
    background-color: #162032 !important;
    color: #FFFFFF !important;
}

/* Badge trong tab override màu nền */
body.dark-mode .nav-link .badge,
body.dark-mode .tab-link .badge {
    background-color: #00FFFF !important;
    color: #fff !important;
}

/* Stripe rows trong bảng */
body.dark-mode .stripe-row,
body.dark-mode .stripe-row:nth-child(even),
body.dark-mode .stripe-row:nth-child(odd) {
    background-color: #0A1018 !important;
}

/* Filter group trong order management */
body.dark-mode .filter-group,
body.dark-mode .filter-row,
body.dark-mode .filter-section {
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
}

/* Order list item */
body.dark-mode .order-list-item,
body.dark-mode .order-card,
body.dark-mode .order-item {
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    color: #FFFFFF !important;
}

/* Tracking components */
body.dark-mode .tracking-list,
body.dark-mode .tracking-item-wrap,
body.dark-mode .tracking-detail {
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    color: #FFFFFF !important;
}

/* Cart components */
body.dark-mode .cart-list,
body.dark-mode .cart-item-wrap {
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    color: #FFFFFF !important;
}

/* Wallet components */
body.dark-mode .wallet-summary,
body.dark-mode .wallet-detail,
body.dark-mode .transaction-item {
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    color: #FFFFFF !important;
}

/* Form layout */
body.dark-mode .form-row,
body.dark-mode .form-group {
    background-color: transparent !important;
}

/* Select2 / dropdown component */
body.dark-mode .select {
  background-color: #060A10 !important;
    border-color: #0A1018 !important;
}
body.dark-mode .select2-container--default .select2-results__option {
    color: #FFFFFF !important;
}

/* CKEditor / text editor */
body.dark-mode .cke,
body.dark-mode .cke_inner,
body.dark-mode .cke_top,
body.dark-mode .cke_bottom {
    background-color: #0A1018 !important;
}

/* Tabs trong trang order management */
body.dark-mode .order-tabs,
body.dark-mode .order-tab-header {
    background-color: #162032 !important;
    border-color: #0A1018 !important;
}

/* Đặc biệt: những class từ ảnh chụp */
body.dark-mode .filter-navigation,
body.dark-mode .order-list-header,
body.dark-mode .order-list-filter,
body.dark-mode .order-table-wrap,
body.dark-mode .order-card-header {
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    color: #FFFFFF !important;
}

/* === SUPPLEMENT 5 — Dark Mode Comprehensive Fix for Footer, Sidebar & Sub-menu === */

/* Footer Dark Mode Styles */
body.dark-mode .modern-footer-wrapper {
  background: #0A1018 !important;
  color: #FFFFFF !important;
  border-top: 1px solid #162032 !important;
}

body.dark-mode .m-footer-contact-row {
  border-bottom: 1px solid #162032 !important;
  background: #060A10 !important;
}

body.dark-mode .m-footer-contact-card {
  background: #0A1018 !important;
  border: 1px solid #162032 !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

body.dark-mode .m-footer-contact-card:hover {
  border-color: #00FFFF !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .m-footer-contact-icon {
  background: #162032 !important;
  color: #00FFFF !important;
}

body.dark-mode .m-footer-contact-title {
  color: #7A8FA8 !important;
}

body.dark-mode .m-footer-contact-value,
body.dark-mode .m-footer-contact-value a {
  color: #ffffff !important;
}

body.dark-mode .m-footer-contact-value a:hover {
  color: #00FFFF !important;
}

body.dark-mode .m-footer-main {
  background: #0A1018 !important;
}

body.dark-mode .m-footer-col h3 {
  color: #ffffff !important;
}

body.dark-mode .m-footer-link {
  color: #7A8FA8 !important;
}

body.dark-mode .m-footer-link:hover {
  color: #00FFFF !important;
}

body.dark-mode .m-footer-info-label {
  color: #ffffff !important;
}

body.dark-mode .m-footer-info-value {
  color: #FFFFFF !important;
}

body.dark-mode .m-footer-bottom {
  border-top: 1px solid #162032 !important;
}

body.dark-mode .m-footer-copyright {
  color: #7A8FA8 !important;
}

body.dark-mode .m-footer-social-link {
  background: #162032 !important;
  color: #FFFFFF !important;
}

body.dark-mode .m-footer-social-link:hover {
  background: #00FFFF !important;
  color: #ffffff !important;
}

/* Sidebar Dark Mode Styles */
body.dark-mode .infor-sidebar,
body.dark-mode .sidebar-box,
body.dark-mode .side-nav,
body.dark-mode .sidenav-menu,
body.dark-mode #sidenav-menu {
  background: #0A1018 !important;
  background-color: #0A1018 !important;
  border-right: 1px solid #162032 !important;
}

body.dark-mode .sidenav-menu .logo-brand,
body.dark-mode .infor-sidebar .logo-brand {
  background-color: #0A1018 !important;
  border-bottom: 1px solid #162032 !important;
}

body.dark-mode .sidenav-menu .menu-wrap,
body.dark-mode .infor-sidebar .menu-wrap {
  background-color: #0A1018 !important;
}

body.dark-mode .sidenav-menu .menu-list,
body.dark-mode .infor-sidebar .menu-list {
  background-color: transparent !important;
}

body.dark-mode .sidenav-menu .menu-item,
body.dark-mode .infor-sidebar .menu-item {
  background-color: transparent !important;
}

body.dark-mode .sidenav-menu .menu-link-row,
body.dark-mode .infor-sidebar .menu-link-row {
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

body.dark-mode .sidenav-menu .menu-link-row:hover,
body.dark-mode .sidenav-menu .menu-link-row.active,
body.dark-mode .infor-sidebar .menu-link-row:hover,
body.dark-mode .infor-sidebar .menu-link-row.active {
  background-color: #162032 !important;
}

body.dark-mode .sidenav-menu .menu-link,
body.dark-mode .infor-sidebar .menu-link {
  color: #FFFFFF !important;
}

body.dark-mode .sidenav-menu .menu-link:hover,
body.dark-mode .sidenav-menu .menu-link.active,
body.dark-mode .infor-sidebar .menu-link:hover,
body.dark-mode .infor-sidebar .menu-link.active {
  color: #ffffff !important;
}

body.dark-mode .sidenav-menu .menu-link i,
body.dark-mode .infor-sidebar .menu-link i {
  color: #00FFFF !important;
}

body.dark-mode .sidenav-menu .menu-section-header,
body.dark-mode .infor-sidebar .menu-section-header {
  color: #7A8FA8 !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(15, 52, 96, 0.4) !important;
}

body.dark-mode .sidenav-menu .profile-item,
body.dark-mode .infor-sidebar .profile-item {
  background-color: #162032 !important;
  border-bottom: 1px solid #0A1018 !important;
}

body.dark-mode .sidenav-menu .profile-info,
body.dark-mode .infor-sidebar .profile-info {
  color: #FFFFFF !important;
}

body.dark-mode .sidenav-menu .profile-info .user-name,
body.dark-mode .infor-sidebar .profile-info .user-name {
  color: #ffffff !important;
}

body.dark-mode .sidenav-menu .profile-info .balance,
body.dark-mode .infor-sidebar .profile-info .balance {
  color: #00FFFF !important;
}

body.dark-mode .sidenav-menu .profile-info .balance a,
body.dark-mode .infor-sidebar .profile-info .balance a {
  color: #00FFFF !important;
}

/* Sub-menu inside Sidebar */
body.dark-mode .sidenav-menu .sub-menu-list,
body.dark-mode .infor-sidebar .sub-menu-list,
body.dark-mode .sidenav-menu .sub-menu,
body.dark-mode .infor-sidebar .sub-menu {
  background-color: #162032 !important;
  border-left: 2px solid #00FFFF !important;
}

body.dark-mode .sidenav-menu .sub-menu-list .menu-item,
body.dark-mode .infor-sidebar .sub-menu-list .menu-item {
  background-color: transparent !important;
}

body.dark-mode .sidenav-menu .sub-menu-list .menu-link,
body.dark-mode .infor-sidebar .sub-menu-list .menu-link {
  color: #7A8FA8 !important;
}

body.dark-mode .sidenav-menu .sub-menu-list .menu-link:hover,
body.dark-mode .infor-sidebar .sub-menu-list .menu-link:hover {
  color: #ffffff !important;
  background-color: rgba(23, 37, 68, 0.5) !important;
}

body.dark-mode .sidenav-menu .sub-menu-list:before {
  background-color: #162032 !important;
}

/* === SUPPLEMENT 6 — Dashboard Cards + Home Page + Cart Page === */

/* Dashboard cards — ĐƠN HÀNG MUA HỘ, KIỆN HÀNG KÝ GỬI */
body.dark-mode .dashboard-stat-card,
body.dark-mode .dashboard-card,
body.dark-mode .stat-card,
body.dark-mode .service-card,
body.dark-mode .overview-card,
body.dark-mode .summary-card {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    border-color:  #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .dashboard-stat-card *,
body.dark-mode .dashboard-card *,
body.dark-mode .stat-card *,
body.dark-mode .service-card * {
    color: #FFFFFF !important;
}
body.dark-mode .dashboard-stat-card .card-title,
body.dark-mode .dashboard-stat-card .card-text,
body.dark-mode .dashboard-stat-card .stat-value,
body.dark-mode .dashboard-stat-card .stat-label,
body.dark-mode .dashboard-card .card-title,
body.dark-mode .dashboard-card .card-text {
    color: #FFFFFF !important;
}

/* Home page */
body.dark-mode .home-page,
body.dark-mode .hero-section,
body.dark-mode .hero-content,
body.dark-mode .hero-banner {
    background: #060A10 !important;
    background-color: #060A10 !important;
    color: #FFFFFF !important;
}
body.dark-mode .home-header,
body.dark-mode .home-header-bar {
    background: #162032 !important;
    background-color: #162032 !important;
}
body.dark-mode .home-header .btn,
body.dark-mode .home-header button {
    background: #162032 !important;
    border-color: #0A1018 !important;
    color: #FFFFFF !important;
}

/* Cart page */
body.dark-mode .cart-page,
body.dark-mode .cart-container {
    background: #060A10 !important;
    background-color: #060A10 !important;
}
body.dark-mode .cart-steps,
body.dark-mode .progress-steps {
    background: #162032 !important;
    background-color: #162032 !important;
}
body.dark-mode .cart-summary-bar,
body.dark-mode .cart-total-bar {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
}
body.dark-mode .cart-empty {
    background: #060A10 !important;
    background-color: #060A10 !important;
}

/* Service overview section */
body.dark-mode .service-overview,
body.dark-mode .stat-overview {
    background: #060A10 !important;
    background-color: #060A10 !important;
}

/* Wallet balance card */
body.dark-mode .wallet-balance-card,
body.dark-mode .balance-card {
    background: #162032 !important;
    background-color: #162032 !important;
    color: #FFFFFF !important;
}

/* Profile / user info section */
body.dark-mode .profile-card,
body.dark-mode .user-info-card {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
}

/* Text colors in cards */
body.dark-mode .text-dark,
body.dark-mode .text-black,
body.dark-mode .text-body {
    color: #FFFFFF !important;
}

/* Remove all background: white from any element */
body.dark-mode *[style*="background"],
body.dark-mode *[style*="background-color"] {
    background-color: #0A1018 !important;
    background: #0A1018 !important;
}

/* === SUPPLEMENT 7 — Cart Page Dark Mode Fix === */

/* 1. Main Wrapper Background */
body.dark-mode main#main,
body.dark-mode #main {
  background-color: #060A10 !important;
  background: #060A10 !important;
}

/* 2. Top Content (Checkout Steps Card) */
body.dark-mode .top-content {
  background-color: #0A1018 !important;
  background: #0A1018 !important;
  border-color:  #162032 !important;
}

/* Steps Text & State Overrides */
body.dark-mode .top-content span {
  color: #7A8FA8 !important;
}
body.dark-mode .top-content span[style*="color: rgb(37, 99, 235)"],
body.dark-mode .top-content span[style*="color: #2563eb"] {
  color: #3b82f6 !important;
}
body.dark-mode .top-content span[style*="color: rgb(30, 41, 59)"],
body.dark-mode .top-content span[style*="color: #1e293b"] {
  color: #ffffff !important;
}

/* Step Circle (Numbers/Icons) */
body.dark-mode .top-content .step-circle {
  background-color: #162032 !important;
  background: #162032 !important;
  color: #7A8FA8 !important;
  border-color:  #162032 !important;
}

/* Connecting Lines */
body.dark-mode .top-content .d-flex.align-items-center + div[style*="background: rgb(226, 232, 240)"],
body.dark-mode .top-content div[style*="background: rgb(226, 232, 240)"],
body.dark-mode .top-content div[style*="background: #e2e8f0"] {
  background-color: #162032 !important;
  background: #162032 !important;
}

/* 3. Cards in Cart page (Toolbar & Address form & Delivery info & Confirmation list) */
body.dark-mode #main .card {
  background-color: #0A1018 !important;
  background: #0A1018 !important;
  border-color:  #162032 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Card Headers and inner layouts */
body.dark-mode #main .card-header.bg-white,
body.dark-mode #main .card-header {
  background-color: #0A1018 !important;
  background: #0A1018 !important;
  border-color:  #162032 !important;
}

/* Headers text override (Giỏ hàng, Thông tin nhận hàng, v.v.) */
body.dark-mode #main h4,
body.dark-mode #main h4.mb-0 {
  color: #ffffff !important;
}

body.dark-mode #main h4.card-title,
body.dark-mode #main h4.card-title * {
  color: #ffffff !important;
}

/* Inline titles & Text inside cards */
body.dark-mode #main .card label,
body.dark-mode #main .card span:not(.badge),
body.dark-mode #main .card div:not(.badge):not(.btn) {
  color: #FFFFFF !important;
}

body.dark-mode #main .card .text-muted,
body.dark-mode #main .card p.text-muted {
  color: #7A8FA8 !important;
}

/* Special address items border and bg */
body.dark-mode #main .border-bottom {
  border-color:  #162032 !important;
}

body.dark-mode #main .step3-page div[style*="background: rgb(248, 250, 252)"],
body.dark-mode #main .step3-page div[style*="background: #f8fafc"] {
  background-color: #162032 !important;
  background: #162032 !important;
  color: #ffffff !important;
}

/* Step 2 Inputs, Selects, Textareas - Default & Focus state */
body.dark-mode #main .form-control,
body.dark-mode #main input[type="text"],
body.dark-mode #main textarea {
  background-color: #060A10 !important;
  background: #060A10 !important;
  color: #ffffff !important;
  border: 1px solid #162032 !important;
}

body.dark-mode #main .form-control:focus,
body.dark-mode #main input[type="text"]:focus,
body.dark-mode #main textarea:focus {
  background-color: #060A10 !important;
  background: #060A10 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Form border split line */
body.dark-mode #main .col-12.col-lg-7 {
  border-color:  #162032 !important;
}

/* 4. Alert / Info boxes */
body.dark-mode #main .alert-info,
body.dark-mode #main div[style*="background: rgb(240, 249, 255)"],
body.dark-mode #main div[style*="background: #f0f9ff"] {
  background-color: #0b2545 !important;
  background: #0b2545 !important;
  border-color: #134074 !important;
  color: #8da9c4 !important;
}

body.dark-mode #main div[style*="background: rgb(240, 249, 255)"] div,
body.dark-mode #main div[style*="background: #f0f9ff"] div {
  color: #ffffff !important;
}

/* Step 3 Warning Alert */
body.dark-mode #main .step3-page .alert[style*="background: rgb(255, 251, 235)"],
body.dark-mode #main .step3-page .alert[style*="background: #fffbeb"] {
  background-color: #3a2502 !important;
  background: #3a2502 !important;
  border-color: #5c3e03 !important;
  color: #fcd34d !important;
}

body.dark-mode #main .step3-page .alert[style*="background: rgb(255, 251, 235)"] strong,
body.dark-mode #main .step3-page .alert[style*="background: #fffbeb"] strong {
  color: #fbbf24 !important;
}

/* 5. Buttons formatting */
body.dark-mode #main .btn-light {
  background-color: #162032 !important;
  background: #162032 !important;
  color: #FFFFFF !important;
  border: 1px solid #162032 !important;
}

body.dark-mode #main .btn-light:hover {
  background-color: #060A10 !important;
  background: #060A10 !important;
  border-color: #00FFFF !important;
}

body.dark-mode #main button[style*="background: rgb(241, 245, 249)"],
body.dark-mode #main button[style*="background: #f1f5f9"] {
  background-color: #162032 !important;
  background: #162032 !important;
  color: #FFFFFF !important;
}

body.dark-mode #main button[style*="background: rgb(241, 245, 249)"]:hover,
body.dark-mode #main button[style*="background: #f1f5f9"]:hover {
  background-color: #060A10 !important;
  background: #060A10 !important;
  color: #ffffff !important;
}

/* 6. Step 2 & 3 custom components and modals inside */
body.dark-mode #main .border-top {
  border-color:  #162032 !important;
}

body.dark-mode #main .pagination .page-item .page-link {
  background-color: #060A10 !important;
  border-color:  #162032 !important;
  color: #FFFFFF !important;
}

body.dark-mode #main .pagination .page-item.active .page-link {
  background-color: #00FFFF !important;
  border-color: #00FFFF !important;
  color: #ffffff !important;
}

body.dark-mode #main .pagination .page-item.disabled .page-link {
  background-color: #0A1018 !important;
  border-color:  #162032 !important;
  color: #64748b !important;
}

/* === SUPPLEMENT 8 — Profile trong Sidebar === */

body.dark-mode .profile-item,
body.dark-mode .profile-wrap,
body.dark-mode .profile-box,
body.dark-mode .user-profile,
body.dark-mode .user-info-wrap,
body.dark-mode .user-info-box,
body.dark-mode .sidebar-profile,
body.dark-mode .sidebar-user,
body.dark-mode .sidebar .profile,
body.dark-mode .sidenav-menu .profile,
body.dark-mode .sidenav-menu .user-info,
body.dark-mode .sidenav-menu .user-box,
body.dark-mode [class*="profile"],
body.dark-mode [class*="user-info"],
body.dark-mode [class*="user-box"],
body.dark-mode [class*="user-wrap"] {
    background-color: #162032 !important;
    background: #162032 !important;
    color: #FFFFFF !important;
    border-color: #0A1018 !important;
}

body.dark-mode .profile-item *,
body.dark-mode .profile-wrap *,
body.dark-mode .user-profile *,
body.dark-mode .user-info-wrap *,
body.dark-mode .sidebar-profile *,
body.dark-mode .sidebar-user *,
body.dark-mode [class*="profile"] *,
body.dark-mode [class*="user-info"] *,
body.dark-mode [class*="user-box"] * {
    color: #FFFFFF !important;
}

body.dark-mode .profile-item .user-name,
body.dark-mode .profile-item .user-balance,
body.dark-mode .profile-item .balance,
body.dark-mode .profile-item .user-avatar {
    color: #ffffff !important;
}

body.dark-mode .profile-item .balance a,
body.dark-mode .profile-item .user-balance a {
    color: #00FFFF !important;
}

/* Avatar trong sidebar */
body.dark-mode .profile-item img,
body.dark-mode .user-avatar img,
body.dark-mode .sidebar-avatar img {
    border-color:  #162032 !important;
}

/* Status desktop dropdown (profile dropdown) */
body.dark-mode .status-desktop,
body.dark-mode .status-wrap {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
}
body.dark-mode .status-wrap .status__header {
    background-color: #162032 !important;
}
body.dark-mode .status-desktop .status-wrap {
    background-color: #0A1018 !important;
}

/*# sourceMappingURL=style.css.map */
/* === SUPPLEMENT 8 — Dashboard Widget Cards + Cart VendorCard Inner Elements === */

/* ---- A. Dashboard Page ---- */
body.dark-mode .dashboard-page {
  background: #060A10 !important;
  background-color: #060A10 !important;
}

body.dark-mode .dashboard-page h4 {
  color: #FFFFFF !important;
}

/* ---- B. Widget Cards (4 stat cards: blue/green/#060A10/red) ---- */
body.dark-mode .widget-card {
  background: #0A1018 !important;
  background-color: #0A1018 !important;
  border-color:  #162032 !important;
}

body.dark-mode .widget-card .title-text {
  color: #7A8FA8 !important;
}

body.dark-mode .widget-card .value-text {
  color: #ffffff !important;
}

body.dark-mode .widget-card .count-badge {
  background: #162032 !important;
  background-color: #162032 !important;
  color: #FFFFFF !important;
}

body.dark-mode .widget-card.blue-widget .icon-wrapper {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
}

body.dark-mode .widget-card.green-widget .icon-wrapper {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}

body.dark-mode .widget-card.#060A10-widget .icon-wrapper {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #060A10 !important;
}

body.dark-mode .widget-card.red-widget .icon-wrapper {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

/* ---- C. DB Cards (Quick Tracking, Flow Guide, Contact Support) ---- */
body.dark-mode .db-card {
  background: #0A1018 !important;
  background-color: #0A1018 !important;
  border-color:  #162032 !important;
}

body.dark-mode .db-card-header {
  background: #0A1018 !important;
  background-color: #0A1018 !important;
  color: #FFFFFF !important;
  border-color:  #162032 !important;
}

body.dark-mode .db-card-body {
  background: #0A1018 !important;
  background-color: #0A1018 !important;
  color: #FFFFFF !important;
}

/* ---- D. DB Contact Items ---- */
body.dark-mode .db-contact-item {
  background: #162032 !important;
  background-color: #162032 !important;
  border-color: #0A1018 !important;
}

body.dark-mode .db-contact-icon {
  color: #00FFFF !important;
}

body.dark-mode .db-contact-item strong {
  color: #ffffff !important;
}

body.dark-mode .db-contact-item > div > div {
  color: #7A8FA8 !important;
}

/* ---- E. DB Flow Steps ---- */
body.dark-mode .db-flow-step {
  background: #162032 !important;
  background-color: #162032 !important;
  border-color: #0A1018 !important;
}

body.dark-mode .db-flow-icon {
  background: #00FFFF !important;
  background-color: #00FFFF !important;
  color: #ffffff !important;
}

body.dark-mode .db-flow-title {
  color: #ffffff !important;
}

body.dark-mode .db-flow-desc {
  color: #7A8FA8 !important;
}

/* ---- F. DB Track Input ---- */
body.dark-mode .db-track-input {
  background: #060A10 !important;
  background-color: #060A10 !important;
  color: #FFFFFF !important;
  border-color:  #162032 !important;
}

/* ---- G. Cart VendorCard — Services Section ---- */
body.dark-mode #main .addition-service {
  background: #162032 !important;
  background-color: #162032 !important;
  border-color: #0A1018 !important;
}

/* Service labels (inactive — white bg in light mode) */
body.dark-mode #main .addition-service label[style*="background: rgb(255, 255, 255)"],
body.dark-mode #main .addition-service label[style*="background: #ffffff"],
body.dark-mode #main .addition-service label[style*="background: white"] {
  background: #060A10 !important;
  border-color:  #162032 !important;
  color: #7A8FA8 !important;
}

/* ---- H. Cart VendorCard — Pricing Info Block ---- */
body.dark-mode #main .list-product div[style*="background: rgb(248, 250, 252)"],
body.dark-mode #main .list-product div[style*="background: #f8fafc"] {
  background: #162032 !important;
  background-color: #162032 !important;
  border-color: #0A1018 !important;
}

body.dark-mode #main .list-product div[style*="background: rgb(248, 250, 252)"] span,
body.dark-mode #main .list-product div[style*="background: #f8fafc"] span,
body.dark-mode #main .list-product div[style*="background: rgb(248, 250, 252)"] strong,
body.dark-mode #main .list-product div[style*="background: #f8fafc"] strong {
  color: #FFFFFF !important;
}

/* ---- I. Cart VendorCard — Shop Summary Footer ---- */
body.dark-mode #main .card-body div[style*="background: rgb(248, 250, 252)"],
body.dark-mode #main .card-body div[style*="background: #f8fafc"] {
  background: #162032 !important;
  background-color: #162032 !important;
  border-color: #0A1018 !important;
}

body.dark-mode #main .card-body div[style*="background: rgb(248, 250, 252)"] div,
body.dark-mode #main .card-body div[style*="background: #f8fafc"] div {
  color: #FFFFFF !important;
}

/* ---- J. Cart VendorCard — Quantity Input ---- */
body.dark-mode #main input[type="number"] {
  background: #060A10 !important;
  background-color: #060A10 !important;
  color: #FFFFFF !important;
  border-color:  #162032 !important;
}

/* ---- K. Cart VendorCard — Note Box & Delete Button ---- */
body.dark-mode #main .item-product div[style*="background: rgb(254, 242, 242)"],
body.dark-mode #main .item-product div[style*="background: #fef2f2"] {
  background: #b71c1c !important;
  border-color: #c62828 !important;
}

body.dark-mode #main .item-product button[style*="background: rgb(254, 242, 242)"],
body.dark-mode #main .item-product button[style*="background: #fef2f2"] {
  background: #b71c1c !important;
  border-color: #c62828 !important;
  color: #fca5a5 !important;
}

/* VendorCard item row separator */
body.dark-mode #main .item-product {
  border-color:  #162032 !important;
}

/* Dashed separator in pricing block */
body.dark-mode #main .list-product div[style*="border-top: 1px dashed"] {
  border-color: #162032 !important;
}

/* ---- L. Dark Mode Profile Page Overrides (Supplement 9) ---- */
body.dark-mode .input {
  background: #060A10 !important;
  color: #ffffff !important;
  border: 1px solid #4a6fa5 !important;
}

body.dark-mode .separator-line {
  border-bottom: 1px solid #162032 !important;
}

body.dark-mode .form-label {
  color: #7A8FA8 !important;
  font-weight: 500 !important;
}

body.dark-mode .section-header {
  color: #00FFFF !important;
}

/* Structural & Card Overrides for Profile Pages to fix inline background/border issues */
body.dark-mode .info-page,
body.dark-mode .info-page .card,
body.dark-mode .info-page .primary-card,
body.dark-mode .order-page .card,
body.dark-mode .kienhang-page .card,
body.dark-mode .modern-order-card {
  background: #0A1018 !important;
  background-color: #0A1018 !important;
  border-color:  #162032 !important;
  color: #FFFFFF !important;
}

body.dark-mode .info-page .card-header,
body.dark-mode .order-page .card-header {
  background: #162032 !important;
  background-color: #162032 !important;
  border-color:  #162032 !important;
  color: #ffffff !important;
}

body.dark-mode .info-page .card > div[onClick],
body.dark-mode .info-page .card-header span {
  background: #162032 !important;
  background-color: #162032 !important;
  color: #ffffff !important;
}

/* Overriding light inline colors for labels and values */
body.dark-mode .info-page td.lb,
body.dark-mode .info-cus td.lb,
body.dark-mode .tb-info td.lb,
body.dark-mode .order-page td.lb {
  color: #7A8FA8 !important;
  font-weight: 500 !important;
}

body.dark-mode .info-page td.value,
body.dark-mode .info-cus td.value,
body.dark-mode .tb-info td.value,
body.dark-mode .order-page td.value {
  color: #ffffff !important;
}

body.dark-mode .info-page td.value a,
body.dark-mode .info-cus td.value a,
body.dark-mode .tb-info td.value a,
body.dark-mode .order-page td.value a,
body.dark-mode .modern-order-card a {
  color: #00FFFF !important;
}

/* Horizontal separators in tables */
body.dark-mode .info-page tr,
body.dark-mode .order-page tr,
body.dark-mode .tb-info tr,
body.dark-mode .info-cus tr,
body.dark-mode .modern-order-card .border-right-md {
  border-color:  #162032 !important;
}

/* Background wrappers */
body.dark-mode .order-page,
body.dark-mode .cart-page,
body.dark-mode .kienhang-page {
  background: #060A10 !important;
  background-color: #060A10 !important;
}

/* Inputs and select {
  background: #060A10 !important;
  color: #ffffff !important;
  border: 1px solid #4a6fa5 !important;
}

/* Overriding inline styling text-dark inside cards */
body.dark-mode .text-dark,
body.dark-mode .modern-order-card .text-dark,
body.dark-mode .modern-order-card strong {
  color: #FFFFFF !important;
}

/* ---- Dark Mode Tracking Timeline & Account Page (Supplement 10) ---- */
/* Timeline card inline override */
body.dark-mode .order-page .card,
body.dark-mode .main-content .card,
body.dark-mode .timeline-step {
  background-color: #0A1018 !important;
  border-color:  #162032 !important;
}

/* Timeline horizontal & vertical line connectors */
body.dark-mode div[style*="background: #7A8FA8"],
body.dark-mode div[style*="background: rgb(203, 213, 225)"],
body.dark-mode .timeline-step div[style*="background: #7A8FA8"],
body.dark-mode .timeline-step div[style*="background: rgb(203, 213, 225)"] {
  background-color: #162032 !important;
  background: #162032 !important;
}

/* Step circle (uncompleted) */
body.dark-mode .timeline-step div[style*="background: #f1f5f9"],
body.dark-mode .timeline-step div[style*="background: rgb(241, 245, 249)"] {
  background-color: #162032 !important;
  background: #162032 !important;
  color: #7A8FA8 !important;
  border-color:  #162032 !important;
}

/* Step circle border overrides for uncompleted steps */
body.dark-mode .timeline-step div[style*="border: 2px solid #7A8FA8"],
body.dark-mode .timeline-step div[style*="border: 2px solid rgb(203, 213, 225)"] {
  border: 2px solid #162032 !important;
  border-color:  #162032 !important;
}

/* Step title & header color overrides for inline color: #0f172a (dark grey) */
body.dark-mode .timeline-step div[style*="color: #0f172a"],
body.dark-mode .timeline-step div[style*="color: rgb(15, 23, 42)"],
body.dark-mode .card span[style*="color: #0f172a"],
body.dark-mode .card span[style*="color: rgb(15, 23, 42)"],
body.dark-mode .timeline-step strong,
body.dark-mode .timeline-step b {
  color: #FFFFFF !important;
}

/* Input fields & select {
  background: #060A10 !important;
  background-color: #162032 !important;
  color: #ffffff !important;
  border: 1px solid #4a6fa5 !important;
}

/* Separator lines inside Account Page (/tai-khoan/) & cards */
body.dark-mode .modern-order-card,
body.dark-mode .info-cus,
body.dark-mode .tb-info {
  border-color:  #162032 !important;
}

body.dark-mode div[style*="borderBottom: 1px dashed #e2e8f0"],
body.dark-mode div[style*="border-bottom: 1px dashed rgb(226, 232, 240)"],
body.dark-mode div[style*="border-bottom: 1px dashed #e2e8f0"] {
  border-bottom: 1px dashed #162032 !important;
}

body.dark-mode div[style*="background: #ffffff"],
body.dark-mode div[style*="background: rgb(255, 255, 255)"] {
  background-color: #0A1018 !important;
  background: #0A1018 !important;
}

body.dark-mode div[style*="border: 1px solid #e2e8f0"],
body.dark-mode div[style*="border: 1px solid rgb(226, 232, 240)"] {
  border-color: #162032 !important;
}

/* Breadcrumb background & items */
body.dark-mode .breadcrumb {
  background-color: #0A1018 !important;
  border-color:  #162032 !important;
}

body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-item a,
body.dark-mode .breadcrumb-item.active {
  color: #7A8FA8 !important;
}

body.dark-mode {
  background-color: #060A10 !important;
  color: #FFFFFF !important;
}
body.dark-mode * {
  border-color: #162032 !important;
}
body.dark-mode .text-muted {
  color: #7A8FA8 !important;
}

/* === SUPPLEMENT 12 — Home page header + Modal notes === */

body.dark-mode .home-header,
body.dark-mode .home-header-bar,
body.dark-mode .home-header-wrap,
body.dark-mode header.home-page-header,
body.dark-mode .navbar-home,
body.dark-mode .home-navbar {
    background: #060A10 !important;
    background-color: #060A10 !important;
}
body.dark-mode .home-header .btn,
body.dark-mode .home-header button,
body.dark-mode .btn-account {
    background: #00FFFF !important;
    border-color: #00FFFF !important;
    color: #ffffff !important;
}
body.dark-mode .home-header .logo,
body.dark-mode .home-header .brand,
body.dark-mode .home-header .navbar-brand {
    color: #FFFFFF !important;
}

/* Hero section home page */
body.dark-mode .hero-wrap,
body.dark-mode .hero-section,
body.dark-mode .hero-content,
body.dark-mode .banner-section {
    background: #060A10 !important;
    background-color: #060A10 !important;
}

/* Modal ghi chú sản phẩm (popup trắng) */
body.dark-mode .modal-content,
body.dark-mode .modal-dialog .modal-content {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    border-color: #162032 !important;
}
body.dark-mode .modal-header {
    background: #0A1018 !important;
    border-bottom: 1px solid #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .modal-body {
    background: #060A10 !important;
    color: #FFFFFF !important;
}
body.dark-mode .modal-footer {
    background: #0A1018 !important;
    border-top: 1px solid #162032 !important;
}
body.dark-mode .modal-body textarea,
body.dark-mode .modal-body input,
body.dark-mode .modal-body .form-control {
    background: #060A10 !important;
    color: #FFFFFF !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .modal-footer .btn,
body.dark-mode .modal-footer button {
    background: #162032 !important;
    border-color: #162032 !important;
    color: #FFFFFF !important;
}

body.dark-mode .profile-item,
body.dark-mode .profile-info,
body.dark-mode .user-info,
body.dark-mode .avatar,
body.dark-mode .infor-sidebar .profile-item,
body.dark-mode .sidenav-menu .profile-item {
  background-color: #0A1018 !important;
  background: #0A1018 !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid #162032 !important;
}

body.dark-mode .profile-item .user-name {
  color: #FFFFFF !important;
}

body.dark-mode .profile-item .balance,
body.dark-mode .profile-item .balance a,
body.dark-mode .profile-item .balance i {
  color: #ff7849 !important;
}

body.dark-mode .profile-item .avatar img {
  border: 1px solid #162032 !important;
}

/* === SUPPLEMENT 13 — Tang tuong phan cho Order Details === */

body.dark-mode .order-detail-card,
body.dark-mode .order-info-card {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
}
body.dark-mode .order-detail-row {
    padding: 10px 16px !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .order-detail-row:last-child {
    border-bottom: none !important;
}
body.dark-mode .order-detail-row.highlight-total {
    background: #00FFFF !important;
    background-color: #00FFFF !important;
    border-radius: 0 0 8px 8px !important;
    border-bottom: none !important;
}
body.dark-mode .order-detail-row.highlight-total span,
body.dark-mode .order-detail-row.highlight-total strong,
body.dark-mode .order-detail-row.highlight-total .text-dark {
    color: #ffffff !important;
}

/* Collapsible section headers (Tiến trình đơn hàng, Thông tin ngoại tệ...) */
body.dark-mode .section-toggle,
body.dark-mode .collapsible-header,
body.dark-mode .accordion-header,
body.dark-mode .order-section-header {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    border: 1px solid #162032 !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    padding: 12px 16px !important;
    color: #FFFFFF !important;
}
body.dark-mode .section-toggle:hover,
body.dark-mode .collapsible-header:hover {
    background: #162032 !important;
}
body.dark-mode .section-toggle .icon,
body.dark-mode .collapsible-header .icon {
    color: #7A8FA8 !important;
}

/* Contact section */
body.dark-mode .contact-section,
body.dark-mode .contact-info {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

/* Labels and values */
body.dark-mode .detail-label {
    color: #7A8FA8 !important;
    font-size: 13px !important;
}
body.dark-mode .detail-value {
    color: #FFFFFF !important;
    font-weight: 500 !important;
}
body.dark-mode .detail-value .amount {
    color: #00FFFF !important;
}
body.dark-mode .detail-value .amount-danger {
    color: #f85149 !important;
}

/* Price breakdown rows */
body.dark-mode .price-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .price-row:last-child {
    border-bottom: none !important;
}

/*# sourceMappingURL=style.css.map */


/* === SUPPLEMENT 14 — Clone mau sac C69 dark mode === */
body.dark-mode {
    background-color: #060A10 !important;
    color: #FFFFFF !important;
}
body.dark-mode body, body.dark-mode html,
body.dark-mode .main-content, body.dark-mode .content-area,
body.dark-mode .content-wrapper, body.dark-mode .page-content,
body.dark-mode .content-wrap, body.dark-mode div.content-wrap {
    background-color: #060A10 !important;
}
body.dark-mode .card, body.dark-mode .panel, body.dark-mode .box,
body.dark-mode .dashboard-card, body.dark-mode .order-card,
body.dark-mode .tracking-card, body.dark-mode .wallet-card,
body.dark-mode .stat-card, body.dark-mode .service-card,
body.dark-mode .overview-card, body.dark-mode .summary-card,
body.dark-mode .profile-card, body.dark-mode .user-info-card,
body.dark-mode .order-detail-card, body.dark-mode .order-info-card,
body.dark-mode .section-toggle, body.dark-mode .collapsible-header,
body.dark-mode .dashboard-stat-card, body.dark-mode .balance-card {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
    border: 1px solid #162032 !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}
body.dark-mode .card-header, body.dark-mode .card-footer,
body.dark-mode .panel-heading, body.dark-mode .panel-footer {
    background: #0A1018 !important;
    border-color: #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .sidenav-menu, body.dark-mode .sidebar,
body.dark-mode .sidebar-menu, body.dark-mode .infor-sidebar,
body.dark-mode .side-nav, body.dark-mode #sidenav-menu {
    background: #060A10 !important;
    border-right: 1px solid #162032 !important;
}
body.dark-mode .sidenav-menu .menu-link,
body.dark-mode .sidebar-link, body.dark-mode .menu-link {
    color: #C0C0C0 !important;
}
body.dark-mode .sidenav-menu .menu-link:hover,
body.dark-mode .sidebar-link:hover,
body.dark-mode .menu-link.active {
    color: #00FFFF !important;
    background: rgba(0,255,255,0.1) !important;
}
body.dark-mode .profile-item, body.dark-mode .profile-info,
body.dark-mode .user-info {
    background: #0A1018 !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .profile-item .balance,
body.dark-mode .profile-item .balance a {
    color: #00FFFF !important;
}
body.dark-mode .navbar, body.dark-mode .navbar-nav,
body.dark-mode #header, body.dark-mode .logo-brand {
    background: #060A10 !important;
}
body.dark-mode table, body.dark-mode .table,
body.dark-mode table tr, body.dark-mode table td, body.dark-mode table th {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
    border-color: #162032 !important;
}
body.dark-mode table thead, body.dark-mode .table thead {
    background-color: #060A10 !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #060A10 !important;
}
body.dark-mode .table-hover > tbody > tr:hover {
    background-color: #060A10 !important;
}
body.dark-mode .form-control, body.dark-mode input,
body.dark-mode select, body.dark-mode textarea {
    background: #060A10 !important;
    color: #FFFFFF !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .form-control:focus {
    border-color: #00FFFF !important;
    box-shadow: 0 0 0 2px rgba(0,255,255,0.2) !important;
}
body.dark-mode .input-group-text {
    background: #060A10 !important;
    border-color: #162032 !important;
    color: #00FFFF !important;
}
body.dark-mode .modal-content {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .modal-header {
    background: #060A10 !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .modal-body { background: #0A1018 !important; }
body.dark-mode .modal-footer {
    background: #060A10 !important;
    border-top: 1px solid #162032 !important;
}
body.dark-mode .dropdown-menu {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .dropdown-item { color: #FFFFFF !important; }
body.dark-mode .dropdown-item:hover {
    background: #060A10 !important; color: #00FFFF !important;
}
body.dark-mode .page-link {
    background: #0A1018 !important;
    border-color: #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .page-link:hover {
    background: #060A10 !important; color: #00FFFF !important;
}
body.dark-mode .page-item.active .page-link {
    background: #00FFFF !important;
    border-color: #00FFFF !important;
    color: #060A10 !important;
}
body.dark-mode .nav-tabs { border-bottom-color: #162032 !important; }
body.dark-mode .nav-tabs .nav-link { color: #C0C0C0 !important; }
body.dark-mode .nav-tabs .nav-link.active {
    background: #0A1018 !important;
    border-color: #162032 #162032 #0A1018 !important;
    color: #00FFFF !important;
}
body.dark-mode .btn-primary { background: #00FFFF !important; border-color: #00FFFF !important; color: #060A10 !important; }
body.dark-mode .btn-danger { background: #FF3366 !important; border-color: #FF3366 !important; color: #FFFFFF !important; }
body.dark-mode .btn-success { background: #00CC66 !important; border-color: #00CC66 !important; color: #FFFFFF !important; }
body.dark-mode .btn-light { background: #060A10 !important; border-color: #162032 !important; color: #FFFFFF !important; }
body.dark-mode a { color: #00FFFF !important; }
body.dark-mode a:hover { color: #66FFFF !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4,
body.dark-mode p, body.dark-mode span, body.dark-mode label {
    color: #FFFFFF !important;
}
body.dark-mode .text-muted { color: #060A10 !important; }
body.dark-mode .text-dark { color: #FFFFFF !important; }
body.dark-mode .btn-outline-primary { border-color: #00FFFF !important; color: #00FFFF !important; }
body.dark-mode .btn-outline-primary:hover { background: #00FFFF !important; color: #060A10 !important; }
body.dark-mode .badge-primary { background: #00FFFF !important; color: #060A10 !important; }
body.dark-mode .badge-danger { background: #FF3366 !important; }
body.dark-mode .badge-success { background: #00CC66 !important; }
body.dark-mode .list-group-item { background: #0A1018 !important; border-color: #162032 !important; }
body.dark-mode .progress { background: #060A10 !important; }
body.dark-mode .progress-bar { background: #00FFFF !important; }
body.dark-mode .breadcrumb { background: #060A10 !important; }
body.dark-mode footer, body.dark-mode .footer {
    background: #060A10 !important;
    border-top: 1px solid #162032 !important;
}
body.dark-mode hr { border-color: #162032 !important; }
body.dark-mode .detail-label { color: #060A10 !important; }
body.dark-mode .detail-value { color: #FFFFFF !important; }
body.dark-mode .detail-value .amount { color: #00FFFF !important; }
body.dark-mode .detail-value .amount-danger { color: #FF3366 !important; }
body.dark-mode .order-detail-row.highlight-total {
    background: #00FFFF !important; color: #060A10 !important;
}
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"] {
    background: #0A1018 !important;
}
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"] {
    background: #060A10 !important;
}
body.dark-mode [style*="background: #f0f4f5"],
body.dark-mode [style*="background:#f0f4f5"] {
    background: #060A10 !important;
}


/* === SUPPLEMENT 14 - Clone mau sac C69 dark mode === */
body.dark-mode { background-color: #060A10 !important; color: #FFFFFF !important; }
body.dark-mode .main-content, body.dark-mode .content-area,
body.dark-mode .content-wrapper, body.dark-mode .page-content,
body.dark-mode div.content-wrap { background-color: #060A10 !important; }
body.dark-mode .card, body.dark-mode .panel,
body.dark-mode .dashboard-card, body.dark-mode .order-card,
body.dark-mode .tracking-card, body.dark-mode .wallet-card,
body.dark-mode .stat-card, body.dark-mode .summary-card,
body.dark-mode .profile-card, body.dark-mode .balance-card,
body.dark-mode .order-detail-card,
body.dark-mode .section-toggle, body.dark-mode .collapsible-header,
body.dark-mode .dashboard-stat-card {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .card-header, body.dark-mode .card-footer {
    background: #0A1018 !important;
    border-color: #162032 !important;
}
body.dark-mode .sidenav-menu, body.dark-mode .sidebar,
body.dark-mode .sidebar-menu, body.dark-mode .infor-sidebar,
body.dark-mode .side-nav, body.dark-mode #sidenav-menu {
    background: #060A10 !important;
    border-right: 1px solid #162032 !important;
}
body.dark-mode .sidenav-menu .menu-link,
body.dark-mode .sidebar-link, body.dark-mode .menu-link {
    color: #C0C0C0 !important;
}
body.dark-mode .sidenav-menu .menu-link:hover,
body.dark-mode .sidebar-link:hover,
body.dark-mode .menu-link.active {
    color: #00FFFF !important;
    background: rgba(0,255,255,0.1) !important;
}
body.dark-mode .profile-item, body.dark-mode .profile-info {
    background: #0A1018 !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .profile-item .balance,
body.dark-mode .profile-item .balance a { color: #00FFFF !important; }
body.dark-mode .navbar, body.dark-mode #header {
    background: #060A10 !important;
}
body.dark-mode table, body.dark-mode .table,
body.dark-mode table tr, body.dark-mode table td, body.dark-mode table th {
    background-color: #0A1018 !important;
    color: #FFFFFF !important;
    border-color: #162032 !important;
}
body.dark-mode table thead, body.dark-mode .table thead {
    background-color: #060A10 !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #060A10 !important;
}
body.dark-mode .table-hover > tbody > tr:hover {
    background-color: #060A10 !important;
}
body.dark-mode .form-control, body.dark-mode input,
body.dark-mode select, body.dark-mode textarea {
    background: #060A10 !important;
    color: #FFFFFF !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .form-control:focus {
    border-color: #00FFFF !important;
    box-shadow: 0 0 0 2px rgba(0,255,255,0.2) !important;
}
body.dark-mode .input-group-text {
    background: #060A10 !important;
    border-color: #162032 !important;
    color: #00FFFF !important;
}
body.dark-mode .modal-content, body.dark-mode .modal-body {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .modal-header {
    background: #060A10 !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .modal-footer {
    background: #060A10 !important;
    border-top: 1px solid #162032 !important;
}
body.dark-mode .dropdown-menu {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .dropdown-item { color: #FFFFFF !important; }
body.dark-mode .dropdown-item:hover {
    background: #060A10 !important; color: #00FFFF !important;
}
body.dark-mode .page-link {
    background: #0A1018 !important;
    border-color: #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .page-link:hover {
    background: #060A10 !important; color: #00FFFF !important;
}
body.dark-mode .page-item.active .page-link {
    background: #00FFFF !important;
    border-color: #00FFFF !important;
    color: #060A10 !important;
}
body.dark-mode .nav-tabs .nav-link { color: #C0C0C0 !important; }
body.dark-mode .nav-tabs .nav-link.active {
    background: #0A1018 !important;
    border-color: #162032 !important;
    color: #00FFFF !important;
}
body.dark-mode .btn-primary {
    background: #00FFFF !important; border-color: #00FFFF !important;
    color: #060A10 !important;
}
body.dark-mode .btn-danger {
    background: #FF3366 !important; border-color: #FF3366 !important;
    color: #FFFFFF !important;
}
body.dark-mode .btn-success {
    background: #00CC66 !important; border-color: #00CC66 !important;
    color: #FFFFFF !important;
}
body.dark-mode .btn-light {
    background: #060A10 !important; border-color: #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode a { color: #00FFFF !important; }
body.dark-mode a:hover { color: #66FFFF !important; }
body.dark-mode .text-muted { color: #060A10 !important; }
body.dark-mode .text-dark { color: #FFFFFF !important; }
body.dark-mode .btn-outline-primary {
    border-color: #00FFFF !important; color: #00FFFF !important;
}
body.dark-mode .btn-outline-primary:hover {
    background: #00FFFF !important; color: #060A10 !important;
}
body.dark-mode .badge-primary {
    background: #00FFFF !important; color: #060A10 !important;
}
body.dark-mode .badge-danger { background: #FF3366 !important; }
body.dark-mode .badge-success { background: #00CC66 !important; }
body.dark-mode .list-group-item {
    background: #0A1018 !important;
    border-color: #162032 !important;
}
body.dark-mode .progress { background: #060A10 !important; }
body.dark-mode .progress-bar { background: #00FFFF !important; }
body.dark-mode .breadcrumb { background: #060A10 !important; }
body.dark-mode footer, body.dark-mode .footer {
    background: #060A10 !important;
    border-top: 1px solid #162032 !important;
}
body.dark-mode hr { border-color: #162032 !important; }
body.dark-mode .detail-label { color: #060A10 !important; }
body.dark-mode .detail-value { color: #FFFFFF !important; }
body.dark-mode .detail-value .amount { color: #00FFFF !important; }
body.dark-mode .detail-value .amount-danger { color: #FF3366 !important; }
body.dark-mode .order-detail-row.highlight-total {
    background: #00FFFF !important; color: #060A10 !important;
}
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"] {
    background: #0A1018 !important;
}
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"] {
    background: #060A10 !important;
}
body.dark-mode [style*="background: #f0f4f5"],
body.dark-mode [style*="background:#f0f4f5"] {
    background: #060A10 !important;
}
/*# sourceMappingURL=style.css.map */

/* === SUPPLEMENT 15 - INSPECT & FIX TRIET DE DARK MODE === */

/* 1. Global Inline Background Overrides (including rgb and shorthand) */
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:rgb(255, 255, 255)"],
body.dark-mode [style*="background: rgb(255, 255, 255)"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color:rgb(255, 255, 255)"],
body.dark-mode [style*="background-color: rgb(255, 255, 255)"] {
    background: #0A1018 !important;
    background-color: #0A1018 !important;
}

body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background:rgb(248, 250, 252)"],
body.dark-mode [style*="background: rgb(248, 250, 252)"],
body.dark-mode [style*="background-color: #f8fafc"],
body.dark-mode [style*="background-color:#f8fafc"],
body.dark-mode [style*="background-color:rgb(248, 250, 252)"],
body.dark-mode [style*="background-color: rgb(248, 250, 252)"] {
    background: #060A10 !important;
    background-color: #060A10 !important;
}

body.dark-mode [style*="background: #f1f5f9"],
body.dark-mode [style*="background:#f1f5f9"],
body.dark-mode [style*="background:rgb(241, 245, 249)"],
body.dark-mode [style*="background: rgb(241, 245, 249)"],
body.dark-mode [style*="background-color: #f1f5f9"],
body.dark-mode [style*="background-color:#f1f5f9"],
body.dark-mode [style*="background-color:rgb(241, 245, 249)"],
body.dark-mode [style*="background-color: rgb(241, 245, 249)"] {
    background: #060A10 !important;
    background-color: #060A10 !important;
}

/* 2. Muted Text Color Overrides for better contrast on dark background */
body.dark-mode .text-muted,
body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: rgb(100, 116, 139)"],
body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color:#475569"],
body.dark-mode [style*="color: rgb(71, 85, 105)"],
body.dark-mode [style*="color: #94a3b8"],
body.dark-mode [style*="color:#94a3b8"],
body.dark-mode [style*="color: rgb(148, 163, 184)"] {
    color: #C0C0C0 !important;
}

body.dark-mode [style*="color: #1e293b"],
body.dark-mode [style*="color:#1e293b"],
body.dark-mode [style*="color: rgb(30, 41, 59)"],
body.dark-mode [style*="color: #0f172a"],
body.dark-mode [style*="color:#0f172a"],
body.dark-mode [style*="color: rgb(15, 23, 42)"] {
    color: #FFFFFF !important;
}

/* 3. Border Color Overrides */
body.dark-mode [style*="border: 1px solid #cbd5e1"],
body.dark-mode [style*="border: 1px solid #e2e8f0"],
body.dark-mode [style*="border: 1px solid #cbd5e1"],
body.dark-mode [style*="border:1px solid #cbd5e1"],
body.dark-mode [style*="border: 1.5px solid #cbd5e1"],
body.dark-mode [style*="border: 1.5px solid #e2e8f0"],
body.dark-mode [style*="border: 1px solid #f1f5f9"],
body.dark-mode [style*="border:1px solid #f1f5f9"] {
    border-color: #162032 !important;
}

/* 4. Home Page (/) Specific Overrides */
body.dark-mode .home-landing {
    background: #060A10 !important;
    background-color: #060A10 !important;
    color: #FFFFFF !important;
}
body.dark-mode .home-landing header {
    background: rgba(6, 10, 16, 0.9) !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .home-landing header nav a {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing header nav a:hover {
    color: #00FFFF !important;
}
body.dark-mode .home-landing .hero-section {
    background: linear-gradient(180deg, #0A1018 0%, #060A10 100%) !important;
}
body.dark-mode .home-landing .hero-section h1 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing .hero-section p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section {
    background: #060A10 !important;
    color: #FFFFFF !important;
    border-color: #162032 !important;
}
body.dark-mode .home-landing section:nth-of-type(even) {
    background: #060A10 !important;
}
body.dark-mode .home-landing section#services {
    background: #060A10 !important;
}
body.dark-mode .home-landing section#services .card {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#services .card h3 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#services .card p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#services .card ul li {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#advantages {
    background: #060A10 !important;
    border-top: 1px solid #162032 !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#advantages h2 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#advantages p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#advantages .col-12.col-md-6.col-lg-4 div {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#advantages .col-12.col-md-6.col-lg-4 div h3 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#advantages .col-12.col-md-6.col-lg-4 div p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#advantages .row.mt-5.pt-5 {
    border-top: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#advantages .row.mt-5.pt-5 .col-6.col-md-3 div {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#advantages .row.mt-5.pt-5 .col-6.col-md-3 div:first-child {
    color: #00FFFF !important;
}
body.dark-mode .home-landing section#calculator {
    background: #060A10 !important;
}
body.dark-mode .home-landing section#calculator h2 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#calculator p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#calculator .col-12.col-md-4 > div {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#calculator .col-12.col-md-4 > div h3 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#calculator .col-12.col-md-4 > div div {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#calculator .col-12.col-md-4 > div div[style*="background: #f8fafc"],
body.dark-mode .home-landing section#calculator .col-12.col-md-4 > div div[style*="background:#f8fafc"] {
    background: #060A10 !important;
}
body.dark-mode .home-landing section#calculator .col-12.col-md-4 > div div[style*="background: #f8fafc"] span {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#calculator .col-12.col-md-4 > div div[style*="background: #f8fafc"] strong {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#calculator .col-12.col-md-4 > div ul li {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#calculator .card {
    border: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#calculator .card div[style*="background: #ffffff"],
body.dark-mode .home-landing section#calculator .card div[style*="background:#ffffff"] {
    background: #0A1018 !important;
}
body.dark-mode .home-landing section#calculator .card label {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#calculator .card select,
body.dark-mode .home-landing section#calculator .card input {
    background: #060A10 !important;
    color: #FFFFFF !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#calculator .card div[style*="background: #fff5f1"],
body.dark-mode .home-landing section#calculator .card div[style*="background:#fff5f1"] {
    background: #060A10 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#calculator .card div[style*="background: #fff5f1"] div {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#process {
    background: #060A10 !important;
    border-top: 1px solid #162032 !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#process h2 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#process p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#process .col-12.col-md-6.col-lg-4 div {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#process .col-12.col-md-6.col-lg-4 div h3 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#process .col-12.col-md-6.col-lg-4 div p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#extension-tool {
    background: linear-gradient(180deg, #060A10 0%, #060A10 100%) !important;
    border-top: 1px solid #162032 !important;
    border-bottom: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#extension-tool h2 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#extension-tool p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#extension-tool .col-12.col-sm-6 > div {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#extension-tool .col-12.col-sm-6 > div h4 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#extension-tool .col-12.col-sm-6 > div p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#extension-tool .d-flex.flex-column.flex-sm-row.align-items-stretch a.btn-outline-secondary {
    background: #060A10 !important;
    color: #FFFFFF !important;
    border: 2px solid #162032 !important;
}
body.dark-mode .home-landing section#extension-tool div[style*="margin-top: 16px"] {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#faq {
    background: #060A10 !important;
}
body.dark-mode .home-landing section#faq h2 {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#faq p {
    color: #C0C0C0 !important;
}
body.dark-mode .home-landing section#faq div[style*="max-width: 860px"] > div {
    border: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#faq div[style*="max-width: 860px"] > div > div[onClick] {
    background: #0A1018 !important;
}
body.dark-mode .home-landing section#faq div[style*="max-width: 860px"] > div > div[onClick] span {
    color: #FFFFFF !important;
}
body.dark-mode .home-landing section#faq div[style*="max-width: 860px"] > div > div[onClick] span[style*="color: rgb(225, 91, 40)"],
body.dark-mode .home-landing section#faq div[style*="max-width: 860px"] > div > div[onClick] span[style*="color:#e15b28"] {
    color: #00FFFF !important;
}
body.dark-mode .home-landing section#faq div[style*="max-width: 860px"] > div > div[onClick] + div {
    color: #C0C0C0 !important;
    border-top: 1px solid #162032 !important;
}
body.dark-mode .home-landing section#faq .text-center.mt-5 p {
    color: #C0C0C0 !important;
}

/* 5. Dashboard Page Overrides */
body.dark-mode .db-welcome-card {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .db-welcome-card h1 {
    color: #FFFFFF !important;
}
body.dark-mode .db-welcome-card p {
    color: #C0C0C0 !important;
}
body.dark-mode .db-balance-box {
    background: #060A10 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .db-balance-value {
    color: #00FFFF !important;
}
body.dark-mode .db-deposit-btn {
    background: #00FFFF !important;
    color: #060A10 !important;
}
body.dark-mode .db-deposit-btn:hover {
    background: #66FFFF !important;
}

/* 6. Order / Cart / Timeline Specific */
body.dark-mode .modern-order-card {
    background: #0A1018 !important;
    border: 1px solid #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .modern-order-card .text-muted {
    color: #C0C0C0 !important;
}
body.dark-mode .modern-order-card .text-dark {
    color: #FFFFFF !important;
}
body.dark-mode .modern-order-card a {
    color: #00FFFF !important;
}
body.dark-mode .modern-order-card div[style*="background: #f8fafc"],
body.dark-mode .modern-order-card div[style*="background:#f8fafc"] {
    background: #060A10 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .modern-order-card div[style*="background: #f8fafc"] strong {
    color: #FFFFFF !important;
}
body.dark-mode .modern-order-card div[style*="background: #fef2f2"],
body.dark-mode .modern-order-card div[style*="background:#fef2f2"] {
    background: #5A1A30 !important;
    border: 1px solid #7c1a2e !important;
    color: #ff9999 !important;
}
body.dark-mode .modern-order-card div[style*="background: #fef2f2"] strong {
    color: #ffffff !important;
}

/* 7. Collapsible section headers */
body.dark-mode .card-header.bg-white {
    background: #0A1018 !important;
    border-bottom: 1px solid #162032 !important;
}

/* 8. Order Detail Page note banner */
body.dark-mode div[style*="linear-gradient(135deg, #fef2f2"],
body.dark-mode div[style*="background: linear-gradient(135deg, #fef2f2"] {
    background: linear-gradient(135deg, #5A1A30 0%, #4c1424 100%) !important;
    border: 1.5px solid #7c1a2e !important;
    color: #ff9999 !important;
}
body.dark-mode div[style*="linear-gradient(135deg, #fef2f2"] span[style*="background: #fee2e2"] {
    background: #7c1a2e !important;
    color: #ffffff !important;
}
body.dark-mode div[style*="linear-gradient(135deg, #fef2f2"] span[style*="background: #fecdd3"] {
    background: #8c1d40 !important;
    color: #ffffff !important;
}

/* 9. Timeline Steps */
body.dark-mode .timeline-step div[style*="background: #cbd5e1"],
body.dark-mode .timeline-step div[style*="background: rgb(203, 213, 225)"],
body.dark-mode .modern-timeline div[style*="background: #cbd5e1"],
body.dark-mode .modern-timeline div[style*="background: rgb(203, 213, 225)"],
body.dark-mode .modern-timeline div[style*="background: #e2e8f0"],
body.dark-mode .modern-timeline div[style*="background: rgb(226, 232, 240)"] {
    background: #162032 !important;
}
body.dark-mode .timeline-step div[style*="background: #10b981"],
body.dark-mode .timeline-step div[style*="background: rgb(16, 185, 129)"] {
    background: #00CC66 !important;
}
body.dark-mode .timeline-step div[style*="background: #2563eb"],
body.dark-mode .timeline-step div[style*="background: rgb(37, 99, 235)"] {
    background: #00FFFF !important;
    color: #060A10 !important;
}
body.dark-mode .timeline-step div[style*="background: #f1f5f9"],
body.dark-mode .timeline-step div[style*="background: rgb(241, 245, 249)"] {
    background: #060A10 !important;
    border-color: #162032 !important;
    color: #C0C0C0 !important;
}
body.dark-mode .timeline-step div[style*="color: #0f172a"] {
    color: #FFFFFF !important;
}

/* 10. DevTicketModal Overrides */
body.dark-mode .dev-ticket-modal-overlay {
    background: rgba(10, 5, 20, 0.75) !important;
}
body.dark-mode .dev-ticket-modal-container {
    background: #0A1018 !important;
    color: #FFFFFF !important;
    border: 1px solid #162032 !important;
}
body.dark-mode .dt-tab-wrapper {
    background: #060A10 !important;
}
body.dark-mode .dt-tab-container {
    background: #060A10 !important;
}
body.dark-mode .dt-tab-btn {
    color: #C0C0C0 !important;
}
body.dark-mode .dt-tab-btn.active {
    background: #0A1018 !important;
    color: #00FFFF !important;
}
body.dark-mode .dt-input {
    background: #060A10 !important;
    color: #FFFFFF !important;
    border: 1.5px solid #162032 !important;
}
body.dark-mode .dt-type-toggle {
    background: #060A10 !important;
    border: 2px solid #162032 !important;
}
body.dark-mode .dt-type-toggle.active-bug {
    background: #5A1A30 !important;
    border-color: #ef4444 !important;
}
body.dark-mode .dt-type-toggle.active-feature {
    background: #060A10 !important;
    border-color: #060A10 !important;
}
body.dark-mode .dt-priority-btn {
    background: #060A10 !important;
    border: 1.5px solid #162032 !important;
    color: #C0C0C0 !important;
}
body.dark-mode .dt-priority-btn.active-priority {
    border-color: currentColor !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode .dt-ticket-card {
    background: #060A10 !important;
    border: 1.5px solid #162032 !important;
}
body.dark-mode .dt-ticket-card.selected {
    background: #060A10 !important;
    border-color: #00FFFF !important;
}
body.dark-mode .dt-ticket-card-title {
    color: #FFFFFF !important;
}
body.dark-mode .dt-detail-box {
    background: #060A10 !important;
    border: 1px solid #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode .dt-pre-box {
    background: #060A10 !important;
    color: #FFFFFF !important;
}
body.dark-mode .dt-upload-area {
    background: #060A10 !important;
    border: 2px dashed #162032 !important;
}

/* Fix empty state or text colors inside DevTicket */
body.dark-mode label[style*="color: #374151"] {
    color: #C0C0C0 !important;
}
body.dark-mode div[style*="color: #0f172a"] {
    color: #FFFFFF !important;
}
body.dark-mode div[style*="color: #1e293b"] {
    color: #FFFFFF !important;
}
body.dark-mode div[style*="color: #475569"] {
    color: #C0C0C0 !important;
}
body.dark-mode span[style*="color: #3b82f6"] {
    color: #00FFFF !important;
}

/* ====== DevTicketModal — comprehensive dark mode overrides ====== */

/* Modal container body area */
body.dark-mode .dev-ticket-modal-container div[style*="overflow-y: auto"] {
    background: #060A10 !important;
    color: #FFFFFF !important;
}

/* Tab body wrapper */
body.dark-mode .dt-tab-wrapper + div[style*="overflow-y"] {
    background: #060A10 !important;
}

/* Select filters */
body.dark-mode .dev-ticket-modal-container select {
    background: #060A10 !important;
    color: #FFFFFF !important;
    border: 1.5px solid #162032 !important;
}

/* Divider line in detail panel */
body.dark-mode div[style*="border-left: 1.5px solid #f1f5f9"] {
    border-left-color: #162032 !important;
}

/* Back button */
body.dark-mode button[style*="background: #f1f5f9"] {
    background: #060A10 !important;
    color: #C0C0C0 !important;
    border: 1px solid #162032 !important;
}
body.dark-mode button[style*="background: #f1f5f9"] i {
    color: #C0C0C0 !important;
}

/* Review panel boxes */
body.dark-mode div[style*="background: #f8fafc"] {
    background: #060A10 !important;
    border-color: #162032 !important;
    color: #FFFFFF !important;
}
body.dark-mode div[style*="background: #f8fafc"] strong {
    color: #FFFFFF !important;
}

/* Steps pre block */
body.dark-mode pre[style*="background: #f1f5f9"] {
    background: #060A10 !important;
    color: #C0C0C0 !important;
    border: 1px solid #162032 !important;
}

/* Image border backgrounds */
body.dark-mode img[style*="border: 1px solid #cbd5e1"] {
    border-color: #162032 !important;
}
body.dark-mode img[style*="background: #f8fafc"] {
    background: #060A10 !important;
}

/* AI instructions textarea special bg */
body.dark-mode textarea[style*="background: #060A10"] {
    background: #060A10 !important;
    border-color: #060A10 !important;
    color: #FFFFFF !important;
}

/* AI badge */
body.dark-mode span[style*="background: #060A10"] {
    background: #060A10 !important;
    color: #060A10 !important;
}

/* Manager note yellow box */
body.dark-mode div[style*="background: #fffbeb"] {
    background: #3A2A1A !important;
    border-color: #5B4A22 !important;
    color: #FFD966 !important;
}
body.dark-mode div[style*="border: 1px solid #fde68a"] {
    border-color: #5B4A22 !important;
}

/* Upload area */
body.dark-mode label[style*="border: 2px dashed #cbd5e1"] {
    background: #060A10 !important;
    border-color: #162032 !important;
}
body.dark-mode label[style*="border: 2px dashed #cbd5e1"] i {
    color: #C0C0C0 !important;
}

/* Spinner */
body.dark-mode span[style*="border: 2px solid #e2e8f0"] {
    border-color: #162032 !important;
    border-top-color: #00FFFF !important;
}

/* Empty state */
body.dark-mode i.fa-inbox {
    color: #162032 !important;
}

/* Image icon in ticket card */
body.dark-mode span[style*="color: #3b82f6"] i.fa-image {
    color: #00FFFF !important;
}

/* Priority pills and status badges custom styles for dark mode */
body.dark-mode .dt-badge-priority.dt-badge-medium {
    background-color: #FFC107 !important;
    background: #FFC107 !important;
    color: #FFFFFF !important;
    border-color: #FFC107 !important;
}
body.dark-mode .dt-badge-priority.dt-badge-high {
    background-color: #FF9800 !important;
    background: #FF9800 !important;
    color: #FFFFFF !important;
    border-color: #FF9800 !important;
}
body.dark-mode .dt-badge-priority.dt-badge-critical {
    background-color: #F44336 !important;
    background: #F44336 !important;
    color: #FFFFFF !important;
    border-color: #F44336 !important;
}
body.dark-mode .dt-badge-status.dt-badge-done,
body.dark-mode .badge-success,
body.dark-mode .badge-pastel-success {
    background-color: #4CAF50 !important;
    background: #4CAF50 !important;
    color: #FFFFFF !important;
    border-color: #4CAF50 !important;
}

/* Type toggle hover bg override */
body.dark-mode div[style*="background: #fef2f2"] {
    background: #5A1A30 !important;
}
body.dark-mode div[style*="background: #060A10"] {
    background: #060A10 !important;
}

/* Loading text */
body.dark-mode div[style*="color: #94a3b8"] {
    color: #060A10 !important;
}

/* Priority button label - default text */
body.dark-mode button[style*="color: #94a3b8"] {
    color: #060A10 !important;
}

/* Detail panel section headers (uppercase muted) */
body.dark-mode div[style*="text-transform: uppercase"] {
    color: #060A10 !important;
}

/* Ticket card title inline */
body.dark-mode .dt-ticket-card div[style*="color: #0f172a"] {
    color: #FFFFFF !important;
}
body.dark-mode .dt-ticket-card div[style*="color: #94a3b8"] {
    color: #060A10 !important;
}

/* Back button hover state - use jsx class instead */
body.dark-mode .dev-ticket-modal-container button:not([style*="linear-gradient"]):not([style*="position: absolute"]) {
    background: #060A10 !important;
    color: #C0C0C0 !important;
    border-color: #162032 !important;
}



/* =============================================================================
   CUSTOM C69 PALETTE OVERRIDES - ADDED BY ANTIGRAVITY AGENT
   ============================================================================= */
body.dark-mode ol.breadcrumb,
body.dark-mode .item-flash,
body.dark-mode .news-ck .content-left,
body.dark-mode .news-ck .content-right,
body.dark-mode .banner-chietkhau nav,
body.dark-mode .banner-chietkhau .banner-small,
body.dark-mode .banner-chietkhau .banner-left,
body.dark-mode .mobile-order-card,
body.dark-mode .mobile-order-note-box,
body.dark-mode .card .card-header,
body.dark-mode select option {
  background-color: #0A1018 !important;
  background: #0A1018 !important;
  color: #FFFFFF !important;
  border-color: #162032 !important;
}

body.dark-mode #header .nav-link > .fa.fa-bell,
body.dark-mode #header .status-mobile,
body.dark-mode #header .status-mobile .main-btn,
body.dark-mode .banner-chietkhau nav ul li a {
  color: #FFFFFF !important;
}

body.dark-mode .banner-chietkhau nav ul li a:hover {
  color: #00FFFF !important;
}

/* =============================================================================
   DARK MODE FORM INPUTS & ATTRIBUTE SELECTORS FIX
   ============================================================================= */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #060A10 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #162032 !important;
}

body.dark-mode div[style*="background: #fff"],
body.dark-mode span[style*="background: #fff"],
body.dark-mode div[style*="background: #f8fafc"],
body.dark-mode div[style*="background: #f1f5f9"] {
  background: #060A10 !important;
  background-color: #060A10 !important;
}

body.dark-mode div[style*="color: #0f172a"],
body.dark-mode div[style*="color: #1e293b"],
body.dark-mode div[style*="color: #475569"],
body.dark-mode div[style*="color: #94a3b8"] {
  color: #FFFFFF !important;
}



/* =============================================================================
   KRYPHOS MASTER UNIFIED CATCH-ALL DARK MODE SYSTEM
   Forces 100% Obsidian Slate (#060A10 / #0A1018 / #0F1825) & Emerald Accent (#00FF87)
   Eliminates ALL #060A10, white, light grey, or mismatched colored patches!
   ============================================================================= */

/* Universal Background Overrides */
body.dark-mode,
body.dark-mode *,
body.dark-mode #wrapper,
body.dark-mode #page-wrapper,
body.dark-mode main,
body.dark-mode div.content,
body.dark-mode .main-wrapper,
body.dark-mode .app-container {
  border-color: #162032;
}

/* Base Body & Layout Containers */
body.dark-mode,
body.dark-mode #wrapper,
body.dark-mode #page-wrapper,
body.dark-mode main#main,
body.dark-mode #main,
body.dark-mode .dashboard-page,
body.dark-mode .cart-page,
body.dark-mode .order-page,
body.dark-mode .kienhang-page,
body.dark-mode .info-page,
body.dark-mode .home-landing,
body.dark-mode .bg-light,
body.dark-mode .bg-white,
body.dark-mode .bg-gray,
body.dark-mode .bg-slate {
  background-color: #060A10 !important;
  background: #060A10 !important;
  color: #E8EDF5 !important;
}

/* Card, Panel, Modal, Widget & Box Containers */
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .panel,
body.dark-mode .panel-heading,
body.dark-mode .panel-body,
body.dark-mode .panel-footer,
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-body,
body.dark-mode .modal-footer,
body.dark-mode .box,
body.dark-mode .widget,
body.dark-mode .stat-box,
body.dark-mode .info-box,
body.dark-mode .summary-box,
body.dark-mode .tab-content,
body.dark-mode .tab-pane,
body.dark-mode .dropdown-menu,
body.dark-mode .select2-dropdown,
body.dark-mode .select2-container--default .select2-results,
body.dark-mode .alert,
body.dark-mode .toast,
body.dark-mode .popover,
body.dark-mode .tooltip-inner {
  background-color: #0A1018 !important;
  background: #0A1018 !important;
  border-color: #162032 !important;
  color: #E8EDF5 !important;
}

/* Table Overrides */
body.dark-mode table,
body.dark-mode .table,
body.dark-mode .table-responsive,
body.dark-mode .table-bordered,
body.dark-mode .table-striped {
  background-color: #0A1018 !important;
  color: #E8EDF5 !important;
  border-color: #162032 !important;
}

body.dark-mode table th,
body.dark-mode table td,
body.dark-mode .table th,
body.dark-mode .table td {
  background-color: #0A1018 !important;
  color: #E8EDF5 !important;
  border-color: #162032 !important;
}

body.dark-mode table thead th,
body.dark-mode .table thead th {
  background-color: #0F1825 !important;
  color: #E8EDF5 !important;
  border-bottom: 2px solid #162032 !important;
}

body.dark-mode table tbody tr:nth-of-type(even),
body.dark-mode .table-striped tbody tr:nth-of-type(even) {
  background-color: #080D14 !important;
}

body.dark-mode table tbody tr:hover,
body.dark-mode .table tbody tr:hover {
  background-color: #0F1825 !important;
}

/* Inputs, Selects, Textareas */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .custom-select,
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: #0F1825 !important;
  background: #0F1825 !important;
  color: #E8EDF5 !important;
  border: 1px solid #162032 !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  border-color: #00FF87 !important;
  box-shadow: 0 0 0 3px rgba(0, 255, 135, 0.2) !important;
}

/* Master Attribute Selector Catch-all for Inline Styles */
body.dark-mode [style*="background: #"],
body.dark-mode [style*="background-color: #"],
body.dark-mode [style*="background: rgb"],
body.dark-mode [style*="background-color: rgb"],
body.dark-mode [style*="background: linear-gradient"] {
  background: #0F1825 !important;
  background-color: #0F1825 !important;
  border-color: #162032 !important;
  color: #E8EDF5 !important;
}

/* Primary Accent Override (Keep Emerald Neon Buttons & Badges Glow) */
body.dark-mode .btn-primary,
body.dark-mode .btn-main,
body.dark-mode .btn-brand,
body.dark-mode button.btn-primary,
body.dark-mode input[type="submit"].btn-primary,
body.dark-mode a.btn-primary {
  background: linear-gradient(135deg, #00FF87 0%, #00C9FF 100%) !important;
  background-color: #00FF87 !important;
  color: #060A10 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 0 16px rgba(0, 255, 135, 0.3) !important;
}

body.dark-mode .badge-success,
body.dark-mode .badge-primary {
  background: rgba(0, 255, 135, 0.12) !important;
  color: #00FF87 !important;
  border: 1px solid rgba(0, 255, 135, 0.3) !important;
}

body.dark-mode .badge-info,
body.dark-mode .badge-secondary {
  background: rgba(0, 201, 255, 0.12) !important;
  color: #00C9FF !important;
  border: 1px solid rgba(0, 201, 255, 0.3) !important;
}

/* Text Colors */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode p, body.dark-mode span, body.dark-mode div, body.dark-mode label,
body.dark-mode td, body.dark-mode th, body.dark-mode li, body.dark-mode a {
  color: #E8EDF5;
}

body.dark-mode .text-muted,
body.dark-mode .text-secondary,
body.dark-mode small,
body.dark-mode .subtext {
  color: #7A8FA8 !important;
}