/* Giao diện các trang mới: đăng nhập/đăng ký, trang cá nhân, trang tìm kiếm.
 *
 * Dùng chung nền vũ trụ + .main-container của home.css, chỉ bổ sung phần bên
 * trong. Bảng màu bám theo home.css: nền #05051a, viền/nhấn #6366f1, chữ #e2e8f0.
 */

:root {
    --u-accent: #6366f1;
    --u-accent-light: #818cf8;
    --u-text: #e2e8f0;
    --u-muted: #94a3b8;
    --u-panel: rgba(15, 23, 42, 0.55);
    /* Khối kết quả tìm kiếm dùng nền sáng, cùng lối với khung đọc sách trong
       detail.ejs (#f8fafc) — đọc nhiều chữ liền thì nền sáng đỡ mỏi mắt hơn.
       Đục hơn khung đọc sách một nấc cho bớt chói giữa nền vũ trụ tối. Hai sắc
       để các khối nằm liền nhau xen kẽ. */
    --u-card: #e6eaf2;
    --u-card-alt: #e6eaf2;
    --u-card-border: #d5dce8;
    --u-card-text: #222;
    --u-card-muted: #5c6675;
    /* Chàm đủ đậm để đọc được trên nền sáng — --u-accent-light quá nhạt */
    --u-card-accent: #4338ca;
    --u-panel-border: rgba(99, 102, 241, 0.35);
    --u-danger: #f87171;
    --u-success: #4ade80;
    --u-warning: #fbbf24;
    /* Vàng ấm — dùng cho link tài khoản ở thanh trên cùng. Cả trang là tông
       chàm/tím trên nền xanh đậm nên chữ trắng chìm nghỉm; vàng bật hẳn lên. */
    --u-gold: #fbbf24;
    --u-gold-light: #fde68a;
}

/* Thuộc tính `hidden` chỉ tương đương display:none ở mức stylesheet mặc định
   của trình duyệt, nên BẤT KỲ rule nào đặt display (vd .auth-form dùng flex)
   cũng đè mất nó và phần tử vẫn hiện. Ghi đè một lần ở đây cho mọi phần tử
   ẩn/hiện bằng JS trong trang. */
[hidden] {
    display: none !important;
}

/* Trang tìm kiếm và trang cá nhân cần nhiều bề ngang hơn trang chủ */
.main-container-wide {
    width: 92%;
    max-width: 1100px;
}

/* ── Thanh trên cùng: chỉ chứa khối tài khoản ── */
.top-bar {
    display: flex;
    justify-content: flex-end;
    /* .main-container có padding 30px; không kéo ngược lại thì khối tài khoản
       nằm lửng giữa khoảng trống chứ không sát mép trên. */
    margin: -16px 0 12px;
}

/* ── Header: tiêu đề + ô tìm kiếm ── */
.header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-left: 20px;
}

.header-actions .search-container {
    margin-left: 0;
}

/* Hai link "Tìm kiếm nâng cao" / "Từ điển thuật ngữ" nằm ngay dưới ô tìm kiếm.
   Để NGOÀI form nên gợi ý thả xuống (.search-results, position: absolute trong
   form) không đẩy chúng đi. */
/* Cả khối vẫn nằm sát phải dưới ô tìm kiếm (header-actions căn phải), nhưng
   BÊN TRONG thì hai link kéo giãn bằng nhau và căn trái — icon và chữ của hai
   dòng thẳng hàng một cột. Căn phải từng dòng thì chữ dài ngắn khác nhau làm
   icon lệch nhau. */
.header-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-end;
    gap: 6px;
}

.advanced-search-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--u-accent-light);
    text-decoration: none;
    padding: 2px 4px;
    border-bottom: 1px dashed transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.advanced-search-link:hover {
    color: var(--u-text);
    border-bottom-color: var(--u-accent-light);
}

/* Icon các dòng có bề rộng khác nhau (sliders rộng hơn book) — cố định khung
   để chữ bắt đầu cùng một chỗ */
.advanced-search-link i {
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
}

/* Mỗi link tự ẩn khi đang đứng ở chính trang của nó. Trang tìm kiếm vẫn có
   lối sang từ điển và ngược lại — hai module riêng, đi qua lại được. */
.search-page .header-link-search,
.dictionary-page .header-link-dictionary {
    display: none;
}

