:root {
    --cinnabar: #A3311D;
    --cinnabar-dark: #7A2216;
    --gold: #B8863B;
    --gold-bright: #D9AE5C;
    --ink: #3B2A1A;
    --paper: #F4EAD2;
    --glass-bg: rgba(250, 243, 224, 0.72);
    --glass-border: rgba(184, 134, 59, 0.55);

    /* Biến dùng cho trình soạn thảo / thanh công cụ co-phong-* (mang từ thuvien sang) */
    --clay: #7C5A35;
    --ink-muted: #7C5A35;
    --ink-faint: #9C7C4A;
    --border-ancient: #B8863B;
    --border-light: rgba(184, 134, 59, 0.35);
    --border-dark: #7A2216;
    --parchment-bg: #FBF6E9;
    --parchment-hover: rgba(184, 134, 59, 0.18);
    --parchment-alt: rgba(239, 225, 184, 0.6);
    --seal: #A3311D;

}

html { overflow-x: hidden; }
body {
    font-family: 'Times New Roman', Times, serif;
    background-color: var(--paper);
    color: var(--ink);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; }

.ma-dao-glass {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(59, 42, 26, 0.08);
}
.ma-dao-glass::before {
    content: ""; position: absolute; inset: -4px; pointer-events: none; opacity: 0.55;
    background-repeat: no-repeat;
    background-size: 11px 11px;
    background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
    background-image:
        linear-gradient(to right, var(--gold) 2px, transparent 2px),
        linear-gradient(to bottom, var(--gold) 2px, transparent 2px),
        linear-gradient(to left, var(--gold) 2px, transparent 2px),
        linear-gradient(to bottom, var(--gold) 2px, transparent 2px),
        linear-gradient(to right, var(--gold) 2px, transparent 2px),
        linear-gradient(to top, var(--gold) 2px, transparent 2px),
        linear-gradient(to left, var(--gold) 2px, transparent 2px),
        linear-gradient(to top, var(--gold) 2px, transparent 2px);
}

.title-text { color: var(--cinnabar); text-shadow: none; }
.title-text a { color: inherit; text-decoration: none; }

.btn-mystic { border: 1px solid var(--glass-border); color: var(--cinnabar-dark); transition: 0.3s; background: rgba(163, 49, 29, 0.08); }
.btn-mystic:hover { background: var(--cinnabar); color: var(--paper); }
.btn-mystic.active { background: var(--cinnabar-dark); color: var(--paper); }

.nav-tab {
    position: relative;
    --corner-color: var(--gold);
    border: 1px solid var(--border-ancient);
    border-radius: 0;
    color: var(--cinnabar-dark);
    background: var(--parchment-bg);
    box-shadow: inset 0 0 0 1px rgba(184, 134, 59, 0.3), 0 1px 3px rgba(59, 42, 26, 0.12);
    transition: 0.25s;
    text-decoration: none;
    display: inline-block;
}
.nav-tab::before {
    content: ""; position: absolute; inset: -3px; pointer-events: none; opacity: 0.85;
    background-repeat: no-repeat;
    background-size: 7px 7px;
    background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
    background-image:
        linear-gradient(to right, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to bottom, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to left, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to bottom, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to right, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to top, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to left, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to top, var(--corner-color) 1.5px, transparent 1.5px);
}
.nav-tab:hover { background: var(--parchment-hover); border-color: var(--cinnabar-dark); }
.nav-tab.active {
    background: var(--cinnabar);
    color: var(--paper);
    border-color: var(--gold-bright);
    box-shadow: inset 0 0 0 1px rgba(217, 174, 92, 0.55), 0 2px 8px rgba(122, 34, 22, 0.35);
    --corner-color: var(--gold-bright);
}
.nav-tab.active::before { opacity: 1; }
.admin-panel.hidden { display: none; }
#admin-tabs-nav button { cursor: pointer; }

/* Thanh tab Quản Trị — gom theo nhóm (Hệ Thống / Nội Dung / Thành Viên),
   mỗi nhóm là 1 nút gọn kèm dropdown liệt kê các tab con bên trong. */
