/**
 * Module Media - Giao diện ngoài site và block
 * Tối ưu điện thoại trước (mobile-first), dùng font và màu của giao diện hiện tại.
 * @author Bs Phạm Minh Thành - BVĐK Hậu Lộc
 */
:root {
    --md-mau: #0b6fb8;
    --md-mau-dam: #08548c;
    --md-mau-nhat: #e8f1f9;
    --md-chu: #1f2933;
    --md-chu-phu: #5f6b7a;
    --md-vien: #e3e8ee;
    --md-nen: #fff;
    --md-nen-phu: #f5f7fa;
    --md-bo: 10px;
    --md-bong: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --md-bong-noi: 0 8px 24px rgba(16, 24, 40, .14);
    --md-khung: 16 / 9;
    --md-khoang: 12px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --md-mau-dam: color-mix(in srgb, var(--md-mau) 78%, #000);
        --md-mau-nhat: color-mix(in srgb, var(--md-mau) 10%, #fff);
    }
}

.md, .md-blk { color: var(--md-chu); font-family: var(--md-font, inherit); font-size: max(1em, 14px); line-height: 1.5; }
.md *, .md-blk * { box-sizing: border-box; }
.md img, .md-blk img { max-width: 100%; height: auto; }
.md a, .md-blk a { color: inherit; text-decoration: none; }
.md a:hover, .md-blk a:hover { color: var(--md-mau); }
.md :focus-visible, .md-blk :focus-visible { outline: 2px solid var(--md-mau); outline-offset: 2px; }
.md .sr-only, .md-blk .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.md [hidden], .md-blk [hidden] { display: none !important; }
.md { margin-bottom: 24px; }

/* ---------- Đầu trang ---------- */
.md-dau { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; }
.md-dau__ten { font-size: 1.45em; line-height: 1.25; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.md-dau__mota { color: var(--md-chu-phu); margin: 6px 0 0; }
.md-dau__dem { color: var(--md-chu-phu); margin: 4px 0 0; font-size: .9em; }
.md-dau--gon { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
@media (min-width: 768px) {
    .md-dau { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .md-dau__ten { font-size: 1.75em; }
    .md-dau .md-tim { width: 340px; flex: 0 0 auto; }
}

/* ---------- Tìm kiếm ---------- */
.md-tim { display: flex; position: relative; width: 100%; }
.md-tim__o { width: 100%; height: 42px; padding: 0 46px 0 14px; border: 1px solid var(--md-vien); border-radius: 999px; background: var(--md-nen); font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
.md-tim__o:focus { border-color: var(--md-mau); outline: none; box-shadow: 0 0 0 3px var(--md-mau-nhat); }
.md-tim__nut { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--md-mau); color: #fff; cursor: pointer; }
.md-tim--ql { margin: 0 0 14px; max-width: 420px; }

/* ---------- Thanh lọc / chip ---------- */
.md-loc { margin: 0 0 16px; }
.md-loc ul { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.md-loc ul::-webkit-scrollbar { display: none; }
.md-loc__dm { margin-top: 8px !important; }
.md-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--md-vien); background: var(--md-nen); font-size: .9em; font-weight: 500; transition: background .15s, border-color .15s, color .15s; }
.md .md-chip:hover, .md-blk .md-chip:hover { border-color: var(--md-mau); color: var(--md-mau); }
.md-chip--nhe { background: var(--md-nen-phu); border-color: transparent; font-weight: 400; height: 30px; padding: 0 12px; }
.md .md-chip--chon, .md .md-chip--chon:hover, .md-blk .md-chip--chon { background: var(--md-mau); border-color: var(--md-mau); color: #fff; }
.md-dem { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #e5484d; color: #fff; font-size: .75em; line-height: 20px; text-align: center; }

/* ---------- Phần (section) ---------- */
.md-phan { margin: 0 0 26px; }
.md-phan__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.md-phan__ten { font-size: 1.15em; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.md-phan__ten .fa { color: var(--md-mau); }
.md-phan__them { font-size: .9em; white-space: nowrap; color: var(--md-mau) !important; font-weight: 500; }

/* ---------- Lưới ---------- */
.md-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md-khoang); }
@media (min-width: 576px) { .md-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .md-luoi { grid-template-columns: repeat(var(--md-cot, 4), minmax(0, 1fr)); gap: 18px; } }
/* Trên điện thoại: cuộn ngang thay vì xếp lưới */
@media (max-width: 575.98px) {
    .md-luoi--cuon-dt { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; margin: 0; padding: 2px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .md-luoi--cuon-dt::-webkit-scrollbar { display: none; }
    .md-luoi--cuon-dt > * { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ---------- Thẻ media ---------- */
.md-the { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--md-nen); border-radius: var(--md-bo); overflow: hidden; box-shadow: var(--md-bong); transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) { .md-the:hover { transform: translateY(-2px); box-shadow: var(--md-bong-noi); } }
.md-the__anh { position: relative; display: block; aspect-ratio: var(--md-khung); background: var(--md-nen-phu); overflow: hidden; }
.md-the__anh img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
@media (hover: hover) { .md-the:hover .md-the__anh img { transform: scale(1.04); } }
.md-the__nhan { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .72em; line-height: 1.6; backdrop-filter: blur(4px); }
.md-the__goc { position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font-size: .75em; font-variant-numeric: tabular-nums; }
.md-the__phat { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); transition: transform .2s; }
.md-the__phat::after { content: ""; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--md-mau); }
.md-the--audio .md-the__phat::after { left: 15px; top: 15px; width: 16px; height: 16px; border: 0; background: var(--md-mau); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.md-the:hover .md-the__phat { transform: scale(1.08); }
.md-the__than { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.md-the__ten { font-size: .95em; line-height: 1.35; font-weight: 600; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md-the__ten a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.md-the__mota { margin: 0; color: var(--md-chu-phu); font-size: .88em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md-the__meta { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--md-chu-phu); font-size: .8em; }
/* Thẻ lớn (nổi bật) */
.md-the--lon .md-the__ten { font-size: 1.15em; -webkit-line-clamp: 3; }
@media (min-width: 768px) { .md-the--lon .md-the__ten { font-size: 1.35em; } }
/* Thẻ gọn (liên quan, block cột bên) */
.md-the--gon { flex-direction: row; box-shadow: none; background: transparent; border-radius: 8px; gap: 10px; }
.md-the--gon:hover { transform: none; box-shadow: none; }
.md-the--gon .md-the__anh { flex: 0 0 42%; max-width: 160px; border-radius: 8px; }
.md-the--gon .md-the__than { padding: 0; }
.md-the--gon .md-the__nhan { display: none; }
.md-the--gon .md-the__phat { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.md-the--gon .md-the__phat::after { left: 12px; top: 9px; border-width: 6px 0 6px 9px; }
.md-the--gon.md-the--audio .md-the__phat::after { left: 8px; top: 8px; width: 14px; height: 14px; border: 0; }
.md-the--gon .md-the__ten { font-size: .9em; }
.md-ds-gon { display: flex; flex-direction: column; gap: 12px; }

/* Nổi bật */
.md-noibat__luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md-khoang); }
.md-noibat__luoi > :first-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .md-noibat__luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; }
    .md-noibat__luoi > :first-child { grid-column: span 2; grid-row: span 2; }
    .md-noibat__luoi > :first-child .md-the__anh { aspect-ratio: auto; flex: 1; min-height: 260px; }
}

/* Nổi bật ít mục: 1 mục -> thẻ ngang rộng; 2-3 mục -> chia đều */
@media (min-width: 768px) {
    .md-noibat__luoi--1 { grid-template-columns: 1fr; }
    .md-noibat__luoi--1 > :first-child { grid-column: 1 / -1; grid-row: auto; flex-direction: row; }
    .md-noibat__luoi--1 > :first-child .md-the__anh { flex: 0 0 58%; min-height: 0; aspect-ratio: var(--md-khung); }
    .md-noibat__luoi--1 > :first-child .md-the__than { padding: 20px 24px; justify-content: center; }
    .md-noibat__luoi--2, .md-noibat__luoi--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md-noibat__luoi--2 > :first-child, .md-noibat__luoi--3 > :first-child { grid-column: auto; grid-row: span 1; }
    .md-noibat__luoi--3 > :first-child { grid-column: 1 / -1; }
    .md-noibat__luoi--2 > :first-child .md-the__anh, .md-noibat__luoi--3 > :first-child .md-the__anh { min-height: 0; aspect-ratio: var(--md-khung); flex: none; }
    .md-noibat__luoi--4 > :first-child { grid-row: span 2; }
}

/* Trạng thái trống, phân trang */
.md-trong { text-align: center; padding: 48px 16px; color: var(--md-chu-phu); background: var(--md-nen-phu); border-radius: var(--md-bo); }
.md-trong .fa { font-size: 2.6em; opacity: .5; }
.md-trong p { margin: 10px 0 0; }
.md-phan-trang { margin: 20px 0 0; }

/* ---------- Nút ---------- */
.md-nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--md-vien); background: var(--md-nen); color: var(--md-chu) !important; font: inherit; font-size: .9em; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.md-nut:hover { border-color: var(--md-mau); color: var(--md-mau) !important; }
.md-nut--chinh { background: var(--md-mau); border-color: var(--md-mau); color: #fff !important; }
.md-nut--chinh:hover { background: var(--md-mau-dam); color: #fff !important; }
.md-nut--fb { background: #1877f2; border-color: #1877f2; color: #fff !important; }
.md-nut--fb:hover { background: #0f63d1; color: #fff !important; }
.md-nut--xoa:hover { border-color: #e5484d; color: #e5484d !important; }
.md-nut--nho { height: 30px; padding: 0 10px; font-size: .82em; }
.md-nut--lon { height: 44px; padding: 0 20px; font-size: 1em; }
.md-nut[disabled] { opacity: .6; cursor: wait; }

/* ---------- Trang chi tiết ---------- */
.md-canh-bao { background: #fff7e6; border: 1px solid #ffd591; color: #874d00; padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; }
/* Giao diện NukeViet định dạng mọi thẻ figure cho nội dung CKEditor (nền xám, padding, float): đặt lại trong module */
.md figure, .md-blk figure { float: none !important; display: block !important; background: none !important; padding: 0 !important; margin: 0 !important; text-align: inherit !important; max-width: 100%; }
.md figcaption, .md-blk figcaption { font-weight: 400; text-align: left; }
.md .md-ct__khung { margin: 0 0 16px !important; width: auto; }
.md-ct__chuthich { margin: 8px 2px 0; text-align: left; font-size: .85em; color: var(--md-chu-phu); }
.md-ct__dau { margin: 0; }
/* Giao diện (vd mobile_default) có thể định dạng thẻ header/footer chung: trả về bình thường trong module và block */
.md header, .md footer, .md-blk header, .md-blk footer { position: static !important; top: auto !important; width: auto !important; min-height: 0 !important; z-index: auto !important; background: none !important; box-shadow: none !important; border: 0 !important; float: none !important; transition: none !important; }
.md-ct__phan { margin: 0 0 16px; }
.md-ct__h2 { font-size: 1.12em; font-weight: 600; line-height: 1.35; margin: 0 0 8px; color: var(--md-chu); text-transform: none; letter-spacing: 0; }
.md input, .md button, .md select, .md textarea, .md-blk button { font-family: inherit; }
.md-ct__anh { margin: 0; text-align: center; background: var(--md-nen-phu); border-radius: var(--md-bo); overflow: hidden; }
.md-ct__anh a { display: block; cursor: zoom-in; }
.md-ct__anh img { max-height: 82vh; width: auto; margin: 0 auto; display: block; }
.md-player { position: relative; width: 100%; background: #000; border-radius: var(--md-bo); overflow: hidden; aspect-ratio: 16 / 9; }
.md-player video, .md-player iframe, .md-player .md-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.md-player video { object-fit: contain; background: #000; }
.md-player--doc { max-width: 420px; margin: 0 auto; }
.md-player--audio { aspect-ratio: auto; height: 166px; background: transparent; }
.md-player--audio iframe { position: static; height: 166px; }
.md-facade { padding: 0; border: 0; background: #000; cursor: pointer; }
.md-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .2s; }
.md-facade:hover img { opacity: 1; }
.md-facade__nut { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--md-mau); box-shadow: 0 4px 20px rgba(0, 0, 0, .35); transition: transform .2s; }
.md-facade__nut::after { content: ""; position: absolute; left: 28px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.md-facade:hover .md-facade__nut { transform: scale(1.08); }
.md-facade__nguon { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .78em; }
.md-amthanh { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px; border-radius: var(--md-bo); background: linear-gradient(135deg, var(--md-mau), var(--md-mau-dam)); color: #fff; }
.md-amthanh__bia { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); background: rgba(255, 255, 255, .15); }
.md-amthanh__than { width: 100%; min-width: 0; }
.md-amthanh__ten { font-weight: 600; margin: 0 0 10px; text-align: center; }
.md-amthanh audio { width: 100%; display: block; }
@media (min-width: 576px) {
    .md-amthanh { flex-direction: row; padding: 22px; }
    .md-amthanh__bia { width: 160px; height: 160px; flex: 0 0 auto; }
    .md-amthanh__ten { text-align: left; font-size: 1.1em; }
}

/* Album: lưới kiểu gạch (masonry) bằng CSS columns */
.md-album { columns: 2; column-gap: 8px; }
@media (min-width: 576px) { .md-album { columns: 3; column-gap: 10px; } }
@media (min-width: 992px) { .md-album { columns: 4; } }
.md .md-album__o { break-inside: avoid; margin: 0 0 8px !important; border-radius: 8px; overflow: hidden; background: var(--md-nen-phu) !important; position: relative; }
.md-album__o a { display: block; cursor: zoom-in; }
.md-album__o img { width: 100%; display: block; transition: transform .3s; }
.md-album__o:hover img { transform: scale(1.03); }
.md-album__o figcaption { font-size: .8em; color: var(--md-chu-phu); padding: 6px 8px; }

.md-ct__bo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
/* Chia 2 cột theo độ rộng thực của vùng nội dung (container query), không theo màn hình */
.md-ct { container-type: inline-size; }
@container (min-width: 900px) { .md-ct__bo { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; } }
.md-ct__ten { font-size: 1.4em; line-height: 1.3; font-weight: 700; margin: 0 0 10px; letter-spacing: -.01em; }
@media (min-width: 768px) { .md-ct__ten { font-size: 1.7em; } }
.md-ct__meta { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--md-chu-phu); font-size: .88em; }
.md-ct__meta a { color: var(--md-mau) !important; }
.md-ct__nut { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
@media (max-width: 420px) { .md-ct__nut .md-nut span { display: none; } .md-ct__nut .md-nut--chinh span { display: inline; } }
.md-ct__mota { font-size: 1.02em; margin: 0 0 14px; }
.md-ct__noidung { margin: 0 0 16px; overflow-wrap: break-word; }
.md-ct__noidung img, .md-ct__noidung iframe, .md-ct__noidung video { max-width: 100%; }
.md-ct__loithoai { margin: 0 0 16px; border: 1px solid var(--md-vien); border-radius: 8px; background: var(--md-nen-phu); }
.md-ct__loithoai summary { cursor: pointer; padding: 10px 14px; font-weight: 600; }
.md-ct__loithoai summary .md-ct__h2 { display: inline; margin: 0; font-size: 1em; }
.md-ct__loithoai > div { padding: 0 14px 14px; max-height: 360px; overflow: auto; }
.md-ct__tt { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 12px; background: var(--md-nen-phu); border-radius: 8px; }
.md-ct__tt dt { font-size: .78em; color: var(--md-chu-phu); font-weight: 400; }
.md-ct__tt dd { margin: 0; font-weight: 600; }
.md-ct__the { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.md-ct__the-nhan { color: var(--md-chu-phu); font-size: .9em; margin-right: 4px; }
.md-ct__phu .md-phan__ten { margin-bottom: 12px; }
@container (min-width: 900px) { .md-ct__phu { position: sticky; top: 16px; align-self: start; } }
/* Vùng hẹp: danh sách liên quan dạng lưới 2 cột */
@container (min-width: 520px) and (max-width: 899.98px) { .md-ct__phu .md-ds-gon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- Hộp xem ảnh (lightbox) ---------- */
.md-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(10, 12, 16, .96); display: flex; flex-direction: column; color: #fff; opacity: 0; transition: opacity .2s; touch-action: none; }
.md-lb--mo { opacity: 1; }
.md-lb__dau { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; flex: 0 0 auto; }
.md-lb__dem { font-size: .9em; opacity: .85; padding-left: 6px; font-variant-numeric: tabular-nums; }
.md-lb__cong-cu { display: flex; gap: 4px; }
.md-lb button, .md-lb a.md-lb__nut { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.md-lb button:hover, .md-lb a.md-lb__nut:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.md-lb__vung { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.md-lb__vung img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: transform .25s ease, opacity .2s; }
.md-lb__vung img.md-lb--tai { opacity: .3; }
.md-lb__truoc, .md-lb__sau { position: absolute !important; top: 50%; margin-top: -24px; width: 48px !important; height: 48px !important; background: rgba(255, 255, 255, .1) !important; }
.md-lb__truoc { left: 10px; }
.md-lb__sau { right: 10px; }
@media (max-width: 767.98px) { .md-lb__truoc, .md-lb__sau { display: none !important; } }
.md-lb__chu { flex: 0 0 auto; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); text-align: center; font-size: .92em; opacity: .9; min-height: 44px; }

/* ---------- Thông báo, form quản lý ---------- */
.md-thongbao { padding: 12px 14px; border-radius: 8px; margin: 0 0 14px; }
.md-thongbao ul { margin: 0; padding-left: 18px; }
.md-thongbao--loi { background: #fff1f0; border: 1px solid #ffccc7; color: #a8071a; }
.md-thongbao--canh { background: #fff7e6; border: 1px solid #ffd591; color: #874d00; }
.md-thongbao--tot { background: #f0fff4; border: 1px solid #b7ebc6; color: #135200; }
.md-ql__ve { margin: 0 0 4px; font-size: .9em; }
.md-ql__ve a { color: var(--md-mau) !important; }
.md-ql__ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.md-ql__muc { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid var(--md-vien); border-radius: var(--md-bo); background: var(--md-nen); }
.md-ql__anh { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--md-nen-phu); }
.md-ql__anh img { width: 100%; height: 100%; object-fit: cover; }
.md-ql__anh .md-the__nhan { left: 4px; top: 4px; padding: 0 5px; }
.md-ql__ten { font-weight: 600; margin: 0 0 4px; line-height: 1.35; }
.md-ql__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .8em; color: var(--md-chu-phu); }
.md-ql__lydo { margin: 4px 0 0; font-size: .82em; color: #a8071a; }
.md-ql__nut { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (min-width: 768px) {
    .md-ql__muc { grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; }
    .md-ql__nut { grid-column: auto; }
}
.md-tt { display: inline-block; padding: 0 8px; border-radius: 999px; font-weight: 600; background: var(--md-nen-phu); }
.md-tt--0 { color: #5f6b7a; }
.md-tt--1 { color: #135200; background: #f0fff4; }
.md-tt--2 { color: #874d00; background: #fff7e6; }
.md-tt--3 { color: #a8071a; background: #fff1f0; }

.md-form { display: flex; flex-direction: column; gap: 14px; }
.md-form__nhom { border: 1px solid var(--md-vien); border-radius: var(--md-bo); padding: 14px; margin: 0; min-width: 0; background: var(--md-nen); }
.md-form__nhom legend { font-size: 1em; font-weight: 700; padding: 0 6px; margin: 0; width: auto; border: 0; }
.md-form__dong { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.md-form__dong:last-child { margin-bottom: 0; }
.md-form__dong > label { font-weight: 600; font-size: .92em; margin: 0; }
.md-form__dong abbr { color: #e5484d; text-decoration: none; border: 0; }
.md-form input[type=text], .md-form input[type=date], .md-form input[type=datetime-local], .md-form select, .md-form textarea { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--md-vien); border-radius: 8px; font: inherit; font-size: 16px; color: inherit; background: var(--md-nen); }
.md-form textarea { min-height: 84px; resize: vertical; }
.md-form input:focus, .md-form select:focus, .md-form textarea:focus { border-color: var(--md-mau); outline: none; box-shadow: 0 0 0 3px var(--md-mau-nhat); }
.md-form input[type=file] { width: 100%; padding: 10px; border: 1px dashed var(--md-vien); border-radius: 8px; background: var(--md-nen-phu); font-size: .9em; }
.md-form__goiy { margin: 0; font-size: .82em; color: var(--md-chu-phu); }
.md-form__hien-tai { margin: 0; font-size: .88em; }
.md-form__chon { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 6px 0; cursor: pointer; }
.md-form__chon input { width: 18px; height: 18px; margin: 0; }
.md-form__cot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
@media (min-width: 576px) { .md-form__cot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.md-form__loai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 576px) { .md-form__loai { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.md-form__loai-o { margin: 0; cursor: pointer; }
.md-form__loai-o input { position: absolute; opacity: 0; pointer-events: none; }
.md-form__loai-o span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 1px solid var(--md-vien); border-radius: 8px; font-weight: 600; }
.md-form__loai-o input:checked + span { border-color: var(--md-mau); background: var(--md-mau-nhat); color: var(--md-mau); box-shadow: inset 0 0 0 1px var(--md-mau); }
.md-form__loai-o input:focus-visible + span { outline: 2px solid var(--md-mau); outline-offset: 2px; }
.md-form__xem img, .md-form__xem video { max-width: 100%; max-height: 260px; border-radius: 8px; display: block; }
.md-form__xem audio { width: 100%; }
.md-form__anh-cu img { border-radius: 6px; object-fit: cover; }
.md-form__album { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.md-form__album li { display: flex; align-items: center; gap: 8px; }
.md-form__album img { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.md-form__album input[type=text] { min-height: 34px; padding: 4px 8px; font-size: 14px; }
.md-form__luoi-xem { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.md-form__luoi-xem img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.md-form__luu { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--md-nen) 75%, rgba(255, 255, 255, 0)); }
.md-form__tien-do { flex: 1 1 100%; margin: 0; display: flex; align-items: center; gap: 8px; font-size: .85em; }
.md-form__tien-do progress { flex: 1; height: 8px; }

/* =================== BLOCK =================== */
.md-blk { margin-bottom: 16px; }
.md-blk__dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.md-blk__ten { font-size: 1.05em; font-weight: 700; margin: 0; }
.md-blk__them { font-size: .85em; color: var(--md-mau) !important; white-space: nowrap; }

/* Block cuộn ngang (điện thoại, thẻ kiểu "story") */
.md-cuon { position: relative; }
.md-cuon__ray { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; margin: 0 -2px; }
.md-cuon__ray::-webkit-scrollbar { display: none; }
.md-cuon__ray > * { flex: 0 0 var(--md-rong-the, 46%); scroll-snap-align: start; }
@media (min-width: 576px) { .md-cuon__ray > * { flex-basis: var(--md-rong-the-pc, 30%); } }
@media (min-width: 992px) { .md-cuon__ray > * { flex-basis: var(--md-rong-the-lg, 23%); } }
.md-cuon__nut { position: absolute; top: 34%; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); box-shadow: var(--md-bong-noi); color: var(--md-chu); cursor: pointer; display: none; }
.md-cuon__nut--truoc { left: -8px; }
.md-cuon__nut--sau { right: -8px; }
@media (hover: hover) and (min-width: 768px) { .md-cuon:hover .md-cuon__nut:not([disabled]) { display: block; } }
.md-story { position: relative; display: block; aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; background: #111; color: #fff !important; box-shadow: var(--md-bong); }
.md-story img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, 0) 100%); }
.md-story__chu { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 10px; }
.md-story__ten { font-size: .86em; font-weight: 600; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #fff; }
.md-story .md-the__nhan { z-index: 1; }
.md-story .md-the__phat { z-index: 1; width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.md-story .md-the__phat::after { left: 15px; top: 11px; border-width: 8px 0 8px 12px; }

/* Block trình chiếu */
.md-tc { position: relative; border-radius: var(--md-bo); overflow: hidden; background: #000; }
.md-tc__ray { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.md-tc__ray::-webkit-scrollbar { display: none; }
.md-tc__o { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: var(--md-tc-khung, 16 / 9); color: #fff !important; display: block; }
.md-tc__o img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-tc__o::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 55%); }
.md-tc__chu { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 16px 30px; }
.md-tc__ten { margin: 0; font-size: 1.05em; font-weight: 700; line-height: 1.3; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
@media (min-width: 768px) { .md-tc__ten { font-size: 1.45em; } .md-tc__chu { padding: 22px 24px 36px; } }
.md-tc__mota { margin: 6px 0 0; font-size: .9em; opacity: .9; display: none; }
@media (min-width: 768px) { .md-tc__mota { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
.md-tc__cham { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.md-tc__cham button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .2s, background .2s; }
.md-tc__cham button[aria-current="true"] { width: 22px; background: #fff; }
.md-tc__nut { position: absolute; top: 50%; margin-top: -20px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; display: none; }
.md-tc__nut--truoc { left: 10px; }
.md-tc__nut--sau { right: 10px; }
@media (hover: hover) and (min-width: 768px) { .md-tc:hover .md-tc__nut { display: block; } }

/* Block video nổi bật */
.md-bv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 992px) { .md-bv--rong { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }
.md-bv__chinh .md-player { margin: 0 0 8px; }
.md-bv__ten { font-size: 1.05em; font-weight: 700; margin: 0; line-height: 1.35; }
.md-bv__ds { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 991.98px) {
    .md-bv__ds { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .md-bv__ds::-webkit-scrollbar { display: none; }
    .md-bv__ds > .md-the { flex: 0 0 62%; scroll-snap-align: start; flex-direction: column; }
    .md-bv__ds > .md-the .md-the__anh { flex: none; max-width: none; }
}
@media (min-width: 992px) { .md-bv__ds { max-height: 460px; overflow-y: auto; padding-right: 4px; } }
.md-bv__ds .md-the--dang { background: var(--md-mau-nhat); }

/* Block âm thanh (danh sách phát) */
.md-ba { border: 1px solid var(--md-vien); border-radius: var(--md-bo); overflow: hidden; background: var(--md-nen); }
.md-ba__dau { display: flex; gap: 12px; align-items: center; padding: 12px; background: linear-gradient(135deg, var(--md-mau), var(--md-mau-dam)); color: #fff; }
.md-ba__bia { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: rgba(255, 255, 255, .2); }
.md-ba__dang { min-width: 0; flex: 1; }
.md-ba__dang p { margin: 0 0 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-ba__dang audio { width: 100%; height: 36px; display: block; }
.md-ba__ds { list-style: none; margin: 0; padding: 4px 0; max-height: 320px; overflow-y: auto; }
.md-ba__ds li { margin: 0; }
.md-ba__ds button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.md-ba__ds button:hover { background: var(--md-nen-phu); }
.md-ba__ds button[aria-current="true"] { background: var(--md-mau-nhat); color: var(--md-mau); font-weight: 600; }
.md-ba__stt { width: 22px; text-align: center; color: var(--md-chu-phu); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.md-ba__ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-ba__tg { color: var(--md-chu-phu); font-size: .8em; font-variant-numeric: tabular-nums; }
.md-ba__lk { display: block; text-align: center; padding: 8px; border-top: 1px solid var(--md-vien); font-size: .85em; color: var(--md-mau) !important; }

/* Block danh mục */
.md-bdm { list-style: none; margin: 0; padding: 0; }
.md-bdm li { margin: 0; }
.md-bdm a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--md-vien); }
.md-bdm li:last-child > a { border-bottom: 0; }
.md-bdm .md-bdm__con a { padding-left: 20px; font-size: .92em; }
.md-bdm small { color: var(--md-chu-phu); background: var(--md-nen-phu); border-radius: 999px; padding: 0 8px; }
.md-bdm--chip { display: flex; flex-wrap: wrap; gap: 8px; }
.md-bdm--chip a { border: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
    .md *, .md-blk *, .md-lb, .md-lb * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    .md-ct__nut, .md-ct__phu, .md-tim, .md-loc { display: none !important; }
}
.md-blk__cuoi { margin: 8px 0 0; }
.md-tc__chu .md-the__nhan { position: static; display: inline-flex; margin: 0 0 6px; }
.md-tc__ten { display: block; }
.md-tc__mota { display: none; }
@media (min-width: 768px) { .md-tc__mota { display: -webkit-box; } }
.md-tc .md-the__phat { z-index: 1; }

/* =====================================================================
 * KHUNG KIỂU YOUTUBE: Nav trên cùng · cây danh mục bên trái · chip loại + tìm kiếm · lưới 5×5
 * ===================================================================== */
.md-yt { position: relative; margin-bottom: 24px; }

/* Thanh Nav trên cùng */
.md-yt__nav { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 4px; margin: 0 0 8px; background: var(--md-nen); border-bottom: 1px solid var(--md-vien); }
@media (min-width: 768px) { .md-yt__nav { position: sticky; top: 0; z-index: 30; } }
.md-yt__menu { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--md-chu); font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.md-yt__menu:hover { background: var(--md-nen-phu); }
.md-yt__logo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; font-size: 1.08em; letter-spacing: -.01em; }
.md-yt__logo-icon { flex: 0 0 auto; width: 30px; height: 21px; border-radius: 6px; background: var(--md-mau); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.md-yt__logo-chu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-yt__tim-nav { flex: 1 1 auto; max-width: 560px; margin: 0 auto; min-width: 0; }
.md-yt__tim-nav .md-tim__o { height: 40px; }
.md-yt__nav-phai { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.md-yt__nut { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--md-nen-phu); font-size: .9em; font-weight: 500; white-space: nowrap; }
.md .md-yt__nut:hover { background: var(--md-vien); color: var(--md-chu); }
.md .md-yt__nut--chinh, .md .md-yt__nut--chinh:hover { background: var(--md-mau); color: #fff; }
.md-yt__nut--tron { width: 36px; padding: 0; justify-content: center; }
@media (max-width: 599.98px) {
    .md-yt__nut span { display: none; }
    .md-yt__nut { width: 36px; padding: 0; justify-content: center; }
    .md-yt__tim-nav { display: none; }
}

/* Thân: cột trái + vùng chính */
.md-yt__than { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.md-yt__chinh { container: mdytc / inline-size; min-width: 0; }

/* Cột trái mặc định là ngăn kéo (điện thoại, trang xem video, khi thu gọn) */
.md-yt__ben { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100001; width: 280px; max-width: 86vw; padding: 6px 10px 24px; overflow-y: auto; overscroll-behavior: contain; background: var(--md-nen); box-shadow: 0 0 32px rgba(0, 0, 0, .25); transform: translateX(-105%); transition: transform .22s ease; visibility: hidden; }
.md-yt--keo .md-yt__ben { transform: none; visibility: visible; }
.md-yt__nen { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .45); }
.md-yt__ben-dau { display: flex; align-items: center; gap: 8px; min-height: 52px; margin: 0 0 6px; }
/* Màn hình rộng, trang danh sách: cột trái cố định bên cạnh lưới (bấm ☰ để thu gọn) */
@media (min-width: 992px) {
    .md-yt[data-md-yt-kieu="mo"]:not(.md-yt--thu) .md-yt__than { grid-template-columns: 228px minmax(0, 1fr); }
    .md-yt[data-md-yt-kieu="mo"]:not(.md-yt--thu) .md-yt__ben { position: sticky; top: 72px; bottom: auto; z-index: 1; width: auto; max-width: none; max-height: calc(100vh - 84px); padding: 0 4px 12px 0; box-shadow: none; transform: none; visibility: visible; transition: none; background: transparent; }
    .md-yt[data-md-yt-kieu="mo"]:not(.md-yt--thu) .md-yt__ben-dau, .md-yt[data-md-yt-kieu="mo"]:not(.md-yt--thu) .md-yt__nen { display: none !important; }
}
.md-yt__nhom + .md-yt__nhom { border-top: 1px solid var(--md-vien); margin-top: 10px; padding-top: 10px; }
.md-yt__nhom-ten { margin: 0 0 6px; padding: 4px 12px; font-weight: 600; font-size: .95em; }
.md-yt__cay { list-style: none; margin: 0; padding: 0; }
.md-yt__cay--con { display: none; padding-left: 16px; }
.md-yt--mo > .md-yt__cay--con { display: block; }
.md-yt__nut-cay { position: relative; }
.md-yt__muc { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 6px 12px; border-radius: 10px; font-size: .93em; line-height: 1.3; }
.md-yt__muc .fa { flex: 0 0 18px; font-size: 1.1em; text-align: center; color: var(--md-chu-phu); }
.md-yt__muc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.md-yt__muc small { flex: 0 0 auto; color: var(--md-chu-phu); font-size: .8em; font-variant-numeric: tabular-nums; }
.md .md-yt__muc:hover { background: var(--md-nen-phu); color: var(--md-chu); }
.md .md-yt__muc--chon, .md .md-yt__muc--chon:hover { background: var(--md-mau-nhat); color: var(--md-mau); font-weight: 600; }
.md-yt__muc--chon .fa { color: var(--md-mau); }
.md-yt__nut-cay--co-con > .md-yt__muc { padding-right: 40px; }
.md-yt__xo { position: absolute; right: 4px; top: 6px; width: 30px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--md-chu-phu); cursor: pointer; }
.md-yt__xo:hover { background: var(--md-vien); }
.md-yt__xo .fa { transition: transform .15s; }
.md-yt--mo > .md-yt__xo .fa { transform: rotate(180deg); }
.md-yt__the { list-style: none; margin: 0; padding: 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }

/* Hàng chip loại + ô tìm kiếm */
.md-yt__loc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; }
.md-yt__chip { flex: 1 1 400px; min-width: 0; }
.md-yt__chip ul { list-style: none; margin: 0; padding: 2px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.md-yt__chip ul::-webkit-scrollbar { display: none; }
.md-yt__chip .md-chip { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--md-nen-phu); }
.md .md-yt__chip .md-chip:hover { background: var(--md-vien); color: var(--md-chu); }
.md .md-yt__chip .md-chip--chon, .md .md-yt__chip .md-chip--chon:hover { background: var(--md-chu); color: #fff; }
.md-yt__tim { flex: 0 1 270px; min-width: 200px; }
@media (max-width: 719.98px) {
    .md-yt__tim { order: -1; flex: 1 1 100%; }
}

/* Đầu trang trong vùng chính */
.md-yt__dau { margin: 0 0 12px; }
.md-yt__h1 { font-size: 1.3em; line-height: 1.3; font-weight: 700; margin: 0; letter-spacing: -.01em; text-transform: none; }
.md-yt__dem { margin: 2px 0 0; color: var(--md-chu-phu); font-size: .88em; }
.md-yt__mota { margin: 6px 0 0; color: var(--md-chu-phu); font-size: .92em; max-width: 900px; }

/* Lưới 5×5 (số cột theo cấu hình, co theo bề rộng vùng chính) */
.md-yt .md-luoi--yt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
@container mdytc (max-width: 339.98px) { .md-yt .md-luoi--yt { grid-template-columns: minmax(0, 1fr); } }
@container mdytc (min-width: 540px) { .md-yt .md-luoi--yt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; } }
@container mdytc (min-width: 680px) { .md-yt .md-luoi--yt { grid-template-columns: repeat(min(4, var(--md-cot, 5)), minmax(0, 1fr)); } }
@container mdytc (min-width: 780px) { .md-yt .md-luoi--yt { grid-template-columns: repeat(var(--md-cot, 5), minmax(0, 1fr)); gap: 24px 14px; } }
/* Thẻ trong lưới kiểu YouTube: ảnh bo tròn, chữ bên dưới, không khung */
.md-luoi--yt .md-the { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.md-luoi--yt .md-the:hover { transform: none; box-shadow: none; }
.md-luoi--yt .md-the__anh { border-radius: 12px; }
.md-luoi--yt .md-the__than { padding: 10px 2px 0; }
.md-luoi--yt .md-the__ten { font-size: .95em; }

/* Trang xem (video bên trái, danh sách bên phải) */
.md-yt--xem .md-ct__bo { gap: 24px; }
@container (min-width: 900px) { .md-yt--xem .md-ct__bo { grid-template-columns: minmax(0, 1fr) 360px; } }
@container (min-width: 1100px) { .md-yt--xem .md-ct__bo { grid-template-columns: minmax(0, 1fr) 402px; } }
.md-yt--xem .md-ct__phu .md-the--gon .md-the__anh { flex: 0 0 168px; max-width: 168px; border-radius: 8px; }
.md-yt--xem .md-ct__phu .md-the--gon .md-the__ten { font-size: .9em; }
.md-yt--xem .md-ct__phu .md-ds-gon { gap: 8px; }
@container (min-width: 900px) { .md-yt--xem .md-ct__phu { top: 72px; } }

/* Popup trình chiếu: ảnh nhỏ, tự chạy, toàn màn hình, tiêu đề */
.md-lb__ten { flex: 1; min-width: 0; padding: 0 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-lb__ten a { color: #fff !important; }
.md-lb__ten a:hover { text-decoration: underline; }
.md-lb__chay[aria-pressed="true"] { background: rgba(255, 255, 255, .18) !important; }
.md-lb__tien-do { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--md-mau); }
.md-lb--chay .md-lb__tien-do { animation: md-lb-chay var(--md-lb-tg, 4s) linear infinite; }
@keyframes md-lb-chay { from { width: 0; } to { width: 100%; } }
.md-lb__ds { flex: 0 0 auto; display: flex; gap: 6px; padding: 6px 12px 10px; overflow-x: auto; scrollbar-width: thin; justify-content: safe center; }
.md-lb__ds button { flex: 0 0 auto; width: 64px !important; height: 44px !important; padding: 0; border-radius: 6px !important; overflow: hidden; opacity: .55; outline-offset: 0; }
.md-lb__ds button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.md-lb__ds img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-lb__chu { padding-bottom: 6px; }
.md-lb--1 .md-lb__ds, .md-lb--1 .md-lb__chay { display: none !important; }
@media (max-width: 575.98px) { .md-lb__ds button { width: 52px !important; height: 38px !important; } }
.md-the.md-the--dang-tai .md-the__anh::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .45); }