/* =========================================================
   APEXMED BLUE LUXURY THEME
   Chỉ tác động khu vực app sau đăng nhập.
   ========================================================= */

:root {
  --am-navy: #041b55;
  --am-navy-2: #072b78;
  --am-blue: #075df5;
  --am-blue-2: #0a73ff;
  --am-cyan: #20c7ff;

  --am-bg: #f5f9ff;
  --am-card: #ffffff;
  --am-line: #dbe8ff;

  --am-text: #09225a;
  --am-muted: #6d7fa7;

  --am-green: #19a66a;
  --am-orange: #ef9500;
  --am-red: #e5484d;

  --am-shadow:
    0 10px 30px rgba(13, 75, 170, .08);

  --am-shadow-hover:
    0 15px 35px rgba(0, 95, 255, .15);
}


/* ================= APP ================= */

.app-shell {
  background:
    radial-gradient(
      circle at 92% 95%,
      rgba(24, 133, 255, .12),
      transparent 24%
    ),
    #f7faff !important;

  color: var(--am-text);
  min-height: 100vh;
}


/* ================= SIDEBAR ================= */

.sidebar {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #03184b 0%,
      #063c9f 52%,
      #0349c8 100%
    ) !important;

  border-right:
    1px solid rgba(57, 153, 255, .35);

  box-shadow:
    10px 0 34px rgba(1, 44, 123, .14);
}

.sidebar::before {
  content: "";
  position: absolute;

  width: 190px;
  height: 190px;

  left: -105px;
  top: -65px;

  border-radius: 50%;

  border:
    2px solid rgba(29, 200, 255, .65);

  box-shadow:
    0 0 28px rgba(0, 199, 255, .5),
    inset 0 0 24px rgba(0, 149, 255, .18);

  pointer-events: none;
}

.sidebar::after {
  content: "+   +\A   +      +\A +     +";
  white-space: pre;

  position: absolute;
  right: -4px;
  bottom: 15px;

  color: rgba(59, 178, 255, .16);

  font-size: 62px;
  line-height: .88;

  pointer-events: none;
}

.brand {
  position: relative;
  z-index: 2;

  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .5px;
}

.brand small {
  color: #a8d4ff !important;
}

.nav-btn {
  position: relative;
  z-index: 2;

  border:
    1px solid transparent !important;

  border-radius:
    11px !important;

  color:
    #d9e8ff !important;

  background:
    transparent !important;

  transition:
    .18s ease !important;
}

.nav-btn:hover {
  color:
    #fff !important;

  background:
    rgba(33, 120, 255, .18) !important;

  border-color:
    rgba(56, 173, 255, .25) !important;
}

.nav-btn.active {
  color:
    #fff !important;

  background:
    linear-gradient(
      135deg,
      #0876ff,
      #0756e7
    ) !important;

  border-color:
    #22baff !important;

  box-shadow:
    0 0 18px rgba(0, 182, 255, .38),
    inset 0 0 12px rgba(255,255,255,.08) !important;
}


/* ================= MAIN ================= */

.main,
.main-content,
.content {
  background:
    transparent !important;
}

.page-title,
.main h1,
.main h2 {
  color:
    #081f57 !important;
}


/* ================= BUTTONS ================= */

.btn {
  border-radius:
    9px !important;

  min-height:
    38px;

  padding:
    8px 15px !important;

  border:
    1px solid #cbdcff !important;

  background:
    #fff !important;

  color:
    #0a55ca !important;

  font-weight:
    700 !important;

  box-shadow:
    0 3px 10px rgba(21, 91, 180, .04);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease !important;
}

.btn:hover {
  transform:
    translateY(-1px);

  border-color:
    #63a7ff !important;

  background:
    #f7fbff !important;

  box-shadow:
    0 8px 18px rgba(0, 97, 235, .12);
}

.btn-blue {
  color:
    #fff !important;

  border-color:
    #1479ff !important;

  background:
    linear-gradient(
      135deg,
      #1584ff 0%,
      #0757df 100%
    ) !important;

  box-shadow:
    0 9px 18px rgba(0, 102, 255, .22) !important;
}

