/*
 * CSS riêng của mẫu #2 — chỉ những chỗ khác bản dựng gốc:
 *  - các khối được ánh xạ sang nội dung gia phả (giới thiệu, quỹ họ, thư viện ảnh)
 *  - lớp hỗ trợ hover-edit của plugin
 * Phần tạo nên giao diện nằm ở theme-base.css (bóc từ <style> của trang gốc).
 *
 * ⚠️ theme-base.css khoá luật theo id khối, kiểu .Header7[id='khoiBao524'] — CMS gốc
 * sinh id riêng cho từng khối rồi viết CSS bám vào đó. Vì vậy markup của mẫu này PHẢI
 * giữ nguyên mấy id khoiBaoNNN; bỏ đi là mất gần hết luật bố cục, trang vẫn có nền và
 * hoa văn nên rất dễ tưởng CSS đã chạy đúng.
 */

:root { --mtl-primary: #8c1c1c; }

/* ------------------------------------------------ khối giới thiệu trong khung */
.mtl-intro { padding: 40px 0 10px; }
.mtl-introBox {
    max-width: 980px; margin: 0 auto; padding: 26px 34px;
    color: #f6e3c4; text-align: center; line-height: 1.75;
    background: var(--mtl-primary);
    border: 2px solid #d9a441; border-radius: 6px;
    box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}
.mtl-introBox p { margin: 0 0 10px; }
.mtl-introBox p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ khung video: nút play đè lên ảnh */
.mtl-playbox, .mtl-videolib a { position: relative; display: block; }
.mtl-playbox img, .mtl-videolib img, .mtl-photolib img { width: 100%; height: auto; display: block; border-radius: 6px; }
.mtl-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    background: rgb(0 0 0 / .62); color: #fff; font-size: 15px; white-space: nowrap;
}
.mtl-play.sm { padding: 7px; font-size: 13px; }
.mtl-zoom {
    position: absolute; right: 10px; bottom: 10px;
    width: 30px; height: 30px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    background: rgb(0 0 0 / .55); color: #fff;
}

