/* Cỗ bài và lá lật 3D — dùng CHUNG cho trang tặng lá và trang hôm nay (19/09/2026).

   Tách ra một file vì cùng một cú lật nằm ở hai file CSS thì sớm muộn lệch nhau (bài
   học `xu_ly_que` / `xu_ly_que_9`). Trang nào dùng thì <link> file này; mượn lớp từ
   file trang khác là lớp nằm ở file không nạp (lỗi 08/09/2026).

   Lớp `cb-` (cỗ bài). Cùng khuôn với `.bt-la` của quẻ miễn phí ở seo.css.

   ⚠️ Hoạt ảnh thở và cú nhấc dùng thuộc tính RIÊNG `translate` / `scale`, không dùng
   `transform` — `transform` của `.cb-xoay` là cú lật, hai thứ cùng ghi là cái sau đè
   mất cái trước. */

.cb-san { position: relative; display: inline-block; margin: 1.6rem auto .6rem; }
.cb-la {
  position: relative; display: block; width: 11rem; aspect-ratio: 11 / 19;
  padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px;
  transition: filter .35s;
}
.cb-la:not(:disabled):not(.lat-roi):not(.cb-tinh):hover { filter: drop-shadow(0 .8rem 1.1rem rgba(216,180,92,.38)); }
.cb-la:disabled, .cb-la.cb-tinh { cursor: default; }
.cb-xoay {
  position: absolute; inset: 0; display: block; transform-style: preserve-3d;
  /* Vượt đích một chút rồi dội lại: lá đập xuống bàn chứ không trượt vào chỗ. */
  transition: transform 1s cubic-bezier(.3, 1.25, .45, 1), rotate .3s var(--nhip);
}
.cb-la.lat-roi .cb-xoay { transform: rotateY(180deg); }
.cb-mat {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border: 1px solid rgba(216,180,92,.45); box-shadow: 0 18px 44px -20px #000;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.cb-sau { background: linear-gradient(150deg, #16203a, #0b1020 60%, #131b31); }
/* Hoa văn mặt lưng: vẽ bằng gradient, không tải thêm ảnh nào. */
.cb-hoa {
  display: block; width: 100%; height: 100%; box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 50%, rgba(216,180,92,.32) 0 1px, transparent 1px) 0 0/18px 18px,
    radial-gradient(circle at 50% 50%, rgba(216,180,92,.14) 0 1px, transparent 1px) 9px 9px/18px 18px;
  border: 1px solid rgba(216,180,92,.22);
}
.cb-hoa::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem;
  margin: -1.6rem 0 0 -1.6rem; border-radius: 50%; box-sizing: border-box;
  border: 1px solid rgba(216,180,92,.55);
  box-shadow: inset 0 0 0 .55rem rgba(216,180,92,.08), 0 0 18px rgba(216,180,92,.25);
}
.cb-truoc { transform: rotateY(180deg); background: #0b1020; border-color: rgba(216,180,92,.35); }
.cb-truoc img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Vệt sáng theo con trỏ trên mặt tranh (nghieng_la.js đặt --gx/--gy và lớp `nghieng`).
   Lớp phủ riêng ở `::before`, trộn thường (không `mix-blend-mode`). Nhẹ là cố ý: đo
   bật/tắt trên cùng một lá, chỗ con trỏ sáng lên ~26 mức, góc đối diện không đổi. Nó
   di chuyển theo tay nên nhìn thấy rõ hơn hẳn trên ảnh chụp tĩnh. */
.cb-truoc::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255,248,228,.34), rgba(255,248,228,.08) 40%, rgba(255,248,228,0) 64%);
  opacity: 0; transition: opacity .3s;
}
.cb-la.nghieng .cb-truoc::before { opacity: 1; }

