/**
 * NgoiSaoSo team
 * @version 3.x
 * @contact: xinchao@ngoisaoso.vn
 * @see https://www.ngoisaoso.vn
 */

/*ADD OTHER*/


:root,
[data-bs-theme=light] {
    --ar-gray-100: #f6f9fc;
    --ar-gray-200: #edf1f5;
    --ar-gray-300: #e3e9ef;
    --ar-gray-400: #d7dde2;
    --ar-gray-500: #b4bbc3;
    --ar-gray-600: #858c97;
    --ar-gray-700: #576071;
    --ar-gray-800: #434a57;
    --ar-gray-900: #121519;
    --ar-primary: #18417c;
    --ar-secondary: #0495da;
    --ar-secondary2: #0cb0ff;
    --ar-success: #3fca90;
    --ar-info: #3f7fca;
    --ar-warning: #edcb50;
    --ar-danger: #ed5050;
    --ar-light: #fff;
    --ar-dark: #121519;
    --ar-primary-rgb: 24, 65, 124;
    --ar-secondary-rgb: 6, 137, 64;
    --ar-success-rgb: 63, 202, 144;
    --ar-info-rgb: 63, 127, 202;
    --ar-warning-rgb: 237, 203, 80;
    --ar-danger-rgb: 237, 80, 80;
    --ar-light-rgb: 255, 255, 255;
    --ar-dark-rgb: 24, 65, 124;
    --ar-primary-text-emphasis: #18417c;
    --ar-secondary-text-emphasis: #0495da;
    --ar-success-text-emphasis: #2ea875;
    --ar-info-text-emphasis: #2e66a8;
    --ar-warning-text-emphasis: #e8bd22;
    --ar-danger-text-emphasis: #e82222;
    --ar-light-text-emphasis: #576071;
    --ar-dark-text-emphasis: #121519;
    --ar-primary-bg-subtle: #ecf4f1;
    --ar-secondary-bg-subtle: #f6f9fc;
    --ar-success-bg-subtle: #ecfaf4;
    --ar-info-bg-subtle: #ecf2fa;
    --ar-warning-bg-subtle: #fdfaee;
    --ar-danger-bg-subtle: #fdeeee;
    --ar-light-bg-subtle: #fff;
    --ar-dark-bg-subtle: #ececed;
    --ar-primary-border-subtle: #dae8e3;
    --ar-secondary-border-subtle: #edf1f5;
    --ar-success-border-subtle: #d9f4e9;
    --ar-info-border-subtle: #d9e5f4;
    --ar-warning-border-subtle: #fbf5dc;
    --ar-danger-border-subtle: #fbdcdc;
    --ar-light-border-subtle: #f6f9fc;
    --ar-dark-border-subtle: #edf1f5;
    --ar-white-rgb: 255, 255, 255;
    --ar-black-rgb: 0, 0, 0;
    --ar-font-sans-serif: "Inter", sans-serif;
    --ar-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --ar-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --ar-root-font-size: 1rem;
    --ar-body-font-family: var(--ar-font-sans-serif);
    --ar-body-font-size: 1rem;
    --ar-body-font-weight: 400;
    --ar-body-line-height: 1.5;
    --ar-body-color: #576071;
    --ar-body-color-rgb: 87, 96, 113;
    --ar-body-bg: #fff;
    --ar-body-bg-rgb: 255, 255, 255;
    --ar-emphasis-color: #000;
    --ar-emphasis-color-rgb: 0, 0, 0;
    --ar-secondary-color: #858c97;
    --ar-secondary-color-rgb: 133, 140, 151;
    --ar-secondary-bg: #edf1f5;
    --ar-secondary-bg-rgb: 237, 241, 245;
    --ar-tertiary-color: rgba(87, 96, 113, 0.5);
    --ar-tertiary-color-rgb: 87, 96, 113;
    --ar-tertiary-bg: #f6f9fc;
    --ar-tertiary-bg-rgb: 246, 249, 252;
    --ar-heading-color: var(--ar-gray-900);
    --ar-link-color: #18417c;
    --ar-link-color-rgb: 24, 65, 124;
    --ar-link-decoration: underline;
    --ar-link-hover-color: #6873b0;
    --ar-link-hover-color-rgb: #18417c;
    --ar-link-hover-decoration: none;
    --ar-code-color: #e3116c;
    --ar-highlight-color: #18417c;
    --ar-highlight-bg: #fff3cd;
    --ar-border-width: 1px;
    --ar-border-style: solid;
    --ar-border-color: #e3e9ef;
    --ar-border-color-translucent: rgba(0, 0, 0, 0.1);
    --ar-border-radius: 1rem;
    --ar-border-radius-sm: calc(var(--ar-border-radius) * 0.75);
    --ar-border-radius-lg: calc(var(--ar-border-radius) * 1.125);
    --ar-border-radius-xl: calc(var(--ar-border-radius) * 1.5);
    --ar-border-radius-xxl: calc(var(--ar-border-radius) * 2.25);
    --ar-border-radius-2xl: var(--ar-border-radius-xxl);
    --ar-border-radius-pill: 50rem;
    --ar-box-shadow: 0 0.4375rem 1.25rem rgba(208, 208, 196, 0.32);
    --ar-box-shadow-sm: 0 0.375rem 0.75rem -0.125rem rgba(208, 208, 196, 0.24);
    --ar-box-shadow-lg: 0 0.5rem 1.75rem -0.125rem rgba(208, 208, 196, 0.48);
    --ar-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --ar-focus-ring-width: 0.25rem;
    --ar-focus-ring-opacity: 0.25;
    --ar-focus-ring-color: rgba(106, 119, 197, 1);
    --ar-form-valid-color: #6976c4;
    --ar-form-valid-border-color: #6976c4;
    --ar-form-invalid-color: #ed5050;
    --ar-form-invalid-border-color: #ed5050
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --ar-body-color: rgba(255, 255, 255, 0.7);
    --ar-body-color-rgb: 255, 255, 255;
    --ar-body-bg: #121519;
    --ar-body-bg-rgb: 18, 21, 25;
    --ar-emphasis-color: #f6f9fc;
    --ar-emphasis-color-rgb: 246, 249, 252;
    --ar-secondary-color: rgba(255, 255, 255, 0.5);
    --ar-secondary-color-rgb: 255, 255, 255;
    --ar-secondary-bg: rgba(255, 255, 255, 0.03);
    --ar-secondary-bg-rgb: 255, 255, 255;
    --ar-tertiary-color: rgba(255, 255, 255, 0.4);
    --ar-tertiary-color-rgb: 255, 255, 255;
    --ar-tertiary-bg: rgba(255, 255, 255, 0.03);
    --ar-tertiary-bg-rgb: 255, 255, 255;
    --ar-primary-text-emphasis: #18417c;
    --ar-secondary-text-emphasis: #edf1f5;
    --ar-success-text-emphasis: #34bc83;
    --ar-info-text-emphasis: #3472bc;
    --ar-warning-text-emphasis: #ebc439;
    --ar-danger-text-emphasis: #eb3939;
    --ar-light-text-emphasis: #edf1f5;
    --ar-dark-text-emphasis: #fff;
    --ar-primary-bg-subtle: #0a1511;
    --ar-secondary-bg-subtle: #434a57;
    --ar-success-bg-subtle: #091e16;
    --ar-info-bg-subtle: #09131e;
    --ar-warning-bg-subtle: #241e0c;
    --ar-danger-bg-subtle: #240c0c;
    --ar-light-bg-subtle: #121519;
    --ar-dark-bg-subtle: #030304;
    --ar-primary-border-subtle: #142a23;
    --ar-secondary-border-subtle: #576071;
    --ar-success-border-subtle: #133d2b;
    --ar-info-border-subtle: #13263d;
    --ar-warning-border-subtle: #473d18;
    --ar-danger-border-subtle: #471818;
    --ar-light-border-subtle: #576071;
    --ar-dark-border-subtle: #434a57;
    --ar-heading-color: #fff;
    --ar-link-color: #cfd5f2;
    --ar-link-hover-color: #d5d8e8;
    --ar-link-color-rgb: 143, 186, 172;
    --ar-link-hover-color-rgb: 165, 200, 189;
    --ar-code-color: #ee70a7;
    --ar-highlight-color: rgba(255, 255, 255, 0.7);
    --ar-highlight-bg: #664d03;
    --ar-border-color: rgba(255, 255, 255, 0.13);
    --ar-border-color-translucent: rgba(255, 255, 255, 0.15);
    --ar-form-valid-color: #6976c4;
    --ar-form-valid-border-color: #6976c4;
    --ar-form-invalid-color: #ed5050;
    --ar-form-invalid-border-color: #ed5050;
}
.navbar {
  --ar-navbar-padding-y: 0.1rem;
}
.btn-primary {
  --ar-btn-bg: var(--ar-primary-text-emphasis);
  --ar-btn-border-color: var(--ar-primary-text-emphasis);
    --ar-btn-hover-bg: var(--ar-primary-text-emphasis);
    --ar-btn-active-bg: var(--ar-secondary-text-emphasis);
    --ar-btn-hover-border-color: var(--ar-primary-text-emphasis);
    --ar-btn-active-border-color: var(--ar-secondary-text-emphasis);
    --ar-btn-disabled-bg: var(--ar-secondary);
    --ar-btn-disabled-border-color: var(--ar-secondary);
}
.btn-outline-primary {
    --ar-btn-color: var(--ar-primary);
    --ar-btn-border-color: var(--ar-primary);
    --ar-btn-hover-color: #fff;
    --ar-btn-hover-bg: var(--ar-primary);
    --ar-btn-hover-border-color: var(--ar-primary);
    --ar-btn-focus-shadow-rgb: 68, 140, 116;
    --ar-btn-active-color: #fff;
    --ar-btn-active-bg: var(--ar-secondary);
    --ar-btn-active-border-color: var(--ar-secondary);
    --ar-btn-active-shadow: unset;
    --ar-btn-disabled-color: var(--ar-secondary2);
    --ar-btn-disabled-bg: transparent;
    --ar-btn-disabled-border-color: var(--ar-secondary2);
    --ar-gradient: none;
}
.btn-secondary {
  --ar-btn-bg: var(--ar-secondary-text-emphasis);
  --ar-btn-border-color: var(--ar-secondary-text-emphasis);
    --ar-btn-hover-bg: var(--ar-secondary-text-emphasis);
    --ar-btn-active-bg: var(--ar-primary-text-emphasis);
    --ar-btn-hover-border-color: var(--ar-secondary-text-emphasis);
    --ar-btn-active-border-color: var(--ar-primary-text-emphasis);
    --ar-btn-disabled-bg: var(--ar-primary);
    --ar-btn-disabled-border-color: var(--ar-primary);
    color: white;
}
.btn-gradient {
  background: var(--ar-primary);
  background: linear-gradient(306deg, var(--ar-primary) 0%, var(--ar-secondary) 50%, var(--ar-primary) 100%);  
}
.page-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .4s .2s ease-in-out;
  transition: all .4s .2s ease-in-out;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}
