/* =========================================================
 * MUSK - THANG CẤP ĐỘ TƯƠNG TÁC
 *
 * Element nằm trong Section / Row / Column có sẵn.
 * Không đặt container hoặc max-width tổng.
 *
 * Trái: biểu đồ cột tăng dần, bấm một cột thì cột phải đổi sang
 * nội dung ứng với cột đó. Panel do PHP dựng sẵn hết (không phải
 * JS ghép chữ), JavaScript chỉ đổi class is-active - xem thêm ở
 * đầu file PHP vì sao shortcode con dựng ra hai dạng HTML.
 *
 * Chiều cao mỗi cột tính từ số thứ tự của nó và tổng số cột
 * (--musk-level-i, --musk-level-count) nên thêm bớt cấp độ không
 * phải sửa CSS, cột luôn tăng dần đều bất kể có bao nhiêu cột.
 *
 * Tiêu đề dùng hệ .musk-title chung. Cỡ chữ tên cấp độ và nội
 * dung do ux-builder/typography.css quyết định, ở đây không đặt
 * lại - trừ tiêu đề panel (__panel-title) vì đó là chữ trắng cỡ
 * lớn trên nền tối, không đi qua vai trò "tiêu đề chính" chung.
 * ========================================================= */

.musk-level-explorer {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  padding: 100px 0 50px 0;
  color: #ffffff;

  --musk-level-soft: #a9bee2;
  --musk-level-rule: rgba(169, 190, 226, 0.18);
  --musk-level-panel-bg: rgba(255, 255, 255, 0.05);

  /* PHP ghi đè giá trị này. Chỉ để CSS còn chạy được khi xem
     file riêng lẻ. */
  --musk-level-count: 5;
}

.musk-level-explorer,
.musk-level-explorer *,
.musk-level-explorer *::before,
.musk-level-explorer *::after {
  box-sizing: border-box;
}

.musk-level-explorer__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* =========================================================
 * HEADER
 * ========================================================= */

.musk-level-explorer__header {
  max-width: 760px;
  margin-bottom: 40px;
}

.musk-level-explorer .musk-title__heading {
  color: #ffffff;
}

.musk-level-explorer__description {
  margin: 16px 0 0;
  color: var(--musk-level-soft);
  font-weight: 400;
}

/* =========================================================
 * THÂN: BIỂU ĐỒ + NỘI DUNG
 * ========================================================= */

.musk-level-explorer__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 28px;
}

/* =========================================================
 * BIỂU ĐỒ
 * ========================================================= */

.musk-level-explorer__chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 28px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  gap: 22px;
}

.musk-level-explorer__chart-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--musk-level-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =========================================================
 * DÃY CỘT
 * ========================================================= */

.musk-level-explorer__bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  height: 300px;
  border-bottom: 2px solid var(--musk-level-rule);
  gap: 12px;
}

.musk-level-explorer__bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;

  /*
   * Cột thấp nhất cao 26% khung, cột cao nhất cao 86% - không
   * chạm 100% để cột cao nhất vẫn chừa khoảng hở phía trên cho
   * nhãn trục bên trên nó, không đứng sát mép khung. max() chặn
   * chia cho 0 khi chỉ có một cột (count - 1 = 0).
   */
  height: calc(
    26% + var(--musk-level-i) * (60% / max(var(--musk-level-count) - 1, 1))
  );

  padding: 12px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: var(--musk-level-color, #1558f4);
  color: #ffffff;
  font-family: inherit;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  opacity: 0.4;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.musk-level-explorer__bar:hover {
  opacity: 0.7;
}

.musk-level-explorer__bar[aria-pressed="true"] {
  opacity: 1;
  box-shadow: 0 14px 30px -12px var(--musk-level-color, #1558f4);
  transform: translateY(-4px);
}

.musk-level-explorer__bar:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.musk-level-explorer__bar-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.musk-level-explorer__bar-label {
  display: block;
  color: rgba(255, 255, 255, 0.95);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* =========================================================
 * THANG MÀU DƯỚI BIỂU ĐỒ
 * ========================================================= */

.musk-level-explorer__scale {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--musk-level-soft);
  font-size: 12px;
}

.musk-level-explorer__scale i {
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #2e9e6b,
    #3f83e6,
    #e8a317,
    #e4632b,
    #c8243a
  );
}

/* =========================================================
 * PANEL NỘI DUNG
 * ========================================================= */

.musk-level-explorer__panels {
  position: relative;
  min-width: 0;
}

.musk-level-explorer__panel {
  position: relative;
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: var(--musk-level-panel-bg);
  gap: 18px;
}

.musk-level-explorer__panel.is-active {
  display: flex;
}

/* Số cấp độ mờ, khổng lồ, làm nền trang trí phía sau nội dung. */

.musk-level-explorer__panel::after {
  content: attr(data-level-number);
  position: absolute;
  right: -6px;
  bottom: -60px;
  z-index: 0;
  color: rgba(255, 255, 255, 0.05);
  font-size: 220px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.musk-level-explorer__panel > * {
  position: relative;
  z-index: 1;
}

.musk-level-explorer__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  color: var(--musk-level-color, #1558f4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  gap: 8px;
}

.musk-level-explorer__tag i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--musk-level-color, #1558f4);
}

.musk-level-explorer__panel-title {
  margin: 0;
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
}

.musk-level-explorer__facts {
  display: grid;
  margin: 0;
  gap: 16px;
}

.musk-level-explorer__facts dt {
  margin: 0 0 5px;
  color: #7fa8ff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.musk-level-explorer__facts dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
  line-height: 1.6;
}

.musk-level-explorer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.musk-level-explorer__chips span {
  display: inline-flex;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

/* =========================================================
 * TABLET
 * ========================================================= */

@media (max-width: 1024px) {
  .musk-level-explorer__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .musk-level-explorer__bars {
    height: 230px;
  }

  .musk-level-explorer__panel {
    min-height: 0;
  }
}

/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 767px) {
  .musk-level-explorer {
    padding: 50px 0;
  }

  .musk-level-explorer__header {
    margin-bottom: 28px;
  }

  .musk-level-explorer__chart {
    padding: 18px 16px 16px;
    border-radius: 14px;
  }

  .musk-level-explorer__bars {
    height: 190px;
    gap: 7px;
  }

  .musk-level-explorer__bar {
    padding: 8px;
    align-items: center;
    text-align: center;
  }

  .musk-level-explorer__bar-label {
    display: none;
  }

  .musk-level-explorer__bar-number {
    font-size: 18px;
  }

  .musk-level-explorer__panel {
    padding: 22px 18px;
    border-radius: 14px;
    gap: 14px;
  }

  .musk-level-explorer__panel-title {
    font-size: 21px;
  }

  .musk-level-explorer__panel::after {
    font-size: 130px;
    bottom: -36px;
  }

  .musk-level-explorer__facts {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .musk-level-explorer__bar {
    transition: none !important;
  }
}