/* =========================
   THẺ TAROT LẬT – CODE ĐẦY ĐỦ VÀ FIX LỖI 3 DÒNG SUMMARY
========================= */

/* WRAPPER */
.tarot-flip-wrapper {
    width: 250px;
    margin: auto;
    perspective: 1000px; 
}

/* CARD – CỐ ĐỊNH CHIỀU CAO TỔNG THỂ */
.tarot-flip-card {
    width: 100%;
    height: 440px; 
    position: relative;
    transform-style: preserve-3d; 
    transition: 0.7s ease;
    border-radius: 12px;
}

/* FRONT – VỊ TRÍ TUYỆT ĐỐI */
.tarot-flip-card .front {
    backface-visibility: hidden;
    position: absolute; 
    top: 0;
    width: 100%;
    height: 100%; 
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

/* BACK – VỊ TRÍ TUYỆT ĐỐI VÀ QUAY LƯNG */
.tarot-flip-card .back {
    background: #fff;
    transform: rotateY(180deg); 
    backface-visibility: hidden; 
    text-align: center;
    position: absolute; 
    top: 0;
    width: 100%;
    height: 100%; 
    padding: 10px 10px 45px; 
    border-radius: 12px;
}

/* FLIP */
.tarot-flip-card.flip {
    transform: rotateY(180deg);
}

/* --- NỘI DUNG MẶT SAU --- */

/* IMAGE – SỬA LỖI IMG FLIP */
.tarot-flip-card .back img {
    max-width: 120px; 
    margin-top: 5px;
    /* FIX LỖI: LẬT NGƯỢC LẠI HÌNH ẢNH */
    transform: rotateY(0deg) !important; 
}

/* TITLE */
.tarot-flip-card .back h3 {
    font-size: 19px;
    line-height: 1.2;
    margin: 10px 0 6px;
    padding: 0 10px;
}

/* SUMMARY 3 LINES – ĐÃ CẬP NHẬT VÀ TỐI ƯU KHOẢNG TRẮNG */
.tarot-summary {
    display: -webkit-box;
    /* 1. Đã điều chỉnh lên 3 dòng */
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 14px;
    line-height: 1.3;
    /* 2. QUAN TRỌNG: Cần đặt max-height để hiển thị 3 dòng (3 * 1.3em) */
    max-height: 3.9em; 
    padding: 0 8px; 
    margin-bottom: 8px; 
}

/* BUTTON – SỬ DỤNG a.btn ĐỂ TĂNG ĐỘ ƯU TIÊN VÀ FIX MÀU */
.tarot-flip-card .back a.btn {
    position: absolute;
    bottom: 10px; 
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 16px; 
    font-size: 14px;
    
    /* FIX LỖI: Đảm bảo màu sắc hiển thị */
    background: #8B0000 !important; 
    color: #fff !important; 
    
    border-radius: 6px;
    text-decoration: none;
    border: none !important; 
}