/* Khách: "Tìm kiếm nâng cao" có ổ khoá vàng phía sau (cùng màu link Đăng nhập |
   Đăng ký) — bấm vào mở hộp thoại mời đăng ký. Ổ khoá không theo khung 16px cố
   định của icon đầu dòng. */
.advanced-search-link .advanced-search-lock {
    width: auto;
    flex: none;
    font-size: 10px;
    color: var(--u-gold);
    margin-left: 2px;
}

/* ── Hộp thoại mời đăng ký (chỉ khách): Tìm kiếm nâng cao, nút Lưu ──
   Khung giống bảng "Chia sẻ đến" của trang đọc (detail.css). member-gate.js
   dời nó ra <body> nên fixed bám màn hình cả trên mobile. */
.member-gate {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.member-gate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

body.member-gate-open {
    overflow: hidden;
}

.member-gate-panel {
    position: relative;
    width: min(420px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 30px 26px 24px;
    background: #0f172a;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: memberGateIn 0.18s ease-out;
}

@keyframes memberGateIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.member-gate-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--u-muted);
    font-size: 17px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.member-gate-close:hover,
.member-gate-close:focus-visible {
    outline: none;
    background: rgba(148, 163, 184, 0.16);
    color: #f8fafc;
}

/* Nội dung dùng chung: hộp thoại trên header + trang /search của khách
   (partials/member-gate.ejs) */
.member-gate-body {
    text-align: center;
    color: var(--u-text);
}

.member-gate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.1);
    color: var(--u-gold);
    font-size: 20px;
}

.member-gate-title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    color: #f8fafc;
}

.member-gate-keyword {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--u-gold-light);
}

.member-gate-message {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--u-muted);
}

/* Danh sách căn trái nhưng cả khối nằm giữa — dấu tích các dòng thẳng cột */
.member-gate-features {
    display: inline-flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    text-align: left;
    font-size: 14px;
}

.member-gate-features li {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.member-gate-features i {
    color: var(--u-success);
    font-size: 12px;
}

.member-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.member-gate-actions .auth-submit,
.member-gate-actions .auth-secondary-btn {
    margin: 0;
    padding: 11px 18px;
    font-size: 15px;
    text-decoration: none;
}

/* Trang /search của khách: thẻ mời đăng ký thay cho form + kết quả */
.search-gate {
    max-width: 480px;
    margin: 10px auto 20px;
    padding: 32px 28px 28px;
}

/* .search-icon vốn là <span>, nay là <button> để bấm được — bỏ style mặc định */
button.search-icon {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* Dấu * sau nhãn trường bắt buộc (trang đăng ký) */
.auth-required {
    color: #f87171;
    font-weight: 700;
    margin-left: 1px;
}

.user-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.user-nav-link {
    color: var(--u-text);
    text-decoration: none;
    font-size: 13px;
    padding: 6px 12px;
    border: 1px solid var(--u-panel-border);
    border-radius: 20px;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.user-nav-link:hover {
    border-color: var(--u-accent-light);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

/* Chưa đăng nhập: hai link chữ trơn, ngăn nhau bằng dấu gạch đứng */
.user-nav-guest {
    gap: 7px;
}

.user-nav-text {
    color: var(--u-gold);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: color 0.2s ease;
}

.user-nav-text:hover {
    color: var(--u-gold-light);
    text-decoration: underline;
}

.user-nav-sep {
    color: rgba(251, 191, 36, 0.45);
    font-size: 13px;
    user-select: none;
}

.user-nav-name span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Menu tài khoản xổ xuống ── */
.user-menu {
    position: relative;
}

.user-menu-caret {
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.user-menu.is-open .user-menu-caret {
    transform: rotate(180deg);
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 210px;
    /* Nền đục hẳn: menu nằm đè lên nội dung trang, để trong suốt sẽ khó đọc */
    background: #0a0e2e;
    border: 1px solid var(--u-panel-border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    z-index: 60;
    text-align: left;
}

.user-menu-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    color: var(--u-text);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}

.user-menu-dropdown a:last-child {
    border-bottom: none;
}

.user-menu-dropdown a:hover {
    background: rgba(99, 102, 241, 0.22);
}

.user-menu-dropdown i {
    width: 16px;
    text-align: center;
    opacity: 0.8;
}

/* ── Thẻ nội dung chung ── */
.auth-card,
.account-card,
.search-panel {
    background: var(--u-panel);
    border: 1px solid var(--u-panel-border);
    border-radius: 12px;
    padding: 26px 28px;
    text-align: left;
    color: var(--u-text);
}

.auth-card {
    max-width: 420px;
    margin: 26px auto;
}

.auth-card-wide {
    max-width: 640px;
}

.auth-card-message {
    max-width: 520px;
    text-align: center;
}

.auth-title {
    margin: 0 0 6px;
    font-size: 22px;
    color: #fff;
}

.auth-subtitle,
.auth-message {
    margin: 0 0 18px;
    color: var(--u-muted);
    font-size: 14px;
    line-height: 1.6;
}

.auth-hint-block {
    color: var(--u-muted);
    font-size: 13px;
    margin: 0 0 18px;
}

.auth-icon {
    font-size: 40px;
    color: var(--u-accent-light);
    margin-bottom: 12px;
}

/* ── Thông báo ── */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    text-align: left;
    border: 1px solid transparent;
}

.auth-alert-error {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fecaca;
}

.auth-alert-success {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.4);
    color: #bbf7d0;
}

.auth-alert-warning {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fde68a;
}

.auth-dev-link {
    color: var(--u-accent-light);
    word-break: break-all;
}

/* ── Nút mạng xã hội ── */
.auth-providers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.auth-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--u-panel-border);
    color: var(--u-text);
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.25s ease;
}

.auth-provider:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--u-accent-light);
}

