/* Vùng chứa cho drag */
#drag-region {
    height: 100%;
    /*  border: 2px dashed #888; */
    position: relative;
    overflow: hidden;
    padding: 10px;
}

/* Popup/dialog */
.draggable-dialog {
    position: absolute;
    background-color: transparent;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

/* Header để kéo */
.draggable-header {
    cursor: move;
    user-select: none;
}

/* Nội dung chứa iframe */
.dialog-content {
    flex: 1;
    overflow: hidden;
}

    .dialog-content iframe {
        width: 100%;
        border: none;
    }


.phone-iframe {
    border-radius: 12px; /* Bo góc mềm mại */
    border: 5px solid #808080; /* Viền 2px màu xám trắng */
    box-sizing: border-box; /* Đảm bảo border không làm vỡ size */
    box-shadow: inherit; /* Đổ bóng giống như khung điện thoại */
    
}

.show-icon {
    position: relative;
    display: flex;
}

/* Icon mặc định ẩn và nằm trên vị trí thật 10px */
.icon-hover-slide {
    opacity: 0;
    transform: translateY(-10px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}

    /* Khi hover vào container hoặc hover trực tiếp lên icon */
    .mini-phone-view:hover .icon-hover-slide,
    .icon-hover-slide:hover {
        opacity: 1;
        transform: translateY(0);
    }


.main-frame {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.025rem;
    font-weight: bold;
    color: rgba(225,225,225,0.65);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    pointer-events: none;
    user-select: none;
    z-index: 9999;
    white-space: nowrap;
}

.min-frame {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.025rem;
    font-weight: bold;
    color: rgba(225,225,225,0.65);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    pointer-events: none;
    user-select: none;
    z-index: 2;
    white-space: nowrap;
}

.phone-example {
    width: 38px;
    height: 60px;
    border-radius: 6px;
    border: 3px solid #808080;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border 0.2s ease;
    cursor: pointer;
}

    .phone-example:hover {
        border-color: limegreen; /* Hover: xanh lá */
        /* Tuỳ chọn: nền xanh lá nhạt nếu bạn muốn */
    }