/* Cấu trúc bao bọc tạo khoảng trống mượt mà cho 3D */
.iso-showcase-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 100px 0 0;
    /* margin: 50px 0; */
    /* Xoá overflow: hidden để ảnh trượt ra trái không bị cột che mất */
}

/* Khối tạo góc nhìn Isometric chuẩn */
.iso-showcase {
    position: relative;
    width: 320px;
    height: 600px;
    transform-style: preserve-3d;
    /* Giảm độ ngửa rotateX xuống 50deg (cũ là 60) để ảnh bớt dẹp, nhìn thấy rõ hình hơn */
    transform: rotateX(50deg) rotateZ(-30deg);
    transition: transform 0.5s ease;
}

/* Các "miếng" lớp ảnh chứa cục block */
.iso-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 20px;
    /* Bo góc ảnh như góc điện thoại */
    transform-style: preserve-3d;
    /* QUAN TRỌNG ĐỂ RENDER ĐỘ DÀY 3D */
}

/* KHỐI TẠO ĐỘ DÀY CHO ĐIỆN THOẠI */
.iso-thickness {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #c8c8c8;
    /* Xám đậm hơn để viền nổi khối sắc nét */
    border-radius: inherit;
    /* Bóng nội để cạnh trông mượt hơn */
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5);
    border: 1px solid #dcdcdc;
    /* Thêm đường kẻ mảnh nẹp viền tăng độ 3D */
}

/* Thêm shadow đè dưới đáy mượt mà (chỉ đổ bóng ở lớp thickness sâu nhất / hoặc ở layer gốc) */
.iso-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    transform: translateZ(-15px);
    /* Tụt xuống dưới độ dày */
    box-shadow: -20px 20px 45px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
}

/* Hình ảnh lớp trên cùng */
.iso-layer img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    transform: translateZ(0px);
    /* Nằm trên viền dày */
    border: 1px solid #f0f0f0;
    /* Viền sáng mỏng xíu trên mặt */
}

/* Sắp xếp các lớp theo Z-index và xếp trục Z. Khoảng cách giữa các lớp là 90px */
.iso-layer:nth-child(1) {
    transform: translateZ(0px) translate(0, 0);
    z-index: 10;
}

.iso-layer:nth-child(2) {
    transform: translateZ(90px) translate(0, 0);
    z-index: 20;
}

.iso-layer:nth-child(3) {
    transform: translateZ(180px) translate(0, 0);
    z-index: 30;
}

.iso-layer:nth-child(4) {
    transform: translateZ(270px) translate(0, 0);
    z-index: 40;
}

.iso-layer:nth-child(5) {
    transform: translateZ(360px) translate(0, 0);
    z-index: 50;
}

/* HOVER NHẢY SANG BÊN TRÁI 
   Cộng thêm hiệu ứng vút trái với Translate XY */
.iso-layer:hover {
    cursor: pointer;
}

.iso-layer:nth-child(1):hover {
    transform: translateZ(0px) translate(-40px, -40px);
}

.iso-layer:nth-child(2):hover {
    transform: translateZ(90px) translate(-40px, -40px);
}

.iso-layer:nth-child(3):hover {
    transform: translateZ(180px) translate(-40px, -40px);
}

.iso-layer:nth-child(4):hover {
    transform: translateZ(270px) translate(-40px, -40px);
}

.iso-layer:nth-child(5):hover {
    transform: translateZ(360px) translate(-40px, -40px);
}

/* Tăng bóng đổ khi hover */
.iso-layer:nth-child(1):hover::after,
.iso-layer:nth-child(2):hover::after,
.iso-layer:nth-child(3):hover::after,
.iso-layer:nth-child(4):hover::after,
.iso-layer:nth-child(5):hover::after {
    box-shadow: -30px 30px 65px rgba(0, 0, 0, 0.3);
}

/* =========================================
   RESPONSIVE MOBILE
   ========================================= */
@media (max-width: 768px) {
    .iso-showcase-container {
        padding: 50px 0 0; 
        overflow: hidden; /* Cắt bớt phần loe ra ngoài màn hình ở mobile nếu có */
        padding-bottom: 50px;
    }
    
    .iso-showcase {
        /* Thu nhỏ điện thoại xuống khoảng 70% */
        width: 220px;
        height: 412px;
    }

    /* Thu hẹp khoảng cách Z tương ứng (~70% của 90px là 60px) */
    .iso-layer:nth-child(2) { transform: translateZ(60px) translate(0, 0); }
    .iso-layer:nth-child(3) { transform: translateZ(120px) translate(0, 0); }
    .iso-layer:nth-child(4) { transform: translateZ(180px) translate(0, 0); }
    .iso-layer:nth-child(5) { transform: translateZ(240px) translate(0, 0); }

    /* Thu hẹp khoảng cách đẩy hover (từ -40px xuống -25px) */
    .iso-layer:nth-child(1):hover { transform: translateZ(0px) translate(-25px, -25px); }
    .iso-layer:nth-child(2):hover { transform: translateZ(60px) translate(-25px, -25px); }
    .iso-layer:nth-child(3):hover { transform: translateZ(120px) translate(-25px, -25px); }
    .iso-layer:nth-child(4):hover { transform: translateZ(180px) translate(-25px, -25px); }
    .iso-layer:nth-child(5):hover { transform: translateZ(240px) translate(-25px, -25px); }
}