/*
 * Menu nhiều cấp cho theme gia phả.
 *
 * styles.min.css là bản Tailwind đã build sẵn nên không có các lớp cần dùng ở đây
 * (w-max, left-full, whitespace-nowrap, group-hover/sub...). Vì vậy phần đổ xuống
 * của menu được viết bằng CSS thường, đủ cho 3 cấp.
 */

/* ---------- cấp 2 ---------- */
.mtg-menu-item { position: relative; }

.mtg-submenu {
    display: none;
    position: absolute;
    top: 48px;              /* đúng chiều cao thanh menu */
    left: 0;
    z-index: 30;
    width: max-content;     /* rộng theo mục dài nhất, không bó cứng theo menu cha */
    min-width: 200px;
    max-width: 340px;
    padding: 0.5rem;
    background: #fff;
    border-top: 1px solid var(--mtg-primary, #febc30);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.mtg-menu-item:hover > .mtg-submenu { display: block; }

.mtg-submenu ul { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mtg-submenu li { position: relative; }
.mtg-submenu > ul > li > a,
.mtg-submenu a {
    display: block;
    padding: 0.5rem 0;
    white-space: nowrap;    /* không xuống dòng giữa chừng */
}
.mtg-submenu a:hover { color: var(--mtg-primary, #febc30); }

/* ---------- cấp 3: đổ ngang sang phải ---------- */
.mtg-submenu .mtg-submenu {
    top: -0.5rem;           /* thẳng hàng với mục cha, bù phần padding */
    left: 100%;
    margin-left: 1px;
    border-top: 0;
    border-left: 1px solid var(--mtg-primary, #febc30);
}

.mtg-submenu li:hover > .mtg-submenu { display: block; }

/* nếu cấp 3 tràn mép phải màn hình thì lật sang trái */
.mtg-submenu.mtg-flip-left { left: auto; right: 100%; margin-left: 0; margin-right: 1px; }

/* ---------- mũi tên báo có menu con ---------- */
.mtg-caret { font-size: 10px; margin-left: 4px; opacity: 0.75; }
.mtg-submenu .mtg-has-child > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- menu mobile: thụt lề theo cấp ---------- */
.mtg-m-2 { padding-left: 2rem; }
.mtg-m-3 { padding-left: 3rem; }
/* nút sửa menu nằm ở đầu thanh menu, luôn hiện khi hover cả thanh */
.mtc-menu-editwrap { position: relative; }
.mtc-menu-editwrap > .mtc-edit-btn { top: 8px; right: -32px; }
.mtc-menu-editwrap:hover > .mtc-edit-btn { display: block; }

/* logo: nút nằm gọn trong khung logo, không đè lên chữ */
.mtc-editable-logo > .mtc-edit-btn { top: 2px; right: 2px; width: 22px; height: 22px; font-size: 11px; }


/* ---------------- ảnh trong nội dung bài viết ---------------- */
/*
 * styles.min.css là bản Tailwind build sẵn nên KHÔNG có .my-6 / .italic /
 * .text-neutral-500 — gắn các lớp đó vào nội dung bài là vô tác dụng.
 * Theme vốn đã có sẵn bộ style cho <figure class="image"> (nền xám, chữ nhỏ,
 * căn giữa), nên nội dung bài dùng đúng quy ước đó, không gắn lớp tiện ích.
 *
 * Chỉ chỉnh lại lề dọc cho khớp nhịp với đoạn văn: .single-post p có
 * margin-bottom 24px, nên figure cũng 24px (lề kề nhau sẽ gộp, ra đúng 24px).
 */
.single-post figure.image { margin: 24px 0; }

/* ---------------- hai câu đối treo dọc hai bên ---------------- */
/*
 * Bám sát mép khối nội dung (.container), không phải mép màn hình.
 * .container của theme rộng 1280px (màn >=1280) rồi 1536px (màn >=1536); biến
 * --mtg-half giữ nửa bề rộng đó để tính vị trí bằng calc().
 * Trên màn >=1536 mà site có câu đối thì ghìm .container lại 1280px, nếu không
 * lề chỉ còn ~32px, không đủ chỗ treo.
 */
:root { --mtg-half: 640px; --mtg-scroll-w: 138px; --mtg-scroll-gap: 12px; }

/*
 * Cuốn thư rộng 138px nên mỗi bên cần 150px lề. Thay vì ẩn đi trên màn vừa,
 * cho khối nội dung tự co lại để luôn chừa đủ 160px mỗi bên:
 *     .container = min(1280px, 100vw - 320px)
 * Màn càng rộng thì nội dung càng tiến về 1280px rồi dừng, lề dư ra.
 */
@media (min-width: 1400px) {
    .mtg-has-scrolls .container { max-width: min(1280px, calc(100vw - 320px)); }
    .mtg-has-scrolls { --mtg-half: min(640px, calc(50vw - 160px)); }
}

.mtg-scroll {
    display: none;
    position: fixed;
    top: 150px;                     /* treo gần đỉnh trang, không căn giữa màn */
    z-index: 30;
    width: var(--mtg-scroll-w);
    max-height: 84vh;
    padding: 0;
    /* nẹp vàng ngoài + nền đỏ sẫm */
    background: linear-gradient(180deg, #e8b53a 0%, #c9962a 100%);
    border-radius: 4px;
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.22);
}
.mtg-scroll-left  { right: calc(50% + var(--mtg-half) + var(--mtg-scroll-gap)); }
.mtg-scroll-right { left:  calc(50% + var(--mtg-half) + var(--mtg-scroll-gap)); }

/* nẹp trang trí trên và dưới */
.mtg-scroll-cap {
    display: block;
    height: 30px;
    background:
        repeating-linear-gradient(45deg, rgb(232 181 58 / .85) 0 5px, transparent 5px 11px),
        linear-gradient(180deg, #8c1a1c, #6a1012);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgb(232 181 58 / .55);
}

/* thân cuốn: nền đỏ, viền vàng mảnh bên trong */
.mtg-scroll-body {
    display: block;
    position: relative;
    margin: 5px;
    padding: 12px 5px;
    background: linear-gradient(180deg, #c8202a 0%, #b0161f 100%);
    border: 2px solid #e8b53a;
    border-radius: 3px;
    max-height: calc(84vh - 72px);
    overflow: hidden;
    text-align: center;
}
.mtg-word {
    display: block;                 /* mỗi chữ một dòng */
    font-family: Lobster, Merriweather, Georgia, serif;
    font-weight: 400;   /* Lobster chỉ có 1 độ đậm, ép 700 sẽ bị giả đậm */
    font-size: 24px;                /* 80% của 30px */
    line-height: 1.35;
    color: var(--mtg-couplet-color, #1c0606);
    /* Viền vàng sáng quanh chữ. paint-order vẽ viền TRƯỚC rồi mới tô ruột, nhờ vậy
       viền nằm hẳn ra ngoài; thiếu dòng này thì viền ăn vào trong làm nét chữ mảnh đi. */
    -webkit-text-stroke: 2px var(--mtg-couplet-stroke, #ffe84d);
    paint-order: stroke fill;
}

/* ---- chế độ ảnh nền cuốn thư ---- */
/*
 * ⚠️ padding theo % trong CSS tính theo chiều RỘNG của khối cha, kể cả
 * padding-top/bottom. Dùng padding % để chừa hoa văn đầu/cuối cuốn sẽ ra sai
 * (16% của 92px = 15px, trong khi cần ~45px) và chữ đè lên hoa văn.
 * Cách đúng: cố định tỉ lệ ảnh rồi định vị tuyệt đối phần chữ — top/bottom khi
 * định vị tuyệt đối mới tính theo CHIỀU CAO.
 *
 * Số đo lấy từ chính file ảnh (242x870), dò theo chuyển màu từng dòng pixel:
 * ô đỏ nằm trong khoảng x 52–189 (21.5% mỗi bên), y 114–811 (13.1% trên, 6.7% dưới).
 */
.mtg-scroll[data-bg] {
    aspect-ratio: var(--mtg-scroll-ratio, 242 / 870);   /* theo đúng ảnh đang dùng */
    height: auto;
    max-height: none;
    background: var(--mtg-scroll-bg) center / 100% 100% no-repeat;
    box-shadow: none;
    border-radius: 0;
}
.mtg-scroll[data-bg] .mtg-scroll-cap { display: none; }
.mtg-scroll[data-bg] .mtg-scroll-body {
    position: absolute;
    top: 14.6%;
    bottom: 8.2%;
    left: 22%;
    right: 22%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    overflow: hidden;
}

/* nút chọn ảnh nền, nằm dưới đáy cuốn */
.mtg-scroll-bgedit {
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    width: auto;
    height: 28px;
}
.mtg-scroll-bgedit > .mtc-edit-color { background: #444; font-size: 15px; }
.mtg-scroll-bgedit > .mtc-edit-btn { position: static; display: block; }
.mtg-scroll:hover .mtg-scroll-bgedit > .mtc-edit-btn { display: block; }

/* chỉ treo khi lề hai bên đủ rộng, không bao giờ đè lên nội dung */
/* dưới 1400px thì nội dung co lại quá nhiều, ẩn cuốn thư đi */
@media (min-width: 1400px) { .mtg-scroll { display: block; } }


/* ---------------------------------------------------------------- nền khối + màu chữ
   Nền tối thì chữ đen không đọc được. Plugin gắn lớp .mtc-fg và biến --mtc-fg lên vỏ
   khối; phần cho màu đó ăn xuống nội dung là việc của theme, vì chỉ theme mới biết
   nội dung của mình dùng những lớp màu nào.

   Phải dùng !important: tiêu đề và link trong khối mang sẵn lớp tiện ích .text-title,
   .text-neutral-darker của styles.min.css, độ ưu tiên cao hơn màu thừa kế nên không
   ghi đè được bằng cách khác. Phạm vi bó hẹp trong .mtc-fg nên không rò ra ngoài. */
.mtg-bg-soft { background: #f3f2ef; }
.mtg-bg-dark { background: #2f2318; }
.mtg-bg-deep { background: #16243d; }

.mtc-fg,
.mtc-fg h1, .mtc-fg h2, .mtc-fg h3, .mtc-fg h4, .mtc-fg h5, .mtc-fg h6,
.mtc-fg p, .mtc-fg a, .mtc-fg li, .mtc-fg time, .mtc-fg strong, .mtc-fg em {
    color: var(--mtc-fg) !important;
}
/* vẫn phải có phản hồi khi rê chuột, nhưng không nhảy sang màu chủ đạo vì màu đó
   được chọn cho nền sáng, đặt lên nền tối là chìm nghỉm */
.mtc-fg a:hover { opacity: .72; }
/* dấu chấm và đường kẻ ở thanh tiêu đề khối vốn là màu xám nhạt, trên nền tối coi như
   biến mất — cho chúng đi theo màu chữ */
.mtc-fg .bg-neutral-lighter { background-color: currentColor !important; opacity: .3; }

/* Panel bên trong tự mang nền sáng riêng (khối quỹ họ: bg-primary vàng và
   bg-neutral-lightest xám sáng) thì phải trả chữ về màu tối. Không có mấy dòng này,
   đặt khối quỹ lên nền tối là chữ sáng nằm trên panel sáng — không đọc được, mà nhìn
   ảnh chụp trang chủ dễ bỏ sót vì phần còn lại của khối vẫn đúng. */
.mtc-fg .bg-primary, .mtc-fg .bg-primary *,
.mtc-fg .bg-neutral-lightest, .mtc-fg .bg-neutral-lightest * {
    color: #000 !important;
}
.mtc-fg .bg-primary .text-neutral-darker,
.mtc-fg .bg-neutral-lightest .text-neutral-darker { color: #605d73 !important; }
/* đường kẻ trong panel sáng cũng giữ nguyên màu xám gốc */
.mtc-fg .bg-primary .bg-neutral-lighter,
.mtc-fg .bg-neutral-lightest .bg-neutral-lighter { background-color: #f1f0f5 !important; opacity: 1; }

/* Trong khối có nền riêng, hover KHÔNG được nhảy sang màu chủ đạo — màu đó chọn cho
   nền sáng, đặt lên nền tối là chìm. Luật .hover\:text-primary:hover có độ ưu tiên
   (0,2,0) cao hơn .mtc-fg a (0,1,1); khi khách đổi màu chủ đạo thì luật đó còn được
   in đè kèm !important nữa, nên phải có selector đặc hiệu hơn để giữ đúng màu chữ. */
.mtc-fg a:hover,
.mtc-fg .hover\:text-primary:hover { color: var(--mtc-fg) !important; }

/* ---------------- hàng nút sửa khi một vùng có nhiều thứ sửa được ----------------
   .mtc-edit-btn định vị tuyệt đối góc trên phải, nên hai nút trong cùng một vùng sẽ
   chồng khít lên nhau. Gom vào hàng này thì chúng nằm cạnh nhau; nút con phải đặt
   position:static vì luật hover của plugin chỉ ăn vào con TRỰC TIẾP. */
.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; }

/* ---------------- thanh trên cùng: mobile căn giữa logo ----------------
   Trên mobile bên phải thanh không còn gì (ô tìm kiếm chỉ hiện từ md trở lên), nên
   logo nằm lệch trái với một mảng trống bên phải. Căn giữa cho cân.

   Căn giữa ở chính thẻ logo chứ không ở div bọc: nút mở menu nằm trong div đó và
   đang định vị tuyệt đối theo thanh ngoài — cho div bọc thành absolute thì nó biến
   thành gốc toạ độ mới và nút menu nhảy theo logo.
   767px = ngay dưới breakpoint md của Tailwind, khớp với md:hidden của nút menu. */
@media (max-width: 767px) {
    .mtg-topbar-left { padding-left: 0; }
    .mtg-topbar-left .mtc-editable-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
    }
}

/* hàng tìm kiếm mobile: mở ra dưới thanh trên cùng khi bấm kính lúp */
.mtg-msearch { display: none; background: #fff; border-bottom: 1px solid #e5e5e5; padding: 8px 10px; }
.mtg-msearch.is-open { display: block; }
.mtg-msearch input {
    width: 100%; height: 38px; padding: 0 12px;
    border: 1px solid #d5d5d5; border-radius: 6px; font-size: 15px; color: #111;
}
@media (min-width: 768px) { .mtg-msearch { display: none !important; } }

/* nút kính lúp nằm sát mép phải thanh trên cùng.
   Không dùng lớp tiện ích right-[10px]: styles.min.css build sẵn chỉ có left-[10px],
   lớp right-[10px] không tồn tại nên gắn vào sẽ im lặng không có tác dụng. */
.mtg-searchbtn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

/* ======================= 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 #e5e5e5; border-radius: 50%;
    background: #fff; color: #555; 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: #8b1a1a; }
.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; }
}