/*
 * Nguoi Viet Online 3.0.0.2
 * Post Media Edge-to-Edge Fix
 *
 * Loaded after app.css and frontend-shell-3.0.0.1.css so legacy media
 * presentation rules cannot restore gray padding or visual borders.
 */

/* Make the two side columns scientifically symmetrical. */
.ds-columns-3 .ds-shell-grid {
    grid-template-columns:
        var(--ds-sidebar-width)
        minmax(0, var(--ds-feed-width))
        var(--ds-right-width) !important;
}

/* The post card remains the only visible outer card boundary. */
.marketplace-cam-card,
.marketplace-cam-card.description-first {
    overflow: hidden !important;
}

/* Remove every legacy media wrapper inset/background/border. */
.marketplace-cam-card .cam-media,
.marketplace-cam-card.description-first .cam-media,
.marketplace-cam-card .cam-media-single,
.marketplace-cam-card.description-first .cam-media-single {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: var(--ds-post-media-padding) !important;
    border: 0 !important;
    border-radius: var(--ds-post-media-radius) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: var(--ds-post-media-background) !important;
    display: block !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

/* Figure/tile must not contribute its own background or spacing. */
.marketplace-cam-card .cam-media-tile,
.marketplace-cam-card.description-first .cam-media-tile,
.marketplace-cam-card .cam-media-single .cam-media-tile,
.marketplace-cam-card.description-first .cam-media-single .cam-media-tile {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    display: block !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

/* Natural image size fills the post width with no gray letterbox. */
.marketplace-cam-card .cam-media img,
.marketplace-cam-card.description-first .cam-media img,
.marketplace-cam-card .cam-media-single img,
.marketplace-cam-card.description-first .cam-media-single img,
.marketplace-cam-card .cam-media-tile img,
.marketplace-cam-card.description-first .cam-media-tile img {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    object-fit: unset !important;
    object-position: center !important;
}

/*
 * Multi-image mosaic remains supported. Only mosaic tiles use cover because
 * their explicit grid cells require a fill strategy.
 */
.marketplace-cam-card .cam-media-mosaic {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.marketplace-cam-card .cam-media-mosaic .cam-media-tile {
    height: 100% !important;
}

.marketplace-cam-card .cam-media-mosaic .cam-media-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Prevent an old pseudo-element from looking like an image border. */
.marketplace-cam-card .cam-media::before,
.marketplace-cam-card .cam-media::after,
.marketplace-cam-card .cam-media-tile::before,
.marketplace-cam-card .cam-media-tile::after {
    content: none !important;
    display: none !important;
}

/* Keep the full-bleed image treatment on iPhone. */
@media (max-width: 820px) {
    .marketplace-cam-card .cam-media,
    .marketplace-cam-card .cam-media-single,
    .marketplace-cam-card .cam-media-tile,
    .marketplace-cam-card .cam-media img,
    .marketplace-cam-card .cam-media-tile img {
        width: 100% !important;
        margin-inline: 0 !important;
        border-radius: 0 !important;
    }
}