.btn-blue:hover {
  background:
    linear-gradient(
      135deg,
      #2093ff,
      #075de9
    ) !important;

  box-shadow:
    0 12px 24px rgba(0, 103, 255, .30) !important;
}


/* ================= FORM ================= */

.input,
input,
select,
textarea {
  border:
    1px solid #cdddf8 !important;

  border-radius:
    9px !important;

  background:
    #fff !important;

  color:
    #0a2358 !important;

  outline:
    none !important;

  transition:
    .16s ease !important;
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color:
    #2b82ff !important;

  box-shadow:
    0 0 0 3px rgba(36, 128, 255, .12) !important;
}


/* ================= CHECKBOX ================= */

input[type="checkbox"] {
  accent-color:
    #0868f6;

  width:
    16px !important;

  height:
    16px !important;

  cursor:
    pointer;
}


/* ================= CARDS / DETAILS ================= */

details {
  border-color:
    #d9e6fb !important;

  border-radius:
    12px !important;

  background:
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 5px 17px rgba(22, 77, 149, .045);

  transition:
    .18s ease;
}

details:hover {
  border-color:
    #b7d4ff !important;

  box-shadow:
    var(--am-shadow);
}

details[open] {
  border-color:
    #b7d4ff !important;
}

summary {
  color:
    #09245d !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f7faff
    ) !important;

  transition:
    background .16s ease !important;
}

summary:hover {
  background:
    #f1f7ff !important;
}


/* ================= TABLE ================= */

.table-wrap {
  border:
    1px solid #dce8fa !important;

  border-radius:
    12px !important;

  overflow:
    auto;

  background:
    #fff;

  box-shadow:
    0 7px 22px rgba(11, 70, 152, .055);
}

table {
  background:
    #fff !important;

  color:
    #15305f !important;
}

thead th {
  background:
    linear-gradient(
      180deg,
      #fbfdff,
      #f3f8ff
    ) !important;

  color:
    #24508d !important;

  border-bottom:
    1px solid #dce8fa !important;

  font-size:
    12px !important;

  letter-spacing:
    .2px;
}

tbody td {
  border-color:
    #e9f0fa !important;
}

tbody tr {
  transition:
    .14s ease;
}

tbody tr:hover {
  background:
    #f5faff !important;
}


/* ================= BADGES ================= */

.badge {
  border-radius:
    999px !important;

  font-weight:
    700 !important;

  padding:
    5px 10px !important;

  border:
    1px solid transparent;
}

.badge-ok {
  color:
    #087343 !important;

  background:
    #eaf9f1 !important;

  border-color:
    #c3efd6 !important;
}

.badge-warn {
  color:
    #a76300 !important;

  background:
    #fff6df !important;

  border-color:
    #ffe2a0 !important;
}


/* ================= NOTICE ================= */

.notice {
  border:
    1px solid #cfe1ff !important;

  background:
    linear-gradient(
      135deg,
      #f3f8ff,
      #fbfdff
    ) !important;

  color:
    #234b85 !important;

  border-radius:
    10px !important;
}


/* ================= MODAL ================= */

.modal,
.modal-content,
.dialog {
  border:
    1px solid #d5e5ff !important;

  border-radius:
    16px !important;

  background:
    #fff !important;

  box-shadow:
    0 30px 80px rgba(6, 51, 127, .22) !important;
}


/* ================= SCROLLBAR ================= */

.app-shell * {
  scrollbar-width:
    thin;

  scrollbar-color:
    #9abcf0 #edf4ff;
}

.app-shell *::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}

.app-shell *::-webkit-scrollbar-thumb {
  background:
    #9bbef4;

  border-radius:
    20px;
}

.app-shell *::-webkit-scrollbar-track {
  background:
    #edf4ff;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {

  .btn {
    min-height:
      36px;

    padding:
      7px 11px !important;
  }

  details {
    border-radius:
      9px !important;
  }
}