/* ==========================================================================
   Bilibili Studio - Modern Dark Glassmorphism CSS Theme
   ========================================================================== */

:root {
    --bg-main: #0B0E14;
    --bg-card: rgba(22, 28, 40, 0.7);
    --bg-card-hover: rgba(30, 39, 56, 0.85);
    --bg-sidebar: #07090D;
    
    --border-color: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(0, 180, 255, 0.3);
    
    --text-main: #F1F5F9;
    --text-muted: #94A3B8;
    --text-dim: #64748B;
    
    --accent-blue: #00B4D8;
    --accent-pink: #FF007A;
    --accent-purple: #7000FF;
    --accent-cyan: #06B6D4;
    --accent-emerald: #10B981;

    --gradient-primary: linear-gradient(135deg, #00B4D8 0%, #7000FF 100%);
    --gradient-hot: linear-gradient(135deg, #FF007A 0%, #7000FF 100%);
    --gradient-success: linear-gradient(135deg, #10B981 0%, #00B4D8 100%);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    
    --shadow-glow: 0 0 25px rgba(0, 180, 216, 0.25);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
}

/* App Layout */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    flex-shrink: 0;
    /* With every tab visible the column is taller than a laptop screen, which
       used to cut off the footer (profile link, voice pickers) with no way to
       reach it. */
    height: 100vh;
    overflow-y: auto;
}
.sidebar-footer { margin-top: auto; }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding-left: 8px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: var(--shadow-glow);
}

.brand-text h2 {
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(90deg, #FFFFFF, #94A3B8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-blue);
    background: rgba(0, 180, 216, 0.15);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* Nav Menu */
.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    position: relative;
}

.nav-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.nav-item:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
    color: white;
    background: var(--gradient-primary);
    box-shadow: var(--shadow-glow);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-pink);
    border-radius: 50%;
    margin-left: auto;
    animation: pulse 1.5s infinite;
}

.hidden { display: none !important; }

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 122, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(255, 0, 122, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 122, 0); }
}

.sidebar-footer {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.voice-quick-select label {
    font-size: 12px;
    color: var(--text-dim);
    display: block;
    margin-bottom: 6px;
}

.voice-quick-select select, select {
    width: 100%;
    background: #161C28;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    outline: none;
    font-size: 13px;
    cursor: pointer;
}

select option {
    background-color: #111622 !important;
    color: #F1F5F9 !important;
    padding: 10px;
}

select option:hover, select option:focus, select option:checked {
    background-color: #00B4D8 !important;
    color: #FFFFFF !important;
}

.voice-quick-select select:focus {
    border-color: var(--accent-blue);
}

/* Main Content */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: radial-gradient(circle at top right, rgba(112, 0, 255, 0.08), transparent 40%),
                radial-gradient(circle at bottom left, rgba(0, 180, 216, 0.08), transparent 40%);
}

.top-header {
    padding: 16px 32px;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 50px;
    box-shadow: var(--shadow-card);
}

.search-bar i {
    color: var(--accent-blue);
}

.search-bar input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 14px;
    outline: none;
}

/* Buttons */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Tab Pages */
.tab-page {
    display: none;
    padding: 32px;
    flex-grow: 1;
}

.tab-page.active {
    display: block;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 14px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 50px;
}

.search-box input {
    background: transparent;
    border: none;
    color: white;
    outline: none;
    width: 220px;
    font-size: 13px;
}

/* Category Pills & Scroll Bar */
.category-pills-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.category-pills-scroll::-webkit-scrollbar {
    height: 4px;
}
.category-pills-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.category-pills {
    display: flex;
    gap: 10px;
    white-space: nowrap;
}

.pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pill:hover, .pill.active {
    background: rgba(0, 180, 216, 0.18);
    color: white;
    border-color: var(--border-highlight);
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.2);
}

/* Topic Hashtag Cloud */
.topic-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

.tag-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    margin-right: 4px;
}

.topic-tag {
    background: rgba(112, 0, 255, 0.1);
    color: var(--accent-cyan);
    border: 1px solid rgba(6, 182, 212, 0.2);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.topic-tag:hover {
    background: var(--accent-cyan);
    color: #000;
    transform: translateY(-1px);
}

.topic-tag.active {
    background: var(--accent-blue, #00b4d8);
    color: #fff;
    border-color: var(--accent-blue, #00b4d8);
}

/* Start the "original Chinese tags" group on its own row */
.tag-title-sub {
    flex-basis: 100%;
    margin-top: 6px;
}

#foryou-basedon:empty {
    display: none;
}

.foryou-seed {
    background: rgba(0, 180, 216, 0.12);
}

/* Multi-part (分P) / season episode selector inside the video modal */
.modal-parts {
    padding: 10px 16px 0;
}

.modal-parts.hidden {
    display: none;
}

.modal-parts-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.modal-parts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 132px;
    overflow-y: auto;
}

.part-item {
    display: inline-flex;
    align-items: stretch;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.06);
}

.part-chip {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 10px 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    background: transparent;
    border: none;
    transition: all 0.15s;
}

.part-chip:hover {
    color: #fff;
}

.part-item:hover {
    background: rgba(0, 180, 216, 0.18);
}

.part-item:has(.part-chip.active) {
    background: var(--accent-blue, #00b4d8);
    border-color: var(--accent-blue, #00b4d8);
}

.part-chip.active {
    color: #fff;
}

.part-dl {
    border: none;
    border-left: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0 10px;
    font-size: 12px;
    min-width: 34px;
}

.part-dl:hover {
    background: var(--accent-blue, #00b4d8);
    color: #fff;
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.video-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.video-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-highlight);
    box-shadow: var(--shadow-card);
}

.thumb-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #111;
}

.thumb-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.duration-tag {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.video-details {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.video-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-author {
    font-size: 12px;
    color: var(--text-dim);
}

.video-card-actions {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-card-process {
    flex: 1 1 calc(50% - 4px);
}

.btn-card-process {
    flex-grow: 1;
    background: rgba(0, 180, 216, 0.1);
    color: var(--accent-blue);
    border: 1px solid var(--border-highlight);
    padding: 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-card-process:hover {
    background: var(--accent-blue);
    color: white;
}

.btn-card-view,
.btn-card-download {
    flex: 1 1 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.btn-card-view:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.btn-card-download:hover {
    background: var(--accent-blue);
    color: white;
}

/* Load More */
.load-more-container {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 40px;
}

/* Modal Quick Detail View */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: #111622;
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-lg);
    max-width: 750px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    /* Never taller than the screen; the body scrolls, the close button stays */
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-color);
    color: white;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--accent-pink);
    border-color: var(--accent-pink);
}

.modal-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;          /* scroll the content on tall/short screens */
    min-height: 0;
}

.modal-player-box {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 45vh;          /* keep room for parts + buttons on short screens */
    background: black;
    flex-shrink: 0;
}

#player-iframe-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#player-iframe-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#player-iframe-wrapper iframe,
#player-iframe-wrapper video {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
    object-fit: contain;
}

.player-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    pointer-events: auto;
}

.player-hint a {
    color: var(--accent-blue);
}

.select-hint {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--accent-pink);
}

.storage-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
}

.blur-hint {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-dim);
}

/* Explore & Filter tab */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin-bottom: 22px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
    flex: 1 1 150px;
}

.filter-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-dim);
}

.filter-group select {
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--bg-elevated, #1a1f2e);
    color: var(--text-main, #fff);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.filter-reset {
    flex: 0 0 auto;
    height: 38px;
}

.explore-sentinel {
    height: 1px;
}

.explore-status {
    text-align: center;
    padding: 24px;
    color: var(--text-dim);
    font-weight: 600;
    font-size: 14px;
}

.scroll-top-btn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--accent-blue, #00b4d8);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.25s, transform 0.25s;
}

.scroll-top-btn:hover {
    transform: translateY(-3px);
}

.scroll-top-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.btn-block {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

.btn-block:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#blur-settings {
    transition: opacity 0.2s ease;
}

#blur-settings.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.blur-preview-box {
    position: relative;
    margin-top: 6px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blur-preview-box img {
    width: 100%;
    display: none;
}

.blur-preview-box img.visible {
    display: block;
}

.blur-preview-msg {
    padding: 16px;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
}

/* Draggable blur-region overlay on the preview image */
.blur-region-overlay {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    border: 2px dashed var(--accent-blue);
    background: rgba(0, 180, 216, 0.18);
    cursor: grab;
    touch-action: none;
    user-select: none;
    z-index: 2;
}

.blur-region-overlay.dragging {
    cursor: grabbing;
    background: rgba(0, 180, 216, 0.28);
}

.blur-region-overlay.hidden {
    display: none;
}

.blur-region-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 8px;
    border-radius: 20px;
    pointer-events: none;
}

.blur-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    cursor: ns-resize;
    background: transparent;
}

.blur-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 3px;
    background: var(--accent-blue);
}

.blur-handle.top {
    top: -6px;
}

.blur-handle.top::after {
    top: 4px;
}

.blur-handle.bottom {
    bottom: -6px;
}

.blur-handle.bottom::after {
    bottom: 4px;
}

.play-overlay-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 180, 216, 0.85);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 30px rgba(0, 180, 216, 0.6);
    transition: transform 0.2s, background 0.2s;
}

.play-overlay-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
    background: var(--accent-blue);
}

.orig-title-text {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: -6px;
}

.modal-info-box {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.modal-desc-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: var(--radius-sm);
    max-height: 100px;
    overflow-y: auto;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

/* Process Dashboard */
.process-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.process-video-info {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 32px;
}

.placeholder-thumb {
    width: 120px;
    height: 70px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-dim);
}

.url-text {
    font-size: 13px;
    color: var(--text-muted);
    word-break: break-all;
}

.progress-container {
    margin-bottom: 40px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
}

.progress-track {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 20px;
    transition: width 0.4s ease;
}

/* Steps Visualizer */
.steps-visualizer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.step-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    opacity: 0.4;
    transition: all 0.3s;
}

.step-item.active {
    opacity: 1;
    border-color: var(--accent-blue);
    background: rgba(0, 180, 216, 0.1);
}

.step-item.completed {
    opacity: 1;
    border-color: var(--accent-emerald);
    background: rgba(16, 185, 129, 0.1);
}

.step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Subtitle Editor Table */
.subtitles-table-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-height: 550px;
    overflow-y: auto;
}

.subtitles-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.subtitles-table th {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 16px;
    text-align: left;
    color: var(--text-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
}

.subtitles-table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: top;
}

.subtitles-table input[type="text"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    outline: none;
    font-size: 13px;
}

.subtitles-table input[type="text"]:focus {
    border-color: var(--accent-blue);
    background: rgba(0, 180, 216, 0.08);
}

.empty-msg {
    text-align: center;
    color: var(--text-dim);
    padding: 40px !important;
}

/* Preview Grid */
.preview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.player-card, .export-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.video-wrapper video {
    width: 100%;
    border-radius: var(--radius-md);
    background: black;
    max-height: 480px;
}

.export-card h3 {
    font-size: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group {
    margin-bottom: 20px;
}

.control-group label {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}

.control-group input[type="range"] {
    width: 100%;
    accent-color: var(--accent-blue);
}

.range-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-blue);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

