/*Related Content Template*/
.tiptap-content aside[data-template="related"] {
    position: relative;
    box-sizing: border-box;
}

.tiptap-content .template-related-card {
    display: block;
    min-height: auto; /*125px;*/
    padding: 8px;
    overflow: hidden;
    color: #111;
    text-decoration: none;
    background: #f3f3f3;
}

    .tiptap-content .template-related-card::after {
        display: block;
        clear: both;
        content: "";
    }

.tiptap-content .template-related-media {
    display: flex;
    float: left;
    align-items: center;
    justify-content: center;
    width: 188px;
    height: 125px;
    margin: 0 24px 8px 0;
    overflow: hidden;
    background: #e5e5e5;
}

    .tiptap-content .template-related-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.tiptap-content .template-related-content,
.tiptap-content .template-related-title,
.tiptap-content .template-related-summary {
    display: block;
}

.tiptap-content .template-related-title {
    margin-bottom: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.tiptap-content .template-related-summary {
    font-size: 1rem;
    line-height: 1.45;
}

.tiptap-content aside[data-template="related"][data-template-placement="left"],
.tiptap-content aside[data-template="related"][data-template-placement="right"] {
    width: 48%;
}

.tiptap-content aside[data-template="related"][data-template-placement="left"] {
    float: left;
    margin: 0 1.5rem 1rem 0;
}

.tiptap-content aside[data-template="related"][data-template-placement="right"] {
    float: right;
    margin: 0 0 1rem 1.5rem;
}

    .tiptap-content aside[data-template="related"][data-template-placement="left"] .template-related-media,
    .tiptap-content aside[data-template="related"][data-template-placement="right"] .template-related-media {
        width: 120px;
        height: 84px;
        margin-right: 14px;
    }

.tiptap-content aside[data-template="related"][data-template-placement="full"] {
    float: none;
    clear: both;
    width: 100%;
    margin: 0 0 1rem;
}

.tiptap-content::after {
    display: block;
    clear: both;
    content: "";
}

@media (max-width: 767px) {
    .tiptap-content aside[data-template="related"][data-template-placement="left"],
    .tiptap-content aside[data-template="related"][data-template-placement="right"] {
        float: none;
        width: 100%;
        margin: 0 0 1rem;
    }

    .tiptap-content .template-related-media {
        width: 120px;
        height: 90px;
        margin-right: 14px;
    }
}
/*End Related Content Template*/

/* Image Templates */
.tiptap-content .template-image-01 {
    clear: both;
    box-sizing: border-box;
    width: 100%;
    margin: 1rem auto;
    padding: 0;
    border: 0;
}

.tiptap-content .template-image-grid {
    display: grid;
    gap: 8px;
    width: 100%;
}

.tiptap-content .template-image-slot {
    aspect-ratio: 3/2;
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #e9e9e9;
}

    .tiptap-content .template-image-slot > a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .tiptap-content .template-image-slot img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.tiptap-content .template-image-caption {
    margin-top: 10px;
    color: #064b93;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}

/* Hai ảnh ngang */
.tiptap-content [data-image-layout="two-columns"] {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

/* Một ảnh trên, hai ảnh dưới */
.tiptap-content [data-image-layout="hero-top-two-bottom"] {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

    .tiptap-content [data-image-layout="hero-top-two-bottom"] > .template-image-slot:first-child {
        grid-column: 1/-1;
    }

/* Bốn ảnh 2x2 */
.tiptap-content [data-image-layout="grid-four"] {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

/* Hai ảnh trên, ba ảnh dưới */
.tiptap-content [data-image-layout="two-top-three-bottom"] {
    grid-template-columns: repeat(6,minmax(0,1fr));
}

    .tiptap-content [data-image-layout="two-top-three-bottom"] > .template-image-slot:nth-child(-n+2) {
        grid-column: span 3;
    }

    .tiptap-content [data-image-layout="two-top-three-bottom"] > .template-image-slot:nth-child(n+3) {
        grid-column: span 2;
    }

/* Một ảnh lớn trái, hai ảnh phải */
.tiptap-content [data-image-layout="hero-left-two-right"],
.tiptap-content [data-image-layout="two-left-hero-right"] {
    aspect-ratio: 3/2;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
}

    .tiptap-content [data-image-layout="hero-left-two-right"] > .template-image-slot,
    .tiptap-content [data-image-layout="two-left-hero-right"] > .template-image-slot {
        aspect-ratio: auto;
    }

        .tiptap-content [data-image-layout="hero-left-two-right"] > .template-image-slot:first-child {
            grid-row: 1/3;
        }

        .tiptap-content [data-image-layout="two-left-hero-right"] > .template-image-slot:last-child {
            grid-area: 1/2/3;
        }

/* Hai ảnh ngoài, hai ảnh giữa */
.tiptap-content [data-image-layout="hero-sides-two-center"] {
    aspect-ratio: 9/4;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
}

    .tiptap-content [data-image-layout="hero-sides-two-center"] > .template-image-slot {
        aspect-ratio: auto;
    }

        .tiptap-content [data-image-layout="hero-sides-two-center"] > .template-image-slot:first-child {
            grid-row: 1/3;
        }

        .tiptap-content [data-image-layout="hero-sides-two-center"] > .template-image-slot:nth-child(4) {
            grid-area: 1/3/3;
        }

/* Hai ảnh lớn, hai ảnh phải */
.tiptap-content [data-image-layout="two-main-two-right"] {
    aspect-ratio: 9/4;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
}

    .tiptap-content [data-image-layout="two-main-two-right"] > .template-image-slot {
        aspect-ratio: auto;
    }

        .tiptap-content [data-image-layout="two-main-two-right"] > .template-image-slot:nth-child(-n+2) {
            grid-row: 1/3;
        }

/* Bốn ảnh ngang */
.tiptap-content [data-image-layout="four-columns"] {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

/* Hai ảnh trên, một ảnh lớn dưới */
.tiptap-content [data-image-layout="two-top-hero-bottom"] {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

    .tiptap-content [data-image-layout="two-top-hero-bottom"] > .template-image-slot:last-child {
        grid-column: 1/-1;
    }

/* Gallery */
.tiptap-content .template-gallery-preview {
    max-width: 100%;
}

.tiptap-content .template-image-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 480px;
    overflow: hidden;
    background: #e9e9e9;
}

    .tiptap-content .template-image-preview > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.tiptap-content .template-image-preview-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 32px 15px 12px;
    color: #fff;
    text-align: center;
    background: linear-gradient(transparent,rgba(0,0,0,.9));
}

.tiptap-content .template-image-thumbnails {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
}

.tiptap-content .template-image-thumbnail-viewport {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .tiptap-content .template-image-thumbnail-viewport::-webkit-scrollbar {
        display: none;
    }

.tiptap-content .template-image-thumbnail-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(25% - 7.5px);
    gap: 10px;
}

.tiptap-content .template-image-thumbnail-item {
    aspect-ratio: 3/2;
    min-width: 0;
}

.tiptap-content .template-image-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
}

    .tiptap-content .template-image-thumbnail.active {
        border-color: #2589d8;
    }

    .tiptap-content .template-image-thumbnail img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.tiptap-content .template-image-thumbnail-arrow {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    color: #075a9c;
    font-size: 28px;
}

@media (max-width: 767px) {
    .tiptap-content .template-image-grid {
        aspect-ratio: auto !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
    }

        .tiptap-content .template-image-grid > .template-image-slot {
            aspect-ratio: 3/2 !important;
            grid-area: auto !important;
        }

    .tiptap-content [data-image-layout="four-columns"] {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .tiptap-content .template-image-preview {
        height: 240px;
    }

    .tiptap-content .template-image-thumbnail-list {
        grid-auto-columns: calc(50% - 4px);
        gap: 8px;
    }

    .tiptap-content .template-image-thumbnail-arrow {
        flex-basis: 26px;
    }
}
/* End Image Templates */

/*Image near*/
.lr-ct .tiptap-content > .lr-pic + .lr-pic {
    margin-top: 1.25rem;
}
@media (max-width: 640px) {
    .lr-ct .tiptap-content > .lr-pic + .lr-pic {
        margin-top: 1rem;
    }
}
/*.lr-ct .uk-slideshow-items .thumb-img-fix-height,
.lr-ct .uk-slideshow-items .thumb-img-fix-height > a {
    width: 100%;
    height: 100%;
}

    .lr-ct .uk-slideshow-items .thumb-img-fix-height img {
        width: 100%;
        height: 100%;
    }

    .lr-ct .uk-slideshow-items .thumb-img-fix-height.is-landscape img {
        object-fit: cover;
    }

    .lr-ct .uk-slideshow-items .thumb-img-fix-height.is-portrait img {
        object-fit: contain;
    }*/
/*End Image near*/

/* Audio */
.tiptap-content .tt-audio {
    display: grid;
    grid-template-columns: 112px minmax(0,1fr);
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    margin: 1.5rem 0 1rem;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #d8dee8;
    border-radius: 8px;
}

.tiptap-content .tt-audio__thumbnail-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    overflow: hidden;
    color: #2563eb;
    background: #e8eef8;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    box-sizing: border-box;
}

.tiptap-content .tt-audio__thumbnail {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.tiptap-content .tt-audio__thumbnail-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 34px;
    line-height: 1;
}

.tiptap-content .tt-audio__info {
    min-width: 0;
}

.tiptap-content .tt-audio__title {
    overflow: hidden;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tiptap-content .tt-audio__metadata {
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.tiptap-content .tt-audio__player {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 40px;
    margin-top: 12px;
}

@media (max-width: 575.98px) {
    .tiptap-content .tt-audio {
        grid-template-columns: 80px minmax(0,1fr);
        gap: 10px;
        padding: 10px;
    }

    .tiptap-content .tt-audio__thumbnail-wrapper {
        width: 80px;
        height: 80px;
    }

    .tiptap-content .tt-audio__thumbnail-fallback {
        font-size: 26px;
    }

    .tiptap-content .tt-audio__title {
        font-size: 14px;
    }

    .tiptap-content .tt-audio__metadata {
        font-size: 12px;
    }
}
/*End Audio */

/*Video*/
.tiptap-content .tt-video > .tt-video__caption {
    color: inherit;
    background: none;
}
.tiptap-content .tt-video > .lr-caption.tt-video__caption {
    margin-top: 15px;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    color: #064b93;
    text-align: center;
}
/*End Video*/