/* ============================================================
 * CUSTOM CSS — Tainguyenfb.com
 * File này KHÔNG bị CMSNT update ghi đè
 * Thêm custom styles ở đây thay vì sửa main.css
 * ============================================================ */

/* === 3D Canvas Background === */
#canvas-3d-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 1s ease;
}

/* === 3D Tilt Setup (Tắt theo yêu cầu người dùng) ===
.product-card, .product-box4, .product-box6, .account-card {
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
*/

/* Glare Overlay for Tilt Cards (Tắt theo yêu cầu người dùng)
.card-glare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 80%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.product-card:hover .card-glare,
.product-box4:hover .card-glare,
.product-box6:hover .card-glare,
.account-card:hover .card-glare {
    opacity: 1;
}
*/

/* === Holographic Effect for Profile Cards / Wallets (Tắt theo yêu cầu người dùng) ===
.holo-card-3d {
    position: relative;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
}

.holo-card-3d::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 100, 100, 0.15) 30%,
        rgba(100, 255, 100, 0.15) 45%,
        rgba(100, 100, 255, 0.15) 60%,
        rgba(255, 100, 255, 0.15) 75%,
        transparent 100%
    );
    background-size: 200% 200%;
    background-position: var(--holo-x, 50%) var(--holo-y, 50%);
    opacity: 0;
    mix-blend-mode: color-dodge;
    transition: opacity 0.3s ease, background-position 0.1s ease;
}

.holo-card-3d:hover::after {
    opacity: 0.7;
}
*/

/* Ensure inner contents stand out on preserve-3d cards (Tắt theo yêu cầu người dùng)
.product-card h4, .product-card h5, .product-card img,
.product-box4 h4, .product-box4 img, .product-box4 button,
.product-box6 h5, .product-box6 img, .product-box6 button {
    transform: translateZ(20px);
}
*/