/* ------------------------------------------------ thư viện video / ảnh */
.mtl-videolib .content { display: flex; gap: 18px; flex-wrap: wrap; }
.mtl-videolib .left  { flex: 1 1 420px; min-width: 0; }
.mtl-videolib .right { flex: 1 1 300px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.mtl-videolib .left .title { margin-top: 10px; font-weight: 700; color: #f6e3c4; }
.mtl-photolib .groupItem { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mtl-photolib .item a { position: relative; display: block; }

/* ------------------------------------------------ khối quỹ họ */
.mtl-fund .content { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.mtl-fund .left  { flex: 1 1 420px; min-width: 0; color: #f6e3c4; }
.mtl-fund .left .title { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.mtl-fund .right { flex: 0 1 380px; display: flex; gap: 16px; align-items: center;
    background: #f4f1ea; border-radius: 8px; padding: 16px; }
.mtl-fund .mtl-bank { flex: 1 1 auto; font-size: 14px; line-height: 1.7; color: #222; }
.mtl-fund .mtl-bank p { margin: 0; }
.mtl-qr img { width: 130px; height: auto; display: block; border-radius: 4px; }

/* ------------------------------------------------ kiểu nền khối */
.mtl-bg-red   { background: var(--mtl-primary); padding: 30px 0; }
.mtl-bg-cream { background: #f7f2e7; padding: 30px 0; }

/* ------------------------------------------------ logo + hover-edit */
.mtl-logo { display: inline-block; }
.mtl-logo img { max-height: 74px; width: auto; display: block; }

/* nhiều nút sửa trong một vùng thì xếp thành hàng, không chồng lên nhau
   (.mtc-edit-btn của plugin định vị tuyệt đối ở góc trên phải) */
.mtg-editrow { display: none; position: absolute; top: -10px; right: -10px; z-index: 40; gap: 6px; }
.mtc-editable:hover > .mtg-editrow { display: flex; }
.mtg-editrow > .mtc-edit-btn { position: static; display: block; }

/* ------------------------------------------------ trang danh sách / bài viết */
.mtl-archive .groupItem { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.mtl-archive .item .detail .title { margin-top: 8px; font-weight: 700; }
.mtl-archive .item .detail .desc { font-size: 14px; opacity: .85; }
.mtl-content { max-width: 860px; margin: 0 auto; line-height: 1.8; }
.mtl-content img { max-width: 100%; height: auto; }
.mtl-content figure.image { margin: 24px 0; }
.mtl-content figure.image figcaption { background: #f2efe8; text-align: center; font-size: .8em; padding: 6px; }

/* ================= logo dính mép trên =================
   Huy hiệu logo có mép trên phẳng, không viền — để nó chạm hẳn mép trên màn hình
   (và mép trên footer) trông như gắn liền vào đó. Vì vậy phải gỡ mọi padding/margin
   phía trên mà CSS gốc đặt cho .logoBox. */
.Header7 .topFix { padding-top: 0; }
.Header7 .headerBox .content { align-items: flex-start; }
.Header7 .logoBox { padding: 0 !important; margin: 0 !important; align-self: flex-start; }
.Header7 .logoBox .mtl-logo,
.Header7 .logoBox a { display: block; line-height: 0; }
.Header7 .logoBox img {
    display: block; height: 118px; width: auto; max-height: none;
    margin: 0; padding: 0; border-radius: 0;
}

.Footer7 .logoFooterBox { padding: 0 !important; margin: 0 !important; }
.Footer7 .logoFooterBox a { display: block; line-height: 0; }
.Footer7 .logoFooterBox img { display: block; height: 104px; width: auto; margin: 0; padding: 0; }

/* ================= thư viện video / ảnh =================
   Không giữ cách bày của bản gốc: video 4 ô/hàng (mặc định 1 hàng),
   ảnh 6 ô/hàng (tối đa 2 hàng). "Xem tất cả" dẫn sang trang chuyên mục riêng. */
#khoiBao547 .newsDS .item { width: 25%; }
#khoiBao548 .newsDS .item { width: calc(100% / 6); }
#khoiBao548 .newsDS .itemDetail { padding: 0 8px 10px; }
#khoiBao548 .newsDS .itemTitle { font-size: 14px; max-height: 3.2em; height: auto; }
#khoiBao548 .newsDS .itemDesc,
#khoiBao548 .newsDS .itemMore { display: none; }

@media (max-width: 1200px) {
    #khoiBao548 .newsDS .item { width: calc(100% / 4); }
}
@media (max-width: 900px) {
    #khoiBao547 .newsDS .item { width: 50%; }
    #khoiBao548 .newsDS .item { width: calc(100% / 3); }
}
@media (max-width: 600px) {
    #khoiBao547 .newsDS .item,
    #khoiBao548 .newsDS .item { width: 50%; }
}

/* ================= mobile: menu trái, tìm kiếm phải =================
   Bố trí chuẩn: nút menu bên trái, logo giữa, kính lúp bên phải; menu sổ ra từ
   bên trái như ngăn kéo. CSS gốc không có sẵn kiểu này nên viết riêng. */
@media (max-width: 991px) {
    .Header7 .headerBox .content { position: relative; min-height: 74px; }
    .Header7 .openMenuRes {
        position: absolute; left: 12px; top: 18px; z-index: 6;
        display: block; font-size: 26px; color: #f6e3c4;
    }
    .Header7 .logoBox { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
    .Header7 .logoBox img { height: 84px; }
    .Header7 .searchBox { position: absolute; right: 12px; top: 14px; z-index: 6; }
    .Header7 .searchBox .btnSearch { font-size: 22px; color: #f6e3c4; }
    .Header7 .searchBox .inputBox {
        display: none; position: fixed; left: 0; right: 0; top: 74px; z-index: 60;
        background: #fff; padding: 10px 12px; box-shadow: 0 4px 12px rgb(0 0 0 / .2);
    }
    .Header7 .searchBox .inputBox.open { display: block; }
    .Header7 .searchBox .inputBox input {
        width: 100%; height: 40px; padding: 0 12px; border: 1px solid #d5d5d5; border-radius: 6px;
    }

    /* ngăn kéo menu trượt từ trái */
    .Header7 .menuHeaderBox {
        position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 70;
        background: var(--mtl-primary, #8c1c1c); overflow-y: auto;
        transform: translateX(-100%); transition: transform .25s ease;
        padding: 18px 0;
    }
    .Header7 .menuHeaderBox.open { transform: translateX(0); }
    .Header7 .menuHeaderMain { display: block !important; }
    .Header7 .menuHeaderMain > li { display: block; width: 100%; }
    .Header7 .menuHeaderMain > li > a { display: block; padding: 11px 18px; color: #f6e3c4; }
    .Header7 .menuHeaderMain .subMenu { position: static; display: none; background: rgb(0 0 0 / .18); }
    .Header7 .menuHeaderMain .subMenu a { padding: 9px 30px; color: #f6e3c4; }
    .Header7 .menuHeaderMain .openSub { position: absolute; right: 10px; padding: 10px; color: #f6e3c4; }
    .Header7 .menuHeaderMain li { position: relative; }
    .mtl-menu-backdrop {
        display: none; position: fixed; inset: 0; z-index: 65; background: rgb(0 0 0 / .45);
    }
    .mtl-menu-backdrop.open { display: block; }
}


/* ================= mobile: khớp độ ưu tiên với CSS gốc =================
   CSS gốc khoá luật theo id (.Header7[id='khoiBao524'] .openMenuRes, độ ưu tiên 0-3-0)
   nên luật .Header7 .openMenuRes (0-2-0) của tôi thua và không đổi được vị trí:
   nút menu vẫn nằm phải, ô tìm kiếm vẫn nằm trái. Viết cùng dạng id cho ngang cơ. */
@media (max-width: 991px) {
    .Header7[id='khoiBao524'] .headerRight { position: static; }
    .Header7[id='khoiBao524'] .openMenuRes {
        position: absolute; left: 12px; right: auto; top: 20px; z-index: 6;
    }
    .Header7[id='khoiBao524'] .searchBox {
        position: absolute; right: 12px; left: auto; top: 16px; z-index: 6; width: auto;
    }
    .Header7[id='khoiBao524'] .logoBox {
        position: absolute; left: 50%; right: auto; top: 0; transform: translateX(-50%);
    }
    .Header7[id='khoiBao524'] .logoBox img { height: 84px; }
    /* .content có padding-top; với phần tử absolute thì top:0 tính từ padding box,
       nên logo vẫn cách mép 11px — gỡ padding-top của chính .content trên mobile */
    .Header7[id='khoiBao524'] .headerBox { padding-top: 0; }
    .Header7[id='khoiBao524'] .headerBox .content { padding-top: 0; }
}