/* ===== Google Sign-In + user profile ===== */
.auth-area {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.btn-google-login {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-primary, #fff);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-google-login:hover { background: var(--bg-card-hover); }
.btn-google-login .fa-google { color: var(--accent-cyan); }

.auth-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}
.auth-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--accent-purple);
    object-fit: cover;
    flex-shrink: 0;
}
.auth-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.auth-name {
    font-weight: 700; font-size: .85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.auth-link { font-size: .74rem; color: var(--accent-cyan); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-logout {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 1rem; padding: 6px;
}
.auth-logout:hover { color: var(--accent-pink); }

/* Hồ sơ chứa bốn khối hướng dẫn cookie kèm ảnh minh hoạ và các ô dán chuỗi
   rất dài, nên 560px là quá chật — trên màn hình 1920 nó chỉ chiếm chưa tới
   một phần ba bề ngang trong khi chữ bên trong phải xuống dòng liên tục.
   Dùng min() để màn hình nhỏ vẫn co lại vừa khung, không tràn ngang. */
.profile-modal-content { max-width: min(1080px, 94vw); width: 100%; }
.profile-head {
    display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.profile-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    border: 2px solid var(--accent-purple); object-fit: cover;
}
.profile-email { color: var(--text-muted); font-size: .85rem; }

.profile-section h4 { margin-bottom: 8px; }
.profile-hint { color: var(--text-muted); font-size: .82rem; margin-bottom: 10px; line-height: 1.5; }
.profile-hint code {
    background: var(--bg-elevated); padding: 1px 6px; border-radius: 4px; font-size: .78rem;
}

.cookie-status { font-size: .84rem; margin-bottom: 10px; font-weight: 600; }
.cookie-status.ok { color: var(--accent-emerald); }
.cookie-status.warn { color: #eab308; }

/* MỌI ô dán cookie, không riêng Douyin.
   Trước đây chỉ #douyin-cookie-input có luật này, nên ba ô YouTube, Facebook,
   Bilibili không trúng luật nào và rơi về mặc định trình duyệt (~20 cột) —
   hẹp bằng một phần năm khung chứa, dán chuỗi cookie dài vào không đọc nổi.
   Dùng khớp theo đuôi id để thêm nền tảng mới cũng tự có kiểu dáng. */
textarea[id$="-cookie-input"] {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary, #fff);
    padding: 10px;
    font-size: .8rem;
    font-family: monospace;
    resize: vertical;
}

/* Hai lớp này là CÙNG một hàng nút "Upload file cookie + Lưu cookie", chỉ
   khác tên do viết ở hai thời điểm. Trước đây chỉ .profile-actions có luật
   nên khối Douyin nằm ngang đẹp, còn YouTube/Facebook/Bilibili rơi về bố cục
   mặc định và xếp chồng lệch nhau. Gộp chung để không lệch lại lần nữa. */
.profile-actions,
.cookie-actions {
    display: flex; gap: 10px; margin-top: 12px; align-items: center;
    flex-wrap: wrap;
}
/* Nút trong hàng giữ nguyên chiều cao nhau dù chữ dài ngắn khác nhau */
.profile-actions > *,
.cookie-actions > * { margin: 0; }
.cookie-file-label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cookie-msg { margin-top: 10px; font-size: .82rem; color: var(--text-muted); }

.admin-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .05em;
    border-radius: 6px;
    background: var(--gradient-primary);
    color: #fff;
    vertical-align: middle;
}

/* ===== Admin page ===== */
.admin-section-title {
    margin: 26px 0 12px;
    font-size: 1.02rem;
    display: flex; align-items: center; gap: 8px;
    color: var(--text-primary, #fff);
}
.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.admin-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
}
.admin-card-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--accent-cyan);
    font-size: 1.05rem;
}
.admin-card-body { display: flex; flex-direction: column; min-width: 0; }
.admin-card-value { font-weight: 800; font-size: .98rem; }
.admin-card-label { color: var(--text-muted); font-size: .74rem; margin-top: 2px; }
.admin-card-sub {
    color: var(--text-muted); font-size: .7rem; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.admin-table-wrap {
    overflow-x: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-table th, .admin-table td {
    text-align: left; padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.admin-table th { color: var(--text-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
.admin-del-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 6px; font-size: .9rem;
}
.admin-del-btn:hover { color: var(--accent-pink); }

/* ===== Guest mode: dubbing UI is admin-only ===== */
/* Hidden (not just disabled) so guests see a clean watch-and-download app.
   The backend enforces the same rule on /api/process/start and /api/render/custom. */
body:not(.role-member) .btn-card-process,
body:not(.role-member) #btn-modal-process,
body:not(.role-member) .top-header .search-bar,
body:not(.role-member) .nav-item[data-tab="process"],
body:not(.role-member) .nav-item[data-tab="editor"],
body:not(.role-member) .nav-item[data-tab="preview"],
body:not(.role-member) .sidebar-footer .voice-quick-select {
    display: none !important;
}

/* ===== Uploader (channel) modal ===== */
.author-link { cursor: pointer; transition: color .15s; }
.author-link:hover { color: var(--accent-cyan); text-decoration: underline; }

.uploader-modal-content { max-width: 1080px; width: 92%; }
.uploader-head {
    display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.uploader-face {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid var(--accent-purple); object-fit: cover;
}
.uploader-sub { color: var(--text-muted); font-size: .84rem; }
#uploader-grid { margin-top: 4px; }

/* The video modal must stack above the uploader list so closing it returns
   the user to the channel listing */
#video-detail-modal { z-index: 1200; }

/* ===== Quota meter (sidebar) ===== */
.quota-box {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-bottom: 10px;
}
.quota-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.quota-plan { font-weight: 800; font-size: .78rem; }
.quota-bar {
    height: 6px; border-radius: 4px; background: rgba(255,255,255,.08);
    margin: 7px 0 5px; overflow: hidden;
}
.quota-bar-fill { height: 100%; width: 0; background: var(--gradient-primary); transition: width .3s; }
.quota-bar-fill.low { background: var(--accent-pink); }
.quota-text { font-size: .7rem; color: var(--text-muted); }

/* ===== Pricing tab ===== */
.pricing-current {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: .9rem;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    align-items: stretch;
}
.pricing-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 18px;
}
.pricing-card.featured { border-color: var(--accent-purple); box-shadow: var(--shadow-glow); }
.pricing-card.current { border-color: var(--accent-emerald); }
.pricing-tag {
    position: absolute; top: -10px; left: 18px;
    background: var(--gradient-primary); color: #fff;
    font-size: .62rem; font-weight: 800; letter-spacing: .05em;
    padding: 3px 9px; border-radius: 8px;
}
.pricing-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.pricing-price { font-size: 1.5rem; font-weight: 800; }
.pricing-price span { font-size: .8rem; font-weight: 500; color: var(--text-muted); }
.pricing-minutes {
    color: var(--accent-cyan); font-weight: 700; font-size: .84rem; margin: 10px 0 12px;
}
.pricing-features { list-style: none; padding: 0; margin: 0 0 14px; flex: 1; }
.pricing-features li {
    font-size: .8rem; color: var(--text-muted);
    padding: 4px 0; display: flex; gap: 7px; align-items: flex-start; line-height: 1.45;
}
.pricing-features i { color: var(--accent-emerald); margin-top: 3px; }
/* Dòng "gói này KHÔNG có": mờ đi và dấu gạch chéo, để mắt lướt qua vẫn phân
   biệt được ngay với dòng có dấu tích mà không phải đọc chữ. */
.pricing-features li.feat-off { opacity: .62; }
.pricing-features li.feat-off i { color: var(--text-muted); }
.pricing-api {
    font-size: .72rem; font-weight: 700; color: var(--accent-purple); margin-bottom: 10px;
}
.pricing-btn { width: 100%; justify-content: center; }
.pricing-btn:disabled { opacity: .55; cursor: default; }
.pricing-note-box {
    margin-top: 24px; padding: 16px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.pricing-note-box p { color: var(--text-muted); font-size: .84rem; margin-top: 6px; line-height: 1.5; }
.admin-plan-select {
    background: var(--bg-elevated); color: var(--text-primary, #fff);
    border: 1px solid var(--border-color); border-radius: 6px;
    padding: 3px 6px; font-size: .78rem;
}

/* ===== Payment (VietQR) modal ===== */
.payment-modal-content { max-width: 700px; }
.payment-body {
    display: flex; gap: 20px; align-items: flex-start;
    margin: 16px 0; flex-wrap: wrap;
}
.payment-qr-box {
    background: #fff; padding: 10px; border-radius: var(--radius-md);
    flex-shrink: 0; line-height: 0;
}
.payment-qr-box img { width: 230px; height: 230px; display: block; }
.payment-details { flex: 1; min-width: 240px; }
.payment-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--border-color);
    font-size: .85rem;
}
.payment-row span { color: var(--text-muted); }
.payment-row strong { text-align: right; word-break: break-all; }
.payment-row.highlight strong {
    color: var(--accent-cyan); font-size: 1.05rem; letter-spacing: .05em;
}
.payment-warn {
    margin-top: 12px; font-size: .78rem; color: #eab308; line-height: 1.5;
}
.payment-status {
    text-align: center; padding: 12px;
    background: var(--bg-elevated); border-radius: var(--radius-md);
    font-size: .88rem; font-weight: 600;
}
.payment-status.ok { color: var(--accent-emerald); }
.payment-status.warn { color: #eab308; }

/* The video modal supplies its own padding via inner boxes; the payment and
   profile modals need their own so text is not flush against the border. */
.payment-modal-content .modal-body,
.profile-modal-content .modal-body,
.uploader-modal-content .modal-body {
    padding: 22px 24px 24px;
}
.payment-modal-content .modal-body > h3 { padding-right: 44px; }

/* ===== API tab ===== */
.api-key-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#api-key-name {
    flex: 1; min-width: 220px;
    background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); color: var(--text-primary, #fff);
    padding: 9px 12px; font-size: .85rem;
}
.api-key-new {
    margin-top: 12px; padding: 14px;
    background: var(--bg-card); border: 1px solid var(--accent-emerald);
    border-radius: var(--radius-md); font-size: .85rem;
}
.api-key-new p { color: #eab308; margin-bottom: 10px; }
.api-key-value { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.api-key-value code {
    flex: 1; min-width: 260px;
    background: var(--bg-elevated); padding: 9px 12px; border-radius: 8px;
    font-family: monospace; font-size: .82rem; word-break: break-all;
}
.api-docs h4 { margin: 20px 0 8px; font-size: .95rem; }
.api-code {
    background: #0b0f18; border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 14px;
    font-family: monospace; font-size: .78rem; line-height: 1.6;
    color: #cbd5e1; overflow-x: auto; white-space: pre;
}

/* ===== App footer (links to the standalone info pages) ===== */
.app-footer {
    margin-top: 40px;
    padding: 24px 0 32px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}
.app-footer nav {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    justify-content: center; margin-bottom: 10px;
}
.app-footer a {
    color: var(--text-muted); text-decoration: none; font-size: .84rem;
}
.app-footer a:hover { color: var(--accent-cyan); }
.app-footer p { color: var(--text-muted); font-size: .74rem; max-width: 620px; margin: 0 auto; }

/* ===== Danger zone (account deletion) ===== */
.danger-zone {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}
.danger-zone h4 { color: var(--accent-pink); }
.btn-danger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: 1px solid var(--accent-pink);
    color: var(--accent-pink);
    border-radius: var(--radius-md);
    font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-danger:hover { background: var(--accent-pink); color: #fff; }


/* ===== Cookie how-to (collapsible guide in the profile modal) ===== */
.cookie-howto {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin: 12px 0;
    overflow: hidden;
}
.cookie-howto summary {
    padding: 11px 14px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 700;
    color: var(--accent-cyan);
    user-select: none;
    list-style: none;
}
.cookie-howto summary::-webkit-details-marker { display: none; }
.cookie-howto summary:hover { background: var(--bg-card-hover); }
.cookie-howto[open] summary { border-bottom: 1px solid var(--border-color); }

.howto-body { padding: 14px; font-size: .82rem; line-height: 1.65; color: #cbd5e1; }
.howto-body h5 {
    margin: 16px 0 7px;
    font-size: .85rem;
    color: var(--text-primary, #fff);
}
.howto-body h5:first-of-type { margin-top: 6px; }

.howto-warn {
    background: rgba(234, 179, 8, .08);
    border-left: 3px solid #eab308;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: .8rem;
    color: #eab308;
}

.howto-steps, .howto-list { margin: 0 0 4px 20px; padding: 0; }
.howto-steps li, .howto-list li { margin-bottom: 7px; }
.howto-note {
    display: block;
    margin-top: 5px;
    font-size: .75rem;
    color: var(--text-muted);
}

.ext-links { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 4px; }
.ext-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--accent-cyan);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    transition: border-color .15s, background .15s;
}
.ext-link:hover { background: var(--bg-card-hover); border-color: var(--accent-cyan); }

/* ===== Pay-as-you-go wallet ===== */
.wallet-box {
    background: var(--bg-card);
    border: 1px solid var(--accent-cyan);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 26px;
}
.wallet-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; flex-wrap: wrap; margin-bottom: 14px;
}
.wallet-head h3 { font-size: 1.05rem; margin-bottom: 6px; }
.wallet-balance-box {
    text-align: right; background: var(--bg-elevated);
    border-radius: var(--radius-md); padding: 10px 16px; min-width: 170px;
}
.wallet-balance-label { display: block; font-size: .72rem; color: var(--text-muted); }
.wallet-balance-box strong { font-size: 1.3rem; color: var(--accent-emerald); }
.wallet-balance-sub { display: block; font-size: .72rem; color: var(--text-muted); }
.wallet-options { display: flex; flex-wrap: wrap; gap: 10px; }
.wallet-amount {
    flex: 0 1 150px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px; cursor: pointer; text-align: center;
    transition: border-color .15s, transform .1s;
}
.wallet-amount:hover { border-color: var(--accent-cyan); transform: translateY(-2px); }
.wallet-amount strong { display: block; font-size: 1.05rem; }
.wallet-amount span { font-size: .74rem; color: var(--text-muted); }
.wallet-sidebar {
    font-size: .7rem; color: var(--text-muted); margin-top: 4px; display: block;
}

.wallet-cap {
    display: inline-block;
    background: var(--gradient-primary);
    color: #fff;
    padding: 1px 9px;
    border-radius: 8px;
    font-weight: 800;
    font-size: .78rem;
}

/* ===== Affiliate ===== */
.aff-link-box {
    background: var(--bg-card); border: 1px solid var(--accent-purple);
    border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px;
}
.aff-link-box label { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: 8px; }
.aff-link-row { display: flex; gap: 10px; flex-wrap: wrap; }
#aff-link {
    flex: 1; min-width: 260px;
    background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); color: var(--accent-cyan);
    padding: 10px 14px; font-family: monospace; font-size: .88rem;
}
.aff-hint { display: block; font-size: .74rem; color: var(--text-muted); margin-top: 8px; }
.aff-payout {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; margin-top: 16px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 16px 18px;
}
.aff-payout-label { display: block; font-size: .74rem; color: var(--text-muted); }
.aff-payout strong { font-size: 1.5rem; color: var(--accent-emerald); }

/* ===== Landing copy (shown to signed-out visitors) ===== */
.landing { display: none; }
body:not(.role-member) .landing { display: block; margin-bottom: 34px; }
.landing h1 {
    font-size: 1.9rem; line-height: 1.25; margin-bottom: 12px;
    background: var(--gradient-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.landing-lead { color: #cbd5e1; font-size: .96rem; line-height: 1.7; max-width: 820px; margin-bottom: 22px; }
.landing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
.landing-card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 16px;
}
.landing-card i { color: var(--accent-cyan); font-size: 1.15rem; }
.landing-card h3 { font-size: .95rem; margin: 8px 0 6px; }
.landing-card p { font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
.landing-price {
    background: var(--bg-elevated); border-left: 3px solid var(--accent-emerald);
    border-radius: var(--radius-md); padding: 14px 16px;
    font-size: .9rem; color: #cbd5e1; margin-bottom: 26px;
}
.landing-h2 { font-size: 1.15rem; margin-bottom: 12px; }
.landing-faq details {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden;
}
.landing-faq summary { padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.landing-faq summary:hover { background: var(--bg-card-hover); }
.landing-faq p { padding: 0 16px 14px; font-size: .85rem; color: var(--text-muted); line-height: 1.65; }
.landing-links { margin-top: 18px; font-size: .85rem; }
.landing-links a { color: var(--accent-cyan); text-decoration: none; }

/* ===== Screenshot inside the cookie how-to (profile modal) ===== */
/* Ảnh gốc chỉ rộng 715px. Khung hồ sơ nay rộng tới 1080px, để width:100%
   thì ảnh bị kéo giãn quá khổ thật -> mờ nhoè và cao lêu nghêu. Chặn ở đúng
   khổ gốc, ảnh vẫn co lại được khi màn hình hẹp. */
.howto-shot {
    max-width: 715px;
    display: block; margin: 10px 0 4px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    overflow: hidden; text-decoration: none; background: var(--bg-elevated);
}
.howto-shot img { display: block; width: 100%; height: auto; }
.howto-shot span {
    display: block; padding: 6px 10px; font-size: .7rem;
    color: var(--text-muted); text-align: center;
}
.howto-shot:hover { border-color: var(--accent-cyan); }

/* Nút chạy lại tác vụ hỏng trong bảng lịch sử */
.btn-retry {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; font-size: .78rem; font-weight: 600;
    background: transparent; border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan); border-radius: 8px; cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-retry:hover:not(:disabled) { background: var(--accent-cyan); color: #06121a; }
.btn-retry:disabled { opacity: .6; cursor: default; }

/* ---- Tab "Dán link" ---- */
.paste-box {
    background: var(--bg-card, #16181d);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 18px;
}
.paste-input-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; }
.paste-input-row textarea {
    flex: 1; min-width: 0; resize: vertical;
    padding: 12px 14px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit; font: inherit; line-height: 1.5;
}
.paste-input-row textarea:focus {
    outline: none; border-color: var(--accent, #ff6699);
}
.paste-input-row button { flex: 0 0 auto; padding: 12px 20px; }
@media (max-width: 720px) {
    .paste-input-row { flex-direction: column; }
    .paste-input-row button { width: 100%; }
}
.paste-platforms {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.paste-badge {
    font-size: 12px; padding: 4px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); color: var(--text-dim, #9aa0aa);
}
.paste-badge.ok { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.paste-badge.beta { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.paste-note {
    margin-top: 12px; font-size: 13px; line-height: 1.6;
    color: var(--text-dim, #9aa0aa);
}
.paste-preview {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--bg-card, #16181d);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px; padding: 18px;
}
.paste-preview.hidden { display: none; }
.paste-cover { flex: 0 0 240px; }
.paste-cover img, .paste-cover-empty {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px;
}
.paste-cover-empty {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05); color: var(--text-dim, #9aa0aa); font-size: 28px;
}
.paste-meta { flex: 1; min-width: 0; }
.paste-meta h3 { margin: 6px 0 8px; font-size: 18px; line-height: 1.4; }
.paste-meta p { font-size: 13px; color: var(--text-dim, #9aa0aa); margin-bottom: 10px; }
.paste-platform {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--accent, #ff6699);
}
.paste-warn { color: #fbbf24 !important; }
@media (max-width: 720px) {
    .paste-preview { flex-direction: column; }
    .paste-cover { flex: none; width: 100%; }
}

/* ---- Tổng quan tài khoản trong modal hồ sơ ---- */
.account-box { margin-bottom: 6px; }
.account-loading, .account-error {
    padding: 14px; font-size: 14px; color: var(--text-dim, #9aa0aa);
}
.account-error { color: #f87171; }
.account-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.account-cell {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.account-cell.highlight {
    background: rgba(255, 102, 153, 0.1);
    border-color: rgba(255, 102, 153, 0.35);
}
.account-cell strong { font-size: 19px; line-height: 1.3; }
.account-label { font-size: 12px; color: var(--text-dim, #9aa0aa); text-transform: uppercase; letter-spacing: 0.4px; }
.account-sub { font-size: 12px; color: var(--text-dim, #9aa0aa); }
.account-actions { margin-top: 12px; }
.account-hist-title { margin: 18px 0 8px; font-size: 14px; }
.account-hist { width: 100%; border-collapse: collapse; font-size: 13px; }
.account-hist td { padding: 8px 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.account-hist td:nth-child(3), .account-hist td:nth-child(4) { text-align: right; white-space: nowrap; }
.account-hist td.pos { color: #4ade80; }
.account-hist td.neg { color: #f87171; }

/* ---- Tab tải file lên ---- */
.upload-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 44px 20px; text-align: center; cursor: pointer;
    border: 2px dashed rgba(255, 255, 255, 0.18); border-radius: 14px;
    background: rgba(255, 255, 255, 0.03); transition: all 0.15s;
}
.upload-drop:hover, .upload-drop.dragging {
    border-color: var(--accent, #ff6699); background: rgba(255, 102, 153, 0.07);
}
.upload-drop > i { font-size: 34px; color: var(--accent, #ff6699); }
.upload-drop-title { font-size: 16px; font-weight: 600; }
.upload-drop-sub { font-size: 13px; color: var(--text-dim, #9aa0aa); }
.upload-progress-box {
    background: var(--bg-card, #16181d); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px; padding: 18px; margin-bottom: 18px;
}
.upload-progress-box.hidden { display: none; }
.upload-progress-head {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 14px; margin-bottom: 10px;
}
.upload-bar {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.upload-bar-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: var(--accent, #ff6699); transition: width 0.2s;
}
.upload-cancel { margin-top: 12px; }

/* ---- Ghi chú thời hạn giữ file tải lên ---- */
.upload-retention {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 12px; padding: 12px 14px; border-radius: 10px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
}
.upload-retention > i { color: #fbbf24; margin-top: 3px; flex: 0 0 auto; }
.upload-retention strong { color: #fbbf24; }
.upload-retention-mini {
    font-size: 12px !important; color: var(--text-dim, #9aa0aa);
    margin-bottom: 10px !important;
}
.upload-retention-mini > i { color: #fbbf24; margin-right: 4px; }

/* ---- Khung SEO (bước 6) ---- */
.seo-panel {
    background: var(--bg-card, #16181d);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px; padding: 20px; margin: 20px 0;
}
.seo-panel.hidden { display: none; }
.seo-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.seo-head h3 { font-size: 16px; }
.seo-grid { display: grid; gap: 12px; }
.seo-field {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px; padding: 12px 14px;
}
.seo-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-dim, #9aa0aa); margin-bottom: 6px;
}
.seo-copy {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim, #9aa0aa); font-size: 13px; padding: 2px 4px;
}
.seo-copy:hover { color: var(--accent, #ff6699); }
.seo-value { font-size: 14px; line-height: 1.6; word-break: break-word; }
.seo-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.seo-tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 13px; background: rgba(255, 102, 153, 0.12);
    color: var(--accent, #ff6699);
}
.seo-tag.kw { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }

/* ---- Hàng đợi lồng tiếng ---- */
.queue-count { font-size: 13px; font-weight: 400; color: var(--text-dim, #9aa0aa); margin-left: 8px; }
.queue-note { margin-bottom: 12px; }
.queue-row .q-title { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.q-badge.pending { background: rgba(255, 255, 255, 0.07); color: var(--text-dim, #9aa0aa); }
.q-badge.queued { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.q-badge.running { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.q-actions { display: flex; gap: 6px; justify-content: flex-end; }
.q-btn { padding: 6px 12px; font-size: 13px; }
.active-row { background: rgba(74, 222, 128, 0.03); }

/* ---- Nút "+ Hàng đợi" trên thẻ video ---- */
.btn-card-queue {
    flex: 1 1 calc(50% - 4px);
    background: rgba(255, 102, 153, 0.08);
    color: var(--accent, #ff6699);
    border: 1px solid rgba(255, 102, 153, 0.3);
    padding: 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-card-queue:hover {
    background: var(--accent, #ff6699);
    color: white;
}
.btn-card-queue:disabled {
    opacity: 0.85;
    cursor: default;
}
.btn-card-process { font-size: 13px; white-space: nowrap; }

/* Nút SEO trong bảng lịch sử: trông như link cùng hàng Xem/Tải */
.btn-show-seo {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-size: inherit;
}
.paste-badge.no { color: #f87171; background: rgba(248, 113, 113, 0.12); }

/* Nhóm chủ đề ngách: xuyên không/chiến thần/truyện tranh động */
.tag-group-label {
    width: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-dim, #9aa0aa); margin: 6px 0 2px;
}
.topic-tag.hot-niche {
    background: rgba(255, 102, 153, 0.12);
    border-color: rgba(255, 102, 153, 0.35);
    color: var(--accent, #ff6699);
}
.topic-tag.hot-niche:hover, .topic-tag.hot-niche.active {
    background: var(--accent, #ff6699); color: #fff;
}

.douyin-tag-warning {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 10px 0; padding: 11px 14px; border-radius: 10px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
}
.douyin-tag-warning > i { color: #fbbf24; margin-top: 3px; flex: 0 0 auto; }

/* Ghi chú tab Phim ngắn AI */
.aishorts-note {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 10px 0 16px; padding: 12px 14px; border-radius: 10px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.25);
}
.aishorts-note > i { color: #60a5fa; margin-top: 3px; flex: 0 0 auto; }
.aishorts-note code {
    background: rgba(255, 255, 255, 0.07); padding: 1px 5px;
    border-radius: 4px; font-size: 12px;
}

/* Thẻ xem trước tab Dán link: nút hành động + danh sách tập */
.paste-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.paste-author-link { cursor: pointer; }
.paste-author-link:hover { color: var(--accent, #ff6699); text-decoration: underline; }
.paste-note-inline { font-size: 12px; color: var(--text-dim, #9aa0aa); margin-bottom: 8px; }
.paste-parts { margin-top: 14px; }
.paste-parts.hidden { display: none; }
.paste-parts-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.paste-parts-list { max-height: 340px; overflow-y: auto; }
.paste-part-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 4px; border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.paste-part-name {
    flex: 1; min-width: 0; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paste-part-dur { font-size: 12px; color: var(--text-dim, #9aa0aa); white-space: nowrap; }

/* ---- Thẻ phim ngắn (Hồng Quả, Tinh Nha): ảnh bìa là poster dọc ---- */
/* Ảnh bìa mỗi phim một kích thước khác nhau; không ép tỉ lệ thì mỗi thẻ cao
   một kiểu và cả hàng lưới lệch nhau. Danh sách chọn tử ở đây dùng CHUNG cho
   mọi nguồn phim ngắn — thêm nguồn mới thì thêm class vào đây, đừng viết lại
   một bộ riêng (đã dính lỗi này một lần khi thêm Tinh Nha). */
.hg-card .video-thumb,
.xy-card .video-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}
.hg-card .video-thumb img,
.hg-card .paste-cover-empty,
.xy-card .video-thumb img,
.xy-card .paste-cover-empty {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.hg-card .paste-cover-empty,
.xy-card .paste-cover-empty {
    aspect-ratio: auto;
    display: flex; align-items: center; justify-content: center;
}
/* Các thẻ trong lưới phải cùng chiều cao, phần nút luôn nằm đáy */
.hg-card, .xy-card { display: flex; flex-direction: column; }
.hg-card .video-card-body,
.xy-card .video-card-body { display: flex; flex-direction: column; flex: 1; }
.hg-card .video-card-actions,
.xy-card .video-card-actions { margin-top: auto; }
/* Hàng nhãn cao thấp khác nhau (phim thiếu điểm hoặc lượt xem) sẽ đẩy lệch
   phần nút bên dưới — ghim chiều cao để mọi thẻ bằng nhau. */
.hg-card .video-meta,
.xy-card .video-meta { min-height: 24px; max-height: 52px; overflow: hidden; }

/* ---- Bộ chọn tập Hồng Quả ---- */
.picker-modal { max-width: 720px; width: 92vw; }
.picker-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    margin: 14px 0; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.picker-range { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.picker-range input {
    width: 66px; padding: 5px 8px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14); color: inherit;
}
.picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 6px; max-height: 320px; overflow-y: auto; padding: 4px 2px;
}
.picker-item {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 7px 4px; border-radius: 8px; cursor: pointer; font-size: 13px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.picker-item:hover { border-color: var(--accent, #ff6699); }
.picker-item:has(input:checked) {
    background: rgba(255, 102, 153, 0.18);
    border-color: var(--accent, #ff6699);
    color: var(--accent, #ff6699); font-weight: 600;
}
.picker-item input { accent-color: var(--accent, #ff6699); }
.picker-footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 16px;
}
.picker-count { font-size: 14px; color: var(--text-dim, #9aa0aa); }
#picker-confirm:disabled { opacity: 0.45; cursor: not-allowed; }

/* Nhãn dài (tên tập Bilibili) cần ô rộng thay vì lưới ô vuông số thứ tự */
.picker-grid.picker-grid-wide {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.picker-grid-wide .picker-item {
    justify-content: flex-start; gap: 8px; padding: 8px 10px;
}
.picker-grid-wide .picker-item span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Cụm nút bên phải tiêu đề mục (tab Phim ngắn AI) */
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Nút "Lọc" ở tab Douyin: sáng lên khi có lựa chọn chưa áp dụng */
.filter-apply.filter-dirty {
    animation: filterPulse 1.4s ease-in-out infinite;
}
@keyframes filterPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 102, 153, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 102, 153, 0); }
}

/* Nút nghe thử giọng đọc */
.voice-preview-btn {
    width: 100%; margin-top: 8px; padding: 8px;
    font-size: 13px; display: flex; align-items: center;
    justify-content: center; gap: 6px;
}
.voice-preview-btn:disabled { opacity: 0.6; cursor: wait; }


/* Khung báo lỗi của tiến trình. Thay cho alert() của trình duyệt: alert không
   chèn được nút, mà lỗi hết hạn mức chính là lúc khách sẵn sàng trả tiền nhất
   — phải có lối bấm thẳng sang trang nâng cấp ngay tại đó. */
.task-error-box {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md, 12px);
    background: rgba(236, 72, 153, 0.08);
    border: 1px solid rgba(236, 72, 153, 0.35);
}
.task-error-box p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-main, #e8e8ef);
}
.task-error-box .task-error-actions,
#task-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#task-error-actions button {
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
}
#task-error-actions .err-primary {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #fff;
}
#task-error-actions .err-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main, #e8e8ef);
    border: 1px solid var(--border-color, rgba(255,255,255,0.14));
}


/* Nút nghe thử miễn phí: viền xanh lá để tách khỏi các nút phụ khác — đây là
   lối vào chính cho khách chưa mua, không nên chìm lẫn với "Hàng đợi". */
.btn-try-free {
    border-color: rgba(34, 197, 94, 0.55) !important;
    color: #4ade80 !important;
    font-weight: 700;
}
.btn-try-free:hover {
    background: rgba(34, 197, 94, 0.12) !important;
}

/* ---------- hộp thư trong hồ sơ ---------- */
/* Mạch hội thoại cao cố định và tự cuộn: hộp thư nằm trong hồ sơ, để nó giãn
   tự do thì các mục Cookie/Ví bị đẩy khuất khi hội thoại dài. */
.msg-thread {
    max-height: 260px;
    overflow-y: auto;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.msg-empty { color: #9aa4b2; font-size: 13px; padding: 8px 4px; }
.msg-item { max-width: 88%; padding: 8px 11px; border-radius: 10px; }
.msg-item.from-admin { align-self: flex-start; background: rgba(90, 130, 255, .16); }
.msg-item.from-me    { align-self: flex-end;   background: rgba(255, 255, 255, .09); }
.msg-who  { font-size: 11px; color: #9aa4b2; margin-bottom: 3px; }
/* Tin nhắn giữ nguyên xuống dòng người gửi gõ, và bẻ được từ dài (link dán
   vào) để không đẩy ngang cả hộp thoại. */
.msg-body { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-compose { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.msg-compose textarea {
    flex: 1; resize: vertical; padding: 9px 11px; border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .22); color: inherit; font: inherit;
}
.msg-compose .btn-primary { white-space: nowrap; }
.msg-status { font-size: 12.5px; color: #9aa4b2; margin-top: 6px; min-height: 16px; }
.msg-badge {
    display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px;
    border-radius: 9px; background: #e5484d; color: #fff;
    font-size: 11px; font-weight: 700; text-align: center; vertical-align: middle;
}
.unread-dot {
    display: inline-block; width: 8px; height: 8px; margin-left: 6px;
    border-radius: 50%; background: #e5484d; vertical-align: middle;
}

/* ---------- hộp thư phía admin ---------- */
.admin-msg-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 14px; margin-bottom: 8px; }
.admin-msg-threads { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.admin-msg-item {
    text-align: left; padding: 9px 11px; border-radius: 9px; cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07); color: inherit; font: inherit;
}
.admin-msg-item:hover  { background: rgba(255, 255, 255, .09); }
.admin-msg-item.active { border-color: rgba(90, 130, 255, .65); background: rgba(90, 130, 255, .14); }
.admin-msg-item .who  { font-size: 13px; font-weight: 600; display: flex;
                        justify-content: space-between; gap: 8px; align-items: center; }
/* Xem trước tin cuối gói trong một dòng; hội thoại dài không được kéo giãn cột. */
.admin-msg-item .prev { font-size: 12px; color: #9aa4b2; margin-top: 3px;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-broadcast { margin-top: 14px; font-size: 13px; }
.admin-broadcast summary { cursor: pointer; color: #9aa4b2; }
.admin-broadcast textarea {
    width: 100%; margin-top: 8px; padding: 9px 11px; border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .22); color: inherit; font: inherit; resize: vertical;
}
.admin-broadcast button { margin-top: 8px; }
@media (max-width: 900px) {
    .admin-msg-wrap { grid-template-columns: 1fr; }
    .admin-msg-threads { max-height: 200px; }
}

/* Ô bật/tắt nhận email trong Hồ sơ */
.mail-pref { display: flex; gap: 10px; align-items: flex-start;
             font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.mail-pref input { margin-top: 3px; flex: none; }

/* ---------- gói phút: hai tab vĩnh viễn / tốc chiến ---------- */
.pack-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 10px;
             background: rgba(255,255,255,.05); border-radius: 10px; }
.pack-tab { padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer;
            background: transparent; color: inherit; font: inherit; }
.pack-tab.active { background: rgba(90,130,255,.22); font-weight: 700; }
.pack-card-rate { font-size: 1.05rem; font-weight: 700; color: var(--accent-cyan); }
/* Nhãn hạn dùng phải nổi: đây là khác biệt DUY NHẤT giữa hai loại gói, và là
   thứ khách dễ bỏ sót nhất khi so giá. */
.pack-expiry { display: inline-block; margin-top: 6px; padding: 2px 9px;
               border-radius: 999px; font-size: 12px; font-weight: 600; }
.pack-expiry.life  { background: rgba(16,185,129,.18); color: #10b981; }
.pack-expiry.flash { background: rgba(251,191,36,.18); color: #fbbf24; }
.pack-save { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

/* Ngày hết hạn của gói tốc chiến — phải nổi, vì đây là thứ khách dễ quên nhất */
.pack-warn { color: #fbbf24; font-weight: 600; }

/* ---------- trình tải video ---------- */
.dl-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.10);
          overflow: hidden; min-width: 110px; }
.dl-bar-fill { height: 100%; background: var(--accent-cyan); transition: width .4s; }
/* Dòng phụ (tốc độ, thời gian còn lại, lỗi) nhỏ và mờ để không tranh chỗ với
   tên tệp — bảng này nhiều cột, chữ đều cỡ nhau thì không đọc nổi. */
.dl-sub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
.dl-name { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.btn-mini { padding: 4px 10px; font-size: 12px; border-radius: 7px;
            text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }

/* Ô dán link của tab Tải video.
   Quy tắc sẵn có chỉ nhắm ".paste-input-row textarea"; ô này là con TRỰC TIẾP
   của .paste-box nên không trúng quy tắc nào và rơi về mặc định trình duyệt
   (~20 cột), hẹp bằng một phần bảy khung chứa. */
.paste-box > textarea {
    display: block; width: 100%; box-sizing: border-box; resize: vertical;
    min-height: 120px; padding: 12px 14px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit; font: inherit; line-height: 1.5;
}
.paste-box > textarea:focus {
    outline: none; border-color: var(--accent, #ff6699);
}

/* ===== Lồng tiếng đa nhân vật ===== */
/* Bảng kịch bản có thể vài trăm dòng: cho nó cuộn trong khung riêng thay vì
   kéo dài cả trang, để hai nút Lưu và Dựng luôn ở trong tầm mắt. */
.mv-script-wrap { max-height: 62vh; overflow-y: auto; }
.mv-script-wrap thead th {
    position: sticky; top: 0; z-index: 2; background: var(--bg-card);
}
.mv-line-text {
    width: 100%; min-height: 34px; resize: vertical;
    background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 8px); color: var(--text-primary, #fff);
    padding: 6px 8px; font-size: .84rem; line-height: 1.4;
}
.mv-char-row { margin-bottom: 8px; }
.mv-char-name {
    min-width: 190px;
    background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); color: var(--text-primary, #fff);
    padding: 8px 10px; font-size: .85rem;
}
#mv-lines select, #mv-chars select {
    background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); color: var(--text-primary, #fff);
    padding: 7px 8px; font-size: .82rem; max-width: 220px;
}
#mv-url {
    width: 100%; resize: vertical;
    background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); color: var(--text-primary, #fff);
    padding: 10px; font-size: .85rem; font-family: monospace;
}

/* Phóng to khu soạn kịch bản.
   Bảng vài trăm dòng mà chỉ chiếm nửa trang thì mỗi lần sửa lại phải cuộn đi
   cuộn lại; ở chế độ phóng to nó chiếm trọn màn hình, hai nút Lưu và Dựng
   neo ở đáy nên luôn bấm được mà không phải cuộn xuống tìm. */
.mv-editor-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 22px 0 10px; flex-wrap: wrap;
}
#mv-editor.mv-zoomed {
    position: fixed; inset: 0; z-index: 900;
    background: var(--bg-primary, #0b0f1a);
    padding: 18px 22px 0; overflow-y: auto;
    display: flex; flex-direction: column;
}
#mv-editor.mv-zoomed .mv-script-wrap { max-height: none; flex: 1; }
#mv-editor.mv-zoomed .mv-editor-foot {
    position: sticky; bottom: 0; z-index: 3;
    background: var(--bg-primary, #0b0f1a);
    padding: 12px 0; margin-top: 0;
    border-top: 1px solid var(--border-color);
}

/* ===== Nhân bản giọng =====
   Vùng thả file phải rõ là "bấm được": người dùng quen với ô nét đứt, nên giữ
   đúng quy ước đó thay vì sáng tạo hình thức lạ. */
.vc-box {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 18px; margin-bottom: 22px;
}
.vc-grid {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.vc-drop {
    flex: 1; min-width: 260px; cursor: pointer; text-align: center;
    border: 2px dashed var(--border-color); border-radius: var(--radius-md);
    padding: 22px 16px; transition: border-color .2s, background .2s;
}
.vc-drop:hover, .vc-drop.vc-over {
    border-color: var(--accent-cyan); background: var(--bg-elevated);
}
.vc-drop i { font-size: 1.7rem; color: var(--accent-cyan); }
.vc-drop p { margin: 8px 0 4px; font-size: .88rem; }
.vc-or { color: var(--text-muted); font-size: .82rem; }
.vc-rec { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.thumb-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.thumb-item {
    margin: 0; border: 1px solid var(--border-color);
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--bg-elevated);
}
/* Ảnh 16:9, để tràn hết ô và không kéo méo. */
.thumb-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.thumb-item figcaption {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 10px; font-size: .85rem;
}
.tm-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.tm-head h3, .tm-head h4 { margin: 0; }
.tm-quy { display: flex; gap: 24px; flex-wrap: wrap; }
.tm-quy b { display: block; font-size: 1.05rem; margin-top: 2px; }
/* Thanh tiến độ dự án: khung ngoài cố định, ruột co theo phần trăm. */
.tm-bar {
    width: 120px; height: 6px; border-radius: 3px;
    background: var(--border-color); overflow: hidden; margin-bottom: 4px;
}
.tm-bar i { display: block; height: 100%; background: var(--accent-emerald); }
.tm-chip {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: .78rem; border: 1px solid var(--border-color);
}
.tm-cho        { color: var(--text-muted); }
.tm-dang_lam   { color: var(--accent-cyan);    border-color: var(--accent-cyan); }
.tm-cho_duyet  { color: var(--accent-amber, #d99a2b); }
.tm-xong       { color: var(--accent-emerald); border-color: var(--accent-emerald); }
/* Ô chọn trong bảng: không thừa kế font nên phải nêu rõ, nếu không nó nhỏ hơn
   hẳn phần còn lại của hàng và trông như lỗi hiển thị. */
.tm-sel {
    font: inherit; font-size: .85rem; padding: 4px 8px;
    border-radius: var(--radius-sm); border: 1px solid var(--border-color);
    background: var(--bg-elevated); color: var(--text-primary);
}
.tm-sel:focus { outline: none; border-color: var(--accent-cyan); }
.ts-cost {
    margin: 14px 0 4px; padding: 14px 16px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--bg-elevated);
}
.ts-cost-grid {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
    font-size: .9rem; align-items: baseline;
}
.ts-cost-grid span { color: var(--text-muted); }
.ts-cost-grid b { font-weight: 600; }
.ts-ok { margin: 10px 0 0; color: var(--accent-emerald); font-size: .9rem; }
.ts-thieu { margin: 10px 0 10px; color: var(--accent-pink); font-size: .9rem; }
.ts-row {
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap; margin-bottom: 12px;
}
/* Nêu rõ kiểu cho từng loại ô: input, select và textarea đều KHÔNG thừa kế
   font của trang, để trống thì trình duyệt áp mặc định và ba ô lệch nhau. */
.ts-row input[type="text"], .ts-row select, .ts-text {
    font: inherit; padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-elevated); color: var(--text-primary);
}
.ts-row input[type="text"] { flex: 1; min-width: 220px; }
.ts-row select { min-width: 200px; max-width: 340px; }
.ts-row input[type="text"]:focus, .ts-row select:focus, .ts-text:focus {
    outline: none; border-color: var(--accent-cyan);
}
.ts-spacer { flex: 1; }
.ts-range { width: 120px; accent-color: var(--accent-cyan); }
/* Ô số cố định bề rộng: không đặt thì con số nhảy từ 0.9 sang 1.05 làm cả hàng
   giật sang trái phải mỗi lần kéo. */
.ts-val { min-width: 42px; font-variant-numeric: tabular-nums; font-size: .9rem; }
.ts-label {
    font-size: .9rem; color: var(--text-secondary);
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.ts-label i { color: var(--accent-cyan); }
.ts-text {
    width: 100%; resize: vertical; line-height: 1.55;
    margin-bottom: 12px; min-height: 180px;
}
.vc-edit {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
/* Nêu rõ kiểu cho ô nhập và ô chọn: chúng không thừa kế font của trang, để
   trống thì trình duyệt áp mặc định và hàng sửa lệch hẳn so với bảng. */
.vc-edit input, .vc-edit select {
    font: inherit; padding: 6px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-elevated); color: var(--text-primary);
}
.vc-edit input { flex: 1; min-width: 160px; }
.vc-edit input:focus, .vc-edit select:focus {
    outline: none; border-color: var(--accent-cyan);
}
.vc-edit-note { margin-top: 6px; }
.vc-chung-title {
    margin: 20px 0 8px; font-size: .95rem; display: flex;
    align-items: center; gap: 8px; flex-wrap: wrap;
}
.vc-chung-title i { color: var(--accent-cyan); }
.vc-link-row {
    display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}
/* Nêu rõ kiểu cho ô nhập và nút: input không thừa kế font của trang, để
   trống thì trình duyệt tự áp mặc định và ô này lệch hẳn so với phần còn lại. */
.vc-link-row input {
    flex: 1; min-width: 240px; font: inherit;
    padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-elevated); color: var(--text-primary);
}
.vc-link-row input:focus {
    outline: none; border-color: var(--accent-cyan);
}
.vc-link-row button { white-space: nowrap; }
.vc-preview {
    display: flex; align-items: center; gap: 12px;
    margin-top: 14px; flex-wrap: wrap;
}
.vc-preview audio { height: 36px; max-width: 100%; }
/* Ô đồng ý phải nổi bật: đây là ràng buộc pháp lý, không phải một tuỳ chọn
   phụ để người dùng lướt qua. */
.vc-consent {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 12px 0; padding: 12px 14px;
    background: var(--bg-elevated); border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-amber, #eab308);
}
.vc-consent span { font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
#vc-gender {
    background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); color: var(--text-primary, #fff);
    padding: 9px 12px; font-size: .85rem;
}
.vc-rec.vc-on button { background: var(--accent-pink); }


/* Tab Tạo nhạc: thanh tiến độ và trạng thái bận của nút.
   Các lượt gọi LLM ở tab này mất 45-90 giây; không có phản hồi thị giác thì
   khách tưởng chưa bấm trúng và bấm lại, tốn thêm một lượt gọi. */
.nh-prog {
    margin: 12px 0 4px;
}
.nh-prog .progress-label {
    font-size: 13px;
    font-weight: 600;
    opacity: .85;
}
.nh-prog .progress-track {
    height: 8px;
}
button.nh-busy {
    opacity: .75;
    cursor: progress;
}

.nh-row-prog {
    min-width: 170px;
}
.nh-row-prog .progress-track {
    height: 6px;
    margin-bottom: 4px;
}

.nh-track {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 6px;
    white-space: nowrap;
}
.nh-dur {
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* Bảng lịch sử nhạc: chia cột theo tỉ lệ cố định.
   Trước đây tên bài và chuỗi phong cách (tới 200 ký tự) tự giãn ra và đẩy các
   cột phía sau ra ngoài màn hình, phải kéo ngang mới thấy nút. Khoá tỉ lệ rồi
   cho xuống dòng thì mọi cột luôn nằm trong khung. */
#nh-table {
    table-layout: fixed;
    width: 100%;
}
#nh-table th, #nh-table td {
    white-space: normal;
    /* `break-word` chứ KHÔNG phải `anywhere`.
       `anywhere` cho phép trình duyệt tính bề rộng tối thiểu của ô bằng ĐÚNG
       MỘT KÝ TỰ, nên cột phong cách co lại thành dải hẹp ~40px trong khi phần
       còn lại của cột bỏ trống. `break-word` vẫn xuống dòng giữa từ dài nhưng
       không đụng tới phép tính bề rộng. Đã mất ba lượt sửa mới ra chỗ này. */
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: top;
}
#nh-table th:nth-child(1), #nh-table td:nth-child(1) { width: 34%; }
#nh-table th:nth-child(2), #nh-table td:nth-child(2) { width: 5%;  text-align: center; }
#nh-table th:nth-child(3), #nh-table td:nth-child(3) { width: 6%;  text-align: center; }
#nh-table th:nth-child(4), #nh-table td:nth-child(4) { width: 22%; }
#nh-table th:nth-child(5), #nh-table td:nth-child(5) { width: 33%; }

/* Phong cách nhạc có thể rất dài; cắt còn ~3 dòng.

   KHÔNG dùng `-webkit-line-clamp`: nó đòi `display: -webkit-box`, và trong ô
   bảng thì hộp đó co lại thành một dải vài ký tự rộng chừng 30px — đã thử ngày
   15/08/2026, kể cả khi bọc vào thẻ con bên trong <td>. Giới hạn chiều cao rồi
   giấu phần thừa cho ra kết quả nhìn giống hệt mà không đụng tới `display`. */
.nh-clamp {
    display: block;
    width: 100%;
    max-height: 4.3em;
    line-height: 1.42;
    overflow: hidden;
}
/* Cụm nút của mỗi bài được phép xuống dòng thay vì đẩy bảng rộng ra. */
#nh-table .nh-track {
    margin-bottom: 4px;
}

/* Phong cách hiển thị ngay dưới tên bài, đã cắt bớt ở phía JS nên chỉ cần
   giới hạn chiều cao phòng khi chuỗi vẫn dài. */
.nh-style {
    display: block;
    max-height: 3.2em;
    overflow: hidden;
    opacity: .8;
}

/* Nút mở thẳng trang cấp khoá của nhà cung cấp.
   Trước đây địa chỉ nằm chìm trong đoạn hướng dẫn chữ nhỏ nên khách không thấy
   và phải tự đi tìm — đúng thứ khiến người ta bỏ giữa chừng. */
.cookie-get-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
}

/* Ô chọn cảm xúc: bấm để bật/tắt, chọn được nhiều hoặc không chọn cái nào. */
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-chip {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
    font-size: .84rem;
    user-select: none;
    /* PHẢI ĐẶT MÀU CHỮ VÀ FONT RÕ RÀNG, KHÔNG DỰA VÀO KẾ THỪA.
     *
     * Chip được vẽ bằng hai thẻ khác nhau: `ttsstudio.js` dùng <span>, còn
     * `sach.js` dùng <button>. Span kế thừa màu chữ của trang nên nhìn được;
     * <button> thì KHÔNG kế thừa `color` và `font-family` — nó lấy `buttontext`
     * của trình duyệt, tức gần như đen, đặt trên nền tối. Kết quả là ở tab Tóm
     * tắt sách chỉ đọc được đúng chip đang chọn (chip `.on` có `color` riêng),
     * còn lại chìm hẳn vào nền. */
    color: var(--text-main);
    font-family: inherit;
}
.ts-chip:hover {
    background: rgba(255, 255, 255, .08);
    border-color: var(--text-muted);
}
.ts-chip.on {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}
.ts-row-wrap { align-items: flex-start; }
.ts-adv {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 12px;
}
.ts-adv summary { cursor: pointer; font-weight: 600; }
.ts-adv textarea { min-height: 90px; font-family: monospace; font-size: .82rem; }

/* Link chỉ đường trong nội dung tab (ví dụ: trỏ sang tab Nhân bản giọng). */
.nav-link-inline {
    color: var(--accent-emerald);
    text-decoration: underline;
    cursor: pointer;
}
.nav-link-inline:hover { opacity: .85; }

/* Quản lý API Key: mỗi nhà cung cấp một khối. */
.ak-nha {
    border: 1px solid var(--border-color, #30363d);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.ak-dau {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ak-them { margin-top: 10px; }
/* Ô nhãn hẹp: nhãn chỉ vài chữ, chỗ rộng để dành cho ô khoá. */
.ak-nhan { flex: 0 0 190px; max-width: 190px; }
.ak-link { display: inline-block; margin-top: 8px; }
@media (max-width: 700px) {
    .ak-nhan { flex: 1 1 100%; max-width: none; }
}

/* Nút "Đã tải": mục khách đã lấy về máy rồi.
   Làm nhạt đi chứ không tô nổi bật — cái cần chú ý là những mục CHƯA tải. */
.dl-da-tai {
    color: var(--accent-emerald);
    border-color: var(--accent-emerald);
    opacity: .72;
}
.dl-da-tai:hover { opacity: 1; }

/* Thanh tiến độ dựng karaoke. Mảnh và nằm ngay trong ô bảng — việc chạy vài
   phút nên cần thấy nó nhích, nhưng không nên chiếm chỗ của các cột khác. */
.kr-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, #30363d);
    overflow: hidden;
    margin-bottom: 4px;
    min-width: 120px;
}
.kr-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan, #39c5cf),
                                       var(--accent-emerald, #3fb950));
    transition: width .6s ease;
}


/* ---------------------------------------------- Tách & cắt audio --
 *
 * Ảnh dạng sóng do MÁY CHỦ vẽ (ffmpeg showwavespic), trình duyệt chỉ hiện lên
 * rồi đặt hai tay kéo. Làm vậy vì giải mã audio trong trình duyệt phải tải trọn
 * tệp về — một bộ phim là hàng GB, còn ảnh sóng chỉ khoảng 10KB.
 */
.au-song-box {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border, rgba(255, 255, 255, .1));
    border-radius: 10px;
    overflow: hidden;
    user-select: none;
    touch-action: none;          /* kéo trên điện thoại không cuộn trang */
}
.au-song-box canvas {
    display: block;
    width: 100%;
    height: 180px;
    cursor: crosshair;          /* nhắc rằng bấm vào là tua tới đó */
}
/* Vùng ĐƯỢC CHỌN sáng lên; hai bên ngoài tự tối đi nhờ nền tối phía sau. */
.au-vung {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(56, 189, 248, .16);
    border-left: 2px solid #38bdf8;
    border-right: 2px solid #38bdf8;
    pointer-events: none;
}
.au-tay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14px;
    margin-left: -7px;           /* tâm tay trùng đúng mốc thời gian */
    cursor: ew-resize;
    background: transparent;
}
.au-tay::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px;
    background: #38bdf8;
    box-shadow: 0 0 6px rgba(56, 189, 248, .8);
}

/* Thanh điều khiển của tab Tách & cắt audio */
.au-thanh {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; margin: 8px 0 6px;
}
.au-thanh .au-cach { width: 10px; }
#au-dongho { font-variant-numeric: tabular-nums; min-width: 52px; }
#au-cua-so { margin-left: 6px; }

/* Kim chỉ chỗ đang phát. Không bắt sự kiện chuột, nếu không nó nuốt mất cú
   bấm để tua ngay bên dưới. */
.au-kim {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: #fff; pointer-events: none; display: none;
    box-shadow: 0 0 6px rgba(255, 255, 255, .9);
    /* Nằm TRÊN hai tay kéo. Cùng cấp thì thẻ đứng sau trong HTML che thẻ
       trước, mà hai tay kéo lại đứng sau kim — nên lúc kim trùng mép vùng
       chọn (đúng lúc vừa bấm phát) nó bị che, trông như không chạy.
       Đổi luôn sang trắng: tay kéo đã đỏ rồi, hai thứ đỏ cạnh nhau khó phân. */
    z-index: 5;
}

/* Bảng các đoạn máy đề xuất */
.au-ds {
    margin-top: 10px; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--border, #2a3441); border-radius: 8px;
}
.au-doan {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-bottom: 1px solid var(--border, #2a3441);
}
.au-doan:last-child { border-bottom: none; }
.au-doan.au-dang { background: rgba(56, 189, 248, .12); }
.au-doan b { min-width: 58px; }
.au-doan .au-gio { font-variant-numeric: tabular-nums; opacity: .85; }
.au-doan .au-nut { margin-left: auto; display: flex; gap: 6px; }


/* Hai đầu vùng chọn đổi ĐỎ khi đang sửa một đoạn máy đề xuất.
   Xanh lơ là màu của sóng, nên tay kéo màu xanh chìm vào nền sóng — nhìn vào
   không biết mình đang bám vào đâu mà chỉnh. */
.au-song-box.au-dang-sua .au-tay::after {
    background: #f43f5e;
    box-shadow: 0 0 8px rgba(244, 63, 94, .9);
    width: 5px;
}
/* Con trỏ hình chữ thập khi bật dao cắt, để biết mình đang ở chế độ cắt. */
.au-song-box.au-dao canvas { cursor: crosshair; }
.au-song-box.au-keo canvas { cursor: grabbing; }
/* Lưỡi dao đi theo con trỏ. */
.au-luoi {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: #fbbf24; pointer-events: none; display: none;
    box-shadow: 0 0 8px rgba(251, 191, 36, .9);
}
.au-doan .au-sua { color: #fbbf24; }


/* Câu hook để khách tự làm ảnh bìa. Bấm một câu là copy riêng câu đó. */
.seo-hook {
    display: block; width: 100%; text-align: left;
    margin: 3px 0; padding: 7px 10px;
    border: 1px dashed var(--border, rgba(255, 255, 255, .18));
    border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, .03);
    color: inherit; font: inherit; font-weight: 600;
    letter-spacing: .3px;
}
.seo-hook:hover {
    border-style: solid; border-color: #38bdf8;
    background: rgba(56, 189, 248, .1);
}
.seo-hook .seo-hook-so { opacity: .5; font-weight: 400; margin-right: 8px; }


/* Ba phương án phong cách máy đề xuất. Bấm một cái là đổ thẳng vào ô. */
.nh-pc {
    display: block; width: 100%; text-align: left;
    margin: 5px 0; padding: 9px 12px;
    border: 1px dashed var(--border, rgba(255, 255, 255, .18));
    border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, .03); color: inherit; font: inherit;
}
.nh-pc:hover {
    border-style: solid; border-color: #38bdf8;
    background: rgba(56, 189, 248, .1);
}
.nh-pc b { display: block; margin-bottom: 3px; color: #38bdf8; }
.nh-pc span { opacity: .8; font-size: .92em; line-height: 1.45; }


/* Bảng xếp hạng anime/truyện tranh lấy từ MyAnimeList */
.nh-xh-loc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.nh-xh-kieu.nh-xh-chon { background: rgba(56, 189, 248, .18); border-color: #38bdf8; color: #7dd3fc; }
.nh-xh-ds {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    max-height: 460px; overflow-y: auto; padding-right: 4px;
}
.nh-xh-the {
    display: flex; gap: 9px; padding: 8px; text-align: left;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 10px; background: rgba(255,255,255,.03);
    cursor: pointer; color: inherit; font: inherit;
}
.nh-xh-the:hover { border-color: #38bdf8; background: rgba(56,189,248,.1); }
/* Ảnh bìa cố định khung để lưới không nhảy khi ảnh tải xong từng cái một. */
.nh-xh-the img { width: 52px; height: 74px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: rgba(255,255,255,.06); }
.nh-xh-the .nh-xh-ten { font-weight: 600; line-height: 1.3; margin-bottom: 3px; }
.nh-xh-the .nh-xh-so { font-size: .86em; opacity: .8; }
.nh-xh-the .nh-xh-tl { font-size: .8em; opacity: .6; margin-top: 2px; }
.nh-xh-hang { color: #fbbf24; font-weight: 700; margin-right: 5px; }

/* ---- Thử ảnh bìa (tab Quản trị) ---- */
.ab-hang {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.ab-hang input,
.ab-hang select {
    background: var(--bg-input, #10131a);
    border: 1px solid var(--border, #2a2f3a);
    color: var(--text, #e8ecf3);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    min-width: 150px;
    flex: 1 1 150px;
}
/* Ảnh bìa là 16:9 nên lưới phải đủ rộng để nhìn ra chữ; hẹp quá thì không
   đánh giá được cái duy nhất cần đánh giá ở đây. */
.ab-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.ab-o {
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card, #141821);
}
.ab-o img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.ab-chan {
    padding: 8px 10px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.ab-chu {
    color: var(--text-muted, #9aa4b2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Dải thông báo toàn trang (bảo trì, sự cố) ---- */
.bang-tin {
    position: relative;
    z-index: 60;
    padding: 11px 44px 11px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.bang-tin.canh-bao {
    background: linear-gradient(90deg, #7a3d00, #a35200);
    color: #fff5e6;
    border-bottom: 1px solid #c26a00;
}
.bang-tin.tin {
    background: linear-gradient(90deg, #0b3f52, #0d5871);
    color: #e6f7ff;
    border-bottom: 1px solid #0e7490;
}
.bang-tin i { margin-top: 2px; flex: 0 0 auto; }
.bang-tin-dong {
    position: absolute;
    right: 12px;
    top: 8px;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px 6px;
}
.bang-tin-dong:hover { opacity: 1; }


/* ---------- Tab Lặp video ---------- */
.loop-box { max-width: 640px; }
.loop-box input[type="file"] { display: block; margin: 6px 0 4px; }
/* Ba ô giờ/phút/giây nằm một hàng. Tách ba ô chứ không một ô "tổng số giây":
   người ta nghĩ bằng "10 giờ", không nghĩ bằng "36000". */
/* Kho sách: mỗi cuốn một hàng bấm được. Danh sách dài nên cho cuộn trong
   khung riêng — đẩy dài cả trang thì ô tải tệp bên dưới biến mất khỏi tầm
   nhìn, mà đó vẫn là đường chính cho sách khách tự có. */
.sa-kho-ds { max-height: 340px; overflow-y: auto; }
.sa-kho-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    text-align: left; background: none; color: inherit; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: 8px;
    padding: 8px 12px; margin-bottom: 6px;
}
.sa-kho-item:hover { background: rgba(139, 92, 246, .14); }
.sa-kho-item[disabled] { opacity: .5; cursor: default; }
.sa-kho-ten { flex: 1; min-width: 0; }
.sa-kho-ten b { display: block; font-size: 14px; }
.sa-kho-ten span { font-size: 12px; opacity: .65; }
.sa-kho-tai { font-size: 12px; opacity: .6; white-space: nowrap; }

/* Chương SEO: mốc thời gian canh cột đều nên mắt dò nhanh theo chiều dọc.
   Danh sách có thể tới 40 dòng nên cho cuộn trong khung riêng thay vì đẩy
   dài cả trang. */
.seo-chuong { max-height: 260px; overflow-y: auto; }
.seo-chuong-dong {
    display: block; width: 100%; text-align: left; background: none;
    border: 0; padding: 3px 6px; border-radius: 5px; cursor: pointer;
    color: inherit; font-size: 13px; line-height: 1.5;
}
.seo-chuong-dong:hover { background: rgba(139, 92, 246, .16); }
.seo-chuong-moc {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: .7; margin-right: 10px;
}
/* Tiêu đề thay thế: bày ra để thử A/B, nhưng phải nhìn ra ngay là hàng phụ
   chứ không phải tiêu đề đang dùng. */
.seo-alt { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.seo-alt-nhan { font-size: 12px; opacity: .6; margin-bottom: 2px; }
.seo-alt button {
    text-align: left; background: none; border: 1px dashed rgba(255,255,255,.18);
    border-radius: 6px; padding: 5px 8px; color: inherit; cursor: pointer;
    font-size: 13px;
}
.seo-alt button:hover { border-style: solid; background: rgba(139, 92, 246, .14); }

/* Danh sách tệp tiếng: thứ tự ở đây LÀ thứ tự nối, nên số thứ tự phải rõ. */
.loop-ds { margin: 6px 0 10px; padding-left: 26px; font-size: 13px; }
.loop-ds li { padding: 2px 0; }
.loop-ds-ten { opacity: .9; }
.loop-ds-giay { opacity: .6; margin-left: 10px; }
.loop-dur { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.loop-dur input { width: 76px; }
.loop-dur span { margin-right: 10px; opacity: .75; }
#loop-xong { margin-top: 12px; }

.loop-dur select { max-width: 340px; }
#loop-noi-video { margin: 10px 0; }
#loop-noi-video video { border-radius: 8px; display: block; }
#loop-xong a { margin-bottom: 6px; display: inline-block; }
#loop-noi-canh { color: var(--warning, #d68910); }

/* Phút khách đã MUA, dòng phụ dưới phút gói tháng. Tô khác màu để phân biệt
   ngay: một bên là hạn mức được cấp, một bên là thứ họ đã trả tiền. */
.admin-phut-mua { color: var(--accent-emerald, #10b981); font-size: .85em; }

/* Khối dựng video ở tab Tóm tắt sách. Tách nền và viền để nó đọc ra là một
   bước RIÊNG sau khi đã có bản tóm tắt, chứ không lẫn vào hàng nút bên trên. */
.sa-video-hop {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.10));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

/* --- Nối nhiều tập thành một bộ --- */
.up-nhieu {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 10px;
    background: var(--card-bg, #171a21);
}
.up-nhieu-dau {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--text-main, #e8eaed); margin-bottom: 6px;
}
.up-nhieu-tong { font-size: 13px; opacity: .75; }
.up-nhieu-mach { font-size: 13px; opacity: .8; margin: 0 0 10px; line-height: 1.5; }
.up-nhieu-ds {
    list-style: none; margin: 0 0 12px; padding: 0;
    max-height: 320px; overflow-y: auto;
}
.up-nhieu-ds li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 6px; font-size: 13px;
}
.up-nhieu-ds li:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.up-nhieu-stt {
    min-width: 30px; text-align: right; opacity: .6; font-variant-numeric: tabular-nums;
}
.up-nhieu-ten {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-main, #e8eaed);
}
.up-nhieu-co { opacity: .6; font-variant-numeric: tabular-nums; }
.up-nhieu-tt { min-width: 46px; text-align: right; opacity: .8; }
.up-nhieu-ok { color: #34d399; }
.up-nhieu-loi { color: #f87171; }
.up-nhieu-bo {
    background: none; border: none; cursor: pointer; font-size: 18px;
    line-height: 1; padding: 0 4px; color: var(--text-main, #e8eaed); opacity: .45;
}
.up-nhieu-bo:hover { opacity: 1; color: #f87171; }
.up-nhieu-cuoi { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.up-nhieu-cuoi input {
    flex: 1; min-width: 160px; padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--border, #2a2f3a);
    background: var(--input-bg, #0f1116); color: var(--text-main, #e8eaed);
    font-family: inherit;
}
.up-nhieu-bao { margin-top: 8px; font-size: 13px; opacity: .85; }

.upload-drop-nhieu {
    margin-top: 10px; font-size: 13px; line-height: 1.5;
    color: var(--accent, #7aa2f7); opacity: .95;
}
.upload-drop-nhieu b { color: inherit; }

/* --- Nút xoá bộ đệm ở trang quản trị --- */
.admin-dau-nut { display: flex; gap: 8px; align-items: center; }
.admin-dem-bao {
    width: 100%; margin-top: 8px; font-size: 13px; line-height: 1.5;
    color: var(--text-main, #e8eaed); opacity: .9;
}
.admin-dem-bao.ok { color: #34d399; }
.admin-dem-bao.loi { color: #f87171; }

/* --- Tab Cắt video --- */
.vt-dau { display: flex; justify-content: space-between; align-items: baseline;
          gap: 12px; margin-bottom: 10px; color: var(--text-main, #e8eaed); }
.vt-tin { font-size: 13px; opacity: .7; }
.vt-dai-hop { position: relative; border-radius: 8px; overflow: hidden;
              border: 1px solid var(--border, #2a2f3a); }
/* Dải ảnh là MỘT tệp jpg xếp ngang; kéo giãn cho vừa bề ngang khung. */
.vt-dai { height: 72px; background-size: 100% 100%; background-repeat: no-repeat;
          cursor: crosshair; background-color: #0f1116; }
.vt-vach { position: absolute; inset: 0; pointer-events: none; }
.vt-vach span { position: absolute; top: 0; bottom: 0;
                background: rgba(122, 162, 247, .35);
                border-left: 2px solid #7aa2f7; border-right: 2px solid #7aa2f7; }
.vt-goi-y { min-height: 18px; margin: 6px 0 10px; font-size: 13px; color: #7aa2f7; }
.vt-nhap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           margin-bottom: 12px; }
.vt-nhap label { font-size: 13px; opacity: .8; }
.vt-nhap input, .vt-chia-hop input, .vt-cuoi select {
    padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border, #2a2f3a);
    background: var(--input-bg, #0f1116); color: var(--text-main, #e8eaed);
    font-family: inherit; }
.vt-ds { list-style: none; margin: 0 0 12px; padding: 0; max-height: 260px;
         overflow-y: auto; }
.vt-ds li { display: flex; align-items: center; gap: 10px; padding: 6px 8px;
            border-radius: 6px; font-size: 13px; }
.vt-ds li:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.vt-trong { opacity: .6; font-size: 13px; padding: 8px; }
.vt-stt { min-width: 24px; text-align: right; opacity: .6; }
.vt-ten-doan { flex: 1; min-width: 120px; padding: 5px 8px; border-radius: 6px;
               border: 1px solid var(--border, #2a2f3a);
               background: var(--input-bg, #0f1116);
               color: var(--text-main, #e8eaed); font-family: inherit; }
.vt-moc, .vt-dai-doan { opacity: .75; font-variant-numeric: tabular-nums; }
.vt-bo { background: none; border: none; color: var(--text-main, #e8eaed);
         opacity: .45; cursor: pointer; font-size: 18px; line-height: 1; }
.vt-bo:hover { opacity: 1; color: #f87171; }
.vt-cuoi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vt-mach { font-size: 12.5px; opacity: .72; line-height: 1.55; margin: 8px 0 14px; }
.vt-chia-hop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               padding-top: 12px; border-top: 1px solid var(--border, #2a2f3a); }
.vt-chia-hop label { font-size: 13px; opacity: .8; }
/* Thanh kéo chọn độ dài mỗi phần. `padding: 0` để nó không bị cái nền ô nhập
   ở trên (.vt-chia-hop input) bọc thành một hộp dày. */
.vt-keo { -webkit-appearance: none; appearance: none; padding: 0 !important;
          background: transparent !important; border: none !important;
          width: 180px; height: 20px; cursor: pointer; }
.vt-keo::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
          background: var(--border, #2a2f3a); }
.vt-keo::-moz-range-track { height: 4px; border-radius: 2px;
          background: var(--border, #2a2f3a); }
.vt-keo::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
          width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
          background: var(--accent, #3b82f6); border: none; }
.vt-keo::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%;
          background: var(--accent, #3b82f6); border: none; }
.vt-uoc { font-size: 12.5px; opacity: .7; font-variant-numeric: tabular-nums;
          min-width: 96px; }
/* Ô nhập mô tả ảnh. */
.nh-mota-hop { margin: 10px 0 4px; }
.nh-mota-hop textarea { width: 100%; box-sizing: border-box; resize: vertical;
    padding: 8px 10px; border-radius: 8px; font-family: inherit; font-size: 13px;
    line-height: 1.5; border: 1px solid var(--border, #2a2f3a);
    background: var(--input-bg, #0f1116); color: var(--text-main, #e8eaed); }
/* Khu tạo ảnh bìa vuông trong panel dựng video nhạc. */
.nh-bia-khu { border: 1px solid var(--border, #2a2f3a); border-radius: 10px;
              padding: 10px 12px; margin-bottom: 12px;
              background: rgba(255, 255, 255, .02); }
/* Nút chuyển giữa Cắt và Ghép. */
.vt-che-do { display: flex; gap: 8px; margin-bottom: 12px; }
.vt-mode { padding: 8px 16px; border-radius: 8px; cursor: pointer;
           border: 1px solid var(--border, #2a2f3a);
           background: var(--input-bg, #0f1116);
           color: var(--text-main, #e8eaed); font-family: inherit;
           font-size: 14px; }
.vt-mode.dang-chon { border-color: var(--accent, #3b82f6);
                     background: rgba(59, 130, 246, .14); }
.vt-ghep-stt { min-width: 22px; text-align: right; opacity: .6; }
.vt-ghep-ten { flex: 1; min-width: 140px; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.vt-ghep-nut { background: none; border: none; cursor: pointer;
               color: var(--text-main, #e8eaed); opacity: .5;
               font-size: 15px; line-height: 1; padding: 2px 5px; }
.vt-ghep-nut:hover { opacity: 1; }
/* Thanh tiến độ tải lên. Cao 6px, đủ thấy mà không chiếm chỗ. */
.vt-tien { height: 6px; border-radius: 3px; margin: 8px 0 4px;
           background: var(--border, #2a2f3a); overflow: hidden; }
.vt-tien-vach { height: 100%; width: 0%; border-radius: 3px;
                background: var(--accent, #3b82f6);
                transition: width .2s linear; }
.vt-ra { margin-top: 14px; }
.vt-ra-dau { display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
             color: var(--text-main, #e8eaed); }
.vt-ra-mot { display: inline-block; margin: 0 8px 8px 0; padding: 6px 10px;
             border-radius: 6px; font-size: 13px; text-decoration: none;
             border: 1px solid var(--border, #2a2f3a);
             color: var(--text-main, #e8eaed); }
.vt-ra-mot:hover { border-color: #7aa2f7; color: #7aa2f7; }

/* --- Ảnh nền tự chọn cho video nhạc --- */
.nh-nen-hang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
               margin-top: 10px; }
.nh-nen-xem { height: 54px; width: auto; border-radius: 6px;
              border: 1px solid var(--border, #2a2f3a); object-fit: cover; }
.nh-nen-ten { font-size: 13px; opacity: .75; flex: 1; min-width: 180px;
              line-height: 1.45; }
.nh-nen-tick { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
               margin-top: 8px; font-size: 13px;
               color: var(--text-main, #e8eaed); cursor: pointer; }
.nh-nen-mach { opacity: .65; }

/* ---- Kênh theo dõi ---- */
.td-ds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.td-kenh { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border: 1px solid var(--border-color); border-radius: 10px; background: rgba(255,255,255,.03); }
.td-kenh.dang-chon { border-color: var(--accent, #3b82f6); }
.td-kenh img, .td-face-trong { width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); flex: none; }
.td-kenh-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.td-kenh-chu b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-kenh-chu small { color: var(--text-dim, #9aa0aa); }
.td-moi { background: var(--accent-emerald, #10b981); color: #fff; border-radius: 12px;
    padding: 2px 10px; font-size: .82rem; font-weight: 600; flex: none; }
.td-bo { padding: 4px 10px; }

/* ---- Thư viện: lưới thumbnail kiểu Explorer ---- */
.tv-cong-cu { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tv-sap-hop { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
.tv-sap-hop select { width: auto; padding: 6px 10px; }
.tv-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; padding-bottom: 80px; }
.tv-the { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; user-select: none; }
.tv-the:hover { border-color: rgba(255,255,255,.25); transform: translateY(-2px); }
.tv-the.chon { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 2px rgba(59,130,246,.35); }
.tv-hinh { position: relative; aspect-ratio: 16 / 9; background: #0d1118; display: flex; align-items: center; justify-content: center; }
.tv-hinh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-hinh-trong { font-size: 2rem; color: rgba(255,255,255,.18); }
.tv-chon { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tv-chon input { width: 20px; height: 20px; margin: 0; cursor: pointer; accent-color: var(--accent, #3b82f6); }
.tv-stt { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent, #3b82f6);
    color: #fff; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tv-stt:empty { display: none; }
.tv-dai, .tv-may { position: absolute; bottom: 6px; right: 8px; background: rgba(0,0,0,.72); color: #fff;
    font-size: .74rem; padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.tv-may { right: auto; left: 8px; }
.tv-ten { padding: 8px 10px 2px; font-size: .88rem; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.tv-phu { padding: 0 10px 10px; font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-thanh { position: sticky; bottom: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--accent, #3b82f6);
    border-radius: var(--radius-md); box-shadow: 0 8px 30px rgba(0,0,0,.45); z-index: 5; }
.tv-thanh > span { flex: 1; min-width: 200px; font-size: .86rem; color: var(--text-muted); }
.tv-thanh select { width: auto; padding: 6px 10px; }
.tv-thanh #tv-bo-chon { padding: 6px 12px; }

/* ---- Hộp chọn từ thư viện trong Cắt & Ghép ---- */
.tv-chon-hop { max-width: 1100px; width: 94vw; }
.tv-chon-hop .modal-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tv-chon-hop h3 { margin: 0; }
.tv-chon-tim { width: 220px; max-width: 100%; padding: 6px 10px; background: #161C28; border: 1px solid var(--border-color); color: var(--text-main); border-radius: var(--radius-sm); }
.tv-chon-cuon { overflow-y: auto; max-height: calc(100vh - 320px); min-height: 160px; padding-right: 4px; }
.tv-chon-cuon .tv-luoi { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding-bottom: 6px; }
.tv-chon-chan { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--border-color); }
.tv-chon-chan > span { flex: 1; color: var(--text-muted); font-size: .86rem; }

/* Bảng tiến trình admin: tiêu đề dài rớt dòng, các cột sau luôn thấy. */
#admin-tasks-table { table-layout: fixed; }
#admin-tasks-table th:nth-child(1), #admin-tasks-table td:nth-child(1) { width: 90px; }
#admin-tasks-table th:nth-child(3), #admin-tasks-table td:nth-child(3) { width: 110px; }
#admin-tasks-table th:nth-child(4), #admin-tasks-table td:nth-child(4) { width: 80px; }
#admin-tasks-table th:nth-child(5), #admin-tasks-table td:nth-child(5) { width: 32%; }
#admin-tasks-table td:nth-child(2), #admin-tasks-table td:nth-child(5) {
    white-space: normal; word-break: break-word; line-height: 1.35; }

/* ---- Khách free: tab ngoài lồng tiếng mờ đi, không bấm được ---- */
.nav-item.khoa-free { opacity: .38; cursor: not-allowed; filter: grayscale(.6); }
.nav-item.khoa-free:hover { background: transparent; }
.nav-item.khoa-free > span:first-of-type::after {
    content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: .7em; margin-left: 6px; opacity: .8; }
.khoa-free-bao { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
    background: #1b2130; border: 1px solid var(--accent, #3b82f6); color: var(--text-main);
    padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1200; font-size: .9rem; }
.khoa-free-bao.hien { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.khoa-free-bao a { color: var(--accent-cyan, #22d3ee); margin-left: 4px; }

/* Điểm sản phẩm 1-10: vòng điểm bên trái, lý do bên phải. */
.sp-diem { display:flex; gap:14px; align-items:flex-start; margin:10px 0 0;
    padding:12px 14px; border-radius:12px; border:1px solid var(--border);
    background:var(--surface-2, rgba(255,255,255,.03)); }
.sp-diem-so { flex:0 0 auto; width:62px; height:62px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-weight:700; line-height:1; color:#fff; }
.sp-diem-so b { font-size:22px }
.sp-diem-so span { font-size:10px; opacity:.85; margin-top:2px }
.sp-diem-than { flex:1 1 auto; min-width:0 }
.sp-diem-nhan { font-weight:600; margin:0 0 4px }
.sp-diem-ly { margin:0; padding-left:16px; font-size:12.5px; line-height:1.6;
    color:var(--text-2, #9aa4b2) }

/* Video All-in-One */
.aio-nhan { display:block; font-size:.86rem; font-weight:600; margin:10px 0 4px }
#aio-nguon { width:100%; padding:10px 12px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface-2,rgba(255,255,255,.03));
    color:inherit; font-family:inherit; font-size:.95rem; resize:vertical }
.aio-hang { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; margin-top:6px }
.aio-hang input, .aio-hang select { width:100% }
@media (max-width:760px) { .aio-hang { grid-template-columns:1fr } }
.aio-gia { margin-top:12px; padding:10px 12px; border-radius:9px;
  border:1px solid var(--border,#2b3330); font-size:13px; line-height:1.6 }
.aio-gia b { font-variant-numeric:tabular-nums }
.aio-gia .thieu { color:var(--accent-rose,#f43f5e) }
.aio-gia .khoan { opacity:.75 }
.aio-soat-hop { margin-top:14px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--border,#2b3330) }
.aio-soat-llm { margin:14px 0 6px; padding-top:10px; font-size:13px;
  font-weight:600; opacity:.85; border-top:1px dashed var(--border,#2b3330) }
.aio-soat-hop h3 { margin:0 0 8px; font-size:15px }
.aio-soat-ds { margin:0 0 8px; padding-left:20px; display:grid; gap:4px;
  font-size:13px; line-height:1.5 }
.aio-media-ds { list-style:decimal; margin:12px 0 0; padding-left:26px;
  display:grid; gap:6px }
.aio-media-ds li { display:flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid var(--border,#2b3330); border-radius:8px; font-size:13px }
.aio-media-ds .ten { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.aio-media-ds .tt { opacity:.7; font-size:12px; white-space:nowrap }
.aio-media-ds button { border:none; background:transparent; cursor:pointer;
  color:inherit; opacity:.7; padding:2px 6px; border-radius:6px }
.aio-media-ds button:hover { opacity:1; background:rgba(127,127,127,.18) }
.aio-tep-hang { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px }
.aio-ds { display:flex; flex-direction:column; gap:8px }
.aio-mot { display:flex; align-items:center; gap:12px; padding:10px 12px;
    border:1px solid var(--border); border-radius:10px }
.aio-mot .aio-ten { flex:1 1 auto; min-width:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap }
.aio-mot .aio-tt { flex:0 0 auto; font-size:.85rem; opacity:.85 }
.aio-lay { flex:0 0 auto; display:flex; gap:10px; align-items:center;
    flex-wrap:wrap; font-size:.85rem }
.aio-lay .auth-link { white-space:nowrap }

/* ---- Review sản phẩm ---- */
.sp-hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
@media (max-width: 900px) { .sp-hai-cot { grid-template-columns: 1fr; } }
.sp-nhan { display: block; font-size: 13px; opacity: .8; margin: 10px 0 4px; }
.sp-nhan small { opacity: .7; }
#tab-sanpham input[type=text], #tab-sanpham input[type=url], #tab-sanpham textarea {
    width: 100%; background: #161C28; border: 1px solid var(--border-color); color: var(--text-main);
    padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; box-sizing: border-box; }
#tab-sanpham textarea { resize: vertical; line-height: 1.5; }
.sp-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; min-height: 120px;
    border: 1px dashed var(--border-color); border-radius: var(--radius-sm); padding: 8px; }
.sp-luoi:empty::after { content: "Chưa có ảnh — lấy từ link hoặc tải lên."; opacity: .5; font-size: 12.5px; grid-column: 1 / -1; align-self: center; text-align: center; }
.sp-the { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #0d1118; cursor: pointer;
    border: 2px solid transparent; }
.sp-the img, .sp-the video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-the.chon { border-color: var(--accent, #3b82f6); }
.sp-the .sp-stt { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px;
    background: var(--accent, #3b82f6); color: #fff; font-size: .78rem; font-weight: 700; display: none; align-items: center; justify-content: center; }
.sp-the.chon .sp-stt { display: inline-flex; }
.sp-the .sp-loai { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: .7rem; padding: 2px 6px; border-radius: 4px; }
.sp-tuy-chon { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.sp-tuy-chon label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; opacity: .85; }
.sp-ket-qua { margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.sp-ket-qua video { max-width: 360px; max-height: 480px; border-radius: 10px; background: #000; }
.sp-ket-qua .sp-tai { display: flex; flex-direction: column; gap: 8px; }
.sp-lich-su { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sp-hang { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-color);
    border-radius: 8px; background: rgba(255,255,255,.02); font-size: .86rem; flex-wrap: wrap; }
.sp-hang .sp-h-ten { flex: 1; min-width: 160px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-hang .sp-h-tt { min-width: 140px; }
.sp-hang .sp-h-tt.xong { color: var(--accent-emerald); }
.sp-hang .sp-h-tt.hong { color: var(--accent-pink); }
.sp-hang .sp-h-tt.huy { color: var(--text-muted); }
.sp-hang .sp-h-tt.chay { color: var(--accent-cyan); }
.sp-hang small { color: var(--text-muted); white-space: nowrap; }
.sp-hang .btn-secondary, .sp-hang .btn-primary { padding: 4px 10px; font-size: .8rem; }
.sp-seo { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: rgba(255,255,255,.02); font-size: .86rem; max-width: 640px; }
.sp-seo-hang { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: start; }
.sp-seo-hang b { color: var(--text-muted); font-weight: 600; }
.sp-seo-hang span { white-space: pre-wrap; word-break: break-word; }
.sp-seo .btn-secondary, .sp-seo .btn-primary { padding: 4px 10px; font-size: .8rem; }
.sp-copy-all { align-self: flex-start; }
.sp-copy.da-copy { outline: 2px solid var(--accent-emerald); }
.sp-tuy-chon label > input[type=text] { width: 100%; box-sizing: border-box; }
.sp-bm { margin: 8px 0 4px; border: 1px dashed var(--border-color); border-radius: 8px; padding: 6px 12px; font-size: .88rem; }
.sp-bm summary { cursor: pointer; color: var(--text-muted); }
.sp-bm[open] summary { color: var(--text-main); margin-bottom: 8px; }
.sp-bm-than { display: flex; align-items: center; flex-wrap: wrap; }
.sp-bm-than p { flex-basis: 100%; }
#sp-bookmarklet { cursor: grab; }
.sp-bm-buoc { flex-basis: 100%; margin: 10px 0 0; padding-left: 22px; font-size: .86rem; line-height: 1.6; color: var(--text-muted); }
.sp-bm-buoc code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 4px; }

/* Nhãn chế độ trên mục hàng đợi chờ */
.q-mode { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
          font-size: .74rem; color: var(--accent-emerald, #34d399);
          border: 1px solid currentColor; opacity: .9; }
.q-mode-khac { color: var(--accent-amber, #f59e0b); }

/* ---- Tab Tìm ngách -------------------------------------------------- */
.ng-hai-cot {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    gap: 14px;
    margin-top: 14px;
    align-items: start;
}
@media (max-width: 900px) {
    .ng-hai-cot { grid-template-columns: 1fr; }
}
.ng-goi-y-ds { max-height: 520px; overflow-y: auto; }
.ng-goi-y-dong {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: 7px; cursor: pointer;
    border: 1px solid transparent;
}
.ng-goi-y-dong:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}
.ng-hang { opacity: .5; font-size: .82em; min-width: 26px; }
.ng-tk { flex: 1; word-break: break-word; }
.ng-ct {
    font-size: .76em; padding: 2px 7px; border-radius: 999px;
    white-space: nowrap;
}
.ng-ct-thap { background: rgba(52, 199, 123, .18); color: #34c77b; }
.ng-ct-vua  { background: rgba(240, 180, 60, .18); color: #f0b43c; }
.ng-ct-cao  { background: rgba(255, 99, 132, .16); color: #ff6384; }
.ng-ct-chua { background: rgba(255, 255, 255, .07); opacity: .6; }

.ng-kenh-ds { overflow-x: auto; }
.ng-bang { width: 100%; border-collapse: collapse; font-size: .88em; }
.ng-bang th, .ng-bang td {
    padding: 7px 8px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ng-bang th { opacity: .6; font-weight: 600; font-size: .9em; }
.ng-bang td img { width: 28px; height: 28px; border-radius: 50%; display: block; }
.ng-bang tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* Bốn bước tạo khoá YouTube: nút bấm thẳng tới trang, chữ giải thích bên cạnh */
.ng-buoc { list-style: none; margin: 10px 0 12px; padding: 0; }
.ng-buoc li {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.ng-buoc li > a { flex-shrink: 0; min-width: 190px; }
.ng-buoc li > span { font-size: .88em; opacity: .75; }
.ng-buoc-4 {
    flex-shrink: 0; min-width: 190px; font-weight: 600;
    opacity: .5 !important;
}

/* ------------------------------------------------------------- MV Nhạc */
/* Sáu bước của một lượt phân tích. Vẽ sẵn cả sáu rồi tô dần: khách nhìn một
   lần là biết còn mấy chặng, thay vì đoán dòng chữ đang chạy là chặng mấy. */
.mvn-buoc { list-style: none; margin: 10px 0 0; padding: 0; }
.mvn-buoc li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; font-size: 14px;
}
.mvn-buoc li i { width: 16px; text-align: center; }
.mvn-buoc .mvn-cho  { color: var(--text-dim, #8b8f9a); }
.mvn-buoc .mvn-dang { color: var(--accent, #6366f1); font-weight: 600; }
.mvn-buoc .mvn-xong { color: var(--accent-emerald, #10b981); }

.mvn-canh { list-style: none; margin: 14px 0 0; padding: 0; }
.mvn-canh > li {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.mvn-canh-dau { margin-bottom: 6px; }
.mvn-o { margin-top: 8px; }
.mvn-o label { display: flex; align-items: center; gap: 8px; }
/* Ô chỉ để đọc và chép: cho xuống dòng chứ không cuộn ngang, vì lời nhắc là
   một câu dài và cuộn ngang thì không ai đọc hết. */
.mvn-o textarea {
    width: 100%; resize: vertical; font-size: 13px; line-height: 1.5;
}
.mvn-clip-ds { margin: 8px 0 0 18px; padding: 0; font-size: 13px; }
.mvn-clip-ds li { padding: 2px 0; color: var(--text-dim, #8b8f9a); }
/* Ô lời bài hát chiếm TRỌN bề ngang panel. Nó nằm ngoài `.aio-hang` nên không
   bị co theo cột, nhưng textarea mặc định chỉ rộng theo thuộc tính `cols` —
   phải đặt rõ, nếu không nó hẹp đúng bằng ô mặc định của trình duyệt. */
.mvn-loi { width: 100%; resize: vertical; font-size: 14px; line-height: 1.6; }


/* ---------------------------------------------- tab Motion Graphic --- */
/* Ô yêu cầu: KHÔNG có luật `textarea { width:100% }` toàn cục trong tệp này,
   chỉ vài selector riêng, nên phải tự đặt — nếu không nó lấy bề rộng mặc
   định của trình duyệt và ra một ô hẹp chừng 185px. Mượn đúng dáng của
   `#aio-nguon` để hai tab trông cùng một bộ. */
#mg-yeucau {
    width: 100%; min-height: 128px; padding: 10px 12px; resize: vertical;
}
/* Hàng của riêng tab này. KHÔNG dùng `.aio-hang`: lớp ấy là grid CỐ ĐỊNH ba
   cột, nên một hàng bốn ô sẽ bị đẩy ô thứ tư xuống dòng. */
.mg-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 6px; }
.mg-row3 { grid-template-columns: 2fr 130px 1.4fr; }
.mg-row4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.mg-row > div { min-width: 0; }
/* Ô nhập chữ KHÔNG có luật chung trong tệp này — chỉ `select` mới có (dòng
   182). Không tô riêng thì ô ra nền trắng mặc định của trình duyệt, lạc hẳn
   giữa một giao diện tối. Mượn đúng dáng của `.ts-row` để cùng một bộ. */
.mg-row input[type="text"], #mg-yeucau {
    font: inherit; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-elevated); color: var(--text-primary);
}
/* MỘT CHIỀU CAO CHO CẢ HÀNG. Đo trên trang thật: ô chữ 41px, ô màu 38px, ô
   chọn 36px — ba ô cùng hàng mà ba chiều cao, nhìn so le. Ô chọn có luật
   chung ở dòng 182, ô chữ thì cao theo đệm, nên phải chốt cứng. */
.mg-row input[type="text"], .mg-row select, .mg-row input[type="color"] {
    height: 38px;
}
.mg-row input[type="text"] { padding: 0 12px; }
.mg-row input[type="text"]:focus, #mg-yeucau:focus {
    outline: none; border-color: var(--accent-cyan);
}
.mg-row select, .mg-row input[type="text"] { width: 100%; }
.mg-row input[type="color"] {
    width: 100%; height: 38px; padding: 2px; border-radius: 9px;
    border: 1px solid var(--border); background: transparent; cursor: pointer;
}
.mg-tick { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px;
           font-size: .86rem; font-weight: 600; cursor: pointer; }
.mg-tick input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.mg-nut-hang { display: flex; align-items: center; flex-wrap: wrap;
               gap: 10px; margin-top: 14px; }
@media (max-width: 760px) {
    .mg-row, .mg-row3, .mg-row4 { grid-template-columns: 1fr; }
}
.mg-rong {
    width: 100%; height: 38px; padding: 0 12px; font: inherit;
    border-radius: var(--radius-sm); border: 1px solid var(--border-color);
    background: var(--bg-elevated); color: var(--text-primary);
}
.mg-rong:focus { outline: none; border-color: var(--accent-cyan); }
/* Khối SEO dưới mỗi lượt đã xong */
.mg-seo { flex-basis: 100%; margin-top: 8px; padding: 10px 12px;
          border-radius: 9px; border: 1px solid var(--border-color);
          background: rgba(255, 255, 255, .03); font-size: 13px; }
.mg-seo .d { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; }
.mg-seo .n { flex: 0 0 74px; color: var(--text-secondary); font-weight: 600; }
.mg-seo .v { flex: 1; white-space: pre-wrap; word-break: break-word; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mg-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .08); font-size: 13px;
}
.mg-chip button {
    border: 0; background: none; color: inherit; cursor: pointer;
    font-size: 15px; line-height: 1; padding: 0;
}
.mg-hang {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mg-hang-chu { flex: 1; min-width: 220px; }
.mg-loi { flex-basis: 100%; font-size: 13px; color: #ff8a7a; }