/* =========================
   CAMERON STANTE CARD EFFECT FINAL V3.1
   dùng với JS sync outline + fallback viền
   ========================= */

/* ===== Wrapper tổng ===== */
#brxe-cfchjh {
  position: relative;
  width: 100%;
  min-height: 180px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* ===== Layer viền phía sau do JS sync theo card đỏ ===== */
/* Có fallback để không bị mất viền khi JS chưa set biến CSS */
#brxe-vxuxvg {
  position: absolute;

  left: var(--outline-left, 50%);
  top: var(--outline-top, 50%);
  width: var(--outline-width, calc(min(40vw, 680px) + 60px));
  height: var(--outline-height, calc(clamp(200px, 18vw, 260px) - 28px));

  inset: auto !important;
  transform: var(--outline-transform, translate(-50%, -50%)) !important;

  border: 1px solid rgba(180, 22, 22, 0.9);
  border-radius: var(--outline-radius, 28px);
  background: transparent;
  z-index: 1;
  pointer-events: none;

  will-change: left, top, width, height, border-radius, transform;

  transition:
    left 0.08s linear,
    top 0.08s linear,
    width 0.14s ease-out,
    height 0.14s ease-out,
    border-radius 0.14s ease-out,
    transform 0.08s linear;
}

/* ===== Card đỏ phía trước ===== */
#brxe-kjwznl {
  position: relative;
  z-index: 2;
  width: min(40vw, 680px);
  height: clamp(200px, 18vw, 260px);
  min-height: 0 !important;

  border-radius: 28px;
  overflow: hidden;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0;

  padding: 32px 40px !important;

  background: linear-gradient(135deg, #ff1f1f 0%, #c20d0d 55%, #9e0e0e 100%);
  box-shadow: 0 20px 50px rgba(120, 0, 0, 0.18);

  transition:
    width 0.45s ease,
    height 0.45s ease,
    padding 0.45s ease,
    border-radius 0.45s ease,
    box-shadow 0.45s ease;
}

/* chống flex item con làm bể layout */
#brxe-kjwznl > * {
  min-width: 0;
  min-height: 0;
}

/* ===== Heading mặc định ===== */
#brxe-djlsbx {
  width: 100% !important;
  margin: 0 !important;
  min-width: 0;
  text-align: center;
  line-height: 0.95;
  transition:
    width 0.45s ease,
    text-align 0.45s ease,
    transform 0.45s ease,
    font-size 0.45s ease,
    opacity 0.25s ease;
}

/* ===== Cột detail bên phải ===== */
/* collapse cả ngang và dọc để không đội chiều cao */
#brxe-kjwznl > .brxe-div:last-child {
  width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  min-width: 0 !important;

  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;

  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;

  transform: translateX(20px);

  transition:
    width 0.45s ease,
    max-width 0.45s ease,
    flex-basis 0.45s ease,
    height 0.35s ease,
    max-height 0.35s ease,
    opacity 0.28s ease,
    transform 0.45s ease,
    visibility 0s linear 0.45s;
}

/* Text và button bên trong ẩn mượt */
#brxe-fdallk,
#brxe-pxwlmk {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.35s ease;
}

#brxe-fdallk {
  min-width: 0;
  overflow-wrap: break-word;
}

#brxe-pxwlmk {
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent !important;
  color: #fff !important;
  border-radius: 16px;
  padding: 14px 22px;
}

/* ===== Trạng thái mở bằng JS class ===== */
#brxe-cfchjh.is-active #brxe-kjwznl {
  width: min(95%, 1600px);
  height: clamp(220px, 20vw, 300px);
  min-height: 0 !important;
  padding: 44px 56px !important;
  justify-content: space-between !important;
  gap: 30px;
}

#brxe-cfchjh.is-active #brxe-djlsbx {
  width: 46% !important;
  text-align: left;
  transform: translateX(0);
}

#brxe-cfchjh.is-active #brxe-kjwznl > .brxe-div:last-child {
  width: 54% !important;
  max-width: 54% !important;
  flex: 0 0 54% !important;

  height: auto !important;
  max-height: 500px !important;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);

  transition:
    width 0.45s ease,
    max-width 0.45s ease,
    flex-basis 0.45s ease,
    height 0.35s ease,
    max-height 0.35s ease,
    opacity 0.28s ease,
    transform 0.45s ease,
    visibility 0s linear 0s;
}

#brxe-cfchjh.is-active #brxe-fdallk,
#brxe-cfchjh.is-active #brxe-pxwlmk {
  opacity: 1;
  transform: translateY(0);
}

#brxe-cfchjh.is-active #brxe-fdallk {
  transition-delay: 0.12s;
}

#brxe-cfchjh.is-active #brxe-pxwlmk {
  transition-delay: 0.18s;
}

/* ===== Desktop hover thật ===== */
@media (hover: hover) and (pointer: fine) {
  #brxe-cfchjh:hover #brxe-kjwznl {
    width: min(95%, 1600px);
    height: clamp(220px, 20vw, 300px);
    min-height: 0 !important;
    padding: 44px 56px !important;
    justify-content: space-between !important;
    gap: 30px;
  }

  #brxe-cfchjh:hover #brxe-djlsbx {
    width: 46% !important;
    text-align: left;
    transform: translateX(0);
  }

  #brxe-cfchjh:hover #brxe-kjwznl > .brxe-div:last-child {
    width: 54% !important;
    max-width: 54% !important;
    flex: 0 0 54% !important;

    height: auto !important;
    max-height: 500px !important;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);

    transition:
      width 0.45s ease,
      max-width 0.45s ease,
      flex-basis 0.45s ease,
      height 0.35s ease,
      max-height 0.35s ease,
      opacity 0.28s ease,
      transform 0.45s ease,
      visibility 0s linear 0s;
  }

  #brxe-cfchjh:hover #brxe-fdallk,
  #brxe-cfchjh:hover #brxe-pxwlmk {
    opacity: 1;
    transform: translateY(0);
  }

  #brxe-cfchjh:hover #brxe-fdallk {
    transition-delay: 0.12s;
  }

  #brxe-cfchjh:hover #brxe-pxwlmk {
    transition-delay: 0.18s;
  }
}

/* ===== Mobile / tablet ===== */
@media (max-width: 991px) {
  #brxe-cfchjh {
    min-height: 260px;
  }

  #brxe-kjwznl {
    width: min(78vw, 520px);
    height: 220px;
    min-height: 0 !important;
    padding: 24px !important;
  }

  #brxe-djlsbx {
    font-size: clamp(30px, 7vw, 58px) !important;
  }

  /* Mobile tap mở card */
  #brxe-cfchjh.is-active #brxe-kjwznl {
    width: min(92vw, 740px);
    height: auto;
    min-height: 300px !important;
    padding: 24px !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px;
  }

  #brxe-cfchjh.is-active #brxe-djlsbx {
    width: 100% !important;
    text-align: center !important;
  }

  #brxe-cfchjh.is-active #brxe-kjwznl > .brxe-div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;

    height: auto !important;
    max-height: 800px !important;

    align-items: center !important;
    text-align: center !important;
  }
}