/**
 * QQ-QLVB Frontend CSS v1.0.7
 * Giao diện thẻ card — theo đúng thiết kế ảnh mẫu
 * Isolation tuyệt đối chống theme override
 */

/* =========================================================
   CSS VARIABLES
   ========================================================= */
.qlvb-wrap, .qlvb-single {
    --qlvb-primary:       #004780;
    --qlvb-primary-dark:  #003360;
    --qlvb-primary-light: rgba(0,71,128,0.08);
    --qlvb-green:         #28a745;
    --qlvb-red:           #c0392b;
    --qlvb-text:          #1a1a2e;
    --qlvb-text-muted:    #6c757d;
    --qlvb-border:        #dee2e6;
    --qlvb-bg:            #f8f9fa;
    --qlvb-white:         #ffffff;
    --qlvb-radius:        8px;
    --qlvb-shadow:        0 1px 4px rgba(0,0,0,0.08);
    --qlvb-shadow-hover:  0 4px 16px rgba(0,71,128,0.15);
    --qlvb-transition:    all 0.2s ease;
    font-family: 'Segoe UI','Helvetica Neue',Arial,sans-serif;
    box-sizing: border-box;
    color: var(--qlvb-text);
    font-size: 14px;
    line-height: 1.6;
}
.qlvb-wrap *, .qlvb-single * { box-sizing: border-box !important; }