/* Lá úp đang chờ: thở, và thỉnh thoảng một vệt sáng lướt qua mặt lưng. */
.cb-la:not(.lat-roi):not(:disabled) { animation: cb-tho 3.4s ease-in-out infinite; }
@keyframes cb-tho { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.cb-sau::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,236,190,.35) 50%, transparent 65%);
  transform: translateX(-130%);
}
.cb-la:not(.lat-roi) .cb-sau::after { animation: cb-loe 4.6s 1s ease-in-out infinite; }
@keyframes cb-loe { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* Đốm sáng bay quanh lá úp (JS rải). Lật rồi thì JS gỡ. */
.cb-sao {
  position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: #fff3cf; box-shadow: 0 0 8px 2px rgba(216,180,92,.75);
  animation: cb-sao var(--dai, 3.8s) ease-in-out infinite; animation-delay: var(--t, 0s);
}
@keyframes cb-sao {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  25%  { opacity: 1; }
  75%  { opacity: .6; }
  100% { opacity: 0; transform: translateY(-2.4rem) scale(1); }
}

/* Cú lật: nhấc khỏi bàn rồi hạ, vầng sáng bung, tia bắn ra, vệt sáng quét qua tranh. */
.cb-la.lat-roi { animation: cb-nang 1s ease both; }
@keyframes cb-nang { 0%, 100% { translate: 0 0; scale: 1; } 40% { translate: 0 -14px; scale: 1.06; } }
.cb-la::after {
  content: ""; position: absolute; inset: -6px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px rgba(216,180,92,.8), 0 0 40px 6px rgba(216,180,92,.55);
}
.cb-la.lat-roi::after { animation: cb-bung 1.2s .5s ease-out both; }
@keyframes cb-bung { 0% { opacity: 0; transform: scale(.96); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.14); } }
.cb-tia {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: #fff6dc; box-shadow: 0 0 12px 4px rgba(216,180,92,.95);
  animation: cb-tia 1s .45s ease-out both;
}
@keyframes cb-tia {
  0%   { opacity: 0; transform: rotate(var(--g)) translateY(0) scale(.3); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--g)) translateY(calc(-1 * var(--d, 90px))) scale(1); }
}
.cb-truoc::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,240,205,.6) 48%, transparent 66%);
  transform: translateX(-130%);
}
.cb-la.lat-roi .cb-truoc::after { animation: cb-quet .9s .7s ease-out both; }
@keyframes cb-quet { to { transform: translateX(130%); } }

/* Mở lại thứ đã lật (quẻ hôm nay đã rút, link người khác gửi): bày sẵn, không diễn
   lại. Nghi thức là của lần RÚT; lần thứ hai nó chỉ còn là quãng chờ. */
.cb-la.cb-tuc-thi, .cb-la.cb-tuc-thi::after, .cb-la.cb-tuc-thi .cb-truoc::after { animation: none; }
.cb-la.cb-tuc-thi .cb-xoay { transition: none; }

/* Bay vào, hiện dần, hiện từng dòng (JS gán --i cho từng con). */
.cb-san, .cb-vao { animation: cb-vao .9s var(--nhip) both; }
@keyframes cb-vao { from { opacity: 0; transform: translateY(1.6rem); } }
.cb-san.cb-tai-cho { animation: none; }
@keyframes cb-hien { from { opacity: 0; transform: translateY(.6rem); } }
.cb-lan-luot > * { animation: cb-hien .55s var(--nhip) both; animation-delay: calc(.55s + var(--i, 0) * 90ms); }

/* ── Cỗ bài: xáo hai lượt, cắt cỗ, phần dưới mờ đi để lá thật thế chỗ lá trên cùng ── */
.cb-coc {
  /* Cùng lề với .cb-san, để lá thật thế chỗ lá trên cùng mà không nhảy. */
  position: relative; width: 11rem; aspect-ratio: 11 / 19; margin: 1.6rem auto .6rem;
  animation: cb-vao .5s var(--nhip) both;
}
.cb-cl {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid rgba(216,180,92,.5); box-shadow: 0 12px 24px -14px #000;
  background: linear-gradient(150deg, #16203a, #0b1020 60%, #131b31);
  translate: calc(var(--i) * -.8px) calc(var(--i) * -1.2px);   /* chồng hơi lệch, như bài thật */
}
.cb-cl:nth-child(odd)  { animation: cb-xao-t .78s cubic-bezier(.5, 0, .3, 1) 2 both; }
.cb-cl:nth-child(even) { animation: cb-xao-p .78s cubic-bezier(.5, 0, .3, 1) 2 both; }
.cb-cl:nth-child(odd), .cb-cl:nth-child(even) { animation-delay: calc(var(--i) * 32ms); }
@keyframes cb-xao-t { 0%, 100% { transform: none; } 40%, 58% { transform: translateX(-64%) rotate(-12deg); } }
@keyframes cb-xao-p { 0%, 100% { transform: none; } 40%, 58% { transform: translateX(64%) rotate(12deg); } }
.cb-coc.cat .cb-cl:nth-child(n+5) { animation: cb-cat .55s ease-in-out both; }
@keyframes cb-cat { 0%, 100% { transform: none; } 45% { transform: translate(-12%, -26%) rotate(-6deg); } }
.cb-coc::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9rem; height: 9rem;
  margin: -4.5rem 0 0 -4.5rem; border-radius: 50%; border: 1px solid var(--vang);
  opacity: 0; pointer-events: none;
}
.cb-coc.cat::after { animation: cb-vong .9s .3s ease-out both; }
@keyframes cb-vong { from { opacity: .8; transform: scale(.3); } to { opacity: 0; transform: scale(2.2); } }
.cb-coc.rut .cb-cl:not(:last-child) { animation: cb-mo .4s ease both; }
@keyframes cb-mo { to { opacity: 0; } }
/* Chia bài: cả cỗ mờ đi để mấy lá bay ra ô của chúng (trang hôm nay). */
.cb-coc.chia .cb-cl { animation: cb-mo .35s ease both; }

@media (max-width: 520px) {
  .cb-la, .cb-coc { width: 9rem; }
}