.auth-provider-google i {
    color: #ea4335;
}

.auth-provider-facebook i {
    color: #1877f2;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--u-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--u-panel-border);
}

/* ── Form ── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-label {
    font-size: 13px;
    color: var(--u-muted);
}

.auth-optional {
    font-style: normal;
    font-size: 12px;
    color: #6b7280;
}

.auth-field input,
.auth-field select {
    background: rgba(5, 5, 26, 0.6);
    border: 1px solid var(--u-panel-border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--u-text);
    font-size: 14px;
    font-family: inherit;
    width: 100%;
}

.auth-field input:focus,
.auth-field select:focus {
    outline: none;
    border-color: var(--u-accent-light);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

.auth-field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-field select option {
    background: #0a0e2e;
    color: var(--u-text);
}

.auth-hint {
    font-size: 12px;
    color: #6b7280;
}

.auth-submit {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    background: var(--u-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.auth-submit:hover {
    background: var(--u-accent-light);
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.5);
}

.auth-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--u-muted);
}

.auth-links a {
    color: var(--u-accent-light);
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-links-buttons {
    justify-content: center;
}

/* Dùng cho cả thẻ <a> (trang thông báo) lẫn <button> (nút Huỷ trong form).
   Với <button> phải tự đặt background/font: nếu để mặc định, trình duyệt tô
   nền xám sáng của nút hệ thống, chữ sáng trên nền sáng thành ra không đọc được. */
.auth-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 1px solid var(--u-panel-border);
    border-radius: 8px;
    background: transparent;
    color: var(--u-text) !important;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

.auth-secondary-btn:hover {
    border-color: var(--u-accent-light);
    background: rgba(99, 102, 241, 0.15);
    text-decoration: none !important;
}

.auth-inline-form {
    margin: 12px 0 0;
}

.auth-link-button {
    background: none;
    border: none;
    color: var(--u-accent-light);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

/* ── Trang tìm kiếm ── */
.search-panel {
    margin-bottom: 20px;
}

.search-heading {
    margin: 0 0 16px;
    font-size: 20px;
    color: #fff;
}

/* ── Chọn chế độ: Nội dung / Từ điển ── */
.search-modes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.search-mode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--u-panel-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--u-muted);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.search-mode:hover {
    border-color: var(--u-accent-light);
    color: var(--u-text);
}

.search-mode input {
    accent-color: var(--u-accent);
    margin: 0;
    cursor: pointer;
}

/* Chế độ đang chọn: tô đậm hẳn để nhìn phát biết ngay đang tìm cái gì */
.search-mode.is-active {
    background: rgba(99, 102, 241, 0.22);
    border-color: var(--u-accent);
    color: #fff;
}

.search-form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.search-form-input {
    flex: 1 1 260px;
    background: rgba(5, 5, 26, 0.6);
    border: 1px solid var(--u-panel-border);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--u-text);
    font-size: 15px;
    font-family: inherit;
}