/* ── Theme isolation reset ── */
.qlvb-wrap table   { margin: 0 !important; }
.qlvb-wrap a       { background-image: none !important; }
.qlvb-wrap button  { font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; }
.qlvb-sidebar-header h3 { all: unset !important; font-size: 14px !important; font-weight: 700 !important; color: #fff !important; flex: 1 !important; display: block !important; }

/* =========================================================
   SEARCH BAR
   ========================================================= */
.qlvb-search-bar {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.qlvb-search-input-wrap {
    position: relative !important;
    flex: 1 !important;
    min-width: 240px !important;
}
.qlvb-search-input {
    width: 100% !important;
    height: 46px !important;
    padding: 0 44px 0 14px !important;
    border: 2px solid var(--qlvb-border) !important;
    border-radius: var(--qlvb-radius) !important;
    font-size: 15px !important;
    color: var(--qlvb-text) !important;
    outline: none !important;
    background: var(--qlvb-white) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    transition: border-color 0.2s !important;
}
.qlvb-search-input:focus { border-color: var(--qlvb-primary) !important; box-shadow: 0 0 0 3px var(--qlvb-primary-light) !important; }
.qlvb-search-input::-webkit-search-decoration,
.qlvb-search-input::-webkit-search-cancel-button { display: none !important; }
.qlvb-search-icon { display: none !important; }
.qlvb-clear-btn {
    position: absolute !important; right: 10px !important; top: 50% !important;
    transform: translateY(-50%) !important; background: none !important; border: none !important;
    cursor: pointer !important; color: var(--qlvb-text-muted) !important; padding: 0 !important;
    line-height: 1 !important; box-shadow: none !important;
}
.qlvb-clear-btn:hover { color: var(--qlvb-red) !important; }

/* =========================================================
   BUTTONS
   ========================================================= */
.qlvb-wrap .qlvb-btn-primary {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    height: 46px !important; padding: 0 20px !important;
    background: var(--qlvb-primary) !important; color: #fff !important;
    border: none !important; border-radius: var(--qlvb-radius) !important;
    font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important;
    white-space: nowrap !important; text-decoration: none !important;
    font-family: inherit !important; text-transform: none !important;
    box-shadow: none !important; transition: var(--qlvb-transition) !important;
}
.qlvb-wrap .qlvb-btn-primary:hover { background: var(--qlvb-primary-dark) !important; transform: translateY(-1px) !important; }
.qlvb-wrap .qlvb-btn-secondary {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    height: 46px !important; padding: 0 16px !important;
    background: var(--qlvb-white) !important; color: var(--qlvb-primary) !important;
    border: 2px solid var(--qlvb-primary) !important; border-radius: var(--qlvb-radius) !important;
    font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important;
    white-space: nowrap !important; text-decoration: none !important;
    font-family: inherit !important; text-transform: none !important;
    box-shadow: none !important; transition: var(--qlvb-transition) !important;
}
.qlvb-wrap .qlvb-btn-secondary:hover { background: var(--qlvb-primary) !important; color: #fff !important; }
.qlvb-wrap .qlvb-btn-ghost {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    height: 38px !important; padding: 0 14px !important;
    background: transparent !important; color: var(--qlvb-text-muted) !important;
    border: 1px solid var(--qlvb-border) !important; border-radius: var(--qlvb-radius) !important;
    font-size: 13px !important; cursor: pointer !important; text-decoration: none !important;
    font-family: inherit !important; text-transform: none !important;
    box-shadow: none !important; transition: var(--qlvb-transition) !important;
}
.qlvb-wrap .qlvb-btn-ghost:hover { border-color: var(--qlvb-primary) !important; color: var(--qlvb-primary) !important; }

/* Small action buttons */
.qlvb-wrap .qlvb-btn-sm {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 6px 14px !important; border-radius: 6px !important;
    font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important;
    text-decoration: none !important; border: none !important; white-space: nowrap !important;
    box-shadow: none !important; line-height: 1.4 !important;
    font-family: inherit !important; text-transform: none !important;
    outline: none !important; transition: var(--qlvb-transition) !important;
}
.qlvb-wrap .qlvb-btn-sm .dashicons { font-size: 15px !important; width:15px !important; height:15px !important; color: inherit !important; }
.qlvb-wrap .qlvb-btn-content,
.qlvb-wrap .qlvb-btn-content:visited { background: #e8f0f8 !important; color: #004780 !important; }
.qlvb-wrap .qlvb-btn-content:hover { background: var(--qlvb-primary) !important; color: #fff !important; }
.qlvb-wrap .qlvb-btn-download,
.qlvb-wrap .qlvb-btn-download:visited { background: #e8f5e9 !important; color: #2e7d32 !important; }
.qlvb-wrap .qlvb-btn-download:hover { background: #2e7d32 !important; color: #fff !important; }

/* =========================================================
   ADVANCED SEARCH
   ========================================================= */
.qlvb-advanced-search {
    background: var(--qlvb-white) !important;
    border: 1px solid var(--qlvb-border) !important;
    border-top: 3px solid var(--qlvb-primary) !important;
    border-radius: var(--qlvb-radius) !important;
    padding: 20px !important; margin-bottom: 16px !important;
    box-shadow: var(--qlvb-shadow) !important;
    animation: qlvbSlideDown 0.2s ease;
}
@keyframes qlvbSlideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.qlvb-advanced-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important; margin-bottom: 16px !important;
}
.qlvb-adv-group { }
.qlvb-adv-label {
    display: flex !important; align-items: center !important; gap: 6px !important;
    font-size: 12px !important; font-weight: 700 !important; color: var(--qlvb-primary) !important;
    margin-bottom: 8px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;
}
.qlvb-adv-label .dashicons { font-size: 14px !important; width:14px !important; height:14px !important; }
.qlvb-radio-group { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.qlvb-radio-label {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 4px 10px !important; border: 1px solid var(--qlvb-border) !important;
    border-radius: 20px !important; font-size: 12px !important; cursor: pointer !important;
    background: var(--qlvb-white) !important; color: var(--qlvb-text) !important;
    transition: var(--qlvb-transition) !important; text-transform: none !important;
}
.qlvb-radio-label:hover { border-color: var(--qlvb-primary) !important; color: var(--qlvb-primary) !important; }
.qlvb-radio-label input { accent-color: var(--qlvb-primary) !important; margin: 0 !important; }
.qlvb-radio-label:has(input:checked) { background: var(--qlvb-primary) !important; border-color: var(--qlvb-primary) !important; color: #fff !important; }
.qlvb-date-range { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; }
.qlvb-date-input {
    flex: 1 !important; min-width: 100px !important; height: 36px !important;
    padding: 0 10px !important; border: 1px solid var(--qlvb-border) !important;
    border-radius: 6px !important; font-size: 12px !important; cursor: pointer !important;
    background: var(--qlvb-white) !important; outline: none !important;
    color: var(--qlvb-text) !important; font-family: inherit !important;
    transition: border-color 0.2s !important;
}
.qlvb-date-input:focus { border-color: var(--qlvb-primary) !important; box-shadow: 0 0 0 2px var(--qlvb-primary-light) !important; }
.qlvb-date-sep { color: var(--qlvb-text-muted) !important; font-weight: bold !important; }
.qlvb-status-filter { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.qlvb-status-option {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 4px 10px 4px 7px !important; border: 1px solid var(--qlvb-border) !important;
    border-radius: 20px !important; font-size: 12px !important; cursor: pointer !important;
    background: var(--qlvb-white) !important; color: var(--qlvb-text) !important;
    transition: var(--qlvb-transition) !important;
}
.qlvb-status-option:hover { border-color: var(--badge-color,var(--qlvb-primary)) !important; }
.qlvb-status-option:has(input:checked) { background: var(--badge-color,var(--qlvb-primary)) !important; border-color: var(--badge-color,var(--qlvb-primary)) !important; color: #fff !important; }
.qlvb-status-dot { width:10px !important; height:10px !important; border-radius:50% !important; background:var(--badge-color,var(--qlvb-primary)) !important; flex-shrink:0 !important; }
.qlvb-status-option:has(input:checked) .qlvb-status-dot { background:rgba(255,255,255,0.5) !important; }
.qlvb-adv-actions { display:flex !important; gap:10px !important; padding-top:12px !important; border-top:1px solid var(--qlvb-border) !important; }

/* =========================================================
   LAYOUT
   ========================================================= */
.qlvb-layout { display: flex !important; gap: 20px !important; align-items: flex-start !important; }
.qlvb-layout.has-sidebar .qlvb-sidebar { width: 260px !important; flex-shrink: 0 !important; position: sticky !important; top: 20px !important; }
.qlvb-layout.has-sidebar .qlvb-content { flex: 1 !important; min-width: 0 !important; }

/* =========================================================
   SIDEBAR
   ========================================================= */
.qlvb-sidebar-inner { background: var(--qlvb-white) !important; border: 1px solid var(--qlvb-border) !important; border-radius: var(--qlvb-radius) !important; overflow: hidden !important; box-shadow: var(--qlvb-shadow) !important; }
.qlvb-sidebar-header { display: flex !important; align-items: center !important; gap: 8px !important; padding: 13px 16px !important; background: var(--qlvb-primary) !important; }
.qlvb-sidebar-header .dashicons { font-size: 18px !important; width:18px !important; height:18px !important; color:#fff !important; }
.qlvb-clear-filters { background:rgba(255,255,255,0.18) !important; border:none !important; color:rgba(255,255,255,0.9) !important; font-size:11px !important; padding:3px 8px !important; border-radius:4px !important; cursor:pointer !important; white-space:nowrap !important; }
.qlvb-clear-filters:hover { background:rgba(255,255,255,0.32) !important; }
.qlvb-filter-group { border-bottom:1px solid var(--qlvb-border) !important; }
.qlvb-filter-group:last-child { border-bottom:none !important; }
.qlvb-filter-group-toggle { display:flex !important; align-items:center !important; gap:8px !important; width:100% !important; padding:11px 16px !important; background:none !important; border:none !important; cursor:pointer !important; font-size:13px !important; font-weight:700 !important; color:var(--qlvb-text) !important; text-align:left !important; transition:background 0.15s !important; text-transform:none !important; letter-spacing:0 !important; }
.qlvb-filter-group-toggle:hover { background:var(--qlvb-primary-light) !important; color:var(--qlvb-primary) !important; }
.qlvb-filter-group-toggle .dashicons { color:var(--qlvb-primary) !important; font-size:16px !important; width:16px !important; height:16px !important; }
.qlvb-filter-group-label { flex:1 !important; }
.qlvb-toggle-arrow { font-size:11px !important; color:var(--qlvb-text-muted) !important; transition:transform 0.2s !important; }
.qlvb-filter-group-toggle[aria-expanded="false"] .qlvb-toggle-arrow { transform:rotate(-90deg) !important; }
.qlvb-filter-tree { padding:0 0 8px !important; }
.qlvb-filter-tree[hidden] { display:none !important; }
.qlvb-tree-list { list-style:none !important; margin:0 !important; padding:0 !important; }
.qlvb-tree-list[data-depth="1"] { padding-left:16px !important; }
.qlvb-tree-list[data-depth="2"] { padding-left:32px !important; }
.qlvb-tree-item { margin:0 !important; }
.qlvb-tree-label { display:flex !important; align-items:center !important; gap:6px !important; padding:5px 16px 5px 8px !important; cursor:pointer !important; border-radius:4px !important; margin:1px 6px !important; transition:background 0.15s !important; font-size:13px !important; }
.qlvb-tree-label:hover { background:var(--qlvb-primary-light) !important; }
.qlvb-tree-checkbox { width:14px !important; height:14px !important; accent-color:var(--qlvb-primary) !important; cursor:pointer !important; flex-shrink:0 !important; }
.qlvb-tree-name { flex:1 !important; color:var(--qlvb-text) !important; }
.qlvb-tree-count { background:var(--qlvb-bg) !important; color:var(--qlvb-text-muted) !important; font-size:11px !important; padding:1px 6px !important; border-radius:10px !important; min-width:22px !important; text-align:center !important; }
.qlvb-tree-item:has(.qlvb-tree-checkbox:checked) > .qlvb-tree-label { background:var(--qlvb-primary-light) !important; color:var(--qlvb-primary) !important; }
.qlvb-tree-toggle { background:none !important; border:none !important; cursor:pointer !important; padding:0 !important; color:var(--qlvb-text-muted) !important; width:16px !important; height:16px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; }
.qlvb-tree-arrow { font-size:10px !important; transition:transform 0.2s !important; }
.qlvb-tree-toggle[aria-expanded="false"] .qlvb-tree-arrow { transform:rotate(-90deg) !important; }
.qlvb-tree-leaf-indent { width:16px !important; flex-shrink:0 !important; }

/* =========================================================
   TOOLBAR — kết quả + sort
   ========================================================= */
.qlvb-toolbar {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    margin-bottom: 12px !important; padding: 10px 16px !important;
    background: var(--qlvb-white) !important; border: 1px solid var(--qlvb-border) !important;
    border-radius: var(--qlvb-radius) !important; flex-wrap: wrap !important; gap: 10px !important;
}
.qlvb-result-count { display:flex !important; align-items:center !important; gap:6px !important; font-size:14px !important; color:var(--qlvb-text-muted) !important; font-weight:500 !important; }
.qlvb-result-count .dashicons { color:var(--qlvb-primary) !important; }
.qlvb-sort-wrap { display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
.qlvb-sort-label { display:flex !important; align-items:center !important; gap:4px !important; font-size:13px !important; font-weight:600 !important; color:var(--qlvb-text-muted) !important; white-space:nowrap !important; }
.qlvb-sort-label .dashicons { font-size:14px !important; width:14px !important; height:14px !important; }
.qlvb-sort-select { height:34px !important; padding:0 8px !important; border:1px solid var(--qlvb-border) !important; border-radius:6px !important; font-size:13px !important; font-family:inherit !important; color:var(--qlvb-text) !important; background:var(--qlvb-white) !important; cursor:pointer !important; outline:none !important; }
.qlvb-sort-select:focus { border-color:var(--qlvb-primary) !important; }
.qlvb-sort-dir { display:flex !important; gap:4px !important; }
.qlvb-sort-btn { display:inline-flex !important; align-items:center !important; gap:4px !important; height:34px !important; padding:0 10px !important; border:1px solid var(--qlvb-border) !important; border-radius:6px !important; background:var(--qlvb-white) !important; color:var(--qlvb-text-muted) !important; font-size:12px !important; font-weight:600 !important; cursor:pointer !important; font-family:inherit !important; text-transform:none !important; white-space:nowrap !important; transition:var(--qlvb-transition) !important; }
.qlvb-sort-btn .dashicons { font-size:14px !important; width:14px !important; height:14px !important; color:inherit !important; }
.qlvb-sort-btn:hover { border-color:var(--qlvb-primary) !important; color:var(--qlvb-primary) !important; }
.qlvb-sort-btn.is-active { background:var(--qlvb-primary) !important; border-color:var(--qlvb-primary) !important; color:#fff !important; }

/* =========================================================
   LOADING
   ========================================================= */
.qlvb-loading { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; padding:60px 20px !important; gap:12px !important; color:var(--qlvb-text-muted) !important; }
.qlvb-spinner { width:40px !important; height:40px !important; border:4px solid var(--qlvb-primary-light) !important; border-top-color:var(--qlvb-primary) !important; border-radius:50% !important; animation:qlvbSpin 0.7s linear infinite !important; }
@keyframes qlvbSpin { to { transform:rotate(360deg); } }
.qlvb-no-results { display:flex !important; flex-direction:column !important; align-items:center !important; padding:60px 20px !important; gap:12px !important; background:var(--qlvb-white) !important; border:1px solid var(--qlvb-border) !important; border-radius:var(--qlvb-radius) !important; color:var(--qlvb-text-muted) !important; }
.qlvb-no-results .dashicons { font-size:48px !important; width:48px !important; height:48px !important; color:var(--qlvb-border) !important; }
.qlvb-no-results p { font-size:15px !important; margin:0 !important; }

/* =========================================================
   BADGE
   ========================================================= */
.qlvb-badge {
    display: inline-flex !important; align-items: center !important;
    padding: 3px 10px !important; border-radius: 20px !important;
    font-size: 12px !important; font-weight: 700 !important;
    white-space: nowrap !important; color: #fff !important;
    letter-spacing: 0.2px !important; flex-shrink: 0 !important;
}

/* =========================================================
   CARD LIST — giao diện thẻ (theo ảnh mẫu)
   ========================================================= */
.qlvb-card-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid var(--qlvb-border) !important;
    border-radius: var(--qlvb-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--qlvb-shadow) !important;
}

/* Mỗi thẻ văn bản */
.qlvc-item {
    display: flex !important;
    align-items: stretch !important;
    background: var(--qlvb-white) !important;
    border-bottom: 1px solid var(--qlvb-border) !important;
    transition: background 0.15s !important;
    position: relative !important;
    border-left: 4px solid var(--status-color, var(--qlvb-primary)) !important;
}
.qlvc-item:last-child { border-bottom: none !important; }
.qlvc-item:hover { background: #fafbff !important; }

/* Cột số thứ tự bên trái */
.qlvc-stt-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    flex-shrink: 0 !important;
    padding: 16px 8px !important;
    background: var(--qlvb-bg) !important;
    border-right: 1px solid var(--qlvb-border) !important;
}
.qlvc-stt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important; height: 32px !important;
    background: var(--qlvb-primary) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 13px !important; font-weight: 700 !important;
    line-height: 1 !important;
}

/* Phần body chính */
.qlvc-main {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Hàng 1: số hiệu + badge */
.qlvc-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.qlvb-wrap .qlvc-code,
.qlvb-wrap .qlvc-code:visited {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    font-size: 12px !important; font-weight: 700 !important;
    padding: 3px 10px !important; border-radius: 4px !important;
    text-decoration: none !important; font-family: monospace !important;
    background: var(--qlvb-primary-light) !important;
    color: var(--qlvb-primary) !important;
    border: 1px solid rgba(0,71,128,0.2) !important;
    transition: var(--qlvb-transition) !important;
}
.qlvb-wrap .qlvc-code:hover { background: var(--qlvb-primary) !important; color: #fff !important; }
.qlvc-code .dashicons { font-size:13px !important; width:13px !important; height:13px !important; color:inherit !important; }

/* Hàng 2: tiêu đề văn bản */
.qlvc-title {
    margin: 0 !important;
    font-size: 14px !important; font-weight: 700 !important;
    line-height: 1.5 !important; color: var(--qlvb-text) !important;
}
.qlvb-wrap .qlvc-title a,
.qlvb-wrap .qlvc-title a:visited { color: var(--qlvb-text) !important; text-decoration: none !important; }
.qlvb-wrap .qlvc-title a:hover { color: var(--qlvb-primary) !important; text-decoration: underline !important; }

/* Hàng 3: taxonomy tags */
/* Hàng 3: taxonomy rows — mỗi dòng: icon + label: value */
.qlvc-tags {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-top: 4px !important;
}
/* Mỗi dòng taxonomy */
.qlvc-tag-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}
/* Icon — màu theo chủ đề, không có background */
.qlvc-tag-row .dashicons {
    font-size: 13px !important; width: 13px !important; height: 13px !important;
    color: var(--qlvb-primary) !important;
    flex-shrink: 0 !important;
    margin-right: 5px !important;
    margin-top: 2px !important;
}
/* Label: "Nhóm văn bản: " */
.qlvc-tag-label {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--qlvb-text-muted) !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
/* Value: cùng size, cùng màu, không in đậm */
.qlvc-tag-val {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--qlvb-text-muted) !important;
}

/* Cột meta ngày (bên phải) */
.qlvc-meta-col {
    width: 200px !important;
    flex-shrink: 0 !important;
    padding: 14px 16px !important;
    border-left: 1px solid var(--qlvb-border) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    justify-content: center !important;
}
.qlvc-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}
.qlvc-meta-row .dashicons {
    font-size: 15px !important; width:15px !important; height:15px !important;
    color: var(--qlvb-primary) !important; flex-shrink: 0 !important;
}
.qlvc-ml {
    font-size: 12px !important;
    color: var(--qlvb-text-muted) !important;
    min-width: 65px !important;
    flex-shrink: 0 !important;
}
.qlvc-meta-row strong { font-size:13px !important; color:var(--qlvb-text) !important; font-weight:600 !important; }
.qlvc-expired .dashicons { color: #c0392b !important; }
.qlvc-expired .qlvc-ml,
.qlvc-expired strong { color: #c0392b !important; }

/* Cột actions (ngoài cùng phải) */
.qlvc-action-col {
    width: 110px !important;
    flex-shrink: 0 !important;
    padding: 14px 12px !important;
    border-left: 1px solid var(--qlvb-border) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: stretch !important;
    justify-content: center !important;
}
.qlvc-action-col .qlvb-btn-sm { justify-content: center !important; }

/* =========================================================
   PAGINATION
   ========================================================= */
.qlvb-pagination { display:flex !important; justify-content:center !important; gap:4px !important; flex-wrap:wrap !important; margin-top:20px !important; }
.qlvb-page-btn { min-width:36px !important; height:36px !important; padding:0 10px !important; border:1px solid var(--qlvb-border) !important; border-radius:6px !important; background:var(--qlvb-white) !important; color:var(--qlvb-text) !important; font-size:13px !important; font-weight:500 !important; cursor:pointer !important; font-family:inherit !important; text-transform:none !important; transition:var(--qlvb-transition) !important; }
.qlvb-page-btn:hover { border-color:var(--qlvb-primary) !important; color:var(--qlvb-primary) !important; }
.qlvb-page-btn.is-active { background:var(--qlvb-primary) !important; border-color:var(--qlvb-primary) !important; color:#fff !important; font-weight:700 !important; }
.qlvb-page-ellipsis { display:flex !important; align-items:center !important; justify-content:center !important; width:36px !important; height:36px !important; color:var(--qlvb-text-muted) !important; }

/* =========================================================
   MOBILE SIDEBAR
   ========================================================= */
.qlvb-mobile-filter-btn { display:none !important; position:fixed !important; bottom:20px !important; left:50% !important; transform:translateX(-50%) !important; z-index:100 !important; background:var(--qlvb-primary) !important; color:#fff !important; border:none !important; border-radius:24px !important; padding:10px 22px !important; font-size:14px !important; font-weight:600 !important; box-shadow:0 4px 20px rgba(0,71,128,0.4) !important; cursor:pointer !important; gap:6px !important; align-items:center !important; }
.qlvb-sidebar-overlay { display:none !important; position:fixed !important; inset:0 !important; background:rgba(0,0,0,0.5) !important; z-index:200 !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ── Desktop/Tablet lớn (> 1024px): full layout ── */
/* Mặc định: STT col | main body | meta-col | action-col */

/* ── Tablet nhỏ (769-1024px): thu hẹp cột ngày + action ── */
@media (max-width: 1024px) {
    .qlvc-meta-col  { width: 160px !important; }
    .qlvc-action-col { width: 100px !important; }
}

/* ── Sidebar collapse (< 900px) ── */
@media (max-width: 900px) {
    .qlvb-layout.has-sidebar { flex-direction: column !important; }
    .qlvb-layout.has-sidebar .qlvb-sidebar {
        width: 100% !important; position: fixed !important;
        top: 0 !important; left: -100% !important; height: 100vh !important;
        z-index: 300 !important; overflow-y: auto !important;
        transition: left 0.3s ease !important; border-radius: 0 !important;
    }
    .qlvb-layout.has-sidebar .qlvb-sidebar.is-open { left: 0 !important; }
    .qlvb-mobile-filter-btn { display: inline-flex !important; }
    .qlvb-sidebar-overlay.is-visible { display: block !important; }
}

/* ── Mobile (< 768px): chuyển sang layout dọc ──
   Bố cục từng thẻ:
   [border-left] [STT] [Header: số hiệu + badge]
                       [Title]
                       [Taxonomy rows]
                 [2-col dates grid]
                 [Action buttons row]
   ──────────────────────────────────────── */

/* Desktop: mobile elements ẩn */
.qlvc-mobile-dates-grid { display: none !important; }
.qlvc-mobile-actions-row { display: none !important; }

@media (max-width: 768px) {
    /* Bỏ layout ngang, chuyển sang flex-column */
    .qlvc-item {
        flex-direction: column !important;
        border-left-width: 4px !important;
    }

    /* Ẩn cột meta ngày và action dọc */
    .qlvc-meta-col   { display: none !important; }
    .qlvc-action-col { display: none !important; }

    /* STT col: nằm ngang trong header mobile */
    .qlvc-stt-col {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 10px 14px 0 !important;
        background: transparent !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    /* Main body: full width, padding đều */
    .qlvc-main {
        padding: 8px 14px 12px !important;
        gap: 6px !important;
    }

    /* Header: STT đã lên trên, header chỉ còn số hiệu + badge */
    .qlvc-header { gap: 8px !important; flex-wrap: wrap !important; }

    /* Hiện lưới ngày 2 cột */
    .qlvc-mobile-dates-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 10px 14px !important;
        border-top: 1px solid var(--qlvb-border) !important;
        background: var(--qlvb-bg) !important;
    }
    .qlvc-mdate-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    .qlvc-mdate-label {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: var(--qlvb-text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
    }
    .qlvc-mdate-val {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--qlvb-text) !important;
    }
    .qlvc-mdate-val.expired { color: #c0392b !important; }

    /* Hàng nút thao tác full width */
    .qlvc-mobile-actions-row {
        display: flex !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border-top: 1px solid var(--qlvb-border) !important;
    }
    .qlvc-mobile-actions-row .qlvb-btn-sm {
        flex: 1 !important;
        justify-content: center !important;
    }
    /* Ẩn mobile-footer cũ (nếu còn) */
    .qlvc-main-mobile { display: none !important; }
    .qlvc-mobile-footer { display: none !important; }
}

/* ── Nhỏ nhất (< 480px): thu gọn thêm ── */
@media (max-width: 480px) {
    .qlvb-search-bar { flex-direction: column !important; }
    .qlvb-search-input-wrap { width: 100% !important; min-width: unset !important; }
    .qlvb-wrap .qlvb-btn-primary,
    .qlvb-wrap .qlvb-btn-secondary { width: 100% !important; justify-content: center !important; }
    .qlvb-advanced-grid { grid-template-columns: 1fr !important; }
    .qlvb-toolbar { flex-direction: column !important; align-items: flex-start !important; }
    .qlvc-stt { width: 28px !important; height: 28px !important; font-size: 11px !important; }
    .qlvc-mobile-dates-grid { grid-template-columns: 1fr !important; }
}