.admin-tabs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-tab-group { position: relative; }
.admin-tab-group > summary { list-style: none; cursor: pointer; }
.admin-tab-group > summary::-webkit-details-marker { display: none; }
.admin-group-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid var(--border-ancient);
    background: var(--parchment-bg); color: var(--cinnabar-dark);
    box-shadow: inset 0 0 0 1px rgba(184, 134, 59, 0.3), 0 1px 3px rgba(59, 42, 26, 0.12);
    transition: 0.25s; white-space: nowrap;
}
.admin-group-btn:hover { background: var(--parchment-hover); border-color: var(--cinnabar-dark); }
.admin-group-btn.active-group {
    background: var(--cinnabar); color: var(--paper); border-color: var(--gold-bright);
    box-shadow: inset 0 0 0 1px rgba(217, 174, 92, 0.55), 0 2px 8px rgba(122, 34, 22, 0.35);
}
.admin-group-current { font-weight: 400; text-transform: none; letter-spacing: normal; opacity: 0.9; }
.admin-group-caret { font-size: 9px; margin-left: 2px; transition: transform 0.2s; }
.admin-tab-group[open] .admin-group-caret { transform: rotate(180deg); }
.admin-group-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 5px; min-width: 190px;
    padding: 10px; background: var(--parchment-bg); border: 1px solid var(--border-ancient);
    box-shadow: 0 8px 20px rgba(59, 42, 26, 0.28);
}
.admin-group-dropdown .nav-tab {
    padding: 6px 10px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; text-align: left;
    white-space: nowrap; display: flex; align-items: center; gap: 7px;
}

/* ==========================================================================
   Thanh nav chính (nền tối) — gạch chân đỏ khi active trên desktop,
   menu hamburger xổ xuống dạng danh sách có icon trên mobile.
   ========================================================================== */
.main-navbar {
    position: relative;
    z-index: 50;
    background: var(--parchment-bg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 16px rgba(59, 42, 26, 0.1);
}
.main-nav-link {
    position: relative;
    --corner-color: var(--gold);
    color: var(--cinnabar-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 11.5px;
    padding: 4px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 0;
    background: rgba(184, 134, 59, 0.08);
    text-decoration: none; white-space: nowrap;
    transition: 0.25s;
}
.main-nav-link::before {
    content: ""; position: absolute; inset: -2px; pointer-events: none; opacity: 0.6;
    background-repeat: no-repeat;
    background-size: 6px 6px;
    background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
    background-image:
        linear-gradient(to right, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to bottom, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to left, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to bottom, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to right, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to top, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to left, var(--corner-color) 1.5px, transparent 1.5px),
        linear-gradient(to top, var(--corner-color) 1.5px, transparent 1.5px);
}
.main-nav-link:hover { color: var(--cinnabar); border-color: var(--cinnabar-dark); background: rgba(184, 134, 59, 0.2); --corner-color: var(--cinnabar-dark); }
.main-nav-link:hover::before { opacity: 1; }
.main-nav-link.active {
    color: var(--paper);
    border-color: var(--gold);
    background: var(--cinnabar);
    box-shadow: inset 0 0 0 1px rgba(184, 134, 59, 0.5);
    --corner-color: var(--paper);
}
.main-nav-link.active::before { opacity: 1; }
.main-nav-link-home {
    padding: 4px 9px;
    font-size: 14px;
    line-height: 1.2;
}
.nav-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.nav-tabs-scroll > * { flex-shrink: 0; }
.nav-tabs-scroll::-webkit-scrollbar { display: none; }

.nav-scroll-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 0;
    background: rgba(184, 134, 59, 0.12);
    color: var(--cinnabar-dark);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s;
}
.nav-scroll-btn:hover { background: rgba(184, 134, 59, 0.28); border-color: var(--cinnabar-dark); }
.nav-scroll-btn:disabled { opacity: 0.35; cursor: default; background: rgba(184, 134, 59, 0.12); border-color: var(--glass-border); }
.mobile-nav-panel {
    background: var(--parchment-bg);
    border-bottom: 1px solid var(--glass-border);
}
.mobile-nav-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem;
    text-decoration: none; border-left: 3px solid transparent; border-bottom: 1px solid var(--border-light);
    transition: 0.2s;
}
.mobile-nav-item:hover { background: var(--parchment-hover); color: var(--cinnabar-dark); }
.mobile-nav-item.active { background: rgba(163,49,29,0.12); border-left-color: var(--cinnabar); color: var(--cinnabar-dark); }

/* --------------------------------------------------------------------------
   Dropdown nav lồng cha/con không giới hạn số cấp (desktop) — mỗi tab có
   tab con được bọc trong <details>; bấm/chạm vào để xổ ra 1 bảng nổi bên
   dưới. Nếu 1 tab con lại có tab con riêng, <details> của nó lồng ngay bên
   trong bảng đó và hiển thị dạng khối thụt lề (không nổi đè lên bảng cha)
   để tránh các bảng chồng chéo nhau khi lồng quá sâu.
   -------------------------------------------------------------------------- */
