/* Công cụ tính hoa hồng đại lý — theme ON68 */
.cc-root {
  --cc-primary: #f26522;
  --cc-primary-dark: #d9531a;
  --cc-primary-light: #ff8a4c;
  --cc-soft: #ffe7dc;
  --cc-soft-bg: #fff7f3;
  --cc-panel-bg: #fdf3ee;
  --cc-text: #2f3233;
  --cc-heading: #320404;
  --cc-track: #e5d6ce;

  width: 100%;
  margin: 16px 0 8px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cc-text);
  line-height: 1.4;
}

.cc-root *,
.cc-root *::before,
.cc-root *::after {
  box-sizing: border-box;
}

.cc-root [hidden] {
  display: none !important;
}

.cc-root p,
.cc-root h3,
.cc-root h4,
.cc-root h5 {
  margin: 0;
  line-height: 1.4;
}

/* ---------- Trigger ---------- */
.cc-root .cc-trigger-wrap {
  text-align: center;
}

.cc-root .cc-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  border: 1px solid var(--cc-primary-light);
  border-radius: 10px;
  background: linear-gradient(to bottom, var(--cc-primary-light), var(--cc-primary-dark));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(242, 101, 34, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.cc-root .cc-trigger:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.cc-root .cc-trigger:focus-visible,
.cc-root .cc-more__btn:focus-visible,
.cc-root .cc-close:focus-visible {
  outline: 2px solid var(--cc-primary);
  outline-offset: 2px;
}

/* ---------- Panel ---------- */
.cc-root .cc-panel {
  margin-top: 16px;
  overflow: hidden;
  border: 2px solid var(--cc-primary);
  border-radius: 20px;
  background: var(--cc-panel-bg);
  box-shadow: 0 8px 30px rgba(50, 4, 4, 0.15);
}

.cc-root .cc-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(to right, var(--cc-primary), var(--cc-primary-dark));
}

.cc-root .cc-panel__title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.cc-root .cc-close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.cc-root .cc-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.cc-root .cc-panel__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.cc-root .cc-heading {
  color: var(--cc-primary);
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Grids ---------- */
.cc-root .cc-grid {
  display: grid;
  gap: 8px;
}

.cc-root .cc-grid--inputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.cc-root .cc-grid--stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cc-root .cc-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Inputs ---------- */
.cc-root .cc-label {
  display: block;
  margin-bottom: 4px;
  color: #3f3f3f;
  font-size: 14px;
  font-weight: 600;
}

.cc-root .cc-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cc-primary);
  border-radius: 6px;
  background: #fff;
  color: var(--cc-text);
  font-size: 14px;
  outline: none;
  transition: box-shadow 0.15s ease;
}

.cc-root .cc-input:focus {
  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.25);
}

.cc-root .cc-range {
  --cc-fill: 0%;
  width: 100%;
  height: 10px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--cc-primary) var(--cc-fill), var(--cc-track) var(--cc-fill));
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.cc-root .cc-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cc-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  -webkit-appearance: none;
  appearance: none;
}

.cc-root .cc-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cc-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.cc-root .cc-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(242, 101, 34, 0.3);
}

/* ---------- Result cards ---------- */
.cc-root .cc-stat {
  padding: 8px;
  border: 1px solid var(--cc-primary);
  border-radius: 6px;
  background: #fff;
  text-align: center;
}

.cc-root .cc-dot {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto 4px;
  border-radius: 50%;
}

