/*
==================================================
File: public/css/public-style.css
==================================================
*/

/* --- General --- */
.tu-vi-container, .tarot-container, .so-may-man-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* --- Tử Vi Hàng Ngày --- */
.tu-vi-container {
    background-color: #f9f9f9;
}
.tu-vi-container h3 {
    text-align: center;
    margin-top: 0;
    color: #2c3e50;
    font-size: 1.5em;
}
.tu-vi-tabs { display: flex; justify-content: center; margin-bottom: 20px; border-bottom: 2px solid #ddd; }
.tu-vi-tabs button { padding: 10px 20px; cursor: pointer; border: none; background-color: transparent; font-size: 1em; font-weight: 500; color: #555; position: relative; transition: color 0.3s; }
.tu-vi-tabs button:hover { color: #3498db; }
.tu-vi-tabs button.active { color: #3498db; font-weight: bold; }
.tu-vi-tabs button.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: #3498db; }
#tu-vi-content-wrapper { transition: opacity 0.3s ease-in-out; }
.tu-vi-item { border-bottom: 1px solid #ddd; }
.tu-vi-item:last-child { border-bottom: none; }
.tu-vi-item summary { cursor: pointer; padding: 10px 5px; outline: none; list-style: none; }
.tu-vi-item summary::-webkit-details-marker { display: none; }
.tu-vi-item-header { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.tu-vi-item-header strong { color: #3498db; font-size: 1.1em; }
.tu-vi-item-header span { font-style: italic; color: #555; padding-left: 15px; text-align: right; }
.tu-vi-item[open] summary { font-weight: bold; }
.tu-vi-item-content { padding: 15px; background-color: #fff; border-top: 1px solid #eee; }
.tu-vi-ratings { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; }
.tu-vi-ratings p { margin: 5px 0; }
.tu-vi-ratings .stars { color: #f39c12; letter-spacing: 2px; }
.tu-vi-full-content { margin-top: 15px; line-height: 1.6; }

/* --- Bói Bài Tarot (Đã sửa lỗi hiển thị ảnh) --- */
.tarot-container { text-align: center; background-color: #f7f2e9; }
.tarot-button { background-color: #4a2c6b; color: white; border: none; padding: 12px 25px; font-size: 1.1em; cursor: pointer; border-radius: 5px; transition: background-color 0.3s; }
.tarot-button:hover { background-color: #6a4c8b; }
.tarot-button:disabled { background-color: #ccc; cursor: not-allowed; }
.tarot-cards-area { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 30px; perspective: 1000px; min-height: 250px; }
.tarot-card-wrapper { width: 150px; height: 250px; }

.tarot-card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.tarot-card.is-flipped {
    transform: rotateY(180deg);
}

/* === PHẦN QUAN TRỌNG ĐƯỢC THÊM VÀO === */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d; /* THUỘC TÍNH BỊ THIẾU GÂY LỖI */
}
/* ===================================== */

.card-back, .card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.card-back {
    background-color: #6a4c8b;
    background-image: linear-gradient(45deg, #4a2c6b 25%, transparent 25%), linear-gradient(-45deg, #4a2c6b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #4a2c6b 75%), linear-gradient(-45deg, transparent 75%, #4a2c6b 75%);
    background-size: 20px 20px;
}
.card-front {
    background-color: #fff;
    transform: rotateY(180deg);
    background-size: cover;
    background-position: center;
    border: 4px solid #fff;
}

.tarot-results-area { margin-top: 30px; text-align: left; }
.tarot-result-item { background: #fff; padding: 15px; border-radius: 5px; margin-bottom: 15px; border-left: 5px solid #6a4c8b; }
.tarot-result-item h4 { margin-top: 0; }

/* --- Con Số May Mắn --- */
.so-may-man-container { background: #eaf5ff; border: 1px solid #bde0ff; border-radius: 8px; padding: 15px 20px; }
.so-may-man-container h4 { margin-top: 0; text-align: center; }
.so-may-man-container ul { list-style: none; padding: 0; column-count: 2; column-gap: 20px; }
.so-may-man-container li { padding: 5px 0; border-bottom: 1px solid #d4e9ff; }
.so-may-man-container li:last-child { border-bottom: none; }
@media (max-width: 600px) { .so-may-man-container ul { column-count: 1; } }

/* === BỔ SUNG CHO CÁC CÔNG CỤ MỚI === */
.cctv-tool-container {
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 20px;
    background: #fff;
}
.cctv-tool-container h3 { margin-top: 0; font-size: 1.6em; color: #333; }
.cctv-tool-container p { color: #666; max-width: 600px; margin-left: auto; margin-right: auto; }
.cctv-button { 
    background-color: #006a4e; color: white; border: none; padding: 10px 20px; font-size: 1em; 
    cursor: pointer; border-radius: 5px; transition: background-color 0.3s, transform 0.2s; 
    border-bottom: 3px solid #004d38; font-weight: bold; margin-top: 15px;
}
.cctv-button:hover { background-color: #007a5a; transform: translateY(-2px); }
.cctv-button:disabled { background-color: #aaa; border-bottom-color: #888; cursor: not-allowed; }

/* 1. 3 Số May Mắn */
.cctv-lucky-numbers .cctv-date { color: #888; font-style: italic; margin-bottom: 10px; }
.lucky-numbers-result { display: flex; justify-content: center; gap: 20px; margin-top: 25px; min-height: 80px; }
.lucky-number-circle {
    width: 80px; height: 80px; background-color: #006a4e; color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2.5em; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* 2. Bói bài 24h - Cập nhật hoàn toàn */
.cctv-boi-24h p { margin-bottom: 25px; }
.boi-24h-cards-wrapper { position: relative; min-height: 220px; }
.boi-24h-card-container { display: flex; justify-content: center; align-items: center; gap: 15px; perspective: 1200px; }
.boi-24h-card { width: 140px; height: 210px; transition: transform 0.5s, opacity 0.5s; cursor: pointer; }
.boi-24h-card img { width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.boi-24h-card-inner {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform 0.8s;
}
.boi-24h-card.is-flipped-24h .boi-24h-card-inner { transform: rotateY(180deg); }
.card-back-24h, .card-front-24h {
    position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
    border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.card-front-24h { 
    background-color: white; border: 1px solid #ccc; transform: rotateY(180deg); 
    display: flex; align-items: center; justify-content: center; padding: 15px; font-size: 1.1em;
}
/* Hiệu ứng khi đã chọn bài */
.boi-24h-card.is-chosen { transform: scale(1.05); }
.boi-24h-card.faded { transform: scale(0.9); opacity: 0.5; cursor: default; }


/* 3. Bói bài 52 lá - ĐÃ SỬA LỖI CĂN GIỮA */
.boi-52-la-area {
    position: relative;
    min-height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 25px 0;
}

#boi-52-la-initial-deck {
    /* Container cho bộ bài úp ban đầu */
    display: flex; /* Mặc định hiển thị */
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100px;
    height: 140px;
    transition: opacity 0.5s;
}

#boi-52-la-cards-result {
    /* Container cho 3 lá bài kết quả */
    display: none; /* Quan trọng: Mặc định ẩn đi */
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.playing-card-back {
    width: 100px; height: 140px;
    background-color: #eee;
    border: 1px solid #ccc; border-radius: 8px;
    position: absolute;
    /* Bỏ top: 0; left: 0; để nó tuân theo flex center của parent */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    transition: transform 0.3s;
}

.boi-52-la-deck.shuffling .playing-card-back { animation: shuffle 0.5s ease-in-out infinite alternate; }
@keyframes shuffle {
    0% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(-10px) rotate(2deg); }
}

.playing-card {
    width: 90px; height: 130px; border: 1px solid #ccc; border-radius: 8px; background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: relative; padding: 5px;
    display: flex;
    flex-direction: column; align-items: center;
}
.playing-card.deal {
    animation: deal-card 0.5s ease-out forwards;
}
@keyframes deal-card {
    from { opacity: 0; transform: translateY(-50px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.playing-card.red { color: red; }
.playing-card.black { color: black; }
.playing-card .rank { font-size: 1.8em; font-weight: bold; }
.playing-card .suit { width: 40px; height: 40px; margin-top: 5px; }
.playing-card .suit svg { width: 100%; height: 100%; }

.boi-52-la-interpretation { 
    margin-top: 20px; text-align: left; background: #f9f9f9; 
    padding: 15px; border-radius: 5px;
}
.boi-52-la-interpretation h4 { margin-top: 0; }

/* Thay thế khối CSS cũ của Bói bài Cửu Huyền */
.cctv-boi-cuu-huyen .boi-cuu-huyen-area {
    position: relative;
    min-height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 25px 0;
}
.cctv-boi-cuu-huyen .boi-cuu-huyen-deck {
    position: relative;
    width: 100px;
    height: 140px;
}
/* Tái sử dụng style của lá bài 52 lá */
.cctv-boi-cuu-huyen .boi-cuu-huyen-deck .playing-card-back {
    position: absolute;
}
.cctv-boi-cuu-huyen .boi-cuu-huyen-deck.shuffling .playing-card-back {
    animation: shuffle 0.5s ease-in-out infinite alternate;
}

.cctv-boi-cuu-huyen .boi-cuu-huyen-cards-result {
    display: none;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
/* Tái sử dụng style của .playing-card */
.cctv-boi-cuu-huyen .playing-card {
    animation: deal-card 0.5s ease-out forwards;
}

.cctv-boi-cuu-huyen .boi-cuu-huyen-interpretation {
    margin-top: 20px;
    text-align: left;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}
.cctv-boi-cuu-huyen .boi-cuu-huyen-interpretation h4 { margin-top: 0; }
.cctv-boi-cuu-huyen .boi-cuu-huyen-interpretation p { margin-bottom: 10px; }

/* === BỔ SUNG CHO CON SỐ MAY MẮN CÁ NHÂN === */
.cctv-lucky-number-personal {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.csm-form-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.csm-form-row {
    display: flex;
    align-items: center;
}
.csm-form-row label {
    flex: 0 0 140px; /* Label có độ rộng cố định */
    font-weight: bold;
    color: #006a4e;
    text-align: right;
    padding-right: 15px;
}
.csm-form-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}
.csm-form-container .cctv-button {
    align-self: center; /* Nút tự căn giữa */
    width: auto;
    min-width: 150px;
}
.csm-result-area {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}
.csm-result-area.error p {
    color: #d9534f;
    font-weight: bold;
}
.csm-result-area .lucky-numbers-result {
    margin: 20px 0;
}
.csm-disclaimer {
    font-size: 0.9em;
    font-style: italic;
    color: #888;
}

/* --- Home Page Styles --- */
.home-hero { text-align: center; padding: 40px 20px; background: #fff; border-radius: 8px; margin-bottom: 30px; }
.home-hero h1 { margin-top: 0; font-size: 2.5em; color: #333; }
.home-hero p { font-size: 1.1em; color: #666; }
.home-section h2 { text-align: center; font-size: 2em; margin-bottom: 30px; color: #444; }
.horoscope-preview-grid, .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.horoscope-preview-item, .tool-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; transition: transform 0.2s, box-shadow 0.2s; }
.horoscope-preview-item:hover, .tool-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.horoscope-preview-item h3 { margin-top: 0; color: #006a4e; }
.btn-view-more { display: inline-block; margin-top: 15px; color: #006a4e; text-decoration: none; font-weight: bold; }
.tool-card { text-decoration: none; color: inherit; }
.tool-card h4 { margin-top: 0; color: #4a2c6b; }