/* GP Video Uploader - căn lề & kích thước video ở giao diện ngoài + trong editor */

/* Video luôn co giãn theo khung, không tràn. */
.wp-block-video video,
.gpvu-video-align video {
	max-width: 100%;
	height: auto;
}

/* Căn trái - video nổi sang trái, chữ chảy bên phải. */
.wp-block-video.alignleft,
.gpvu-video-align.gpvu-align-left {
	float: left;
	margin: 0 1.5em 1em 0;
	max-width: 100%;
}

/* Căn phải. */
.wp-block-video.alignright,
.gpvu-video-align.gpvu-align-right {
	float: right;
	margin: 0 0 1em 1.5em;
	max-width: 100%;
}

/* Căn giữa.
   Khung [video] của WordPress (.wp-video / .mejs-container) là block có chiều rộng
   cố định, nên phải căn giữa chính khung đó bằng margin auto - text-align không đủ. */
.wp-block-video.aligncenter,
.gpvu-video-align.gpvu-align-center {
	display: block;
	text-align: center;
}

.gpvu-video-align.gpvu-align-center .wp-video,
.gpvu-video-align.gpvu-align-center .mejs-container,
.gpvu-video-align.gpvu-align-center video,
.wp-block-video.aligncenter video {
	margin-left: auto !important;
	margin-right: auto !important;
	float: none;
}

/* Nhúng YouTube/Vimeo (oEmbed) responsive tỉ lệ 16:9. */
.gpvu-embed-responsive {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 1em;
}

.gpvu-embed-responsive iframe,
.gpvu-embed-responsive object,
.gpvu-embed-responsive embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* Dự phòng cho trình duyệt cũ chưa hỗ trợ aspect-ratio. */
@supports not (aspect-ratio: 16 / 9) {
	.gpvu-embed-responsive {
		height: 0;
		padding-bottom: 56.25%;
	}
}

/* Bọc shortcode [video] căn lề của classic editor. */
.gpvu-video-align {
	display: block;
}

.gpvu-video-align .wp-video,
.gpvu-video-align .mejs-container {
	max-width: 100%;
}

/* Khi căn trái/phải: cho khung .wp-video co theo nội dung để nổi cạnh chữ. */
.gpvu-video-align.gpvu-align-left .wp-video,
.gpvu-video-align.gpvu-align-right .wp-video {
	max-width: 100%;
}