.cc-root .cc-dot--1 { background: #f26522; }
.cc-root .cc-dot--2 { background: #ff8a4c; }
.cc-root .cc-dot--3 { background: #d9531a; }
.cc-root .cc-dot--4 { background: #ffb088; }

.cc-root .cc-stat__label {
  color: #3a3a3a;
  font-size: 12px;
}

.cc-root .cc-stat__value {
  color: var(--cc-text);
  font-size: 14px;
  font-weight: 700;
  word-break: break-word;
}

/* ---------- Status ---------- */
.cc-root .cc-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--cc-primary);
  border-radius: 6px;
  background: #fff;
}

.cc-root .cc-status__text {
  min-width: 0;
}

.cc-root .cc-status__title {
  color: var(--cc-text);
  font-size: 14px;
  font-weight: 600;
}

.cc-root .cc-status__tip {
  color: #3f3f3f;
  font-size: 14px;
}

.cc-root .cc-badge {
  flex-shrink: 0;
  max-width: 60%;
  padding: 6px 14px;
  border-radius: 999px;
  background: #9a9a9a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.cc-root .cc-badge--ok {
  background: var(--cc-primary);
}

/* ---------- Total ---------- */
.cc-root .cc-total {
  padding: 12px;
  border: 1px solid var(--cc-primary);
  border-radius: 8px;
  background: linear-gradient(to bottom, #fff, var(--cc-soft));
  text-align: center;
}

.cc-root .cc-total__label {
  color: var(--cc-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc-root .cc-total__value {
  margin-top: 4px;
  color: var(--cc-primary);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}

/* ---------- Detail toggle ---------- */
.cc-root .cc-more {
  margin: 4px -16px -16px;
  text-align: center;
}

.cc-root .cc-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 300px;
  padding: 4px 12px;
  border: 0;
  border-bottom: 2px solid var(--cc-primary-light);
  border-radius: 10px 10px 0 0;
  background: var(--cc-primary);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.cc-root .cc-more__btn--sm {
  max-width: 200px;
}

.cc-root .cc-more__btn:hover {
  filter: brightness(1.05);
}

.cc-root .cc-arrow {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Detail ---------- */
.cc-root .cc-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.cc-root .cc-detail__title {
  color: var(--cc-primary);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.cc-root .cc-step {
  padding: 12px;
  border: 1px solid var(--cc-primary);
  border-radius: 8px;
  background: var(--cc-soft-bg);
}

.cc-root .cc-step__title {
  margin-bottom: 4px;
  color: var(--cc-primary-dark);
  font-size: 14px;
  font-weight: 600;
}

.cc-root .cc-step__text,
.cc-root .cc-step__text p {
  color: #000;
  font-size: 14px;
  font-weight: 500;
}

.cc-root .cc-strong {
  font-weight: 700 !important;
}

.cc-root .cc-grand {
  margin-top: 4px;
  font-size: 16px !important;
}

.cc-root .cc-center {
  text-align: center;
}

.cc-root .cc-levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.cc-root .cc-levels .cc-level:first-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.cc-root .cc-level {
  padding: 8px;
  border: 1px solid var(--cc-primary);
  border-radius: 8px;
  background: #fff;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cc-root .cc-level__name {
  color: #000;
  font-size: 14px;
  font-weight: 600;
}

.cc-root .cc-level__cond {
  color: #000;
  font-size: 13px;
  font-weight: 500;
}

.cc-root .cc-level--active {
  background: var(--cc-primary);
  box-shadow: 0 2px 8px rgba(242, 101, 34, 0.35);
}

.cc-root .cc-level--active .cc-level__name,
.cc-root .cc-level--active .cc-level__cond {
  color: #fff;
}

.cc-root .cc-level--applied {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 14px;
  background: var(--cc-soft);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .cc-root .cc-trigger {
    padding: 10px 20px;
    font-size: 13px;
  }

  .cc-root .cc-panel {
    border-radius: 14px;
  }

  .cc-root .cc-panel__title {
    font-size: 14px;
  }

  .cc-root .cc-panel__body {
    padding: 12px;
  }

  .cc-root .cc-grid--inputs {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cc-root .cc-grid--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-root .cc-label,
  .cc-root .cc-status__title,
  .cc-root .cc-status__tip,
  .cc-root .cc-step__title,
  .cc-root .cc-step__text,
  .cc-root .cc-step__text p,
  .cc-root .cc-level__name {
    font-size: 12px;
  }

  .cc-root .cc-level__cond {
    font-size: 12px;
  }

  .cc-root .cc-status {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-root .cc-badge {
    max-width: none;
  }

  .cc-root .cc-total__value {
    font-size: 20px;
  }

  .cc-root .cc-more {
    margin: 4px -12px -12px;
  }

  .cc-root .cc-more__btn {
    max-width: 200px;
    font-size: 14px;
  }

  .cc-root .cc-more__btn--sm {
    max-width: 140px;
  }

  .cc-root .cc-arrow {
    width: 24px;
    height: 24px;
  }

  .cc-root .cc-detail__title {
    font-size: 16px;
  }

  .cc-root .cc-grand {
    font-size: 14px !important;
  }
}