/* =========================================================
   SD Hantu Random
========================================================= */

/* RESET chống theme phá */
.sd-hantu-random,
.sd-hantu-random *{
  box-sizing: border-box;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* WRAPPER */
.sd-hantu-random{
  /* cấu hình dễ chỉnh */
  --sd-card-max: 920px;      /* max card trên PC */
  --sd-card-max-md: 760px;   /* max card trên tablet */
  --sd-card-max-sm: 520px;   /* max card trên mobile */
  --sd-card-min-h: 340px;    /* min-height desktop/tablet */
  --sd-card-max-h: 560px;    /* max-height desktop/tablet */
  --sd-card-ratio: 16/9;     /* tỷ lệ desktop/tablet */

  width: 100%;
  max-width: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* TOP BAR */
.sd-hantu-random-top{
  width: min(100%, var(--sd-card-max));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.sd-hantu-random-counter{
  font-weight: 700;
  opacity: .9;
}

.sd-hantu-random-toolbar{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sd-hantu-random-btn{
  padding: 6px 10px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: #111827;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

/* CARD WRAP */
.sd-hantu-random-cardwrap{
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  cursor: pointer;
  perspective: 1000px;
  -webkit-tap-highlight-color: transparent;

  /* màu mặt trước do JS set */
  --sd-rand-front: #fde68a;
}

/* CARD 3D */
.sd-hantu-random-card3d{
  width: min(100%, var(--sd-card-max));
  min-width: 0;               /* chống layout bị cứng trên nhiều theme */
  height: auto;               /* bỏ height fixed để desktop scale tốt */
  aspect-ratio: var(--sd-card-ratio);
  min-height: var(--sd-card-min-h);
  max-height: min(var(--sd-card-max-h), 70vh);

  position: relative;
  margin: 0 auto;

  transform-style: preserve-3d;
  border-radius: 18px;
  overflow: hidden; /* bo góc đẹp */
}

/* FACE */
.sd-hantu-random-face{
  position: absolute;
  inset: 0;
  border-radius: 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 18px;
  text-align: center;

  border: 0 !important;
  box-shadow: none !important;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition: transform .55s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}

/* FRONT */
.sd-hantu-random-face.sd-front{
  background: var(--sd-rand-front);
  color: #111;
  transform: rotateY(0deg);
}

/* BACK */
.sd-hantu-random-face.sd-back{
  background: #f1f5f9;
  color: #111;
  transform: rotateY(-180deg);
}

/* Khi flipped: front quay đi, back quay về */
.sd-hantu-random-cardwrap.is-flipped .sd-front{
  transform: rotateY(180deg);
}
.sd-hantu-random-cardwrap.is-flipped .sd-back{
  transform: rotateY(0deg);
}

/* TEXT WRAP FIX */
.sd-hantu-random-pinyin,
.sd-hantu-random-vp,
.sd-hantu-random-vh,
.sd-hantu-random-meaning,
.sd-hantu-random-hv,
.sd-hantu-random-lt,
.sd-hantu-random-vv{
  max-width: 100%;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  line-break: auto !important;
}

/* FRONT CONTENT */
.sd-hantu-random-han{
  font-family: "Kaiti SC","KaiTi","STKaiti","Noto Serif SC","SimSun",serif;
  font-size: clamp(60px, 5vw, 96px); /* PC to hơn, vẫn clamp */
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 10px;
  cursor: pointer;
}

.sd-hantu-random-pinyin{
  font-size: clamp(15px, 1.3vw, 22px);
  opacity: .85;
  margin-bottom: 6px;
}

.sd-hantu-random-vh{
  font-family: "Kaiti SC","KaiTi","STKaiti","Noto Serif SC","SimSun",serif;
  font-size: clamp(20px, 2.1vw, 34px);
  font-weight: 500;
  margin-top: 8px;
  cursor: pointer;
}

.sd-hantu-random-vp{
  font-size: clamp(14px, 1.2vw, 18px);
  opacity: .85;
  margin-top: 6px;
}

/* BACK CONTENT */
.sd-hantu-random-meaning{
  font-size: clamp(22px, 2.2vw, 38px);
  font-weight: 900;
  margin-bottom: 10px;
  cursor: pointer;
}

.sd-hantu-random-hv{
  font-size: clamp(16px, 1.4vw, 20px);
  font-style: italic;
  opacity: .9;
  margin-bottom: 12px;
}

.sd-hantu-random-lt{
  font-size: clamp(16px, 1.5vw, 22px);
  font-style: normal;
  color: #CC0000;
  opacity: .9;
  margin-bottom: 12px;
}

.sd-hantu-random-vv{
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.65;
  cursor: pointer;
}

/* ACTIONS */
.sd-hantu-random-actions{
  margin-top: 4px;
}

.sd-hantu-random-actions button{
  padding: 10px 18px;
  border-radius: 12px;
  border: 0;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

/* QUIZ */
.sd-hantu-random.is-quiz-ex .sd-hantu-random-pinyin,
.sd-hantu-random.is-quiz-ex .sd-hantu-random-vp{
  display: none !important;
}

/* TABLET */
@media (max-width: 1023px){
  .sd-hantu-random-top{
    width: min(100%, var(--sd-card-max-md));
  }
  .sd-hantu-random-card3d{
    width: min(100%, var(--sd-card-max-md));
    max-height: min(520px, 70vh);
  }
}

/* MOBILE (giữ logic cũ) */
@media (max-width: 640px){
  .sd-hantu-random-top{
    width: min(100%, var(--sd-card-max-sm));
  }

  .sd-hantu-random-card3d{
    width: min(100%, var(--sd-card-max-sm));
    aspect-ratio: auto; /* tắt ratio ở mobile để đúng hành vi cũ */
    height: 320px;
    min-height: 0;
    max-height: none;
  }

  .sd-hantu-random-face{
    padding: 16px;
  }

  .sd-hantu-random-han{
    font-size: 60px;
    margin-bottom: 8px;
  }

  .sd-hantu-random-vh{
    font-size: 20px;
  }
}

/* DESKTOP: nới padding nhẹ cho cảm giác đầy */
@media (min-width: 1024px){
  .sd-hantu-random-face{
    padding: 26px;
  }
}