minimal flip — ไม่เปลี่ยน layout เดิมมาก */
.card-flip {
  position: relative;
  width: 100%;
  height: auto;
  perspective: 800px;
}

.card-flip-inner {
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  position: relative;
}

.card-flip.flipped .card-flip-inner {
  transform: rotateY(180deg);
}

/* front/back layer */
.card-flip-front,
.card-flip-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* position: absolute; */
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* ให้รูปมีขนาดเต็มกล่อง เช่นของเดิม */
.card-flip-front img,
.card-flip-back img {
  display: block;
  width: 100%;
  height: auto;
  /* ถ้าไม่อยากเป็นวงกลม เอา border-radius ออก */

}

/* ด้านหลังหมุน 180deg */
.card-flip-back {
  transform: rotateY(180deg);
}

/* ป้องกัน overlay ถูกซ้อนทับผิดตำแหน่ง:
   ให้ container-card เป็น relative (ถ้ายังไม่มี) */
.container-card { position: relative; overflow: visible; }

/* ถ้า overlay ของคุณใช้ absolute อยู่แล้ว จะยังทำงานตามเดิม */