.nav-dropdown { position: relative; }
.nav-dropdown > summary.nav-dropdown-summary { list-style: none; cursor: pointer; }
.nav-dropdown > summary.nav-dropdown-summary::-webkit-details-marker { display: none; }
.nav-dropdown-caret { font-size: 8px; margin-left: 4px; transition: transform 0.2s; opacity: 0.7; }
.nav-dropdown[open] > summary .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--parchment-bg);
    border: 1px solid var(--border-ancient);
    box-shadow: 0 8px 22px rgba(59, 42, 26, 0.25);
}
.nav-dropdown-menu .main-nav-link,
.nav-dropdown-menu .nav-dropdown-summary {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
/* Từ cấp lồng thứ 2 trở đi: không nổi đè lên nữa, hiển thị thành khối thụt
   lề ngay bên trong bảng cha — cho phép lồng bao nhiêu cấp cũng gọn gàng. */
.nav-dropdown-menu .nav-dropdown-menu {
    position: static;
    margin: 2px 0 2px 10px;
    padding: 6px 0 6px 10px;
    border: none;
    border-left: 2px solid var(--gold);
    box-shadow: none;
    background: transparent;
}

/* --------------------------------------------------------------------------
   Accordion nav lồng cha/con không giới hạn số cấp (mobile) — cùng cơ chế
   <details> nhưng xổ ra ngay bên dưới thay vì nổi, mỗi cấp thụt lề sâu hơn.
   -------------------------------------------------------------------------- */
.mobile-nav-dropdown > summary.mobile-nav-dropdown-summary { list-style: none; cursor: pointer; }
.mobile-nav-dropdown > summary.mobile-nav-dropdown-summary::-webkit-details-marker { display: none; }
.mobile-nav-dropdown-summary .nav-dropdown-caret { margin-left: auto; }
.mobile-nav-dropdown[open] > summary .nav-dropdown-caret { transform: rotate(180deg); }
.mobile-nav-dropdown.active > summary.mobile-nav-dropdown-summary { color: var(--cinnabar-dark); }

/* ==========================================================================
   Khung viền bao quanh nội dung chính của diễn đàn (main) — viền vàng
   cổ trang, 4 góc trang trí giống bộ .ma-dao-glass.
   ========================================================================== */
.forum-frame {
    position: relative;
    border: 1px solid var(--border-ancient);
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(184, 134, 59, 0.25), 0 4px 20px rgba(59, 42, 26, 0.08);
}
.forum-frame::before, .forum-frame::after,
.forum-frame > .forum-frame-corner-tr, .forum-frame > .forum-frame-corner-bl {
    content: ""; position: absolute; width: 16px; height: 16px;
    border-color: var(--gold); border-style: solid; opacity: 0.8; pointer-events: none;
}
.forum-frame::before { top: -6px; left: -6px; border-width: 2px 0 0 2px; }
.forum-frame::after { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; }
.forum-frame-corner-tr { top: -6px; right: -6px; border-width: 2px 2px 0 0; }
.forum-frame-corner-bl { bottom: -6px; left: -6px; border-width: 0 0 2px 2px; }
.forum-frame .main-navbar { border-radius: 0; border-left: none; border-right: none; }
.nav-search-input { background: rgba(255,255,255,0.7); color: var(--ink); border-color: var(--glass-border) !important; }
.nav-search-input::placeholder { color: var(--clay); }
.nav-search-input:focus { outline: 1px solid var(--gold); outline-offset: 1px; }
.nav-account-btn { width: 34px; height: 34px; border-radius: 0; background: rgba(184,134,59,0.12); color: var(--cinnabar-dark); border: 1px solid var(--glass-border); }
.nav-account-btn:hover { background: rgba(184,134,59,0.25); border-color: var(--cinnabar-dark); }
.nav-account-btn.active { background: var(--cinnabar); color: var(--paper); border-color: var(--gold); }
.nav-account-dropdown { background: var(--parchment-bg); border: 1px solid var(--border-ancient); box-shadow: 0 6px 18px rgba(59,42,26,0.25); }
details.nav-account-details > summary { list-style: none; }
details.nav-account-details > summary::-webkit-details-marker { display: none; }
.member-detail-toggle > summary::-webkit-details-marker { display: none; }
.hamburger-icon { color: var(--cinnabar-dark) !important; }
#mobileNavToggle:checked ~ .main-navbar .hamburger-icon { color: var(--cinnabar); }


::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 0; }
::-webkit-scrollbar-track { background: transparent; }

.seal {
    width: 46px; height: 46px; border-radius: 0;
    background: var(--cinnabar);
    display: flex; align-items: center; justify-content: center;
    color: var(--paper); font-family: 'Times New Roman', serif; font-weight: 900;
    font-size: 18px; border: 2px solid var(--gold); flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59,42,26,0.25);
}

.rank-badge {
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    padding: 2px 10px; border-radius: 0; white-space: nowrap;
    display: inline-block;
}

.thread-row { transition: 0.2s; }
.thread-row.thread-row-pinned {
    background: rgba(163, 49, 29, 0.06);
    border-left: 3px solid var(--cinnabar);
}
.thread-row.thread-row-pinned:hover { background: rgba(163, 49, 29, 0.12); }

