/*
 * 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ọ
   Ảnh nền (đặt inline từ field, mặc định fund-bg.jpg) + lớp phủ đỏ chủ đạo, chữ nằm trên.
   Không dùng ảnh ghép sẵn như bản gốc — xem ghi chú đầu template-parts/home/fund.php. */
.mtl-fund {
    position: relative; isolation: isolate;
    background-size: cover; background-position: center 32%;
    padding: 62px 0;
}
.mtl-fund::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    /* ngả vàng hổ phách thay vì đỏ, cho đỡ trùng với dải đỏ của các khối khác */
    background: linear-gradient(100deg,
        rgb(72 42 10 / .90) 0%, rgb(124 78 18 / .74) 45%, rgb(176 124 38 / .46) 100%);
}
.mtl-fund .mtl-fund-inner {
    display: flex; gap: 40px; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.mtl-fund .left { position: relative; flex: 1 1 520px; min-width: 0; color: #f6e3c4; }
.mtl-fund .eyebrow {
    font-size: 16px; letter-spacing: .12em; text-transform: uppercase;
    color: #f0d7a6; opacity: .9; margin-bottom: 6px;
}
.mtl-fund .title {
    font: 34px/1.25 var(--font-chu-bold, inherit);
    color: #fbe08a; text-transform: uppercase; margin-bottom: 14px;
    text-shadow: 0 2px 10px rgb(0 0 0 / .45);
}
.mtl-fund .title:after {
    content: ''; display: block; width: 78px; height: 3px; margin-top: 12px;
    background: #d9a441;
}
/* .desc dùng chung của bản gốc có margin 0 40px -> lệch so với tiêu đề */
.mtl-fund .desc { font-size: 17px; line-height: 1.8; max-width: 620px; margin: 0; }
.mtl-fund .desc p { margin: 0 0 10px; }
.mtl-fund .desc p:last-child { margin-bottom: 0; }

.mtl-fund .right { flex: 0 0 auto; }
.mtl-fundcard {
    display: flex; gap: 20px; align-items: center;
    background: rgb(255 253 246 / .96); border: 1px solid #d9a441; border-radius: 10px;
    padding: 20px 22px; box-shadow: 0 10px 30px rgb(0 0 0 / .35);
}
.mtl-fundcard .mtl-bank { font-size: 15px; line-height: 1.5; color: #2a1a10; }
.mtl-fundcard .mtl-bank p { margin: 0; }
.mtl-fundcard .mtl-bank .lb { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8a6b45; margin-top: 8px; }
.mtl-fundcard .mtl-bank .lb:first-child { margin-top: 0; }
.mtl-fundcard .mtl-bank .vl { font-weight: 700; }
.mtl-fundcard .mtl-bank .vl.no { font-size: 20px; letter-spacing: .04em; color: var(--color-main, #741416); }
.mtl-fundcard .mtl-bank .vl.bank { font-weight: 400; color: #5a4632; margin-top: 2px; }
.mtl-qr img { width: 132px; height: auto; display: block; border-radius: 4px; }

@media (max-width: 991px) {
    .mtl-fund { padding: 42px 0; }
    .mtl-fund .title { font-size: 26px; }
    .mtl-fund .mtl-fund-inner { gap: 26px; }
    .mtl-fund .right { flex: 1 1 100%; }
    .mtl-fundcard { justify-content: center; }
}
@media (max-width: 575px) {
    .mtl-fundcard { flex-direction: column; text-align: center; }
}

/* ------------------------------------------------ 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;
}

/* Logo footer: CSS gốc đã tự kéo khối lên (transform translateY(-cachLeTren + 16px))
   nên logo đè lên mép trên footer, chỉ cần khống chế chiều cao cho huy hiệu tròn
   của mình — ảnh gốc là logo chữ nằm ngang nên cao tới 180px. */
.Footer7 .logoFooterBox { padding: 0 !important; margin: 0 !important; }
.Footer7 .logoFooterBox .pic,
.Footer7 .logoFooterBox a { display: block; line-height: 0; }
.Footer7 .logoFooterBox img { display: block; height: 150px; width: auto; margin: 0; padding: 0; }

/* Mạng xã hội: bản gốc dùng ảnh icon tải từ CMS của họ. Mình vẽ bằng FontAwesome
   để không phải hotlink ảnh sang site gốc — kích thước giữ đúng 33px như CSS gốc. */
.Footer7 .ketNoi .social ul li a {
    display: flex; align-items: center; justify-content: center;
    width: 33px; height: 33px; border-radius: 50%;
    color: #fff; font-size: 17px; transition: .25s;
}
.Footer7 .ketNoi .social ul li a[title="Facebook"] { background: #1877f2; }
.Footer7 .ketNoi .social ul li a[title="YouTube"]  { background: #ff0000; }
.Footer7 .ketNoi .social ul li a:hover { filter: brightness(120%); transform: translateY(-2px); }

@media (max-width: 991px) {
    /* Bản gốc xếp 4 cột; màn hình hẹp thì cho về 1 cột, logo hết đè lên mép trên. */
    .Footer7 .footerBox .top { justify-content: center; text-align: center; }
    .Footer7 .logoFooterBox { float: none; transform: none !important; margin: 0 auto 20px !important; }
    .Footer7 .footerBox .top > .item { max-width: 100% !important; width: 100% !important; margin-bottom: 24px; }
    .Footer7 .infoFooter ul li { text-align: left; }
    .Footer7 .map { height: 220px; }
    .Footer7 .bottomBox .text,
    .Footer7 .bottomBox .ketNoi { float: none; text-align: center; }
    .Footer7 .bottomBox .ketNoi { margin-top: 12px; }
    /* ul của khối mạng xã hội bị CSS gốc thả nổi sang phải -> tràn khỏi màn hình */
    .Footer7 .bottomBox .ketNoi .social ul { float: none; width: 100%; justify-content: center; }
    /* bản gốc ẩn hẳn cột menu ở màn hình hẹp (trang gốc không có bố cục mobile thật,
       chỉ để trang trượt ngang). Mình xếp 1 cột nên giữ lại cột menu cho đủ thông tin. */
    .Footer7 .footerBox .top > .menuBottom { display: block !important; }
    /* chấm tròn của mục menu nằm tuyệt đối bên trái, để chữ căn giữa là lệch hẳn
       khỏi chấm — căn trái cả cụm và cho nó vào giữa cột */
    .Footer7 .menuBottom ul { max-width: 320px; margin: 0 auto; text-align: left; }
}

/* ================= 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%; }
}

/* ================= hai thư viện chạy hết khổ =================
   Ở bản gốc "Thư viện video" và "Thư viện ảnh" nằm CẠNH NHAU thành 2 cột, nên CSS
   đặt .NhomDanhMucKemBaiViet4[id='khoiBao547'/'548'] width: calc(50% - 15px).
   Mẫu này để mỗi thư viện một hàng riêng chạy hết khổ, nên phải ghi đè đúng dạng
   selector có id đó (0-3-0) — viết #khoiBao547 trơn (0-1-0) là thua, khối vẫn 585px. */
.NhomDanhMucKemBaiViet4[id='khoiBao547'],
.NhomDanhMucKemBaiViet4[id='khoiBao548'] { width: 100%; }

/* ================= PC: menu dính mép trên khi cuộn =================
   KHÔNG cần tự đặt position: sticky — CSS gốc đã có sẵn
   .Header7[id='khoiBao524']{position:sticky;top:0;z-index:9999993} cho mọi cỡ màn.
   Đặt lại chỉ tổ thừa, mà z-index thấp hơn còn làm header chui xuống dưới khối khác.
   Ở đây chỉ lo phần DIỆN MẠO khi đã dính: logo co còn 2/3 và thêm đổ bóng.
   Class .fixed do site.js gắn khi cuộn quá 120px, đúng như bản gốc. */
@media (min-width: 992px) {
    /* KHÔNG đụng vào nền của .headerBox khi dính: CSS gốc đã đặt
       background: var(--color-main) = #741416, đúng màu cần. Trước đó tôi đặt đè
       bằng --mtl-primary (#8c1c1c) — vừa thừa vừa sai màu vài độ. */

    /* logo còn 2/3: 118px -> 79px, đổi mượt cho đỡ giật */
    .Header7[id='khoiBao524'] .logoBox img { transition: height .18s ease; }
    .Header7[id='khoiBao524'].fixed .logoBox { display: block; width: auto; top: 0; }
    .Header7[id='khoiBao524'].fixed .logoBox img { height: 79px; }
    .Header7[id='khoiBao524'].fixed { box-shadow: 0 3px 12px rgb(0 0 0 / .25); }
}


/* ================= ô tìm kiếm ở header =================
   Trên desktop bản gốc ẨN .btnSearch (responsive.min.css: @media(min-width:768px)
   {.openMenuRes,.btnSearch{display:none}}) và chỉ hiện .inputBox — ô này mang ảnh nền
   searchIcon.png, vốn là KHUNG HOA VĂN kem 37x31 chứ không phải hình kính lúp. Kính
   lúp là thẻ a.seachBtn nằm bên trong khung đó.

   Lần trước tôi đặt .inputBox{display:none} nên xoá luôn cả khung lẫn kính lúp, chỉ
   còn một ô trống 40x40. Giờ: khung luôn hiện, ô nhập chữ mới là thứ ẩn/hiện. */
.Header7[id='khoiBao524'] .searchBox .inputBox {
    display: block; width: 40px; height: 40px; overflow: hidden;
    transition: width .22s ease; border-radius: 6px;
    /* Định vị GIỐNG NHAU ở cả hai trạng thái. Trước đây chỉ trạng thái .active mới
       position:absolute, lúc đóng nó rơi về static nên ô nhảy sang phải rồi mới co
       lại — mắt thấy thành một cái "chớp". Neo sẵn absolute thì đóng/mở chỉ còn
       chuyện co giãn bề rộng. */
    position: absolute; right: 0; top: 0;
}
.Header7[id='khoiBao524'] .searchBox .inputBox input {
    width: 0; height: 40px; padding: 0; border: 0; background: transparent;
    font-size: 15px; color: #222; transition: width .22s ease, padding .22s ease;
}
.Header7[id='khoiBao524'] .searchBox .inputBox a.seachBtn {
    position: absolute; right: 0; top: 0; width: 40px; height: 40px; line-height: 40px;
    text-align: center; color: var(--mtl-primary, #741416); font-size: 16px;
}
/* Mở ra khi bấm. Ô nhập phải NỔI TUYỆT ĐỐI: .searchBox đang float:right, cho nó
   rộng ra 260px là đẩy .headerRight (chứa menu) tụt xuống một dòng. Absolute thì ô
   nằm đè lên thanh, không chiếm chỗ, menu đứng yên. */
.Header7[id='khoiBao524'] .searchBox { width: 40px; }
.Header7[id='khoiBao524'] .searchBox.active .inputBox {
    z-index: 30;
    width: 260px; background-color: #fff; background-image: none;
    box-shadow: 0 6px 18px rgb(0 0 0 / .22);
}
.Header7[id='khoiBao524'] .searchBox.active .inputBox input { width: 100%; padding: 0 44px 0 14px; }

/* đang mở thì kính lúp đổi thành dấu X để đóng lại (FontAwesome 4.7: f00d) */
.Header7[id='khoiBao524'] .searchBox.active .inputBox a.seachBtn i:before { content: "\f00d"; }
.Header7[id='khoiBao524'] .searchBox.active .inputBox a.seachBtn { color: #8a8a8a; }
.Header7[id='khoiBao524'] .searchBox.active .inputBox a.seachBtn:hover { color: var(--mtl-primary, #741416); }

@media (max-width: 991px) {
    /* mobile: bản gốc hiện .btnSearch, ô nhập bung ra full ngang dưới thanh */
    .Header7[id='khoiBao524'] .searchBox .inputBox { display: none; }
    .Header7[id='khoiBao524'] .searchBox.active .inputBox {
        display: block; position: fixed; left: 12px; right: 12px; top: 78px;
        width: auto; height: 42px; z-index: 60;
    }
    .Header7[id='khoiBao524'] .searchBox.active .inputBox input { height: 42px; }
}

/* trang danh sách / tìm kiếm: 4 thẻ một hàng, dùng lại đúng khối tin tức */
.NhomDanhMucKemBaiViet4[id='khoiBao544'] .newsDS .groupItem { flex-wrap: wrap; }
.mtl-content { max-width: 900px; margin: 0 auto; }

/* Nút đóng ngăn kéo chỉ dùng cho mobile — phải ẩn mặc định, nếu không trên desktop
   nó là thẻ <a> không CSS nên hiện thành dấu X lạc lõng giữa thanh menu. */
.mtl-menu-close { display: none; }

/* ================= mobile: thanh header chạy hết khổ =================
   Bỏ hẳn hai hoa văn cong ở hai đầu (.content:before/:after) trên mobile: chúng nhô ra
   20px mỗi bên nên buộc .container phải thụt vào, ăn mất bề ngang vốn đã hẹp, và làm
   mép "nhìn thấy" lệch khỏi mép .content khiến căn lề luôn phải bù trừ.
   Bỏ đi thì thanh chạy hết khổ và mép nhìn thấy trùng mép .content — căn lề thẳng thớm.
   Desktop vẫn giữ nguyên hoa văn. */
@media (max-width: 991px) {
    .Header7[id='khoiBao524'] .content:before,
    .Header7[id='khoiBao524'] .content:after { display: none; }
    .Header7[id='khoiBao524'] .headerBox .container {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0;
    }

    /* Nút cách đều cả ba mép. Bỏ hoa văn và padding xong thanh cao 58px ở CẢ HAI
       trạng thái, nút 40px -> chừa đúng 9px mỗi phía, ngang cũng 9px. */
    .Header7[id='khoiBao524'] .openMenuRes {
        position: absolute; left: 9px; right: auto; top: 50%; transform: translateY(-50%); z-index: 6;
        /* CSS gốc đặt margin-top:7px và margin-left:10px — margin CỘNG THÊM vào top/left
           nên nút lệch mà nhìn CSS của mình vẫn thấy "đúng". Phải gỡ cả bốn phía. */
        margin: 0;
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; line-height: 1; padding: 0;
        /* cùng màu với nút kính lúp; không đặt thì glyph thừa hưởng màu nâu đậm
           rgb(63,53,38), gần như tàng hình trên nền đỏ */
        color: var(--mauChuLinkHover2, #e5bc6b);
        font-size: 20px;
    }
    .Header7[id='khoiBao524'] .searchBox {
        position: absolute; right: 9px; left: auto;
        /* Căn giữa bằng calc chứ KHÔNG dùng translateY: phần tử có transform trở thành
           khung chứa cho mọi con position:fixed, nên ô tìm kiếm bung ra sẽ tính
           left/right theo .searchBox (40px) thay vì theo màn hình — ra đúng 16px. */
        top: calc(50% - 20px); transform: none;
        z-index: 6; width: 40px; height: 40px; margin: 0;
    }
    .Header7[id='khoiBao524'] .logoBox {
        position: absolute; left: 50%; right: auto; top: 0; transform: translateX(-50%);
    }
    .Header7[id='khoiBao524'] .logoBox img { height: 84px; }
    /* CSS gốc đặt .headerBox{padding:10px 0} ở @media(max-width:767px). Trước đây tôi
       chỉ gỡ padding-top nên còn 10px ở dưới -> icon cách mép trên và mép dưới không
       đều. Gỡ cả hai cho cân. */
    .Header7[id='khoiBao524'] .headerBox { padding: 0; }
    .Header7[id='khoiBao524'] .headerBox .content { padding-top: 0; }
    .Header7[id='khoiBao524'] .headerRight { position: static; }

    /* Nền đặc khi đã cuộn. Bản gốc chỉ đặt nền cho desktop
       (@media(min-width:768px)), nên mobile trong suốt ở mọi vị trí và lộ mảng sáng
       phía sau khi cuộn qua vùng nền kem. */
    /* .fixed cũng phải gỡ padding: CSS gốc đặt lại padding-top:2px khi dính, chỉ 2px
       nhưng đủ làm icon lệch trên/dưới (11 vs 9). */
    .Header7[id='khoiBao524'].fixed .headerBox { background: var(--color-main, #741416); padding: 0; }
    .Header7[id='khoiBao524'].fixed .headerBox .content { min-height: 52px; }
    .Header7[id='khoiBao524'].fixed .headerBox .container:before { height: 52px; }
    .Header7[id='khoiBao524'] .headerBox .content,
    .Header7[id='khoiBao524'] .logoBox img { transition: height .18s ease, min-height .18s ease; }

    /* ---- ngăn kéo menu trượt từ trái ---- */
    .Header7[id='khoiBao524'] .menuHeaderBox {
        position: fixed; left: 0; top: 0; bottom: 0; width: 66.6%; max-width: 340px; z-index: 70;
        background: var(--color-main, #741416); overflow-y: auto;
        transform: translateX(-100%); transition: transform .25s ease;
        padding: 56px 0 18px;
        /* thanh cuộn mảnh và mờ, kiểu Bootstrap: vẫn biết là cuộn được nhưng không
           thành vạch trắng cắt ngang ngăn kéo */
        scrollbar-width: thin;
        scrollbar-color: rgb(255 255 255 / .22) transparent;
    }
    .Header7[id='khoiBao524'] .menuHeaderBox::-webkit-scrollbar { width: 4px; }
    .Header7[id='khoiBao524'] .menuHeaderBox::-webkit-scrollbar-track { background: transparent; }
    .Header7[id='khoiBao524'] .menuHeaderBox::-webkit-scrollbar-thumb {
        background: rgb(255 255 255 / .22); border-radius: 4px;
    }
    .Header7[id='khoiBao524'] .menuHeaderBox::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / .38); }
    /* Đặt nút đóng CHỒNG ĐÚNG chỗ nút mở (trái 9px, trên 9px, 40x40): mở bằng ngón
       nào thì đóng bằng đúng ngón đó, không phải với tay sang góc phải.
       Ngăn kéo là position:fixed neo ở (0,0) nên toạ độ absolute bên trong trùng
       luôn với toạ độ màn hình. */
    .mtl-menu-close {
        display: flex; align-items: center; justify-content: center;
        position: absolute; left: 9px; top: 9px; right: auto; z-index: 2;
        width: 40px; height: 40px;
        border: 1px solid var(--mauChuLinkHover2, #e5bc6b); border-radius: 50%;
        color: var(--mauChuLinkHover2, #e5bc6b); font-size: 20px;
    }
    .Header7[id='khoiBao524'] .menuHeaderBox.open { transform: translateX(0); }
    .Header7[id='khoiBao524'] .menuHeaderMain { display: block !important; border: 0; }
    .Header7[id='khoiBao524'] .menuHeaderMain > li { display: block; width: 100%; position: relative; float: none; }
    .Header7[id='khoiBao524'] .menuHeaderMain > li > a { display: block; padding: 11px 40px 11px 18px; color: #f6e3c4; background: none; border: 0; }
    /* Sổ sẵn toàn bộ menu con: ngăn kéo không sâu, mở sẵn thì đỡ một lần chạm và
       không cần mũi tên bung/thu. */
    .Header7[id='khoiBao524'] .menuHeaderMain .subMenu {
        position: static; display: block; background: rgb(0 0 0 / .18); width: auto; min-width: 0; box-shadow: none; border: 0;
    }
    /* Menu con đã sổ sẵn nên bỏ nút bung/thu. Phải viết span.openSub (0-3-1) cho
       khớp luật gốc .menuHeaderMain span.openSub{display:inline-block}; viết
       .openSub trơn (0-3-0) là thua, dấu + vẫn hiện. */
    .Header7[id='khoiBao524'] .menuHeaderMain span.openSub { display: none; }
    .Header7[id='khoiBao524'] .menuHeaderMain .subMenu a { padding: 9px 30px; color: #f6e3c4; background: none; border: 0; }
    .Header7[id='khoiBao524'] .menuHeaderMain .openSub {
        position: absolute; right: 6px; top: 4px; padding: 10px; color: #f6e3c4; background: none; cursor: pointer;
    }
    .mtl-menu-backdrop { display: none; position: fixed; inset: 0; z-index: 65; background: rgb(0 0 0 / .45); }
    .mtl-menu-backdrop.open { display: block; }

    /* ---- ô tìm kiếm bung ngang ngay dưới thanh ---- */
    .Header7[id='khoiBao524'] .searchBox .inputBox { display: none; }
    .Header7[id='khoiBao524'] .searchBox.active .inputBox {
        display: block; position: fixed; left: 12px; right: 12px; top: 66px;
        width: auto; height: 42px; z-index: 60;
        background: #fff; background-image: none; border-radius: 6px;
        box-shadow: 0 6px 18px rgb(0 0 0 / .28); overflow: hidden;
    }
    .Header7[id='khoiBao524'] .searchBox.active .inputBox input {
        width: 100%; height: 42px; padding: 0 46px 0 14px; border: 0; background: transparent;
        font-size: 15px; color: #222;
    }
    .Header7[id='khoiBao524'] .searchBox.active .inputBox a.seachBtn {
        position: absolute; right: 0; top: 0; width: 44px; height: 42px; line-height: 42px;
        text-align: center; color: #8a8a8a;
    }
}


/* ================= trang con: nền sáng cho phần nội dung =================
   Body của mẫu này là hoa văn đỏ sẫm. Trang chủ không lộ ra vì các khối đều có nền
   riêng, nhưng trang bài / chuyên mục / tìm kiếm thì nội dung nằm thẳng trên nền đỏ,
   chữ tối trên nền tối gần như không đọc được.
   Bản gốc cũng vậy: khối nội dung trang con của họ mang nền sáng riêng. */
.mtl-page {
    background: #f7f2e7;
    padding: 10px 0 40px;
}
.mtl-page,
.mtl-page p,
.mtl-page li,
.mtl-page .itemDesc { color: #33291f; }
.mtl-page .itemTitle a,
.mtl-page h1, .mtl-page h2, .mtl-page h3 { color: var(--mtl-primary, #741416); }
.mtl-content { color: #33291f; }
.mtl-content a { color: var(--mtl-primary, #741416); text-decoration: underline; }

/* ================= trang con: bỏ nền hoa văn của body =================
   theme-base.css đặt body{background:url(../img/bgBody.png) no-repeat top center} —
   dải hoa văn đỏ cao dành cho vùng slider của trang chủ. Trang con không có slider nên
   dải đó chỉ tổ chiếm chỗ và làm nền tối phía sau nội dung.
   WordPress gắn class "home" cho body ở trang chủ, nên chỉ cần chừa mỗi trang đó. */
body:not(.home) {
    background-image: none;
    background-color: #f7f2e7;
}

/* Tiêu đề trang con đang là #febc30 (vàng) — màu đó dành cho chữ trên nền đỏ, đặt
   trên nền kem thì chói và khó đọc. Đổi sang màu chủ đạo.
   Dùng !important vì luật gốc nằm trong khối minify 250KB với selector dài hơn; dò
   ra chính xác nó tốn hơn nhiều so với giá trị thu được, mà phạm vi ở đây đã bó hẹp
   trong .mtl-page (chỉ trang con) nên không rò sang chỗ khác. */
.mtl-page .titleBox h1,
.mtl-page .titleBox h2,
.mtl-page .titleBox .name,
.mtl-page .mtl-content h2,
.mtl-page .mtl-content h3,
.mtl-page .mtl-content h4 { color: var(--mtl-primary, #741416) !important; }

/* ================= trang bài: 2 cột như bản gốc =================
   Bản gốc: container 1200, cột nội dung 885, sidebar 285. CSS gốc đã lo phần lớn,
   đây chỉ là những chỗ markup của mình cần thêm. */
.KhoiBao2[id='khoiBao635'] > .container { display: flex; gap: 30px; align-items: flex-start; }
/* min-width:0 cho CẢ HAI cột: mặc định flex item là min-width:auto, nội dung bên
   trong (ảnh, bảng) đẩy cột phình ra khỏi flex-basis — đo được cột phải 1242px trong
   khi basis chỉ 285px, và cột trái bị ép còn 0px. */
.KhoiBao1[id='khoiBao639'] { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.KhoiBao1[id='khoiBao638'] { flex: 0 0 285px; min-width: 0; max-width: 285px; }
/* MỌI .container lồng bên trong hai cột phải bỏ min-width:1200px của bản gốc —
   không chỉ .container con trực tiếp: chuỗi lồng là
   #639 > .container > .ChiTietBaiViet1 > .pageDetail > .container > .pageWhite,
   sót một tầng là khối nội dung tràn rộng 1200px đè lên cả sidebar. */
.KhoiBao1[id='khoiBao639'] .container,
.KhoiBao1[id='khoiBao638'] .container { width: 100% !important; min-width: 0 !important; padding: 0; }

.pageWhite { background: #fff; border-radius: 8px; padding: 26px 30px 34px; box-shadow: 0 2px 10px rgb(0 0 0 / .06); }
.pageWhite .pageTitle { font-size: 28px; line-height: 1.35; margin: 0 0 12px; color: var(--mtl-primary, #741416); }
.pageWhite .thongKe { border-bottom: 1px solid #e8e2d5; padding-bottom: 10px; margin-bottom: 18px; }
.pageWhite .thongKeNgay { font-size: 14px; color: #7a7365; }
.pageWhite .thongKeNgay i { margin-right: 6px; }

/* sidebar */
.MenuSideBar1 .cateMenu { background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.MenuSideBar1 .cateMenu .title { background: var(--mtl-primary, #741416); padding: 12px 16px; }
.MenuSideBar1 .cateMenu .title a { color: #f6e3c4; font-weight: 700; text-transform: uppercase; }
.MenuSideBar1 .cateMenu ul { margin: 0; padding: 0; list-style: none; }
.MenuSideBar1 .cateMenu li { border-bottom: 1px solid #eee7d8; }
.MenuSideBar1 .cateMenu li:last-child { border-bottom: 0; }
.MenuSideBar1 .cateMenu li a { display: block; padding: 10px 16px; color: #33291f; }
.MenuSideBar1 .cateMenu li.active > a,
.MenuSideBar1 .cateMenu li a:hover { color: var(--mtl-primary, #741416); background: #faf6ec; }

.NhomDanhMucKemBaiViet7[id='khoiBao642'] .groupItem { display: block; }
.NhomDanhMucKemBaiViet7[id='khoiBao642'] .item { width: 100%; padding: 0; margin-bottom: 12px; }
.NhomDanhMucKemBaiViet7[id='khoiBao642'] .itemBox { display: flex; gap: 10px; background: #fff; border-radius: 6px; overflow: hidden; }
.NhomDanhMucKemBaiViet7[id='khoiBao642'] .khungAnh { flex: 0 0 92px; }
.NhomDanhMucKemBaiViet7[id='khoiBao642'] .itemDetail { padding: 6px 8px 6px 0; text-align: left; }
.NhomDanhMucKemBaiViet7[id='khoiBao642'] .itemTitle { font-size: 14px; height: auto; max-height: none; text-align: left; }
.NhomDanhMucKemBaiViet7[id='khoiBao642'] .itemTime { display: none; }

/* hàng bài cùng chuyên mục */
.BaiVietCungDanhMuc1 .baiVietOther { padding: 30px 0 50px; }
.BaiVietCungDanhMuc1 .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.BaiVietCungDanhMuc1 .header .title a { font-size: 20px; font-weight: 700; color: var(--mtl-primary, #741416); }
.BaiVietCungDanhMuc1 .header .moreTop { color: var(--mtl-primary, #741416); }
.BaiVietCungDanhMuc1 .groupItem { display: flex; flex-wrap: wrap; gap: 20px; }
.BaiVietCungDanhMuc1 .item { width: calc((100% - 60px) / 4); padding: 0; }
/* Ảnh nằm trên, chữ ngay dưới và dính sát (đo được cách 0px) — tách ra cho dễ đọc.
   Chỉ áp cho khối xếp DỌC; sidebar #642 xếp ngang (ảnh trái, chữ phải) nên
   margin-top ở đó vô nghĩa, không đụng tới. */
.BaiVietCungDanhMuc1 .itemDetail { margin-top: 20px; }
.BaiVietCungDanhMuc1 .itemTitle { font-weight: 700; height: auto; max-height: none; }
.BaiVietCungDanhMuc1 .itemTitle a { font-weight: 700; }
.BaiVietCungDanhMuc1 .itemTime { display: none; }

/* breadcrumb */
.BreadCrumb1 .breadCrumbBox { padding: 12px 0; }
.BreadCrumb1 ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.BreadCrumb1 li + li:before { content: "›"; margin-right: 8px; color: #9a917f; }
.BreadCrumb1 li a { color: #6b6255; }
.BreadCrumb1 li:last-child a { color: var(--mtl-primary, #741416); }
.BreadCrumb1 li i { margin-right: 5px; }

@media (max-width: 991px) {
    .KhoiBao2[id='khoiBao635'] > .container { flex-direction: column; }
    .KhoiBao1[id='khoiBao638'] { flex: 1 1 auto; width: 100%; }
    .BaiVietCungDanhMuc1 .item { width: calc((100% - 20px) / 2); }
    .pageWhite { padding: 18px 16px 24px; }
}

/* viền cho khung slider trang chủ — dùng vàng kim của mẫu (#e5bc6b, cùng màu viền
   nút menu/tìm kiếm) thay vì yellow thuần, cho khớp bảng màu đỏ–vàng của bản dựng */
.KhoiDonLe7a[id='khoiBao533'] .slideBox {
    border: 2px solid var(--mauChuLinkHover2, #e5bc6b);
    border-radius: 4px;
    overflow: hidden;
}

/* ============== đoạn giới thiệu dưới slider (KhoiDonLe7a .text) ==============
   CSS gốc canh giữa "bằng tay": height 139px cố định + padding-top 42px cho vừa đúng
   một dòng chữ của họ (theme-base.css dòng 231). Thêm hay bớt một dòng là lệch ngay.
   Đổi sang flex canh giữa trục Y, khung cao thêm khi chữ dài. */
@media (min-width: 768px) {
    .KhoiDonLe7a[id='khoiBao533'] .text {
        display: flex; flex-direction: column; justify-content: center;
        height: auto; min-height: 139px;
        padding: 18px 34px;
    }
    .KhoiDonLe7a[id='khoiBao533'] .text > p { margin: 0 0 6px; }
    .KhoiDonLe7a[id='khoiBao533'] .text > p:last-child { margin-bottom: 0; }
    /* hoa văn hai đầu cao cứng 140px — cho co giãn theo khung, không thì chữ 3 dòng
       là hoa văn hụt mất một đoạn ở đáy */
    .KhoiDonLe7a[id='khoiBao533'] .text .add1,
    .KhoiDonLe7a[id='khoiBao533'] .text .add2 {
        height: calc(100% + 6px); background-size: 100% 100%;
    }
}

/* ============== nút sửa cho vùng menu ==============
   Menu lấy từ Giao diện → Menu chứ không phải field, nên nút ở đây là nút "đi tới
   trang sửa menu". Không để ở góc trên-phải mặc định vì chỗ đó đè lên mục menu
   cuối và ô tìm kiếm — đẩy xuống ngay dưới thanh menu. */
.Header7 .mtc-menu-editwrap > .mtc-edit-btn {
    top: calc(100% - 6px);
    right: 4px;
}
/* trong ngăn kéo mobile thì lại thừa chỗ phía trên */
@media (max-width: 991px) {
    .Header7 .mtc-menu-editwrap > .mtc-edit-btn { top: 10px; right: 10px; }
}
/* cột menu ở footer đã có nút "Sửa cột menu" ở góc trên-phải rồi */
.Footer7 .menuBottom > .mtc-edit-btn[data-type="link"] { top: auto; bottom: -10px; right: -10px; }

/* ======================= nút chia sẻ trang bài =======================
   Cùng bộ class .mtc-share với các mẫu khác — sửa một mẫu thì chép sang được ngay.
   PC: cột dọc bám bên trái nội dung. Mobile: hàng ngang dưới tiêu đề. */
.mtc-share { display: flex; align-items: center; gap: 8px; }
.mtc-share__nhan { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8b8b8b; }
.mtc-share__nut {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: 1px solid #e2d8c8; border-radius: 50%;
    background: #fff; color: #5a4632; cursor: pointer; transition: .2s;
}
.mtc-share__nut svg { width: 18px; height: 18px; fill: currentColor; }
.mtc-share__nut:hover { color: #fff; border-color: transparent; transform: translateY(-2px); }
.mtc-share__nut--fb:hover { background: #1877f2; }
.mtc-share__nut--tw:hover { background: #111; }
.mtc-share__nut--in:hover { background: #0a66c2; }
.mtc-share__nut--mail:hover { background: var(--color-main, #741416); }
.mtc-share-pc .mtc-share { position: sticky; top: 90px; flex-direction: column; }
.mtc-share-mb { display: none; margin: 14px 0 18px; }
@media (max-width: 991px) {
    .mtc-share-pc { display: none; }
    .mtc-share-mb { display: block; }
    .mtc-share { flex-wrap: wrap; }
}
@media print {
    .mtc-share { display: none !important; }
}