app-post-detail {
    ion-content {
        .bg {
            background: var(--ion-background-content);
            padding-bottom: var(--ion-padding-15);
            padding-top: var(--ion-padding-15);
            min-height: 90%;

            .img-common {
                background: var(--ion-background-content);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                object-fit: cover;
            }

            .bottom-bg-location {
                padding: var(--ion-padding-0) var(--ion-padding-0) var(--ion-padding-15);

                ion-card {
                    margin: var(--ion-margin-0) var(--ion-margin-0) var(--ion-margin-15);
                    border-radius: 0;

                    ion-card-header {
                        ion-card-title {
                            display: flex;

                            ion-icon {
                                width: 23px;
                                height: 23px;
                                padding: 3px 6px;
                                background: var(--ion-background-content);
                                border-radius: var(--ion-border-radius-100);
                                color: var(--ion-color);
                                margin-right: var(--ion-margin-10);
                            }
                        }

                        img {
                            width: 2.625rem !important;
                            height: 2.625rem !important;
                        }

                        &:first-child {
                            background: #e7f7fe;
                            border-top: 2px solid var(--ion-color);
                            border-bottom: 2px solid var(--ion-color);
                        }
                    }

                    ion-card-content {
                        font-size: var(--ion-font-size-14);
                        padding: var(--ion-padding-0);
                        display: flex;
                        justify-content: space-between;

                        p {
                            padding: var(--ion-padding-0);

                            span {
                                color: var(--ion-color);
                            }

                            a {
                                span {
                                    color: var(--ion-color, #3880ff);
                                }
                            }
                        }
                    }

                    &.detail {
                        ion-card-header {
                            align-items: flex-start;

                            ion-card-title {
                                font-size: var(--ion-font-size-14);
                                position: relative;
                                width: 100%;
                                align-items: center;
                                margin: var(--ion-margin-0);

                                ion-icon {
                                    margin: var(--ion-margin-0);
                                    background: none;
                                    color: var(--ion-content-color);
                                }
                            }

                            &.comment {
                                padding: var(--ion-padding-10);

                                ion-card-title {
                                    >div {
                                        background: #f3f3f3;
                                        padding: 7px;
                                        border-radius: 5px;
                                        width: auto;
                                        margin-left: var(--ion-margin-10);

                                        span {
                                            color: #000;
                                            word-break: break-word;
                                            font-weight: 400;
                                            font-size: var(--ion-font-size-12);
                                            margin-top: 0.113rem;

                                            span {
                                                display: inline;
                                                color: var(--ion-color, #3880ff);
                                            }
                                        }

                                        div {
                                            word-break: break-word;
                                            width: auto;
                                            font-weight: 600;

                                            span {
                                                color: var(--ion-content-color);
                                                margin-left: var(--ion-margin-10);
                                                font-weight: 400;
                                                float: right;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        ion-card-content {
                            display: block;
                            border-bottom: 1px solid #ddd;

                            p {
                                margin: var(--ion-margin-0) var(--ion-margin-10) var(--ion-margin-10);
                                color: #000;
                            }

                            .img-upload {
                                text-align: center;
                                flex-wrap: wrap;

                                swiper-container {
                                    &::part(pagination) {
                                        width: 100%;
                                        height: 21px;
                                        background-color: var(--ion-color);
                                        bottom: 0px;
                                    }

                                    &::part(bullet) {
                                        background-color: var(--ion-background-gray);
                                        opacity: 1;
                                    }

                                    &::part(bullet-active) {
                                        background-color: var(--ion-color-white);
                                    }
                                }
                            }
                        }
                    }
                }

                &.sangh {
                    ion-card {
                        &.detail {
                            ion-card-header {
                                &:first-child {
                                    background: #f3e1fc;
                                    border-top: 2px solid var(--ion-color-sangh);
                                    border-bottom: 2px solid var(--ion-color-sangh);

                                    ion-card-title {
                                        div {
                                            p {
                                                color: #000;
                                            }

                                            span {
                                                color: var(--ion-color-sangh);
                                            }
                                        }
                                    }

                                    p {
                                        color: var(--ion-color-sangh);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    ion-footer {
        position: relative;
        margin-bottom: 10px;

        ion-textarea {
            padding: 10px;

            .textarea-wrapper {
                min-height: 30px !important;
                max-height: 120px !important;
            }

            textarea {
                padding: var(--ion-padding-10) var(--ion-padding-40) var(--ion-padding-10) var(--ion-padding-10) !important;
                border: 1px solid #aeb6bf !important;
                border-radius: 5px !important;
            }
        }

        ion-icon {
            position: absolute;
            right: 18px;
            bottom: 18px;
            z-index: 9;
            font-size: 27px;
            color: var(--ion-color);
        }
    }
}