/* ==========================================================================
   GX Nam Thái – lớp giao diện bổ sung cho bản FastAPI
   (nạp sau style.css của theme gốc; không sửa file gốc)
   ========================================================================== */

:root {
   --nt-primary: #4f46e5;
   --nt-primary-dark: #3730a3;
   --nt-gold: #d4a017;
   --nt-ink: #1e293b;
   --nt-muted: #64748b;
   --nt-surface: #ffffff;
   --nt-sidebar-1: #1e1b4b;
   --nt-sidebar-2: #312e81;
   --nt-radius: 14px;
}

body {
   font-family: "Be Vietnam Pro", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
   color: var(--nt-ink);
   background: #f1f5f9;
}

/* ── Thanh bên: nền tối thống nhất ở mọi trang ─────────────────────────────── */
.sidebar {
   background: linear-gradient(180deg, var(--nt-sidebar-1) 0%, var(--nt-sidebar-2) 100%);
   box-shadow: 4px 0 24px rgba(15, 23, 42, .18);
}
.sidebar-menu ul li a,
.sidebar-menu ul li a i,
.sidebar-menu ul li a span { color: #e2e8f0; }
.sidebar-menu ul li.menu-title span { color: #a5b4fc; letter-spacing: .06em; font-size: 11.5px; }
.sidebar-menu ul li a {
   transition: all .25s cubic-bezier(.25, .8, .25, 1);
   border-radius: 10px;
   margin: 3px 12px;
   padding-left: 15px !important;
}
.sidebar-menu ul li a:hover,
.sidebar-menu ul li.active > a {
   background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
   color: #fff !important;
   box-shadow: 0 4px 15px rgba(67, 56, 202, .35);
}
.sidebar-menu ul li a:hover { transform: translateX(4px); }
.sidebar-menu ul li a:hover i,
.sidebar-menu ul li.active > a i,
.sidebar-menu ul li.active > a span { color: #fff !important; }
.sidebar-menu li.active a { color: #fff; }

.sidebar-profile {
   padding: 22px 15px 16px;
   text-align: center;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
   margin-bottom: 12px;
}
.sidebar-profile .logo {
   font-size: 20px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 18px;
   letter-spacing: .04em;
   text-decoration: none;
}
.sidebar-profile .logo i { color: #fcd34d; }
.sidebar-profile .avatar-img {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   border: 3px solid rgba(255, 255, 255, .25);
   margin-bottom: 10px;
   object-fit: cover;
   background: #fff;
}
.sidebar-profile h6 { color: #fff; font-weight: 600; margin-bottom: 4px; }
.sidebar-profile p { color: #c7d2fe; font-size: 13px; margin-bottom: 14px; min-height: 1em; }
.pill { border-radius: 20px !important; padding: 4px 12px; }

/* ── Thanh trên (điện thoại / máy tính bảng) ─────────────────────────────── */
.header { background: var(--nt-sidebar-1) !important; border-bottom: 0 !important; box-shadow: 0 2px 12px rgba(15, 23, 42, .25); }
.header .header-left { background: transparent !important; border: 0 !important; }
.header .header-left .logo span { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.header .header-left .logo i { color: #fcd34d; }
.header #toggle_btn, .header .mobile_btn, .header #toggle_btn i, .header .mobile_btn i { color: #fff !important; }
@media (min-width: 992px) {
   .header { display: none !important; }
   .page-wrapper { padding-top: 0 !important; }
   .sidebar { top: 0 !important; }
}
@media (max-width: 991.98px) {
   .page-wrapper > .content { padding: 18px 14px; }
   .page-header .page-title { font-size: 22px; }
}

/* ── Thẻ, tiêu đề, bảng ──────────────────────────────────────────────────── */
.card { border-radius: var(--nt-radius); border: 1px solid #e2e8f0; box-shadow: 0 6px 20px rgba(15, 23, 42, .06); }
.card-title { font-weight: 600; }
.page-header .page-title { font-weight: 700; }
.table thead th { white-space: nowrap; }
.btn { border-radius: 10px; }
.form-control, .custom-select { border-radius: 10px; min-height: 42px; }
.form-control:focus, .custom-select:focus { border-color: #818cf8; box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .2); }
.alert { border-radius: 12px; }

/* ── Tương thích lớp Bootstrap 5 dùng trong vài trang (theme là Bootstrap 4) ── */
.me-1 { margin-right: .25rem !important; } .me-2 { margin-right: .5rem !important; } .me-3 { margin-right: 1rem !important; }
.ms-1 { margin-left: .25rem !important; } .ms-2 { margin-left: .5rem !important; } .ms-3 { margin-left: 1rem !important; }
.ps-3 { padding-left: 1rem !important; } .pe-3 { padding-right: 1rem !important; }
.gap-1 { gap: .25rem !important; } .gap-2 { gap: .5rem !important; } .gap-3 { gap: 1rem !important; }
.fw-bold { font-weight: 700 !important; } .fw-semibold { font-weight: 600 !important; } .fw-normal { font-weight: 400 !important; }
.form-select { display: block; width: 100%; padding: .375rem .75rem; border: 1px solid #ced4da; border-radius: 10px; min-height: 42px; background: #fff; }
.form-label { margin-bottom: .4rem; font-weight: 500; }
.btn-close { background: transparent; border: 0; font-size: 1.4rem; line-height: 1; color: inherit; opacity: .8; }
.btn-close::before { content: "\00d7"; }
.badge.bg-success, .badge.bg-primary, .badge.bg-danger, .badge.bg-info, .badge.bg-secondary { color: #fff; }
.badge.bg-warning, .badge.bg-light { color: #1f2937; }
.rounded-pill { border-radius: 50rem !important; }

/* ── Hồ sơ cá nhân ───────────────────────────────────────────────────────── */
.nt-profile-hero { background: linear-gradient(135deg, #eef2ff 0%, #fff 60%); }
.nt-profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(79, 70, 229, .25); background: #fff; }
.nt-badge { background: #e0e7ff; color: var(--nt-primary-dark); font-weight: 600; padding: 6px 12px; border-radius: 20px; }
.nt-info-list .nt-info-row { display: flex; padding: 11px 0; border-bottom: 1px dashed #e2e8f0; }
.nt-info-list .nt-info-row:last-child { border-bottom: 0; }
.nt-info-list dt { width: 42%; font-weight: 500; color: var(--nt-muted); margin: 0; }
.nt-info-list dt i { width: 20px; color: #818cf8; }
.nt-info-list dd { width: 58%; margin: 0; font-weight: 500; word-break: break-word; }

/* ── Trang lỗi ───────────────────────────────────────────────────────────── */
.nt-error { max-width: 520px; margin: 8vh auto; text-align: center; }
.nt-error .code { font-size: 84px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #4f46e5, #d4a017); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Nút "Xem ảnh nền": tạm ẩn nội dung để ngắm trọn ảnh nền của trang ─────── */
.nt-peek-btn { position: fixed; right: 18px; bottom: 18px; z-index: 1050; display: none; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.35); border-radius: 22px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(15, 23, 42, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.3); cursor: pointer; }
.nt-peek-btn:hover { background: rgba(15, 23, 42, .75); }
.has-bg-image .nt-peek-btn { display: inline-flex; }
.page-wrapper > .content { transition: opacity .35s ease, filter .35s ease; }
.nt-peek .page-wrapper > .content { opacity: 0; filter: blur(4px); pointer-events: none; }
.nt-peek .main-wrapper { background: transparent !important; }

/* ── Bảng trong khung cuộn ngang ─────────────────────────────────────────────
   Các .row (lề âm -15px) đặt bên trong .table-responsive làm nội dung luôn rộng hơn khung 30px
   → thanh trượt ngang xuất hiện dù màn hình còn rộng. */
.table-responsive .row { margin-left: 0; margin-right: 0; }
.table-responsive .row > [class*="col"] { padding-left: 0; padding-right: 0; }
.table-responsive { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .55) transparent; }
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .55); border-radius: 3px; }

/* ── Trang có ảnh nền: chữ trong bảng/thẻ kính có bóng nhẹ để dễ đọc trên nền trong ── */
.has-bg-image .card .table td, .has-bg-image .card .table th { text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }

/* Ô bảng gọn hơn trên các trang kính (đệm gốc của theme quá rộng → bảng tràn ngang) */
.has-bg-image .card .table td, .has-bg-image .card .table th { padding: .7rem .65rem; }

/* Bảng tự gọn trên laptop/tablet: ẩn cột phụ (.nt-opt), tên dài được xuống dòng */
.nt-name { white-space: normal !important; min-width: 150px; line-height: 1.35; }
.nt-saint { font-size: 12px; opacity: .8; }
@media (max-width: 1500px) { .nt-opt { display: none !important; } }

/* ── Form dạng lưới (form.render) ─────────────────────────────────────────── */
.nt-form-grid .form-group { margin-bottom: 14px; }
.nt-form-grid label { font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 4px; }
.nt-form-section { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6366f1; margin: 6px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #eef0f4; }
.nt-form-section:first-child { margin-top: 0; }
.nt-avatar-panel { text-align: center; }
.nt-avatar-panel img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 8px 22px rgba(79, 70, 229, .22); background: #f1f5f9; }
.nt-avatar-panel .nt-avatar-name { font-weight: 700; font-size: 17px; margin-top: 12px; }
.nt-avatar-panel .nt-avatar-sub { color: #64748b; font-size: 13px; }
.nt-upload { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; cursor: pointer; }
.nt-upload input[type=file] { display: none; }
.nt-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 767.98px) {
   .nt-avatar-panel { display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; text-align: left; align-items: center; }
   .nt-avatar-panel img { width: 76px; height: 76px; grid-row: span 4; border-width: 3px; }
   .nt-avatar-panel .nt-avatar-name { margin-top: 0; font-size: 16px; }
   .nt-avatar-panel .nt-upload { margin-top: 6px; justify-self: start; }
   .nt-avatar-panel .small { margin-top: 2px !important; }
}

/* ── Thiếu Nhi Thánh Thể ─────────────────────────────────────────────────────── */
.tn-cat-card { display: flex; flex-direction: column; height: 100%; border-radius: 16px; overflow: hidden;
               background: #fff; box-shadow: 0 6px 22px rgba(15, 23, 42, .08); transition: transform .2s, box-shadow .2s; }
.tn-cat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15, 23, 42, .14); }
.tn-cat-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: #fff; text-decoration: none !important; }
.tn-cat-head:hover { color: #fff; }
.tn-cat-head .tn-cat-ico { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.2);
                           display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.tn-cat-head h5 { color: #fff; margin: 0 0 2px; font-weight: 700; }
.tn-cat-head small { opacity: .9; }
.tn-c-chuong-trinh { background: linear-gradient(135deg, #b91c1c, #f59e0b); }
.tn-c-bai-hat { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.tn-c-ky-nang { background: linear-gradient(135deg, #047857, #10b981); }
.tn-c-tro-choi { background: linear-gradient(135deg, #1d4ed8, #06b6d4); }
.tn-cat-list { list-style: none; margin: 0; padding: 8px 0; flex: 1; }
.tn-cat-list li a { display: flex; align-items: center; gap: 8px; padding: 8px 20px; color: #1e293b; }
.tn-cat-list li a:hover { background: #f8fafc; color: #4f46e5; text-decoration: none; }
.tn-cat-list li a i { color: #94a3b8; font-size: 12px; }
.tn-cat-foot { padding: 10px 20px 16px; display: flex; align-items: center; }
.tn-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tn-tabs a { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.9); color: #334155; font-weight: 500; font-size: 14px; }
.tn-tabs a:hover { text-decoration: none; background: #fff; color: #4f46e5; }
.tn-tabs a.active { background: #4f46e5; color: #fff; }
.tn-post-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 14px; overflow: hidden;
                box-shadow: 0 4px 16px rgba(15,23,42,.07); color: inherit; transition: transform .2s, box-shadow .2s; }
.tn-post-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,.13); text-decoration: none; color: inherit; }
.tn-post-cover { height: 150px; background: #eef2f7 center/cover no-repeat; position: relative;
                 display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; }
.tn-post-cover .tn-yt { position: absolute; right: 10px; bottom: 10px; background: #ef4444; color: #fff; font-size: 12px;
                        padding: 3px 8px; border-radius: 6px; }
.tn-post-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.tn-post-body h6 { font-weight: 700; color: #0f172a; margin-bottom: 6px; line-height: 1.35; }
.tn-post-body p { color: #64748b; font-size: 13.5px; margin-bottom: 8px; }
.tn-tag { display: inline-block; background: #eef2ff; color: #4338ca; font-size: 12px; padding: 2px 9px; border-radius: 999px; margin: 0 4px 4px 0; }
.tn-draft { display: inline-block; background: #fef3c7; color: #92400e; font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.tn-article { font-size: 15.5px; line-height: 1.75; color: #1e293b; }
.tn-article h5 { margin: 22px 0 10px; font-weight: 700; color: #312e81; }
.tn-article h6 { margin: 18px 0 8px; font-weight: 700; color: #334155; }
.tn-article ul, .tn-article ol { padding-left: 22px; }
.tn-article p { margin-bottom: 12px; }
.tn-chord { display: inline-block; color: #db2777; font-weight: 700; font-size: .85em; margin-right: 2px;
            vertical-align: super; line-height: 1; }
.tn-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 18px; }
.tn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tn-file { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed #c7d2fe; border-radius: 12px;
           background: #f8faff; margin-bottom: 18px; }
.tn-file i.fa-2x { color: #4f46e5; }
.tn-post-cover.tn-c-chuong-trinh { background: linear-gradient(135deg, #b91c1c, #f59e0b); }
.tn-post-cover.tn-c-bai-hat { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.tn-post-cover.tn-c-ky-nang { background: linear-gradient(135deg, #047857, #10b981); }
.tn-post-cover.tn-c-tro-choi { background: linear-gradient(135deg, #1d4ed8, #06b6d4); }
.tn-post-cover > i { opacity: .85; }
.tn-article ul { list-style: disc; }
.tn-article ol { list-style: decimal; }
.tn-article li { margin-bottom: 4px; }
.tn-c-thang-tien, .tn-post-cover.tn-c-thang-tien { background: linear-gradient(135deg, #1e3a8a, #ca8a04); }
.tn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
.tn-chips a { font-size: 13px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.88); color: #4338ca; }
.tn-chips a:hover { text-decoration: none; background: #fff; }
.tn-chips a.active { background: #4338ca; color: #fff; }

/* ==========================================================================
   Thanh menu trái kiểu KÍNH GƯƠNG (xuyên thấu) – áp dụng mọi trang.
   Dùng "body .sidebar" + !important để thắng các khối style riêng của từng trang.
   ========================================================================== */
body .sidebar {
   /* vệt sáng phản chiếu + lớp màu mỏng; trang không ảnh nền có thêm nền cực quang bên dưới */
   background:
      linear-gradient(115deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,0) 38%,
                      rgba(255,255,255,0) 62%, rgba(255,255,255,.07) 80%, rgba(255,255,255,.16) 100%),
      linear-gradient(180deg, rgba(30, 27, 75, .30) 0%, rgba(49, 46, 129, .22) 100%) !important;
   backdrop-filter: blur(16px) saturate(170%) brightness(.92);
   -webkit-backdrop-filter: blur(16px) saturate(170%) brightness(.92);
   border-right: 1px solid rgba(255, 255, 255, .38) !important;
   box-shadow: inset -1px 0 0 rgba(255, 255, 255, .18), inset 1px 0 0 rgba(255, 255, 255, .08),
               10px 0 34px rgba(15, 23, 42, .28) !important;
}
/* Trang không có ảnh nền: đặt nền cực quang ngay trong thanh để mặt kính có chiều sâu */
body:not(.has-bg-image) .sidebar {
   background:
      linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 24%, rgba(255,255,255,0) 40%,
                      rgba(255,255,255,0) 64%, rgba(255,255,255,.06) 82%, rgba(255,255,255,.14) 100%),
      radial-gradient(120% 45% at 0% 0%, rgba(99, 102, 241, .85) 0%, rgba(99, 102, 241, 0) 70%),
      radial-gradient(110% 40% at 100% 45%, rgba(236, 72, 153, .45) 0%, rgba(236, 72, 153, 0) 70%),
      radial-gradient(120% 45% at 10% 100%, rgba(14, 165, 233, .55) 0%, rgba(14, 165, 233, 0) 70%),
      linear-gradient(180deg, #1e1b4b 0%, #312e81 55%, #1e3a8a 100%) !important;
}
body .sidebar .sidebar-inner { background: transparent !important; }
body .sidebar-menu ul li a, body .sidebar-menu ul li a span, body .sidebar-menu ul li a i {
   color: #f8fafc !important; text-shadow: 0 1px 2px rgba(15, 23, 42, .55);
}
body .sidebar-menu ul li.menu-title span { color: #e0e7ff !important; text-shadow: 0 1px 2px rgba(15, 23, 42, .6); opacity: .9; }
/* Mục menu: viên kính sáng khi rê chuột / đang chọn */
body .sidebar-menu ul li a:hover {
   background: rgba(255, 255, 255, .16) !important;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(15, 23, 42, .18) !important;
}
body .sidebar-menu ul li.active > a {
   background: linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 100%) !important;
   border: 1px solid rgba(255, 255, 255, .45);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 18px rgba(15, 23, 42, .28) !important;
   backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body .sidebar-profile { border-bottom: 1px solid rgba(255, 255, 255, .22); }
body .sidebar-profile .avatar-img { border-color: rgba(255, 255, 255, .55); box-shadow: 0 4px 16px rgba(15, 23, 42, .3); }
body .sidebar-profile h6, body .sidebar-profile .logo { text-shadow: 0 1px 3px rgba(15, 23, 42, .6); }
body .sidebar-profile p { color: #e0e7ff; text-shadow: 0 1px 2px rgba(15, 23, 42, .6); }
/* Thanh trên (điện thoại) cùng kiểu kính */
body .header {
   background: linear-gradient(115deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 45%, rgba(255,255,255,.1)),
               rgba(30, 27, 75, .55) !important;
   backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
   border-bottom: 1px solid rgba(255, 255, 255, .3) !important;
}
/* Trình duyệt không hỗ trợ làm mờ nền → dùng nền đặc để chữ vẫn rõ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   body .sidebar { background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%) !important; }
}

/* ==========================================================================
   Glassy Sidebar (kiểu "Glassy Sidebar V3"): khung kính nổi, bo góc, thu gọn được
   ========================================================================== */
body .sidebar { display: flex; flex-direction: column; overflow: hidden; }
.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; height: auto !important;
             scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
.sb-scroll::-webkit-scrollbar { width: 6px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 6px; }
body .sidebar .sidebar-menu { padding: 4px 12px 10px; }

/* đầu khung: 3 chấm + nút thu gọn */
.sb-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px; }
.sb-dots { display: inline-flex; gap: 7px; }
.sb-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; box-shadow: inset 0 -1px 2px rgba(0,0,0,.25); }
.sb-dots i:nth-child(1) { background: #ff5f57; } .sb-dots i:nth-child(2) { background: #febc2e; } .sb-dots i:nth-child(3) { background: #28c840; }
.sb-toggle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); color: #fff;
             background: rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center;
             font-size: 12px; cursor: pointer; transition: background .2s, transform .35s; }
.sb-toggle:hover { background: rgba(255,255,255,.28); }
.sb-toggle:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }

/* logo */
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 8px 20px 12px; color: #fff !important;
            font-weight: 800; letter-spacing: .12em; font-size: 17px; text-decoration: none !important; white-space: nowrap;
            text-shadow: 0 1px 3px rgba(15,23,42,.5); }
.sb-brand i { color: #fcd34d; font-size: 20px; width: 24px; text-align: center; }

/* hồ sơ một dòng */
.sb-user { display: flex; align-items: center; gap: 10px; margin: 0 12px 6px; padding: 9px 10px; border-radius: 14px;
           background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); color: #fff !important;
           text-decoration: none !important; transition: background .2s; white-space: nowrap; }
.sb-user:hover { background: rgba(255,255,255,.2); }
.sb-user img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #fff; flex-shrink: 0;
               border: 2px solid rgba(255,255,255,.6); }
.sb-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; }
.sb-user-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(15,23,42,.5); }
.sb-user-text small { font-size: 12px; color: #e0e7ff; overflow: hidden; text-overflow: ellipsis; }
.sb-user-go { font-size: 11px; opacity: .7; }

/* nhóm menu + vạch chia */
body .sidebar-menu ul li.menu-title { padding: 12px 10px 4px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.14); }
body .sidebar-menu ul li.menu-title:first-child { border-top: 0; margin-top: 0; }
body .sidebar-menu ul li.menu-title span { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
body .sidebar-menu > ul > li > a { gap: 12px; margin: 2px 0 !important; padding: 9px 12px !important; font-size: 14.5px;
                                   border: 1px solid transparent; white-space: nowrap; }
body .sidebar-menu > ul > li > a i { width: 20px; text-align: center; font-size: 15px; margin: 0 !important; flex-shrink: 0; }
body .sidebar-menu > ul > li > a span { overflow: hidden; text-overflow: ellipsis; }
body .sidebar-menu ul li a:hover { transform: none; }

/* đáy: đăng xuất / đăng nhập */
.sb-bottom { padding: 8px 12px 14px; border-top: 1px solid rgba(255,255,255,.18); }
.sb-bottom a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: #fff !important;
               font-size: 14.5px; text-decoration: none !important; white-space: nowrap; transition: background .2s; }
.sb-bottom a i { width: 20px; text-align: center; }
.sb-out:hover { background: rgba(239, 68, 68, .35); }
.sb-in { background: rgba(250, 204, 21, .25); border: 1px solid rgba(253, 230, 138, .6); }
.sb-in:hover { background: rgba(250, 204, 21, .4); }

/* ── Máy tính: khung nổi, thu gọn được ── */
@media (min-width: 992px) {
   body .sidebar { top: 14px !important; left: 14px; bottom: 14px; width: 256px; border-radius: 22px;
                   border: 1px solid rgba(255,255,255,.38) !important;
                   transition: width .35s cubic-bezier(.4, 0, .2, 1); }
   body .page-wrapper { margin-left: 284px; transition: margin-left .35s cubic-bezier(.4, 0, .2, 1); }
   body.nt-mini .sidebar { width: 78px; }
   body.nt-mini .page-wrapper { margin-left: 106px; }
   body.nt-mini .sb-top { flex-direction: column; gap: 10px; padding: 14px 0 4px; }
   body.nt-mini .sb-toggle { transform: rotate(180deg); }
   body.nt-mini .sb-dots { gap: 4px; }
   body.nt-mini .sb-dots i { width: 8px; height: 8px; }
   body.nt-mini .sb-brand { justify-content: center; padding: 8px 0 10px; }
   body.nt-mini .sb-brand span, body.nt-mini .sb-user-text, body.nt-mini .sb-user-go,
   body.nt-mini .sidebar-menu > ul > li > a span, body.nt-mini .sb-bottom a span,
   body.nt-mini .sidebar-menu ul li.menu-title span { display: none; }
   body.nt-mini .sb-user { justify-content: center; margin: 0 10px 6px; padding: 8px 0; }
   body.nt-mini .sidebar .sidebar-menu { padding: 4px 10px 10px; }
   body.nt-mini .sidebar-menu ul li.menu-title { padding: 0; margin: 8px 8px; }
   body.nt-mini .sidebar-menu > ul > li > a, body.nt-mini .sb-bottom a { justify-content: center; padding: 10px 0 !important; }
}
/* ── Điện thoại / máy tính bảng: trượt ra từ nút ☰, bo góc phải ── */
@media (max-width: 991.98px) {
   body .sidebar { width: 268px; margin-left: -290px; top: 64px !important; bottom: 10px; left: 0;
                   border-radius: 0 22px 22px 0; border: 1px solid rgba(255,255,255,.35) !important; border-left: 0 !important; }
   body .slide-nav .sidebar { margin-left: 0; }
   .sb-top { display: none; }
   .sb-brand { padding-top: 16px; }
}
body .sidebar-menu li.active > a::before, body .sidebar-menu li > a::before { display: none !important; }
.tn-c-youtube-mp3, .tn-post-cover.tn-c-youtube-mp3 { background: linear-gradient(135deg, #b91c1c, #ef4444 55%, #f97316); }
.tn-embed { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; margin: 6px 0 14px; }
.tn-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tn-audio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fdf2f8; border: 1px solid #fbcfe8;
            border-radius: 12px; padding: 10px 12px; margin: 6px 0 12px; }
.tn-audio i { color: #db2777; } .tn-audio b { flex: 1; min-width: 140px; font-size: 14px; }
.tn-audio audio { width: 100%; max-width: 420px; }
.tn-media-title { font-weight: 700; color: #b91c1c; margin-top: 10px; }
.tn-media-title i { margin-right: 4px; }