.search-form-input:focus {
    outline: none;
    border-color: var(--u-accent-light);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

.search-form-submit {
    background: var(--u-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.search-form-submit:hover {
    background: var(--u-accent-light);
}

.search-filters {
    margin-top: 16px;
}

.search-filters-title {
    font-size: 13px;
    color: var(--u-muted);
    margin-bottom: 8px;
}

.search-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--u-panel-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--u-text);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.search-filter:hover {
    border-color: var(--u-accent-light);
}

.search-filter input {
    accent-color: var(--u-accent);
    margin: 0;
    cursor: pointer;
}

.search-filter-exact {
    margin-top: 12px;
}

.search-exact-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

.search-summary {
    text-align: left;
    color: var(--u-muted);
    font-size: 14px;
    margin: 0 0 12px;
}

.search-empty {
    background: var(--u-card);
    border: 1px solid var(--u-card-border);
    border-radius: 12px;
    padding: 34px 24px;
    color: var(--u-card-text);
    text-align: center;
}

.search-empty p {
    margin: 0 0 8px;
}

.search-empty-hint {
    color: var(--u-card-muted);
    font-size: 13px;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.search-result {
    background: var(--u-card);
    border: 1px solid var(--u-card-border);
    border-left: 3px solid var(--u-accent);
    border-radius: 10px;
    padding: 16px 18px;
    color: var(--u-card-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Nền xen kẽ: các khối dài ngắn khác nhau, không có vạch phân cách thì mắt
   khó biết một mục kết thúc ở đâu. */
.search-result:nth-child(even) {
    background: var(--u-card-alt);
}

.search-result:hover {
    border-color: var(--u-accent);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.28);
}

.search-result-locked {
    border-left-color: #d97706;
}

.search-result-heading {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.4;
}

.search-result-heading a {
    color: #1e293b;
    text-decoration: none;
}

.search-result-heading a:hover {
    color: var(--u-card-accent);
    text-decoration: underline;
}

.search-result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--u-card-muted);
}

.search-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid #c8d0e2;
    color: var(--u-card-accent);
    font-size: 12px;
    white-space: nowrap;
}

.search-badge-category {
    background: rgba(129, 140, 248, 0.18);
}

.search-badge-lock {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(180, 83, 9, 0.35);
    color: #92400e;
}

.search-result-book {
    color: var(--u-card-muted);
}

.search-result-snippet {
    margin: 0;
    color: #3f4a5a;
    font-size: 14px;
    line-height: 1.65;
}

/* ── Kết quả dạng từ điển ── */
.dict-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.dict-entry {
    background: var(--u-card);
    border: 1px solid var(--u-card-border);
    border-left: 3px solid var(--u-accent);
    border-radius: 10px;
    padding: 18px 20px;
    color: var(--u-card-text);
}

.dict-entry:nth-child(even) {
    background: var(--u-card-alt);
}

/* Tên thuật ngữ đứng đầu khối, bên dưới là các giải thích của nó */
.dict-term-head {
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.5;
}

.dict-expls {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.dict-expl + .dict-expl {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--u-card-border);
}

/* Nhiều giải thích thì đánh số 1, 2, 3... ở lề trái */
.dict-expls.is-numbered {
    counter-reset: dict-expl;
}

.dict-expls.is-numbered > .dict-expl {
    position: relative;
    padding-left: 32px;
    counter-increment: dict-expl;
}

.dict-expls.is-numbered > .dict-expl::before {
    content: counter(dict-expl);
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    color: var(--u-card-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.dict-expls.is-numbered > .dict-expl + .dict-expl::before {
    top: 12px;
}

/* Nội dung giải thích là HTML soạn bằng editor (đoạn, danh sách, đậm/nghiêng) */
.dict-body {
    margin: 0 0 8px;
    color: var(--u-card-text);
    font-size: 15px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.dict-body p {
    margin: 0 0 6px;
}

.dict-body p:last-child {
    margin-bottom: 0;
}

.dict-body ul,
.dict-body ol {
    margin: 4px 0 6px;
    padding-left: 22px;
}

.dict-body blockquote {
    margin: 6px 0;
    padding-left: 12px;
    border-left: 2px solid var(--u-card-border);
}

.dict-body a,
.dict-source a {
    color: var(--u-card-accent);
}

/* Gạch chân chính là dấu hiệu nhận ra đâu là thuật ngữ */
.dict-term {
    font-weight: 700;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Dòng nguồn: [Vô Hữu, (2022) Thực hành Thiền năng lượng, tr.20] */
.dict-source {
    margin: 0 0 8px;
    color: var(--u-card-muted);
    font-size: 13px;
}

.dict-source-title {
    font-style: italic;
}

.dict-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.dict-pron {
    color: var(--u-card-muted);
    font-size: 14px;
    font-style: italic;
}

.dict-type {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid #c8d0e2;
    color: var(--u-card-accent);
    font-size: 12px;
}

/* Ví dụ thụt vào và có vạch bên trái để tách khỏi phần giải nghĩa */
.dict-example {
    margin: 0 0 10px;
    padding-left: 12px;
    border-left: 2px solid rgba(99, 102, 241, 0.45);
    color: #4a5568;
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
}

.dict-label {
    display: inline-block;
    margin-right: 8px;
    color: var(--u-card-muted);
    font-size: 12px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dict-related {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Từ liên quan bấm được: tra tiếp từ đó, vẫn ở chế độ từ điển */
.dict-chip {
    padding: 4px 12px;
    border: 1px solid #c8d0e2;
    border-radius: 999px;
    background: #fff;
    color: var(--u-card-accent);
    text-decoration: none;
    font-size: 13px;
}

.dict-chip:hover {
    border-color: var(--u-accent);
    background: rgba(99, 102, 241, 0.12);
}

/* Tô sáng từ khoá: bản gốc trong home.css là chữ trắng trên nền chàm mờ, dùng
   cho gợi ý thả xuống ở header (nền tối). Trên khối kết quả nền sáng thì chữ
   trắng biến mất, phải đảo lại. */
.search-result .search-hl,
.dict-entry .search-hl {
    background: rgba(99, 102, 241, 0.22);
    color: #312e81;
    font-weight: 600;
}

.search-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 22px 0 6px;
}

.search-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--u-panel-border);
    border-radius: 8px;
    color: var(--u-text);
    text-decoration: none;
    font-size: 14px;
}

.search-page-btn:hover {
    border-color: var(--u-accent-light);
}

.search-page-btn.is-disabled {
    opacity: 0.35;
    cursor: default;
}

.search-page-info {
    color: var(--u-muted);
    font-size: 13px;
}

/* Số trang (partials/search-pagination.ejs): bấm thẳng tới trang cần xem */
.search-pagination {
    flex-wrap: wrap;
}

.search-page-numbers {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.search-page-num {
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--u-panel-border);
    border-radius: 8px;
    color: var(--u-text);
    text-decoration: none;
    font-size: 14px;
}

a.search-page-num:hover {
    border-color: var(--u-accent-light);
}

.search-page-num.is-current {
    background: var(--u-accent);
    border-color: var(--u-accent);
    color: #fff;
    font-weight: 600;
}

.search-page-gap {
    color: var(--u-muted);
    padding: 0 2px;
}

/* Màn hẹp: nút Trước/Sau chỉ còn mũi tên để hàng số trang đủ chỗ */
@media (max-width: 520px) {
    .search-pagination {
        gap: 8px;
    }

    .search-page-btn {
        padding: 9px 12px;
    }

    .search-page-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .search-page-num {
        min-width: 34px;
        height: 34px;
    }
}

/* ── Trang cá nhân ── */
.account-header {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    margin-bottom: 18px;
}

.account-header-simple {
    justify-content: space-between;
}

.account-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid var(--u-panel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--u-accent-light);
    overflow: hidden;
    flex: 0 0 auto;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-greeting {
    margin: 0;
    font-size: 20px;
    color: #fff;
}

.account-sub {
    color: var(--u-muted);
    font-size: 13px;
    margin-top: 2px;
}

.account-card {
    margin-bottom: 16px;
}

.account-card-title {
    margin: 0 0 14px;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Tiêu đề nằm trong hàng có nút thì bỏ margin dưới, để hàng tự canh giữa */
.account-card-head .account-card-title {
    margin-bottom: 0;
}

/* ── Chế độ đọc / chế độ sửa ── */
.account-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--u-panel-border);
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--u-text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.account-edit-btn:hover {
    border-color: var(--u-accent-light);
    background: rgba(99, 102, 241, 0.28);
}

.account-info {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 10px 18px;
    margin: 0;
    font-size: 14px;
}

.account-info dt {
    color: var(--u-muted);
}

.account-info dd {
    margin: 0;
    color: var(--u-text);
    word-break: break-word;
}

/* Trường chưa điền: nhạt và nghiêng để phân biệt với giá trị thật */
.account-info dd.is-empty {
    color: #6b7280;
    font-style: italic;
}

.account-info-note {
    color: var(--u-muted);
    font-size: 13px;
}

.account-password-mask {
    letter-spacing: 3px;
}

.account-note-tight {
    margin-bottom: 0;
}

.account-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account-form-actions .auth-submit {
    flex: 1 1 auto;
}

.account-form-actions .auth-secondary-btn {
    flex: 0 0 auto;
}

.account-card-link {
    color: var(--u-accent-light);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.account-card-link:hover {
    text-decoration: underline;
}

.account-empty,
.account-note {
    color: var(--u-muted);
    font-size: 14px;
    margin: 0 0 14px;
    line-height: 1.6;
}

.account-history-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--u-muted);
}

.account-progress {
    height: 5px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.account-progress span {
    display: block;
    height: 100%;
    background: var(--u-accent);
    border-radius: 999px;
}

.account-history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-history-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}

.account-history-item:last-child {
    border-bottom: none;
}

.account-history-main {
    flex: 1;
    min-width: 0;
}

.account-history-main > a {
    color: var(--u-text);
    text-decoration: none;
    font-size: 15px;
}

.account-history-main > a:hover {
    color: var(--u-accent-light);
}

.account-history-remove {
    margin: 0;
    flex: 0 0 auto;
}

.account-history-remove button {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--u-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
}

.account-history-remove button:hover {
    color: var(--u-danger);
    border-color: rgba(248, 113, 113, 0.4);
}

.account-history-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.account-history-footer .search-pagination {
    margin: 0;
}

.account-inline-form {
    margin: 14px 0 0;
}

.account-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

/* ── Chặn nội dung: bài viết thuộc Danh mục, khách chưa đăng nhập ── */
.chapter-locked {
    margin-top: 18px;
    padding: 26px 24px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(15, 23, 42, 0.75);
    border-radius: 12px;
    text-align: center;
}

.chapter-locked-icon {
    font-size: 28px;
    color: var(--u-warning);
    margin-bottom: 10px;
}

.chapter-locked h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
}

.chapter-locked p {
    margin: 0 0 18px;
    color: var(--u-muted);
    font-size: 14px;
    line-height: 1.6;
}

.chapter-locked-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Nội dung phía trên khối chặn mờ dần để thấy rõ là còn tiếp */
.chapter-teaser {
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

@media (max-width: 768px) {
    .header-actions {
        align-items: stretch;
        margin-left: 0;
        margin-top: 12px;
        width: 100%;
    }

    /* .main-container trên điện thoại chỉ còn padding 5px (home.css, khối
       !important ở cuối file), nên margin-top âm -16px viết cho padding 30px
       của bản desktop kéo hai link Đăng nhập | Đăng ký lên quá mép khung và
       cắt mất một nửa chữ. Trên điện thoại bỏ hẳn phần kéo ngược. */
    .top-bar {
        margin: 2px 0 10px;
    }

    .user-nav {
        justify-content: flex-end;
    }

    /* Chữ 13px trên màn hình điện thoại quá nhỏ để bấm trúng */
    .header-links {
        align-items: flex-start;
        align-self: flex-start;
        gap: 8px;
    }

    .advanced-search-link {
        font-size: 15px;
        padding: 4px 2px;
    }

    .advanced-search-link i {
        font-size: 14px;
    }

    .auth-card,
    .account-card,
    .search-panel {
        padding: 20px 16px;
    }

    /* Nhãn nằm trên, giá trị xuống dòng — 2 cột quá chật trên điện thoại */
    .account-info {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .account-info dd {
        margin-bottom: 12px;
    }

    .account-card-head {
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Trang Từ điển thuật ngữ (/dictionary) — module riêng, tách khỏi /search.
   Phần hiển thị mục từ (.dict-list, .dict-entry...) khai ở trên, dùng chung.
   ═══════════════════════════════════════════════════════════════════ */

/* Ô lọc bị khoá (chưa đăng nhập không tìm được trong danh mục khác) */
.search-filter.is-locked {
    opacity: 0.55;
    cursor: not-allowed;
}

.search-filter.is-locked:hover {
    border-color: var(--u-panel-border);
}

.search-filter.is-locked input {
    cursor: not-allowed;
}

.search-filter-lock {
    font-size: 10px;
    color: var(--u-muted);
}

/* Nhắc khách đang tìm trong phạm vi hẹp */
.search-scope-note {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 9px 14px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--u-muted);
    font-size: 13px;
    text-align: left;
}

.search-scope-note i {
    color: var(--u-accent-light);
}

.search-scope-note a {
    color: var(--u-gold);
    font-weight: 600;
    text-decoration: none;
}

.search-scope-note a:hover {
    text-decoration: underline;
}

/* ── Ô tra + gợi ý thả xuống ── */
.dict-input-row {
    align-items: flex-start;
}

/* Khối bọc để gợi ý bám theo ô nhập, không đẩy nút Tra từ đi */
.dict-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.dict-input-wrap .search-form-input {
    width: 100%;
}

.dict-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.55);
    text-align: left;
}

.dict-suggest-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
    background: none;
    color: var(--u-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.dict-suggest-item:last-child {
    border-bottom: 0;
}

.dict-suggest-item:hover,
.dict-suggest-item.is-active {
    background: rgba(99, 102, 241, 0.22);
}

.dict-suggest-count {
    flex: 0 0 auto;
    color: var(--u-muted);
    font-size: 12px;
}

.dict-suggest-empty {
    padding: 12px 14px;
    color: var(--u-muted);
    font-size: 13px;
}

/* ── Bảng chữ cái ── */
.dict-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.dict-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--u-panel-border);
    border-radius: 8px;
    color: var(--u-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
}

.dict-letter:hover {
    border-color: var(--u-accent-light);
    background: rgba(99, 102, 241, 0.18);
}

.dict-letter.is-active {
    border-color: var(--u-accent);
    background: var(--u-accent);
    color: #fff;
}

/* Vần chưa có thuật ngữ nào: vẫn hiện để thấy toàn bảng, nhưng không bấm được */
.dict-letter.is-empty {
    opacity: 0.3;
    cursor: default;
}

/* ── Danh sách thuật ngữ ── */
.dict-browse-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dict-browse-count {
    color: var(--u-muted);
    font-size: 13px;
}

/* Nhiều cột cho danh sách tên ngắn — một cột thì trang dài lê thê */
.dict-term-list {
    list-style: none;
    margin: 0;
    padding: 18px 20px;
    background: var(--u-card);
    border: 1px solid var(--u-card-border);
    border-radius: 12px;
    columns: 3;
    column-gap: 26px;
    text-align: left;
}

.dict-term-item {
    break-inside: avoid;
    margin-bottom: 4px;
}

.dict-term-item a {
    display: block;
    padding: 5px 8px;
    border-radius: 6px;
    color: var(--u-card-text);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
}

.dict-term-item a:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--u-card-accent);
}

.dict-term-count {
    margin-left: 6px;
    color: var(--u-card-muted);
    font-size: 12px;
}

@media (max-width: 900px) {
    .dict-term-list {
        columns: 2;
    }
}

/* Điện thoại vẫn 2 cột (góp ý 2026-10-11: một cột thì danh sách dài lê thê).
   Thu khoảng cách cột + đệm để chữ đủ chỗ; tên dài tự xuống dòng. */
@media (max-width: 560px) {
    .dict-term-list {
        columns: 2;
        column-gap: 10px;
        padding: 10px 8px;
    }

    .dict-term-item {
        margin-bottom: 2px;
    }

    .dict-term-item a {
        padding: 6px 6px;
        overflow-wrap: anywhere;
    }

    .dict-term-count {
        display: block;
        margin-left: 0;
        font-size: 11px;
    }

    .dict-alphabet {
        gap: 5px;
    }

    .dict-letter {
        min-width: 30px;
        height: 30px;
        font-size: 13px;
    }
}

/* Trang từ điển — lời mời đăng nhập cho khách */
.dict-login-note {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 14px 18px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.08);
    text-align: left;
}

.dict-login-note > i {
    color: var(--u-gold);
    font-size: 18px;
}

.dict-login-text {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--u-muted);
    font-size: 14px;
}

.dict-login-text strong {
    color: var(--u-text);
    font-size: 15px;
}

.dict-login-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* .auth-submit / .auth-secondary-btn viết cho form (rộng 100%) — ở đây co lại */
.dict-login-actions .auth-submit,
.dict-login-actions .auth-secondary-btn {
    width: auto;
    margin: 0;
    padding: 9px 18px;
    text-decoration: none;
    white-space: nowrap;
}