/*
 * Mệnh Lý A Sinh Web Ads
 *
 * Browser content pages:
 * desktop side rails when enough free gutter exists.
 *
 * /lich/ browser and installed PWA:
 * one horizontal inline unit after the month calendar.
 */

/* =========================
   SIDE RAIL
   ========================= */

.mlas-ad-rail {
  position: fixed;
  z-index: 18;
  display: none;
  width: 160px;
  box-sizing: border-box;
}

.mlas-ad-rail.is-visible,
.mlas-ad-rail.is-preview {
  display: block;
}

.mlas-ad-rail__label,
.mlas-ad-inline__label {
  display: none;
  margin: 0 0 6px;
  color: rgba(55, 65, 81, .70);
  font: 500 10px/1.2 Arial, sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.mlas-ad-rail.is-filled
.mlas-ad-rail__label,
.mlas-ad-rail.is-preview
.mlas-ad-rail__label,
.mlas-ad-inline.is-filled
.mlas-ad-inline__label,
.mlas-ad-inline.is-preview
.mlas-ad-inline__label {
  display: block;
}

.mlas-ad-rail__slot {
  width: 160px;
  height: 600px;
  overflow: hidden;
  box-sizing: border-box;
}

.mlas-ad-rail.is-preview
.mlas-ad-rail__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(27, 79, 155, .36);
  border-radius: 8px;
  background:
    linear-gradient(
      145deg,
      rgba(27, 79, 155, .055),
      rgba(245, 166, 35, .055)
    );
  color: #667085;
  font: 600 12px/1.5 Arial, sans-serif;
  text-align: center;
}

.mlas-ad-rail__preview {
  padding: 18px 12px;
}

.mlas-ad-rail__preview strong {
  display: block;
  margin-bottom: 5px;
  color: #1b4f9b;
  font-size: 13px;
}

/* =========================
   LICH INLINE
   ========================= */

.mlas-ad-inline {
  display: none;
  width: min(970px, 100%);
  max-width: 970px;
  margin: 24px auto 28px;
  box-sizing: border-box;
  text-align: center;
}

.mlas-ad-inline.is-preview,
.mlas-ad-inline.is-loading,
.mlas-ad-inline.is-visible {
  display: block;
}

.mlas-ad-inline__slot {
  width: 100%;
  box-sizing: border-box;
}

.mlas-ad-inline.is-preview
.mlas-ad-inline__slot {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(27, 79, 155, .36);
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(27, 79, 155, .055),
      rgba(245, 166, 35, .055)
    );
  color: #667085;
  font: 600 12px/1.5 Arial, sans-serif;
}

.mlas-ad-inline__preview {
  padding: 16px 20px;
}

.mlas-ad-inline__preview strong {
  display: block;
  margin-bottom: 4px;
  color: #1b4f9b;
  font-size: 13px;
}

.mlas-ad-inline.is-loading {
  visibility: hidden;
  min-height: 90px;
}

.mlas-ad-inline.is-filled,
.mlas-ad-inline.is-visible {
  visibility: visible;
}

/*
 * Mobile and installed PWA stay compact.
 * There are never vertical side rails here.
 */
@media (max-width: 720px) {
  .mlas-ad-inline {
    width: 100%;
    max-width: 100%;
    margin: 16px auto 20px;
  }

  .mlas-ad-inline.is-preview
  .mlas-ad-inline__slot {
    min-height: 74px;
  }

  .mlas-ad-inline__preview {
    padding: 12px 14px;
  }
}

@media (max-width: 1359px), (max-height: 719px) {
  .mlas-ad-rail {
    display: none !important;
  }
}