[data-bs-theme="dark"] .page-loading {
  background-color: #121519;
}
.page-loading.active {
  opacity: 1;
  visibility: visible;
}
.page-loading-inner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  opacity: 0;
}
.page-loading.active > .page-loading-inner {
  opacity: 1;
}
.page-loading-inner > span {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: normal;
  color: #6f788b;
}
[data-bs-theme="dark"] .page-loading-inner > span {
  color: #fff;
  opacity: .6;
}
.page-spinner {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .75rem;
  vertical-align: text-bottom;
  background-color: #d7dde2; 
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: spinner .75s linear infinite;
  animation: spinner .75s linear infinite;
}
[data-bs-theme="dark"] .page-spinner {
  background-color: rgba(255,255,255,.25);
}
@-webkit-keyframes spinner {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

header.is_ad {
  top: 50px;
}

.navbar-brand img{
  height: 50px;
}

.toast {
  position: fixed;
  width: 400px;
  top: calc(50% - 200px);
  left: calc(50% - 200px);
  z-index: 99999;
}

.modal-right {
  z-index: 99999 !important;
}

.fix-height-bgimg{
  height: 300px;
  background-size: cover;
}
.fix-height-content{
  height: 200px;
}

@media(max-width: 576px) {
  .fix-height-bgimg{
    height: 270px;
  }
  .fix-height-content{
    height: auto;
  }
}