/* ─── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f1f5f9;
    color: #1e293b;
    font-size: 14px;
    min-height: 100vh;
}

/* ─── Layout ────────────────────────────────────────── */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* ─── Sidebar ───────────────────────────────────────── */
.sidebar {
    width: 240px;
    min-width: 240px;
    background: linear-gradient(180deg, #1a1f3a 0%, #2d3a6e 100%);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    transition: transform .3s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-logo { font-size: 1.6em; }
.sidebar-title {
    font-size: 1em;
    font-weight: 800;
    color: #fff;
    letter-spacing: .5px;
}
.sidebar-sub { font-size: .75em; color: #94a3b8; margin-top: 2px; }
.sidebar-sub strong { color: #e2e8f0; }

.sidebar-search { padding: 12px 12px 4px; }
.sidebar-search input {
    width: 100%;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.08);
    color: #e2e8f0;
    font-size: .85em;
    outline: none;
}
.sidebar-search input::placeholder { color: #64748b; }
.sidebar-search input:focus { border-color: #6366f1; background: rgba(255,255,255,.12); }

.sidebar-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 12px 8px;
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
}
.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.stat-item:last-child { border-bottom: none; }
.stat-label { font-size: .78em; color: #94a3b8; }
.stat-value {
    font-size: .95em;
    font-weight: 800;
}
.stat-total { color: #e0e7ff; }
.stat-dung  { color: #86efac; }
.stat-chua  { color: #fde68a; }

.sidebar-section-title {
    padding: 14px 16px 8px;
    font-size: .7em;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-add-small {
    background: rgba(255,255,255,.1);
    color: #94a3b8;
    border: none;
    border-radius: 5px;
    width: 22px; height: 22px;
    font-size: 1em;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.btn-add-small:hover { background: rgba(255,255,255,.2); color: #fff; }

.nhom-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.nhom-list::-webkit-scrollbar { width: 4px; }
.nhom-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.nhom-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #cbd5e1;
    font-size: .9em;
    margin-bottom: 2px;
    transition: background .15s, color .15s;
    position: relative;
}
.nhom-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nhom-item.active { background: rgba(99,102,241,.25); color: #e0e7ff; font-weight: 600; }
.nhom-item .nhom-icon { font-size: 1em; flex-shrink: 0; }
.nhom-item .nhom-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nhom-item .nhom-count {
    background: rgba(255,255,255,.1);
    color: #94a3b8;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: .75em;
    font-weight: 600;
    flex-shrink: 0;
}
.nhom-item.active .nhom-count { background: rgba(99,102,241,.3); color: #a5b4fc; }

.nhom-count-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.nhom-count-dung {
    background: rgba(22,163,74,.25);
    color: #86efac;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: .7em;
    font-weight: 700;
}

.nhom-item { position: relative; }
.nhom-actions {
    display: none;
    gap: 2px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
.nhom-item:hover .nhom-actions { display: flex; }
.nhom-reset-all {
    display: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: .85em;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s;
}
.nhom-item:hover .nhom-reset-all { display: block; opacity: 1; }
.nhom-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .8em;
    padding: 2px 4px;
    opacity: .7;
    transition: opacity .15s;
}
.nhom-btn:hover { opacity: 1; }

.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 12px;
}
.api-info {
    background: rgba(255,255,255,.06);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}
.api-label { font-size: .7em; color: #64748b; margin-bottom: 4px; }
.api-token {
    display: block;
    font-size: .75em;
    color: #a5b4fc;
    background: rgba(99,102,241,.15);
    border-radius: 5px;
    padding: 4px 8px;
    word-break: break-all;
    font-family: 'Courier New', monospace;
}

.btn-logout {
    display: block;
    text-align: center;
    background: rgba(239,68,68,.15);
    color: #fca5a5;
    border-radius: 8px;
    padding: 8px;
    font-size: .85em;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.btn-logout:hover { background: rgba(239,68,68,.25); color: #fca5a5; }

/* ─── Main Content ───────────────────────────────────── */
.main-content {
    margin-left: 240px;
    flex: 1;
    padding: 24px 28px;
    min-height: 100vh;
    transition: margin-left .3s ease;
}

.top-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.btn-menu-toggle {
    display: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    width: 38px; height: 38px;
    font-size: 1.1em;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.page-title { font-size: 1.4em; font-weight: 800; color: #1e293b; flex: 1; }
.top-bar-actions { display: flex; gap: 8px; }

/* ─── Buttons ────────────────────────────────────────── */
.btn-primary {
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 20px;
    font-size: .9em;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .1s;
    box-shadow: 0 2px 8px rgba(79,70,229,.3);
}
.btn-primary:hover { background: #4338ca; }
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { background: #a5b4fc; cursor: not-allowed; transform: none; }

.btn-secondary {
    background: #e2e8f0;
    color: #475569;
    border: none;
    border-radius: 9px;
    padding: 9px 20px;
    font-size: .9em;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.btn-secondary:hover { background: #cbd5e1; }

.btn-edit {
    background: #fef9c3;
    color: #854d0e;
    border: none;
    border-radius: 7px;
    padding: 4px 14px;
    font-size: .83em;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.btn-edit:hover { background: #fef08a; }

.btn-delete {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 7px;
    padding: 4px 14px;
    font-size: .83em;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.btn-delete:hover { background: #fca5a5; }

.btn-copy {
    background: #dcfce7;
    color: #166534;
    border: none;
    border-radius: 7px;
    padding: 4px 14px;
    font-size: .83em;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.btn-copy:hover { background: #bbf7d0; }

/* ─── Counter ────────────────────────────────────────── */
.counter-bar {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88em;
}
.counter-badge {
    display: inline-block;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 20px;
    padding: 3px 14px;
    font-weight: 700;
    font-size: .9em;
}
.counter-info { color: #94a3b8; }

/* ─── Cards ──────────────────────────────────────────── */
.card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    border: 1px solid #e2e8f0;
}

.add-form-card {
    padding: 20px 22px;
    margin-bottom: 24px;
    background: #f8faff;
    border-color: #c7d2fe;
}
.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.card-title { font-size: 1.05em; font-weight: 700; color: #3730a3; }
.btn-close-card {
    background: #e2e8f0;
    border: none;
    border-radius: 7px;
    width: 28px; height: 28px;
    cursor: pointer;
    font-size: .85em;
    color: #64748b;
    transition: background .2s;
}
.btn-close-card:hover { background: #cbd5e1; }

.form-body { }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-weight: 600;
    color: #334155;
    margin-bottom: 5px;
    font-size: .88em;
}
.form-group label .optional { font-weight: 400; color: #94a3b8; }
.form-group label .required { color: #dc2626; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 9px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .9em;
    font-family: inherit;
    color: #1e293b;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.form-group textarea { resize: vertical; min-height: 110px; }

.img-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px dashed #a5b4fc;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: .88em;
    font-weight: 600;
    color: #4f46e5;
    transition: background .2s;
}
.img-upload-label:hover { background: #eef2ff; }

#previewContainer { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.preview-thumb { position:relative; width:72px; height:72px; }
.preview-thumb img { width:72px; height:72px; object-fit:cover; border-radius:7px; border:1.5px solid #c7d2fe; }
.preview-thumb .rm-btn {
    position:absolute; top:-6px; right:-6px;
    background:#ef4444; color:#fff; border:none; border-radius:50%;
    width:20px; height:20px; font-size:11px; cursor:pointer;
    text-align:center; padding:0; line-height:20px;
}
.preview-thumb video { width:72px; height:72px; object-fit:cover; border-radius:7px; border:1.5px solid #c7d2fe; background:#000; }
.preview-video-thumb { background:#1e1b4b; }
.preview-video-thumb .video-thumb-overlay {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    background: #1e1b4b;
    z-index: 1;
    pointer-events: none;
}
.preview-video-thumb video { position: relative; z-index: 0; }
.video-badge {
    position:absolute; bottom:3px; left:3px;
    background:rgba(0,0,0,.6); color:#fff;
    font-size:10px; border-radius:4px; padding:1px 4px;
    pointer-events:none;
    z-index:2;
}

/* ─── Post List ──────────────────────────────────────── */
.post-list { display:flex; flex-direction:column; gap:14px; }

.post-card {
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:16px 18px;
    transition: box-shadow .2s;
}
.post-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }

.post-meta {
    font-size:.8em;
    color:#94a3b8;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.badge-nhom {
    background:#e0e7ff; color:#4338ca;
    border-radius:20px; padding:2px 10px;
    font-size:.78em; font-weight:600;
}
.badge-anh {
    background:#dcfce7; color:#166534;
    border-radius:20px; padding:2px 10px;
    font-size:.78em; font-weight:600;
}
.badge-cmt {
    background:#fce7f3; color:#9d174d;
}
.post-cmt-images {
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
    margin-top: 6px;
}
.cmt-label {
    display: block;
    font-size: .78em;
    color: #94a3b8;
    margin-bottom: 6px;
    font-weight: 600;
}
.badge-dung {
    background:#dcfce7; color:#15803d;
    border-radius:20px; padding:2px 10px;
    font-size:.78em; font-weight:700;
}
.badge-chua {
    background:#fef9c3; color:#854d0e;
    border-radius:20px; padding:2px 10px;
    font-size:.78em; font-weight:600;
}
.post-card.post-dung { opacity:.65; }
.toggle-label {
    display:flex; align-items:center; gap:8px;
    cursor:pointer; font-weight:600; color:#334155; font-size:.88em;
}
.toggle-label input[type=checkbox] { width:18px; height:18px; cursor:pointer; accent-color:#16a34a; }
.post-note {
    font-size: .85em;
    color: #7c3aed;
    background: #f5f3ff;
    border-radius: 7px;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-left: 3px solid #7c3aed;
}
.post-title {
    font-size:1em; font-weight:700;
    color:#1e293b; margin-bottom:8px;
}
.post-content {
    white-space:pre-wrap;
    word-break:break-word;
    font-size:.95em;
    color:#374151;
    background:#f8fafc;
    border-radius:8px;
    padding:10px 14px;
    margin-bottom:10px;
    border:1px solid #f1f5f9;
    line-height:1.6;
}
.post-images { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.post-img-thumb {
    width:88px; height:88px; object-fit:cover;
    border-radius:8px; border:1.5px solid #e2e8f0;
    cursor:pointer; transition:transform .15s;
}
.post-img-thumb:hover { transform:scale(1.06); }

.post-actions { display:flex; gap:6px; flex-wrap:wrap; }

.empty-state {
    text-align:center;
    color:#94a3b8;
    padding:56px 0;
    font-size:1.05em;
}

/* ─── Modal ──────────────────────────────────────────── */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,.5);
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}
.modal-box {
    background:#fff;
    border-radius:14px;
    width:100%; max-width:560px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    animation:fadeUp .25s ease;
    overflow:visible;
    max-height:90vh;
    display:flex; flex-direction:column;
}
.modal-sm { max-width:400px; }
.modal-header {
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
}
.modal-box .form-body {
    padding:18px 20px;
    overflow-y:auto;
    flex:1;
    min-height:0;
}    padding:16px 20px;
    border-bottom:1px solid #f1f5f9;
    background:#f8faff;
}
.modal-header h3 { font-size:1em; font-weight:700; color:#1e293b; }
.modal-header button {
    background:none; border:none; font-size:1.1em;
    cursor:pointer; color:#94a3b8; width:28px; height:28px;
    border-radius:6px; transition:background .15s;
}
.modal-header button:hover { background:#e2e8f0; color:#475569; }
.modal-box .form-body { padding:18px 20px; }
.modal-footer {
    display:flex; gap:10px; justify-content:flex-end;
    padding:14px 20px;
    border-top:1px solid #f1f5f9;
    flex-shrink:0;
}

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

/* ─── Lightbox ───────────────────────────────────────── */
.lightbox-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.88); z-index:9999;
    align-items:center; justify-content:center;
}
.lightbox-overlay.show { display:flex; }
.lightbox-overlay img { max-width:90vw; max-height:90vh; border-radius:10px; }
.lightbox-close {
    position:absolute; top:18px; right:24px;
    color:#fff; font-size:2em; cursor:pointer;
    background:none; border:none; line-height:1;
}

/* ─── Toast ──────────────────────────────────────────── */
.toast-container {
    position:fixed; top:18px; right:18px; z-index:10000;
    display:flex; flex-direction:column; gap:8px;
}
.toast-msg {
    padding:11px 18px; border-radius:9px;
    font-weight:600; font-size:.9em;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    animation:slideIn .3s ease;
    max-width:320px;
}
.toast-msg.success { background:#dcfce7; color:#166534; border-left:4px solid #16a34a; }
.toast-msg.error   { background:#fee2e2; color:#dc2626; border-left:4px solid #ef4444; }
@keyframes slideIn {
    from{transform:translateX(60px); opacity:0}
    to{transform:translateX(0); opacity:1}
}

/* ─── Pagination ──────────────────────────────────────── */
.pagination-container {
    display: flex;
    justify-content: center;
    margin: 24px 0 8px;
}
.pagination-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pg-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .88em;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    padding: 0 8px;
}
.pg-btn:hover:not(:disabled) {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4338ca;
}
.pg-btn.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
    box-shadow: 0 2px 6px rgba(79,70,229,.3);
}
.pg-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.pg-ellipsis {
    color: #94a3b8;
    font-size: .9em;
    padding: 0 4px;
    line-height: 36px;
}
.pg-prev, .pg-next {
    font-size: 1.1em;
    font-weight: 700;
}

/* ─── Bulk Toolbar ───────────────────────────────────── */
.bulk-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #eef2ff;
    border: 1.5px solid #c7d2fe;
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(79,70,229,.1);
    justify-content: space-between;
}
.bulk-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bulk-check-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .88em;
    font-weight: 700;
    color: #3730a3;
    cursor: pointer;
}
.bulk-check-wrap input[type=checkbox] {
    width: 16px; height: 16px;
    cursor: pointer; accent-color: #4f46e5;
}
.bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bulk-select {
    padding: 5px 10px;
    border: 1.5px solid #c7d2fe;
    border-radius: 7px;
    font-size: .88em;
    background: #fff;
    color: #3730a3;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    max-width: 220px;
}
.bulk-select:focus { border-color: #6366f1; }
.btn-select-page {
    background: #fff;
    color: #4f46e5;
    border: 1.5px solid #c7d2fe;
    border-radius: 7px;
    padding: 4px 12px;
    font-size: .82em;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.btn-select-page:hover { background: #eef2ff; border-color: #6366f1; }
.btn-doinhom {
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 5px 16px;
    font-size: .88em;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.btn-doinhom:hover { background: #4338ca; }
.btn-bulk-delete {
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 5px 16px;
    font-size: .88em;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-bulk-delete:hover { background: #dc2626; }
.btn-bulk-close {
    background: none;
    border: 1.5px solid #e2e8f0;
    color: #94a3b8;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: .85em;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.btn-bulk-close:hover { background: #fee2e2; border-color: #ef4444; color: #dc2626; }

/* Sidebar: chọn tất cả nhóm */
.btn-select-all-nhom {
    display: block;
    width: calc(100% - 24px);
    margin: 0 12px 6px;
    background: #fff;
    color: #4f46e5;
    border: 1.5px solid #c7d2fe;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .8em;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
}
.btn-select-all-nhom:hover { background: #eef2ff; border-color: #6366f1; }

/* ─── Post Table (compact rows) ─────────────────────── */
.post-table {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.post-table-head {
    display: grid;
    grid-template-columns: 40px 40px 60px 1fr 120px 50px 90px 80px;
    align-items: center;
    padding: 8px 14px;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-size: .78em;
    font-weight: 700;
    color: #64748b;
    letter-spacing: .5px;
    text-transform: uppercase;
    gap: 8px;
}

.post-row {
    display: grid;
    grid-template-columns: 40px 40px 60px 1fr 120px 50px 90px 80px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    gap: 8px;
    transition: background .1s;
    cursor: pointer;
    min-height: 44px;
}
.post-row:last-child { border-bottom: none; }
.post-row:hover { background: #f8faff; }
.post-row-selected { background: #eef2ff !important; }
.post-row-dung { opacity: .55; }

.col-check { display: flex; align-items: center; justify-content: center; }
.col-check input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: #4f46e5; }

.row-id {
    font-size: .85em;
    font-weight: 700;
    color: #6366f1;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.row-id:hover { color: #4338ca; }

.col-content {
    font-size: .88em;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    min-width: 0;
}

.nhom-tag {
    display: inline-block;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .78em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.nhom-none { color: #cbd5e1; font-size: .85em; }

.badge-dung-sm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #dcfce7; color: #16a34a; font-size: .78em; font-weight: 700;
}
.badge-chua-sm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fef9c3; color: #854d0e; font-size: .78em; font-weight: 700;
}

.col-date { font-size: .8em; color: #94a3b8; white-space: nowrap; }

.col-actions { display: flex; gap: 4px; justify-content: center; }
.action-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1em; padding: 3px 5px; border-radius: 5px;
    transition: background .15s; line-height: 1;
}
.action-copy:hover { background: #dcfce7; }
.action-delete:hover { background: #fee2e2; }

/* ─── Expand / Detail Section ──────────────────────── */
.col-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85em;
    color: #94a3b8;
    cursor: pointer;
    user-select: none;
}
.expand-icon {
    transition: transform .2s ease;
    font-size: .9em;
    color: #94a3b8;
}

.post-row {
    cursor: pointer;
}
.post-row-expanded {
    background: #f8faff !important;
    border-bottom: none !important;
}

.post-detail {
    grid-column: 1 / -1;
    background: #fff;
    border: 1.5px solid #c7d2fe;
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    animation: expandDown .2s ease;
}
@keyframes expandDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.post-detail-inner {
    padding: 16px 20px;
}

.detail-section { display: flex; flex-direction: column; gap: 12px; }

.detail-label {
    font-size: .75em;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.detail-note {
    background: #f5f3ff;
    border-left: 3px solid #7c3aed;
    border-radius: 0 6px 6px 0;
    padding: 7px 12px;
    font-size: .88em;
    color: #6d28d9;
}

.detail-content {
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: .93em;
    line-height: 1.65;
    color: #374151;
}

.detail-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.detail-images-cmt { margin-top: 4px; }

.detail-img-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.detail-img-thumb:hover {
    transform: scale(1.07);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    border-color: #6366f1;
}
.video-thumb-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}
.video-thumb-wrap .detail-img-thumb {
    width: 320px;
    height: 240px;
    border: 1.5px solid #6366f1;
    background: #1e1b4b;
    object-fit: contain;
}
.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 28px;
    border-radius: 8px;
    transition: background .2s;
}
.video-thumb-wrap:hover .video-play-overlay { background: rgba(99,102,241,.5); }
.detail-videos { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.detail-videos-cmt .video-thumb-wrap .detail-img-thumb { border-color: #10b981; }
.detail-videos-cmt .video-play-overlay { background: rgba(16,185,129,.35); }
.detail-videos-cmt .video-thumb-wrap:hover .video-play-overlay { background: rgba(16,185,129,.5); }
.edit-img-grid .video-thumb-wrap { display: inline-block; }
.edit-img-grid .video-thumb-wrap .rm-btn {
    position: absolute; top: 2px; right: 2px;
    background: #ef4444; color: #fff; border: none;
    border-radius: 50%; width: 20px; height: 20px;
    font-size: 11px; cursor: pointer; text-align: center;
    padding: 0; line-height: 20px; z-index: 2;
}

.detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .8em;
    color: #94a3b8;
    padding-top: 4px;
    border-top: 1px solid #f1f5f9;
}

/* ─── Responsive Table ───────────────────────────────── */
@media(max-width:768px) {
    .post-table-head { display: none; }
    .post-row {
        grid-template-columns: 36px 52px 1fr;
        grid-template-rows: auto auto;
    }
    .col-nhom, .col-status, .col-date { display: none; }
    .col-actions { justify-content: flex-end; }
    .col-expand { display: none; }
}

/* ─── Edit Modal Image Grid ────────────────────────────── */
.edit-img-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
}
.edit-img-thumb-wrap {
    position: relative;
    display: inline-block;
}
.edit-img-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.edit-img-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    border-color: #6366f1;
}
.edit-img-rm {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.edit-img-rm:hover { background: #dc2626; }

/* ─── Responsive ─────────────────────────────────────── */
@media(max-width:768px) {
    .sidebar {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
        padding: 16px 12px;
    }
    .btn-menu-toggle { display:flex; align-items:center; justify-content:center; }
    .form-row { grid-template-columns: 1fr; }
    .post-img-thumb { width:70px; height:70px; }
    .top-bar-actions { display:none; }
}