.pin-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
    padding: 1px 8px; border-radius: 0; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(163, 49, 29, 0.14); color: var(--cinnabar-dark);
    border: 1px solid rgba(163, 49, 29, 0.35); text-transform: uppercase;
}

.divider-orn { display:flex; align-items:center; gap:12px; color: var(--gold); }
.divider-orn::before, .divider-orn::after { content:""; flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--glass-border), transparent); }

textarea, input[type=text], input[type=password], select { font-family: 'Times New Roman', serif; }
textarea:focus, input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ==========================================================================
   Trình soạn thảo phong phú + tải file + lượt thích — mang từ thuvien sang.
   ========================================================================== */
.co-phong-card {
    background: var(--parchment-bg);
    border: 1px solid var(--border-light);
    border-radius: 0;
}
.co-phong-btn {
    background: var(--parchment-bg);
    border: 1px solid var(--border-ancient);
    color: var(--ink);
    border-radius: 0;
    cursor: pointer;
}
.co-phong-btn:hover { background-color: var(--parchment-hover); border-color: var(--border-dark); color: var(--seal); }
.co-phong-select {
    background-color: var(--parchment-bg); border: 1px solid var(--border-ancient); color: var(--ink);
    border-radius: 0; padding: 2px 4px; font-size: 11px;
}
input[type="color"].co-phong-color {
    width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-ancient); border-radius: 0; background: none;
}

.editor-content {
    overflow-wrap: break-word;
    word-break: break-word;
}
.editor-content img, .editor-content video, .editor-content iframe {
    max-width: 100%; border: 1px solid var(--border-ancient); border-radius: 0;
}
.editor-content h1, .editor-content h2, .editor-content h3, .editor-content h4 {
    font-weight: bold; color: var(--ink); margin: 0.7em 0 0.4em; line-height: 1.3;
}
.editor-content h1 { font-size: 1.6em; }
.editor-content h2 { font-size: 1.35em; }
.editor-content h3 { font-size: 1.15em; }
.editor-content h4 { font-size: 1.05em; }
.editor-content blockquote {
    margin: 0.6em 0; padding: 0.5em 1em; border-left: 3px solid var(--border-ancient);
    background: var(--parchment-alt); font-style: italic; color: var(--ink-muted);
}
.editor-content hr { border: none; border-top: 1px solid var(--border-ancient); margin: 1.2em 0; }
.editor-content ul { list-style: disc; padding-left: 1.4em; margin: 0.4em 0; }
.editor-content ol { list-style: decimal; padding-left: 1.4em; margin: 0.4em 0; }
.editor-content a { color: var(--border-ancient); text-decoration: underline; }
.editor-content a:hover { color: var(--seal); }

.announcement-collapsed {
    max-height: 130px;
    overflow: hidden;
}
.announcement-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42px;
    background: linear-gradient(to bottom, rgba(250, 243, 224, 0) 0%, var(--glass-bg) 85%);
    pointer-events: none;
}
.editor-placeholder:empty:before { content: attr(data-placeholder); color: var(--ink-faint); pointer-events: none; }

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin: 10px 0; border: 1px solid var(--border-ancient); }
.video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.audio-container { max-width: 100%; margin: 10px 0; }
.audio-container audio { width: 100%; display: block; }
.editor-content .video-container { max-width: 100%; }
.editor-content .audio-container { max-width: 100%; }

.file-attachment {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; margin: 2px 0;
    border: 1px solid var(--border-ancient); border-radius: 0;
    color: var(--ink) !important; text-decoration: none !important; font-size: 0.85em;
}
.file-attachment:hover { background: var(--parchment-hover); }
.file-attachment .file-attachment-icon { font-size: 1.1em; line-height: 1; }
.file-attachment .file-attachment-name { text-decoration: underline; }

.like-btn.liked { background-color: var(--border-ancient); color: var(--parchment-bg); }

.media-resize-overlay { position: fixed; border: 2px dashed var(--border-ancient); pointer-events: none; z-index: 9998; box-sizing: border-box; }
.media-resize-handle {
    position: fixed; width: 14px; height: 14px; z-index: 9999; cursor: nwse-resize;
    background: var(--border-ancient); border: 2px solid var(--parchment-bg); border-radius: 0;
}
.media-resize-toolbar {
    position: fixed; z-index: 9999; display: flex; align-items: center; gap: 4px;
    background: var(--parchment-bg); border: 1px solid var(--border-ancient); padding: 3px 5px; border-radius: 0;
}
.media-resize-toolbar input[type="number"] {
    width: 58px; border: 1px solid var(--border-light); padding: 2px 4px; font-size: 11px; border-radius: 0;
}
.media-resize-toolbar button {
    border: 1px solid var(--border-ancient); background: var(--parchment-bg); padding: 2px 6px;
    font-size: 11px; border-radius: 0; cursor: pointer;
}
.media-resize-toolbar button:hover { background: var(--parchment-hover); }