/* --- AIPG Professional UI v35.1 - Sửa lỗi hiển thị Tab --- */
:root {
    --aipg-primary-color: #0073e6;
    --aipg-primary-hover: #005bbd;
    --aipg-secondary-color: #1a253c;
    --aipg-accent-color: #4f46e5;
    --aipg-text-dark: #1f2937;
    --aipg-text-light: #6b7280;
    --aipg-border-color: #e5e7eb;
    --aipg-bg-light: #f9fafb;
    --aipg-bg-white: #ffffff;
    --aipg-success-color: #10b981;
    --aipg-error-color: #ef4444;
    --aipg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* === General Containers === */
.aipg-pro-container, .aipg-library-container, .aipg-login-required-wrapper, .aipg-dashboard-container {
    font-family: var(--aipg-font);
    max-width: 900px;
    margin: 2em auto;
    padding-top: 0;
}

/* === Navigation Links === */
.aipg-nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
    padding: 10px 0;
    border-bottom: 1px solid var(--aipg-border-color);
    flex-wrap: wrap;
}
.aipg-nav-links a {
    text-decoration: none;
    color: var(--aipg-text-dark);
    font-weight: 500;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}
.aipg-nav-links a:hover, .aipg-nav-links a.active {
    background-color: var(--aipg-primary-color);
    color: white;
}

/* === Generator Styles === */
.aipg-pro-container {
    background: var(--aipg-bg-white);
    border: 1px solid var(--aipg-border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
}
.aipg-main-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.aipg-input-group {
    flex-grow: 1;
    width: 100%;
}
#aipg-user-prompt-input { 
    width: 100%; 
    padding: 12px; 
    font-size: 16px; 
    line-height: 1.6; 
    border: 1px solid var(--aipg-border-color); 
    border-radius: 8px; 
    transition: all 0.2s ease-in-out; 
    resize: vertical; 
    min-height: 60px; 
    box-sizing: border-box;
}
#aipg-user-prompt-input:focus { 
    border-color: var(--aipg-primary-color); 
    box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15); 
    outline: none; 
}
#aipg-generate-btn {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background-color: var(--aipg-primary-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#aipg-generate-btn:hover:not(:disabled) { 
    background-color: var(--aipg-primary-hover); 
}
#aipg-generate-btn:disabled { 
    background-color: #9ca3af; 
    cursor: not-allowed; 
}
.aipg-spinner { 
    width: 18px; 
    height: 18px; 
    border: 2px solid rgba(255, 255, 255, 0.5); 
    border-radius: 50%; 
    border-top-color: #fff; 
    display: none; 
    animation: aipg-btn-spin 1s linear infinite; 
}
#aipg-generate-btn.loading .aipg-spinner { 
    display: inline-block; 
}
@keyframes aipg-btn-spin { to { transform: rotate(360deg); } }
.aipg-advanced-toggle { margin: 16px 0; text-align: center; }
.aipg-advanced-toggle a { color: var(--aipg-primary-color); text-decoration: none; font-weight: 500; cursor: pointer; }
.aipg-advanced-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 20px; background-color: var(--aipg-bg-light); border-radius: 8px; margin-bottom: 16px; }
.aipg-option-col label { display: block; font-size: 14px; font-weight: 500; color: var(--aipg-text-dark); margin-bottom: 8px; }
.aipg-option-col select, .aipg-option-col input { width: 100%; padding: 10px; font-size: 15px; border: 1px solid var(--aipg-border-color); border-radius: 6px; background-color: var(--aipg-bg-white); box-sizing: border-box; }
.aipg-option-col .description { font-size: 12px; color: var(--aipg-text-light); margin-top: 5px; }
#aipg-result-container { margin-top: 24px; }
.aipg-tabs-nav { display: flex; border-bottom: 1px solid var(--aipg-border-color); flex-wrap: wrap; }
.aipg-tab { padding: 10px 20px; cursor: pointer; background: none; border: none; border-bottom: 3px solid transparent; font-size: 16px; font-weight: 600; color: var(--aipg-text-light); transition: all 0.2s ease; margin-bottom: -1px; }
.aipg-tab:hover { color: var(--aipg-primary-color); }
.aipg-tab.active { color: var(--aipg-primary-color); border-bottom-color: var(--aipg-primary-color); }
.aipg-tabs-content { padding: 24px; background-color: var(--aipg-bg-light); border-radius: 0 0 8px 8px; border: 1px solid var(--aipg-border-color); border-top: none; }
.aipg-tab-content { display: none; }
.aipg-tab-content.active { display: block; }

/* === Shared Styles === */
pre.aipg-prompt-text { white-space: pre-wrap; word-wrap: break-word; font-family: "SF Mono", "Consolas", "Menlo", monospace; font-size: 15px; line-height: 1.7; color: var(--aipg-text-dark); margin: 0; background: none; padding: 0; }
.aipg-copy-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--aipg-border-color); background-color: var(--aipg-bg-white); color: var(--aipg-text-dark); font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; }
.aipg-copy-btn:hover { background-color: var(--aipg-bg-light); color: var(--aipg-primary-color); border-color: var(--aipg-primary-color); }
.aipg-copy-btn.copied { background-color: var(--aipg-success-color); color: white; border-color: var(--aipg-success-color); }
.aipg-feedback-message { padding: 12px; border-radius: 8px; margin-top: 16px; text-align: center; font-weight: 500; }
.aipg-feedback-message.error { background-color: #fee2e2; color: var(--aipg-error-color); border: 1px solid #fca5a5; }
.aipg-feedback-message.success { background-color: #d1fae5; color: var(--aipg-success-color); border: 1px solid #6ee7b7; }
#aipg-loader { margin-top: 24px; }
.aipg-skeleton-item { border: 1px solid var(--aipg-border-color); border-radius: 8px; overflow: hidden; animation: aipg-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.aipg-skeleton-tabs { padding: 10px 20px; border-bottom: 1px solid var(--aipg-border-color); display: flex; gap: 20px; flex-wrap: wrap; }
.aipg-skeleton-tab { width: 80px; height: 24px; background-color: var(--aipg-bg-light); border-radius: 4px; }
.aipg-skeleton-content { padding: 24px; }
.aipg-skeleton-line { height: 16px; background-color: var(--aipg-bg-light); border-radius: 4px; margin-bottom: 12px; }
.aipg-skeleton-line.short { width: 60%; }
@keyframes aipg-pulse { 50% { opacity: 0.6; } }

/* === Library Filters & Toolbar (UPDATED for Popup) === */
.aipg-library-container h2 { font-size: 28px; color: var(--aipg-text-dark); text-align: center; }
.aipg-library-container > p { font-size: 16px; color: var(--aipg-text-light); text-align: center; margin-bottom: 30px; }

.aipg-filters-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 15px;
    background-color: var(--aipg-bg-light);
    border-radius: 12px;
}
.aipg-search-wrapper {
    flex-grow: 1;
    min-width: 250px;
}
#aipg-library-search {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    box-sizing: border-box;
}
.aipg-filter-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
}

/* === Filter Popup Styles === */
.aipg-popup-wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 100001; justify-content: center; align-items: center; padding: 15px; }
.aipg-popup-content { background: #fff; padding: 0; border-radius: 12px; width: 90%; max-width: 600px; position: relative; box-shadow: 0 5px 25px rgba(0,0,0,0.2); animation: aipg-popup-fadein 0.3s ease-out; display: flex; flex-direction: column; max-height: 90vh; }
@keyframes aipg-popup-fadein { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.aipg-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid var(--aipg-border-color);
}
.aipg-popup-header h3 {
    margin: 0;
    font-size: 18px;
}
.aipg-popup-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #aaa;
    padding: 5px;
}
.aipg-popup-close:hover { color: #333; }

.aipg-popup-body {
    padding: 25px;
    overflow-y: auto;
}
.aipg-filter-group {
    margin-bottom: 25px;
}
.aipg-filter-group:last-child {
    margin-bottom: 0;
}
.aipg-filter-group label {
    font-weight: 600;
    color: var(--aipg-text-dark);
    margin-bottom: 12px;
    display: block;
}
.aipg-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.aipg-filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--aipg-border-color);
    color: var(--aipg-text-light);
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    background-color: var(--aipg-bg-white);
    cursor: pointer;
}
.aipg-filter-btn:hover {
    background-color: #eef2f6;
    color: var(--aipg-text-dark);
}
.aipg-filter-btn.active {
    background-color: var(--aipg-primary-color);
    color: white;
    border-color: var(--aipg-primary-color);
}

.aipg-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 25px;
    border-top: 1px solid var(--aipg-border-color);
    background-color: var(--aipg-bg-light);
}

/* === Library Grid & Items === */
#aipg-library-grid-loader {
    text-align: center;
    padding: 40px 0;
}
.aipg-loader-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--aipg-bg-light);
    border-top-color: var(--aipg-primary-color);
    border-radius: 50%;
    animation: aipg-btn-spin 1s linear infinite;
}
.aipg-library-grid { display: block; }
.aipg-no-results { text-align: center; padding: 40px; color: var(--aipg-text-light); }
.aipg-library-accordion { border: 1px solid var(--aipg-border-color); border-radius: 12px; overflow: hidden; transition: all 0.2s ease; margin-bottom: 25px; width: 100%; }
.aipg-accordion-header { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 20px; background-color: var(--aipg-bg-white); border: none; cursor: pointer; font-size: 18px; font-weight: 600; color: var(--aipg-text-dark); gap: 10px; }
.aipg-accordion-header.active { background-color: var(--aipg-bg-light); border-bottom: 1px solid var(--aipg-border-color); }
.aipg-accordion-title { flex-grow: 1; }
.aipg-accordion-icon { font-size: 24px; font-weight: 400; color: var(--aipg-primary-color); transition: transform 0.3s ease; flex-shrink: 0; }
.aipg-accordion-header.active .aipg-accordion-icon { transform: rotate(45deg); }
.aipg-accordion-content { padding: 20px; background-color: var(--aipg-bg-white); display: none; }
.aipg-single-prompt-in-library { border-left: 3px solid var(--aipg-primary-color); padding-left: 15px; }
.aipg-load-more-container { text-align: center; margin-top: 30px; }

/* === Favorite Button & Stats Styles === */
.aipg-header-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    padding: 0 15px;
}
.aipg-stat-item {
    font-size: 13px; 
    color: #5a6a7b;
}
.aipg-favorite-btn {
    color: #ccc;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    line-height: 1;
    order: -1;
}
.aipg-favorite-btn:hover {
    color: #f44336;
    transform: scale(1.2);
}
.aipg-favorite-btn.active {
    color: #f44336;
    transform: scale(1.1);
}
.aipg-favorite-btn.loading {
    animation: aipg-heartbeat 0.5s infinite;
}
@keyframes aipg-heartbeat {
    0% { transform: scale(1.1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1.1); }
}
.aipg-accordion-header {
    justify-content: flex-start;
}
.aipg-accordion-icon {
    margin-left: 15px;
}


/* === Membership & Dashboard Styles === */
.aipg-login-required-wrapper h3 { text-align: center; color: var(--aipg-text-dark); font-size: 22px; margin-bottom: 20px; }
.aipg-login-required-wrapper p { text-align: center; }
.aipg-auth-container { max-width: 420px; margin: 1em auto; padding: 30px; background: var(--aipg-bg-white); border: 1px solid var(--aipg-border-color); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); }
.aipg-auth-tabs { display: flex; border-bottom: 1px solid var(--aipg-border-color); margin-bottom: 25px; }
.aipg-auth-tab-link { flex: 1; padding: 15px; text-align: center; font-size: 16px; font-weight: 600; cursor: pointer; background: none; border: none; border-bottom: 3px solid transparent; color: var(--aipg-text-light); transition: all 0.2s ease; }
.aipg-auth-tab-link:hover { color: var(--aipg-primary-color); }
.aipg-auth-tab-link.active { color: var(--aipg-primary-color); border-bottom-color: var(--aipg-primary-color); }
.aipg-auth-tab-content { display: none; }
.aipg-auth-tab-content.active { display: block; }
.aipg-form p { margin-bottom: 15px; }
.aipg-form label { display: block; font-weight: 500; margin-bottom: 8px; color: var(--aipg-text-dark); }
.aipg-form input[type="text"], .aipg-form input[type="email"], .aipg-form input[type="password"] { width: 100%; padding: 12px; font-size: 15px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
.aipg-form .button { width: 100%; padding: 12px; font-size: 16px; justify-content: center; }
#aipg-auth-feedback { margin-top: 0; margin-bottom: 20px; }
.aipg-welcome-user { padding: 10px 15px; background-color: var(--aipg-bg-light); border: 1px solid var(--aipg-border-color); border-radius: 8px; margin-bottom: 20px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.aipg-welcome-user a { text-decoration: none; font-weight: 600; }
.aipg-dashboard-container { background: var(--aipg-bg-white); border: 1px solid var(--aipg-border-color); border-radius: 12px; padding: 20px 30px; }
.aipg-dashboard-container h2 { text-align: center; margin-bottom: 25px; }
.aipg-dashboard-container .aipg-auth-tab-content { padding-top: 25px; }
.aipg-dashboard-summary { background: var(--aipg-bg-light); border: 1px solid var(--aipg-border-color); border-radius: 8px; padding: 20px; margin-bottom: 30px; }
.aipg-dashboard-summary h3 { margin-top: 0; font-size: 18px; color: var(--aipg-text-dark); border-bottom: 1px dashed var(--aipg-border-color); padding-bottom: 10px; margin-bottom: 15px; }
.aipg-dashboard-summary ul { list-style: none; margin: 0; padding: 0; }
.aipg-dashboard-summary ul li { margin-bottom: 8px; font-size: 15px; color: var(--aipg-text-dark); }
.aipg-dashboard-summary ul li strong { color: var(--aipg-primary-color); }
.aipg-history-list { list-style: none; padding: 0; margin: 0; }
.aipg-history-list li { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 15px 10px; border-bottom: 1px solid var(--aipg-border-color); }
.aipg-history-list li:last-child { border-bottom: none; }
.aipg-history-list li a { font-weight: 600; text-decoration: none; color: var(--aipg-primary-color); font-size: 16px; }
.aipg-history-list li span { font-size: 14px; color: var(--aipg-text-light); display: block; margin-top: 5px;}
.aipg-history-list li .aipg-history-actions { margin-top: 10px; }
.aipg-dashboard-sections h3 { font-size: 18px; color: var(--aipg-text-dark); margin-bottom: 15px; border-bottom: 1px dashed var(--aipg-border-color); padding-bottom: 10px; margin-top: 25px; }

/* === Styles for VEO V4 Generator === */
.aipg-veo-v4-container {
    position: relative;
}

.aipg-veo-v4-container h2 {
    text-align: center;
    font-size: 24px;
    color: var(--aipg-text-dark);
}

.aipg-veo-v4-container > p {
    text-align: center;
    font-size: 16px;
    color: var(--aipg-text-light);
    max-width: 600px;
    margin: 0 auto 30px auto;
}

#aipg-veo-v4-form, #aipg-veo-reprompt-form, #aipg-veo-brainstorm-form, #aipg-veo-dialogue-form-advanced, #aipg-veo-reprompt-v2-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#aipg-veo-v4-form .aipg-form-group label, 
#aipg-veo-reprompt-form .aipg-form-group label,
#aipg-veo-brainstorm-form .aipg-form-group label,
#aipg-veo-dialogue-form-advanced .aipg-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

#veo-v4-keywords, #veo-reprompt-input, #veo-brainstorm-keyword, #veo-reprompt-input-v2, #dialogue-original-prompt-adv, #dialogue-new-text,
#aipg-chain-script {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    line-height: 1.6;
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

#veo-v4-keywords, #veo-reprompt-input, #veo-reprompt-input-v2, #dialogue-original-prompt-adv, #dialogue-new-text,
#aipg-chain-script {
    resize: vertical;
    min-height: 120px;
}

#veo-v4-keywords:focus, #veo-reprompt-input:focus, #veo-brainstorm-keyword:focus, #veo-reprompt-input-v2:focus, #dialogue-original-prompt-adv:focus, #dialogue-new-text:focus,
#aipg-chain-script:focus {
    border-color: var(--aipg-primary-color);
    box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15);
    outline: none;
}

#aipg-generate-veo-v4-btn, #aipg-reprompt-veo-btn, #aipg-brainstorm-veo-btn, #aipg-reprompt-veo-btn-v2, #aipg-update-dialogue-btn-advanced {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background-color: var(--aipg-primary-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center; /* Căn giữa nút */
}
#aipg-brainstorm-veo-btn, #aipg-reprompt-veo-btn-v2, #aipg-update-dialogue-btn-advanced {
    align-self: flex-start;
}
#aipg-generate-veo-v4-btn:hover:not(:disabled), #aipg-reprompt-veo-btn:hover:not(:disabled), #aipg-brainstorm-veo-btn:hover:not(:disabled), #aipg-reprompt-veo-btn-v2:hover:not(:disabled), #aipg-update-dialogue-btn-advanced:hover:not(:disabled) { 
    background-color: var(--aipg-primary-hover); 
}
#aipg-generate-veo-v4-btn:disabled, #aipg-reprompt-veo-btn:disabled, #aipg-brainstorm-veo-btn:disabled, #aipg-reprompt-veo-btn-v2:disabled, #aipg-update-dialogue-btn-advanced:disabled { 
    background-color: #9ca3af; 
    cursor: not-allowed; 
}
#aipg-generate-veo-v4-btn .aipg-spinner, #aipg-reprompt-veo-btn .aipg-spinner, #aipg-brainstorm-veo-btn .aipg-spinner, #aipg-reprompt-veo-btn-v2 .aipg-spinner, #aipg-update-dialogue-btn-advanced .aipg-spinner {
    display: none;
}

.aipg-result-wrapper {
    position: relative;
    background-color: var(--aipg-bg-light);
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    padding: 20px;
    padding-right: 50px; /* Make space for the button */
}

.aipg-result-wrapper .aipg-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: white;
    border: 1px solid var(--aipg-border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.aipg-result-wrapper .aipg-copy-btn:hover {
    background-color: #f0f0f0;
}

.aipg-result-wrapper .aipg-copy-btn.copied {
    background-color: var(--aipg-success-color);
    border-color: var(--aipg-success-color);
}
.aipg-result-wrapper .aipg-copy-btn.copied .icon-check {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022z'/%3e%3c/svg%3e");
}

.aipg-result-wrapper .icon-copy, .aipg-result-wrapper .icon-check {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.aipg-result-wrapper .icon-copy {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232c3e50'%3e%3cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3e%3cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3e%3c/svg%3e");
}

/* Advanced Options for VEO */
.aipg-advanced-toggle-wrapper {
    text-align: center;
    margin: 10px 0;
}
.aipg-advanced-toggle-link {
    text-decoration: none;
    color: var(--aipg-primary-color);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
.aipg-advanced-toggle-link:hover {
    background-color: #eef2f6;
}
.aipg-advanced-toggle-link .dashicons {
    transition: transform 0.3s ease;
}
.aipg-advanced-toggle-link.active .dashicons {
    transform: rotate(180deg);
}
.aipg-veo-advanced-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    background-color: var(--aipg-bg-light);
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    margin-top: 10px;
}

/* === [CẬP NHẬT] Styles for VEO V4 Tabs (Pill-based) === */
.aipg-veo-tabs {
    display: flex;
    flex-wrap: wrap; 
    gap: 8px; 
    padding-bottom: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--aipg-border-color);
}

.aipg-veo-tab-link {
    padding: 8px 16px;
    border-radius: 20px;
    background-color: var(--aipg-bg-light);
    color: var(--aipg-text-dark);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: 1px solid transparent;
    pointer-events: auto; 
    z-index: 1; 
}

.aipg-veo-tab-link:hover {
    background-color: #e5e7eb;
    color: var(--aipg-text-dark);
    border-color: #d1d5db;
}

.aipg-veo-tab-link.active {
    background-color: var(--aipg-primary-color);
    color: white;
    font-weight: 600;
    border-color: var(--aipg-primary-color);
}

.aipg-veo-tab-content {
    display: none;
}
.aipg-veo-tab-content.active {
    display: block;
}

/* === Styles for VEO Brainstorm Tab === */
#aipg-veo-brainstorm-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#veo-brainstorm-keyword, #veo-trend-description {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    box-sizing: border-box;
}
#aipg-brainstorm-veo-btn {
    align-self: flex-start;
}
.aipg-veo-brainstorm-results {
    margin-top: 25px;
    border-top: 1px solid var(--aipg-border-color);
    padding-top: 20px;
}
.aipg-veo-brainstorm-results h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--aipg-text-dark);
}
.aipg-idea-suggestions {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aipg-suggestion-item {
    background-color: var(--aipg-bg-light);
    padding: 15px;
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
    color: var(--aipg-text-dark);
}
.aipg-suggestion-item:hover {
    border-color: var(--aipg-primary-color);
    background-color: #eaf4ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
/* Viral Analysis Card Styles */
.aipg-viral-analysis-card {
    background: #fff;
    border: 1px solid var(--aipg-border-color);
    border-radius: 12px;
    padding: 20px;
}
.aipg-analysis-section {
    margin-bottom: 20px;
}
.aipg-analysis-section:last-child {
    margin-bottom: 0;
}
.aipg-section-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--aipg-text-light);
    margin-bottom: 8px;
}
.aipg-analysis-section p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* === Storyboard Styles === */
.aipg-storyboard { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    margin-top: 20px;
}
.aipg-storyboard-card { 
    border: 1px solid var(--aipg-border-color); 
    border-radius: 12px; 
    background: var(--aipg-bg-white); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}
.aipg-card-header { 
    font-size: 16px;
    font-weight: 600; 
    padding: 12px 20px; 
    background: var(--aipg-bg-light); 
    border-bottom: 1px solid var(--aipg-border-color); 
    color: var(--aipg-text-dark);
}
.aipg-card-body { 
    padding: 20px; 
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.aipg-card-script-snippet,
.aipg-card-prompt {
    border-left: 3px solid #ccc;
    padding-left: 15px;
}
.aipg-card-script-snippet strong,
.aipg-card-prompt strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--aipg-text-light);
}
.aipg-card-script-snippet p {
    margin: 0;
    font-style: italic;
    color: #666;
}
.aipg-card-actions { 
    padding: 12px 20px; 
    border-top: 1px solid var(--aipg-border-color); 
    background-color: var(--aipg-bg-light);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.aipg-copy-scene-prompt,
.aipg-regenerate-scene-btn {
    font-size: 13px;
    padding: 6px 12px;
}

.aipg-regenerate-scene-btn .dashicons {
    transition: transform 0.5s ease-in-out;
}

.aipg-regenerate-scene-btn .dashicons.is-loading {
    animation: aipg-spin 1s linear infinite;
}

@keyframes aipg-spin {
    100% { 
        transform: rotate(360deg); 
    }
}

.aipg-editable-prompt {
    width: 100%;
    box-sizing: border-box;
    font-family: "SF Mono", "Consolas", "Menlo", monospace;
    font-size: 14px;
    line-height: 1.7;
    border: 1px solid var(--aipg-border-color);
    border-radius: 6px;
    padding: 10px;
    background-color: #fdfdfd;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
}

.aipg-editable-prompt:focus {
    border-color: var(--aipg-primary-color);
    box-shadow: 0 0 0 1px var(--aipg-primary-color);
    outline: none;
}

/* === Styles for Multiple Result Cards (RePrompt v2) === */
.aipg-multiple-results-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aipg-result-card {
    border: 1px solid var(--aipg-border-color);
    border-radius: 12px;
    background: var(--aipg-bg-white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}

.aipg-result-card .aipg-card-header {
    font-size: 15px;
    font-weight: 600;
    padding: 12px 20px;
    background: var(--aipg-bg-light);
    border-bottom: 1px solid var(--aipg-border-color);
    color: var(--aipg-text-dark);
}

.aipg-result-card .aipg-card-body {
    padding: 20px;
}

.aipg-result-card .aipg-card-body pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: "SF Mono", "Consolas", "Menlo", monospace;
    font-size: 14px;
    line-height: 1.7;
}

.aipg-result-card .aipg-card-actions {
    padding: 12px 20px;
    border-top: 1px solid var(--aipg-border-color);
    background-color: var(--aipg-bg-light);
    text-align: right;
}

.aipg-result-card .aipg-card-actions .button {
    font-size: 13px;
    padding: 6px 12px;
}

/* === Styles for Advanced Dialogue Editor === */
#dialogue-lines-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    background-color: var(--aipg-bg-light);
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
}

.dialogue-line-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.dialogue-line-row .dialogue-character-select {
    flex: 0 0 180px; /* Fixed width for character select */
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--aipg-border-color);
}

.dialogue-line-row .dialogue-line-input {
    flex-grow: 1;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--aipg-border-color);
    resize: vertical;
}

.dialogue-line-row .remove-dialogue-btn {
    flex-shrink: 0;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #dc3545;
    font-weight: bold;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.dialogue-line-row .remove-dialogue-btn:hover {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}
/* === Styles for VEO History Tab === */
#aipg-veo-history-container {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}

.aipg-history-item {
    background-color: var(--aipg-bg-light);
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    margin-bottom: 15px;
}

.aipg-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--aipg-border-color);
}

.aipg-history-mode {
    font-weight: 600;
    color: var(--aipg-text-dark);
    text-transform: capitalize;
}

.aipg-history-date {
    font-size: 13px;
    color: var(--aipg-text-light);
}

.aipg-history-body details {
    cursor: pointer;
}

.aipg-history-body summary {
    padding: 12px 15px;
    font-weight: 500;
    color: var(--aipg-primary-color);
}

.aipg-history-content {
    padding: 0 15px 15px 15px;
    border-top: 1px dashed var(--aipg-border-color);
    margin-top: 10px;
}

.aipg-history-content strong {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 14px;
}

.aipg-history-content pre {
    background-color: var(--aipg-bg-white);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 14px;
    max-height: 200px;
    overflow-y: auto;
}

/* === [MỚI] Styles for Brain Selector === */
.aipg-brain-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: var(--aipg-bg-light);
    padding: 10px;
    border-radius: 12px;
}

.aipg-brain-selector label {
    flex-grow: 1;
    display: block;
    position: relative;
    margin: 0;
}

.aipg-brain-selector input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.aipg-brain-selector span {
    display: block;
    padding: 10px 15px;
    background-color: var(--aipg-bg-white);
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.aipg-brain-selector input[type="radio"]:hover + span {
    border-color: var(--aipg-primary-hover);
    color: var(--aipg-primary-hover);
}

.aipg-brain-selector input[type="radio"]:checked + span {
    background-color: var(--aipg-primary-color);
    color: white;
    border-color: var(--aipg-primary-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 115, 230, 0.3);
}

#aipg-director-style-wrapper {
    padding: 15px;
    background-color: #eef5ff;
    border: 1px solid #b8d6ff;
    border-radius: 8px;
}

/* === [MỚI] Biên kịch AI Form Styles === */
#aipg-screenwriter-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
#aipg-screenwriter-form .aipg-form-group {
    display: flex;
    flex-direction: column;
}
#aipg-screenwriter-form .full-width {
    grid-column: 1 / -1;
}
#aipg-screenwriter-form h4 {
    grid-column: 1 / -1;
    font-size: 16px;
    color: var(--aipg-text-dark);
    margin: 10px 0 0 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aipg-border-color);
}
#aipg-screenwriter-form label {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}
#aipg-screenwriter-form input[type="text"],
#aipg-screenwriter-form select {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    border: 1px solid var(--aipg-border-color);
    border-radius: 6px;
    box-sizing: border-box;
}
#aipg-screenwriter-form button {
    justify-self: start;
}
#aipg-script-scene-result .aipg-editable-prompt {
    width: 100%;
    box-sizing: border-box;
    font-family: "SF Mono", "Consolas", "Menlo", monospace;
    font-size: 14px;
    line-height: 1.7;
    border: 1px solid var(--aipg-border-color);
    border-radius: 6px;
    padding: 15px;
    background-color: #fdfdfd;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
}
#aipg-script-scene-result .aipg-editable-prompt:focus {
    border-color: var(--aipg-primary-color);
    box-shadow: 0 0 0 1px var(--aipg-primary-color);
    outline: none;
}

/* === [MỚI] Styles for Casting Tool === */
.aipg-casting-container {
    border: none;
    border-radius: 8px;
    background-color: var(--aipg-bg-light);
    padding: 15px;
}

.aipg-casting-tabs {
    display: flex;
    background-color: #e5e7eb; /* Màu nền cho dải tab */
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 15px;
}

.aipg-casting-tabs .aipg-casting-tab-link {
    flex: 1;
    padding: 10px 15px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--aipg-text-light);
    font-weight: 600;
    transition: all 0.2s ease;
    border-bottom: none; /* Bỏ border bottom cũ */
}

.aipg-casting-tabs .aipg-casting-tab-link.active {
    background-color: var(--aipg-bg-white);
    color: var(--aipg-accent-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.aipg-casting-panels {
    padding: 0; /* Bỏ padding cũ */
}

/* ========================================================== */
/* BẮT ĐẦU PHẦN SỬA LỖI */
/* ========================================================== */
.aipg-casting-panel {
    display: none;
}
.aipg-casting-panel.active {
    display: block;
}
/* ========================================================== */
/* KẾT THÚC PHẦN SỬA LỖI */
/* ========================================================== */


#casting-panel-new textarea {
    min-height: 80px;
    margin-bottom: 10px;
}

#aipg-cast-character-btn {
    padding: 8px 16px;
    font-size: 14px;
}

#aipg-new-character-result {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

#aipg-new-character-result h4 {
    margin-top: 0;
    color: #166534;
}

#aipg-new-character-result p {
    margin: 0 0 10px 0;
    font-size: 14px;
}
#aipg-new-character-result p:last-child {
    margin-bottom: 0;
}
/* --- Container chung của Popup --- */
#aipg-global-auth-popup-wrapper .aipg-popup-content {
    max-width: 450px; /* Giới hạn chiều rộng để cân đối hơn */
    padding: 0; /* Bỏ padding cũ để kiểm soát toàn diện */
}

#aipg-global-auth-popup-wrapper .aipg-auth-container-popup {
    padding: 20px 30px 30px 30px; /* Thêm padding cho nội dung bên trong */
}

/* --- Tab Đăng nhập / Đăng ký --- */
#aipg-global-auth-popup-wrapper .aipg-auth-tabs {
    margin-bottom: 25px;
    border-bottom: 1px solid var(--aipg-border-color);
    display: flex; /* Dàn đều các tab */
}

#aipg-global-auth-popup-wrapper .aipg-auth-tab-link {
    flex: 1; /* Chia đều không gian */
    padding: 15px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--aipg-text-light);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-bottom: -1px; /* Để đường viền dưới liền mạch */
}

#aipg-global-auth-popup-wrapper .aipg-auth-tab-link.active {
    color: var(--aipg-primary-color);
    border-bottom-color: var(--aipg-primary-color);
}

/* --- Form và các ô Input (Quan trọng nhất) --- */
#aipg-global-auth-popup-wrapper .aipg-form p {
    margin-bottom: 18px; /* Tăng khoảng cách giữa các dòng */
}

#aipg-global-auth-popup-wrapper .aipg-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--aipg-text-dark); /* Màu chữ trong ô input */
}

/* --- ĐỊNH NGHĨA LẠI HOÀN TOÀN STYLE CHO INPUT --- */
#aipg-global-auth-popup-wrapper .aipg-form input[type="text"],
#aipg-global-auth-popup-wrapper .aipg-form input[type="email"],
#aipg-global-auth-popup-wrapper .aipg-form input[type="password"] {
    display: block;
    width: 100%;
    padding: 12px 15px;
    font-size: 15px;
    font-family: var(--aipg-font);
    color: var(--aipg-text-dark); /* Màu chữ trong ô input */
    background-color: var(--aipg-bg-light); /* Màu nền của ô input */
    border: 1px solid var(--aipg-border-color); /* Viền rõ ràng */
    border-radius: 8px; /* Bo góc */
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

/* --- Hiệu ứng khi focus vào ô input --- */
#aipg-global-auth-popup-wrapper .aipg-form input:focus {
    border-color: var(--aipg-primary-color);
    background-color: var(--aipg-bg-white);
    box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15); /* Hiệu ứng viền sáng */
    outline: none;
}

/* --- Nút Submit (Đăng nhập / Đăng ký) --- */
#aipg-global-auth-popup-wrapper .aipg-form button[type="submit"] {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: var(--aipg-primary-color); /* Dùng màu chính của plugin */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#aipg-global-auth-popup-wrapper .aipg-form button[type="submit"]:hover:not(:disabled) {
    background-color: var(--aipg-primary-hover); /* Màu khi hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 115, 230, 0.2);
}

#aipg-global-auth-popup-wrapper .aipg-form button[type="submit"]:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

/* --- Khu vực thông báo lỗi/thành công --- */
#aipg-global-auth-popup-wrapper #aipg-global-auth-feedback {
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

#aipg-global-auth-popup-wrapper #aipg-global-auth-feedback.error {
    background-color: #fff5f5;
    color: var(--aipg-error-color);
}

#aipg-global-auth-popup-wrapper #aipg-global-auth-feedback.success {
    background-color: #f0fdf4;
    color: var(--aipg-success-color);
}

/* Thêm lớp phủ để chặn tương tác khi loading */
.aipg-veo-v4-container.loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7); /* Lớp phủ trắng mờ */
    z-index: 9999; /* Đảm bảo nằm trên các phần tử khác */
    pointer-events: auto; /* Cho phép chặn sự kiện click */
    border-radius: 12px; /* Kế thừa bo góc của container */
}

/* Hiển thị spinner ở giữa lớp phủ */
.aipg-veo-v4-container.loading-overlay .aipg-loader-spinner-centered {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000; /* Nằm trên lớp phủ */
}

/* Thêm style cho spinner chính giữa */
.aipg-loader-spinner-centered {
    display: none; /* Mặc định ẩn */
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 115, 230, 0.2);
    border-top-color: var(--aipg-primary-color);
    border-radius: 50%;
    animation: aipg-spin 1s linear infinite;
}

@keyframes aipg-spin {
    to {
        transform: rotate(360deg);
    }
}

/*
==========================================================================
[MỚI] BỘ CSS THIẾT KẾ LẠI GIAO DIỆN "ĐẠO DIỄN AI"
==========================================================================
*/

/* SỬA LỖI: Chỉ áp dụng display:flex khi tab đang active */
.aipg-veo-tab-content#veo-tab-chain.active {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Tăng khoảng cách giữa các bước */
}

/* --- Style cho từng bước của quy trình --- */
.aipg-veo-tab-content#veo-tab-chain .aipg-form-group {
    background-color: var(--aipg-bg-white);
    border: 1px solid var(--aipg-border-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.03), 0 1px 2px -1px rgba(0,0,0,0.03);
    transition: box-shadow 0.2s ease-in-out;
}

.aipg-veo-tab-content#veo-tab-chain .aipg-form-group:focus-within {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    border-color: var(--aipg-accent-color);
}

/* --- Style cho tiêu đề của mỗi bước --- */
.aipg-veo-tab-content#veo-tab-chain .aipg-form-group > label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px !important; /* Tăng kích thước font */
    font-weight: 700 !important;
    color: var(--aipg-secondary-color);
    margin-bottom: 20px !important;
}

/* --- Thêm icon số cho mỗi bước --- */
.aipg-veo-tab-content#veo-tab-chain .aipg-form-group > label::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--aipg-accent-color);
    color: white;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- Đánh số cho từng bước --- */
#veo-tab-chain .aipg-form-group:nth-of-type(1) > label::before { content: '1'; }
#veo-tab-chain .aipg-form-group:nth-of-type(2) > label::before { content: '2'; }
#veo-tab-chain .aipg-form-group:nth-of-type(3) > label::before { content: '3'; }

/* --- Thiết kế lại các tab bên trong (Hồ sơ diễn viên, Phong cách...) --- */
.aipg-casting-container {
    border: none;
    border-radius: 8px;
    background-color: var(--aipg-bg-light);
    padding: 15px;
}

.aipg-casting-tabs {
    display: flex;
    background-color: #e5e7eb; /* Màu nền cho dải tab */
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 15px;
}

.aipg-casting-tabs .aipg-casting-tab-link {
    flex: 1;
    padding: 10px 15px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--aipg-text-light);
    font-weight: 600;
    transition: all 0.2s ease;
    border-bottom: none; /* Bỏ border bottom cũ */
}

.aipg-casting-tabs .aipg-casting-tab-link.active {
    background-color: var(--aipg-bg-white);
    color: var(--aipg-accent-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.aipg-casting-panels {
    padding: 0; /* Bỏ padding cũ */
}

/* --- Thiết kế lại nút bấm --- */
.aipg-veo-tab-content#veo-tab-chain .button {
    font-size: 15px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.aipg-veo-tab-content#veo-tab-chain .button-primary {
    background-color: var(--aipg-secondary-color);
    color: white;
}
.aipg-veo-tab-content#veo-tab-chain .button-primary:hover:not(:disabled) {
    background-color: #314060;
}

/* --- Thiết kế lại nút bấm chính cuối cùng --- */
#aipg-generate-chain-btn {
    font-size: 18px !important;
    padding: 15px 30px !important;
    background-image: linear-gradient(to right, #4f46e5, #7c3aed);
    color: white;
    border: none;
    border-radius: 8px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.2);
    transition: all 0.3s ease;
}

#aipg-generate-chain-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3);
}

#aipg-generate-chain-btn .aipg-btn-text::before {
    content: '4. '; /* Thêm số thứ tự cho nút cuối */
}

/* --- Style cho khu vực kết quả phân tích nhân vật --- */
#aipg-character-analysis-results {
    border-top: 1px solid var(--aipg-border-color);
    padding-top: 20px;
    margin-top: 20px;
}

#aipg-new-characters-form .aipg-char-analysis-item {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

#aipg-new-characters-form h5 {
    margin-top: 0;
    color: var(--aipg-text-dark);
}

#aipg-new-characters-form .aipg-form-group {
    margin-bottom: 12px;
}

#aipg-new-characters-form label {
    font-weight: 500;
    color: var(--aipg-text-light);
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
}

#aipg-new-characters-form input,
#aipg-new-characters-form textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

#aipg-create-analyzed-chars-btn {
    background-color: var(--aipg-success-color) !important;
}

#aipg-create-analyzed-chars-btn:hover:not(:disabled) {
    background-color: #059669 !important;
}

/* === [MỚI] Styles for Casting Tool === */
.aipg-casting-container {
    border: none;
    border-radius: 8px;
    background-color: var(--aipg-bg-light);
    padding: 15px;
}

.aipg-casting-tabs {
    display: flex;
    background-color: #e5e7eb; /* Màu nền cho dải tab */
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 15px;
}

.aipg-casting-tabs .aipg-casting-tab-link {
    flex: 1;
    padding: 10px 15px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--aipg-text-light);
    font-weight: 600;
    transition: all 0.2s ease;
    border-bottom: none; /* Bỏ border bottom cũ */
}

.aipg-casting-tabs .aipg-casting-tab-link.active {
    background-color: var(--aipg-bg-white);
    color: var(--aipg-accent-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.aipg-casting-panels {
    padding: 0; /* Bỏ padding cũ */
}

.aipg-casting-panel {
    display: none;
}
.aipg-casting-panel.active {
    display: block;
}

/* ========================================================== */
/* BẮT ĐẦU PHẦN SỬA LỖI HIỂN THỊ DROPDOWN NHÂN VẬT */
/* ========================================================== */
#aipg-chain-characters {
    width: 100%;
    height: 200px; /* Tăng chiều cao để hiển thị nhiều nhân vật */
    padding: 10px; /* Thêm padding bên trong cho đẹp */
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    background-color: var(--aipg-bg-white);
    box-sizing: border-box;
}

#aipg-chain-characters option {
    padding: 8px 12px; /* Thêm padding cho từng dòng option */
    cursor: pointer;
    border-radius: 4px; /* Bo góc nhẹ cho từng option */
    margin-bottom: 2px; /* Tạo khoảng cách giữa các option */
}

#aipg-chain-characters option:hover {
    background-color: #f0f0f0;
}

#aipg-chain-characters option:checked {
    background: var(--aipg-primary-color);
    color: white;
}
/* ========================================================== */
/* KẾT THÚC PHẦN SỬA LỖI */
/* ========================================================== */


#casting-panel-new textarea {
    min-height: 80px;
    margin-bottom: 10px;
}

#aipg-cast-character-btn {
    padding: 8px 16px;
    font-size: 14px;
}

#aipg-new-character-result {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}
/* History Filter Bar */
#aipg-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
    background-color: var(--aipg-bg-light);
    border-radius: 8px;
    margin-bottom: 20px;
    align-items: center;
}
#aipg-history-filters .filter-group {
    flex-grow: 1;
}
#aipg-history-search-input, #aipg-history-mode-filter {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--aipg-border-color);
    border-radius: 6px;
    font-size: 15px;
}

/* History Item Card */
#aipg-veo-history-container .aipg-history-card {
    background-color: #fff;
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    transition: box-shadow 0.2s ease;
}
#aipg-veo-history-container .aipg-history-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--aipg-border-color);
}
.history-card-title {
    font-weight: 600;
    color: var(--aipg-text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}
.history-card-title .dashicons {
    color: var(--aipg-text-light);
}
.history-card-meta {
    font-size: 13px;
    color: var(--aipg-text-light);
}
.history-card-body {
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
}
.history-card-body .prompt-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #555;
    margin-bottom: 10px;
}
.history-card-actions {
    padding: 10px 15px;
    background-color: var(--aipg-bg-light);
    border-top: 1px solid var(--aipg-border-color);
    display: flex;
    gap: 10px;
    align-items: center;
}
.history-card-actions .button-like-link {
    background: none;
    border: none;
    color: var(--aipg-primary-color);
    cursor: pointer;
    font-size: 13px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.history-card-actions .history-fav-btn {
    margin-left: auto;
    color: #ccc;
    font-size: 20px;
}
.history-card-actions .history-fav-btn.is-favorited {
    color: #f0c420;
}
.history-card-actions .history-delete-btn {
    color: #d9534f;
}
/* Pagination */
#aipg-history-pagination {
    text-align: center;
    margin-top: 20px;
}
#aipg-history-pagination .page-numbers {
    padding: 8px 12px;
    border: 1px solid var(--aipg-border-color);
    border-radius: 4px;
    margin: 0 4px;
    text-decoration: none;
    color: var(--aipg-primary-color);
}
#aipg-history-pagination .page-numbers.current {
    background-color: var(--aipg-primary-color);
    color: #fff;
    border-color: var(--aipg-primary-color);
}
/* === [NÂNG CẤP] Character List Styles === */
.aipg-character-list-wrapper {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--aipg-bg-white);
}

#aipg-chain-characters-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#aipg-chain-characters-list li {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

#aipg-chain-characters-list li:hover {
    background-color: #f9fafb;
}

#aipg-chain-characters-list li .aipg-char-checkbox {
    margin-right: 12px;
    transform: scale(1.2);
}

#aipg-chain-characters-list li .char-name {
    flex-grow: 1;
    font-weight: 500;
    cursor: pointer;
}

#aipg-chain-characters-list li .char-actions {
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#aipg-chain-characters-list li:hover .char-actions {
    opacity: 1;
}

#aipg-chain-characters-list .char-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aipg-text-light);
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#aipg-chain-characters-list .char-action-btn:hover {
    background-color: #e5e7eb;
    color: var(--aipg-text-dark);
}

#aipg-chain-characters-list .char-delete-btn:hover {
    color: var(--aipg-error-color);
}
#aipg-chain-characters-list .no-characters {
    color: var(--aipg-text-light);
    padding: 15px;
    text-align: center;
}

/* === [NÂNG CẤP] Edit Character Popup Styles === */
#aipg-edit-character-popup .aipg-form-group {
    margin-bottom: 15px;
}
#aipg-edit-character-popup label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}
#aipg-edit-character-popup input[type="text"],
#aipg-edit-character-popup textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--aipg-border-color);
    border-radius: 6px;
    box-sizing: border-box;
}
.aipg-dialogue-input-wrapper, .aipg-dialogue-line-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aipg-rewrite-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
}
.aipg-rewrite-controls.is-advanced {
    padding-left: 158px; /* Căn lề với ô thoại ở trên */
}
.aipg-rewrite-keyword-input {
    flex-grow: 1;
    font-size: 13px !important;
    padding: 6px 8px !important;
}
/* === [FIX] Styles for Default Dialogue Editor v3 (Added Spacing) === */

/* [MỚI] Thêm khoảng cách cho các khối chức năng */
#dialogue-editor-default-panel .aipg-form-group {
    margin-bottom: 20px;
}

.aipg-dialogue-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px; /* [MỚI] Tăng khoảng cách giữa ô nhập và hàng nút bên dưới */
}

/* Dàn layout cho hàng chứa các nút viết lại */
.aipg-rewrite-actions-default {
    display: flex;
    align-items: stretch; /* Cho các nút cao bằng nhau */
    gap: 10px;
}

/* Ô nhập từ khóa ở giữa */
.aipg-rewrite-actions-default .aipg-rewrite-keyword-input {
    flex-grow: 1; /* Chiếm hết không gian còn lại */
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 0 12px;
}

/* Tạo kiểu cho nút màu đỏ */
.aipg-rewrite-btn-main {
    background-color: #d63638 !important; /* Màu đỏ */
    color: white !important;
    border: none !important;
    font-weight: bold !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    cursor: pointer;
    transition: background-color 0.2s ease !important;
}

.aipg-rewrite-btn-main:hover {
    background-color: #b22222 !important; /* Màu đỏ đậm hơn khi hover */
}

/* [MỚI] Thêm khoảng cách cho nút Cập nhật chính */
#aipg-update-dialogue-default-btn {
    margin-top: 15px;
}
/* === [Nâng cấp] Giao diện Popup Đăng nhập Chuyên nghiệp === */

/* --- Tổng thể Popup --- */
.aipg-popup-content {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
.aipg-auth-container-popup {
    padding: 30px 35px; /* Tăng padding để thoáng hơn */
}

/* --- Tiêu đề --- */
.aipg-auth-title {
    font-size: 24px;
    font-weight: 600; /* Đậm hơn một chút */
    color: #1a253c; /* Màu tối, không phải đen kịt */
    margin-bottom: 25px;
}

/* --- Nút Google (Quan trọng nhất) --- */
.aipg-google-login-btn {
    background-color: #ffffff !important; /* Nền trắng */
    color: #333 !important; /* Chữ màu xám đậm */
    border: 1px solid #cdd3d8 !important; /* Viền xám nhạt */
    font-weight: 500 !important;
    width: 100%;
    padding: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease-in-out;
}
.aipg-google-login-btn:hover {
    border-color: #b5bcc2 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- Dải phân cách "HOẶC" --- */
.aipg-social-login-divider {
    margin: 25px 0 !important; /* Tăng khoảng cách */
}
.aipg-social-login-divider span {
    font-size: 12px;
    font-weight: 600;
    color: #9aa5b1;
    background-color: #fff;
    padding: 0 15px;
}
.aipg-social-login-divider::before, .aipg-social-login-divider::after {
    border-color: #e5e7eb; /* Đường kẻ nhạt hơn */
}

/* --- Form đăng nhập thủ công --- */
.aipg-manual-login-text {
    display: none; /* Ẩn dòng text này đi cho gọn */
}

.aipg-form label {
    font-weight: 600;
    font-size: 14px;
    color: #3c434a;
}

.aipg-form input[type="text"],
.aipg-form input[type="password"] {
    padding: 12px 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px; /* Bo tròn hơn */
    margin-top: 8px; /* Thêm khoảng cách với label */
    transition: all 0.2s ease;
}

.aipg-form input[type="text"]:focus,
.aipg-form input[type="password"]:focus {
    border-color: var(--aipg-primary-color);
    box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15);
}

/* --- Nút đăng nhập thủ công --- */
.aipg-form button[type="submit"] {
    background-color: var(--aipg-primary-color);
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    margin-top: 10px; /* Thêm khoảng cách với ô mật khẩu */
    transition: all 0.2s ease-in-out;
}

.aipg-form button[type="submit"]:hover {
    background-color: var(--aipg-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 115, 230, 0.2);
}
/* === [Tinh chỉnh] Giao diện Popup Đăng nhập === */

/* 1. Cải thiện nút Đóng (X) */
.aipg-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%; /* Bo tròn nút */
    background-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.aipg-popup-close:hover {
    background-color: #f1f1f1; /* Thêm nền khi hover */
    color: #333;
}

/* 2. Tăng khoảng cách cho nút Đăng nhập chính */
.aipg-form button[type="submit"] {
    margin-top: 20px; /* Tăng khoảng cách từ 10px lên 20px */
}
/* === [Nâng cấp] Đồng bộ hóa style cho các nút bấm chính === */

/* Định nghĩa style chung cho các nút chính trong bộ công cụ VEO.
  Bao gồm các nút: Phân tích & Gợi ý, Tạo Lời Thoại, Cập nhật Lời thoại,
  Tạo bản nháp, và các nút Viết lại.
*/
#aipg-brainstorm-veo-btn,
#aipg-generate-dialogue-btn,
#aipg-generate-script-scene-btn,
#aipg-update-dialogue-default-btn,
#aipg-update-dialogue-advanced-btn,
.aipg-rewrite-actions-default .aipg-rewrite-btn-main {
    background-color: var(--aipg-primary-color) !important; /* Dùng màu xanh dương chính */
    color: white !important;
    border: none !important;
    border-radius: 8px !important; /* Bo tròn nhẹ */
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase; /* In hoa cho đồng bộ */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* --- Style khi di chuột qua --- */
#aipg-brainstorm-veo-btn:hover:not(:disabled),
#aipg-generate-dialogue-btn:hover:not(:disabled),
#aipg-generate-script-scene-btn:hover:not(:disabled),
#aipg-update-dialogue-default-btn:hover:not(:disabled),
#aipg-update-dialogue-advanced-btn:hover:not(:disabled),
.aipg-rewrite-actions-default .aipg-rewrite-btn-main:hover:not(:disabled) {
    background-color: var(--aipg-primary-hover) !important; /* Màu xanh đậm hơn */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}

/* --- Style khi đang xử lý (bị vô hiệu hóa) --- */
#aipg-brainstorm-veo-btn:disabled,
#aipg-generate-dialogue-btn:disabled,
#aipg-generate-script-scene-btn:disabled,
#aipg-update-dialogue-default-btn:disabled,
#aipg-update-dialogue-advanced-btn:disabled,
.aipg-rewrite-actions-default .aipg-rewrite-btn-main:disabled {
    background-color: #9ca3af !important;
    transform: none;
    box-shadow: none;
}

/* --- Tinh chỉnh riêng cho các nút "AI VIẾT" / "VIẾT LẠI" nhỏ hơn --- */
.aipg-rewrite-actions-default .aipg-rewrite-btn-main {
    padding: 10px 15px !important;
    font-size: 14px !important;
    flex-shrink: 0; /* Ngăn các nút này bị co lại */
}
/* === History Item Rename Styles === */
.history-card-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}
.history-card-title {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.2s;
}
.history-card-title:hover {
    border-bottom-color: #0073e6;
}
.history-title-edit {
    font-weight: 600;
    padding: 2px 5px;
    border: 1px solid #0073e6;
    border-radius: 4px;
    width: 80%; /* Giới hạn độ rộng */
}
/* === Nâng cấp: Nút và Popup Bảng giá === */

/* Nút Nâng cấp trên menu */
.aipg-upgrade-btn {
    background-color: #ffc107 !important;
    color: #333 !important;
    border-radius: 20px !important;
    font-weight: bold !important;
}
.aipg-upgrade-btn:hover {
    background-color: #ffca2c !important;
}

/* Tùy chỉnh popup bảng giá */
.aipg-pricing-popup-content {
    max-width: 850px !important;
    padding: 0 !important;
}
.aipg-pricing-popup-content .aipg-popup-header {
    text-align: center;
    padding: 30px 20px;
    border-bottom: none;
}
.aipg-pricing-popup-content .aipg-popup-header h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

/* Bảng giá */
.aipg-pricing-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0 30px 30px 30px;
}
.aipg-pricing-column {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}
.aipg-pricing-column.is-featured {
    border: 2px solid var(--aipg-primary-color);
    transform: scale(1.05);
    z-index: 1;
}
.aipg-pricing-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}
.aipg-pricing-header h4 {
    margin: 0 0 5px 0;
    font-size: 20px;
}
.aipg-pricing-features {
    padding: 20px;
    list-style: none;
    margin: 0;
    flex-grow: 1;
}
.aipg-pricing-features li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}
.aipg-pricing-features li::before {
    content: '✓';
    color: var(--aipg-success-color);
    position: absolute;
    left: 0;
}
.aipg-pricing-features li del {
    color: #999;
}
.aipg-pricing-features li del::before {
    content: '✗';
    color: var(--aipg-error-color);
}
.aipg-pricing-footer {
    padding: 20px;
    text-align: center;
    margin-top: auto;
}
.aipg-pricing-footer .button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
}

/* Responsive cho bảng giá */
@media screen and (max-width: 800px) {
    .aipg-pricing-table {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .aipg-pricing-column.is-featured {
        transform: none;
    }
}
/* === [Nâng cấp] CSS cho Lớp phủ khóa tính năng === */
.aipg-veo-v4-container.is-locked {
    position: relative; /* Bắt buộc để lớp phủ định vị đúng */
}

/* Làm mờ và vô hiệu hóa nội dung bên dưới */
.is-locked > *:not(.aipg-locked-overlay) {
    filter: blur(5px);
    pointer-events: none; /* Ngăn người dùng click vào các nút bên dưới */

}

/* Lớp phủ */
.aipg-locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 12px; /* Bo góc theo container cha */
}

.aipg-locked-content {
    padding: 20px;
}

.aipg-locked-icon {
    font-size: 48px;
}

.aipg-locked-content h3 {
    font-size: 22px;
    color: var(--aipg-text-dark);
    margin-top: 15px;
}

.aipg-locked-content p {
    font-size: 16px;
    color: var(--aipg-text-light);
    max-width: 400px;
    margin: 10px auto 25px auto;
}

.aipg-locked-content .button {
    font-size: 16px;
    font-weight: bold;
    padding: 12px 25px;
}
/* === [NÂNG CẤP V5] Giao diện Popup Bảng giá Chuyên nghiệp === */
.aipg-pricing-popup-content-v5 {
    max-width: 980px !important;
    width: 95% !important;
}
.aipg-pricing-popup-content-v5 .aipg-popup-header {
    text-align: center;
    padding: 25px 20px 15px 20px;
}
.aipg-pricing-popup-content-v5 .aipg-popup-header h3 {
    font-size: 24px; margin-bottom: 5px;
}
.aipg-pricing-popup-content-v5 .aipg-popup-header p {
    color: var(--aipg-text-light); margin-top: 0; font-size: 16px;
}
.aipg-pricing-table-wrapper-v3 {
    padding: 25px;
}
.aipg-pricing-grid {
    display: flex;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}
.aipg-plan-col, .aipg-feature-header-col {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.aipg-feature-header-col {
    flex-basis: 30%; /* Cột tính năng rộng hơn */
    flex-shrink: 0;
}
.aipg-plan-col {
    flex-basis: 17.5%; /* 4 cột gói cước */
    border-left: 1px solid #e5e7eb;
}
.aipg-plan-cell {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 65px; /* Đồng bộ chiều cao các hàng */
    border-bottom: 1px solid #e5e7eb;
}
.aipg-plan-cell:last-child {
    border-bottom: none;
}
.aipg-plan-cell.header {
    font-size: 16px;
    font-weight: 600;
    flex-direction: column;
    gap: 4px;
    min-height: 80px;
}
.aipg-feature-header-col .aipg-plan-cell {
    justify-content: flex-start;
    font-weight: 500;
}
.aipg-feature-header-col .aipg-plan-cell.header {
    font-size: 18px;
    font-weight: bold;
}
.plan-desc {
    font-size: 13px;
    font-weight: normal;
    color: var(--aipg-text-light);
}
.aipg-plan-cell .aipg-check {
    color: var(--aipg-success-color);
    font-weight: bold;
    font-size: 20px;
}
.aipg-plan-cell.price {
    font-weight: bold;
    font-size: 15px;
}
.aipg-plan-cell.action {
    background-color: #f9fafb;
    padding: 20px 16px;
}

/* Highlight Gói được đề xuất */
.aipg-plan-col.is-recommended {
    background-color: #f0f7ff;
}
.aipg-plan-col.is-recommended .header {
    background-color: var(--aipg-primary-color);
    color: white;
}
.aipg-plan-col.is-recommended .header .plan-desc {
    color: #d1d5db;
}
.aipg-plan-col.is-recommended .action .button-primary {
    box-shadow: 0 4px 15px rgba(0, 115, 230, 0.2);
}

/* Style cho nút */
.aipg-plan-cell.action .button {
    width: 100%;
    font-weight: bold;
    border-radius: 6px;
}
.aipg-plan-cell.action .is-current-btn {
    background-color: #4caf50;
    border-color: #4caf50;
    color: white;
}

/* Responsive */
@media screen and (max-width: 960px) {
    .aipg-pricing-popup-content-v5 {
        width: 98%;
    }
    .aipg-pricing-grid {
        display: block;
        border: none;
    }
    .aipg-feature-header-col { display: none; } /* Ẩn cột tính năng */
    .aipg-plan-col {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        margin-bottom: 20px;
    }
    .aipg-plan-col.is-recommended {
         border: 2px solid var(--aipg-primary-color);
    }
    .aipg-plan-cell {
        justify-content: space-between;
    }
    /* Thêm lại tên tính năng cho từng dòng */
    .aipg-plan-cell:before {
        content: attr(data-feature-name);
        font-weight: 500;
        text-align: left;
    }
    .aipg-plan-cell.header { display: flex; }
    .aipg-plan-cell.header:before { content: none; }
}
/* Style cho mô tả chi tiết tính năng */
.aipg-feature-header-col .aipg-plan-cell small {
    display: block;
    font-weight: normal;
    color: #6b7280; /* Màu xám nhạt */
    font-size: 12px;
    margin-top: 4px;
}
/* === [MỚI] Styles cho Công cụ Gợi ý Từ khóa === */
.aipg-suggester-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
#aipg-suggester-keyword {
    flex-grow: 1;
}
.aipg-suggester-results-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background-color: #f9fafb;
    border-radius: 8px;
    min-height: 50px;
}
/* === [NÂNG CẤP] Giao diện Công cụ Gợi ý dạng "Thẻ" (Tags) === */

.aipg-suggestion-category {
    font-size: 14px;
    font-weight: bold;
    color: var(--aipg-text-dark);
    width: 100%;
    margin-top: 15px;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e7eb;
}
.aipg-suggestion-category:first-child {
    margin-top: 0;
}

.aipg-suggestion-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.aipg-suggestion-tag {
    display: inline-block;
    padding: 5px 12px;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #374151;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aipg-suggestion-tag:hover {
    background-color: var(--aipg-primary-color);
    border-color: var(--aipg-primary-hover);
    color: white;
    transform: translateY(-2px);
}

/* Style riêng cho thẻ "Đột phá" */
.aipg-suggestion-tag.is-breakthrough {
    width: 100%; /* Chiếm toàn bộ chiều rộng */
    white-space: normal;
    text-align: left;
    padding: 12px 18px;
    font-size: 14px;
    line-height: 1.6;
    background-color: #eaf4ff;
    border-color: #b8d6ff;
    color: #005bbd;
    font-weight: 500;
}
.aipg-suggestion-tag.is-breakthrough:hover {
    background-color: #d1e6ff;
    border-color: #9ac2ff;
}

/* Style cho danh sách của Phân tích đối thủ */
.aipg-competitor-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 5px;
    color: var(--aipg-text-light);
}
.aipg-competitor-list li {
    margin-bottom: 8px;
}
/* === [Cập nhật] Style cho nút Tối ưu & Chuẩn hóa === */

#aipg-optimize-script-btn {
    background-color: var(--aipg-primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease-in-out;
}

#aipg-optimize-script-btn:hover:not(:disabled) {
    background-color: var(--aipg-primary-hover) !important;
    transform: translateY(-2px);
}

/* Ẩn spinner mặc định */
#aipg-optimize-script-btn .aipg-spinner {
    display: none;
    width: 16px; 
    height: 16px; 
    border: 2px solid rgba(255, 255, 255, 0.5); 
    border-radius: 50%; 
    border-top-color: #fff; 
    animation: aipg-btn-spin 1s linear infinite; 
}

/* Căn chỉnh icon sparkles */
#aipg-optimize-script-btn .aipg-btn-text .dashicons {
    margin-right: 5px;
    line-height: inherit;
    font-size: 18px;
}
/* === [NÂNG CẤP GIAO DIỆN] Tab Hồ sơ Nhân vật === */

/* 1. Style cho từng dòng trong danh sách */
#aipg-main-characters-list li {
    display: flex;
    align-items: center;
    gap: 12px; /* Khoảng cách giữa các phần tử */
    padding: 12px 10px;
    border-bottom: 1px solid var(--aipg-border-color);
    transition: background-color 0.2s ease-in-out;
}

#aipg-main-characters-list li:last-child {
    border-bottom: none;
}

/* Hiệu ứng khi di chuột qua một dòng */
#aipg-main-characters-list li:hover {
    background-color: #f9fafb;
}

/* 2. Tên nhân vật chiếm phần lớn không gian */
#aipg-main-characters-list .char-name {
    flex-grow: 1; /* Cho phép tên nhân vật co giãn */
    font-weight: 500;
    color: var(--aipg-text-dark);
    cursor: pointer; /* Biểu thị rằng có thể click vào tên */
}

/* 3. Style cho checkbox to và rõ hơn */
#aipg-main-characters-list .aipg-char-checkbox {
    transform: scale(1.2);
    margin-right: 5px;
    flex-shrink: 0; /* Không cho checkbox bị co lại */
}

/* 4. Khu vực các nút hành động (Sửa, Xóa) */
#aipg-main-characters-list .char-actions {
    display: flex;
    gap: 8px;
    opacity: 0; /* Mặc định ẩn đi */
    transition: opacity 0.2s ease-in-out;
    flex-shrink: 0; /* Không cho các nút bị co lại */
}

/* Hiện các nút khi di chuột qua dòng */
#aipg-main-characters-list li:hover .char-actions {
    opacity: 1;
}

/* 5. Style cho từng nút hành động (Sửa, Xóa) */
#aipg-main-characters-list .char-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aipg-text-light);
    padding: 6px;
    border-radius: 50%; /* Bo tròn nút */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#aipg-main-characters-list .char-action-btn .dashicons {
    font-size: 18px;
}

/* Hiệu ứng khi di chuột qua nút */
#aipg-main-characters-list .char-action-btn:hover {
    background-color: #e5e7eb;
    color: var(--aipg-text-dark);
}

/* Màu riêng cho nút Xóa khi hover */
#aipg-main-characters-list .char-delete-btn:hover {
    background-color: #fee2e2;
    color: var(--aipg-error-color);
}

/* 6. Style cho thông báo khi không có nhân vật nào */
#aipg-main-characters-list .no-characters {
    text-align: center;
    padding: 25px;
    color: var(--aipg-text-light);
    font-style: italic;
}
/* === [TINH CHỈNH] Giao diện nút Sửa/Xóa trong danh sách Nhân vật === */

/* Bọc các nút hành động vào một container để dễ định vị */
#aipg-main-characters-list .char-actions {
    position: relative; 
}

/* Style cho tooltip "Xóa" */
.aipg-delete-tooltip {
    display: none; /* Mặc định ẩn */
    position: absolute;
    right: 100%; /* Nằm bên trái nút thùng rác */
    top: 50%;
    transform: translateY(-50%);
    background-color: #d9534f; /* Màu đỏ */
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-right: 8px;
    white-space: nowrap;
    z-index: 10;
}

/* Hiển thị tooltip khi hover vào nút xóa */
#aipg-main-characters-list .char-delete-btn:hover + .aipg-delete-tooltip {
    display: block;
}
/* === [NÂNG CẤP] Giao diện Tìm kiếm & Hành động cho Tab Hồ sơ Nhân vật === */

/* 1. Toolbar chứa ô tìm kiếm và nút cập nhật */
.aipg-character-toolbar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

/* 2. Wrapper cho ô tìm kiếm (bao gồm icon) */
.aipg-character-search-wrapper {
    position: relative;
    flex-grow: 1; /* Cho phép ô tìm kiếm co giãn */
}

.aipg-character-search-wrapper .dashicons {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #9ca3af; /* Màu xám cho icon */
    pointer-events: none; /* Icon không thể click */
}

/* 3. Ô input tìm kiếm */
#aipg-character-search-input {
    width: 100%;
    padding: 10px 15px 10px 40px; /* Thêm padding bên trái cho icon */
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

#aipg-character-search-input:focus {
    border-color: var(--aipg-primary-color);
    box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15);
    outline: none;
}

/* 4. Khu vực hành động ngữ cảnh */
.aipg-context-actions-wrapper {
    background-color: #eef5ff; /* Nền xanh nhạt */
    border: 1px solid #b8d6ff;
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: aipg-fade-in 0.3s ease-out;
}

@keyframes aipg-fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#aipg-character-selection-count {
    font-weight: 600;
    color: var(--aipg-secondary-color);
}

.aipg-action-buttons {
    display: flex;
    gap: 10px;
}

.aipg-action-buttons .button {
    background-color: #ffffff;
    border: 1px solid var(--aipg-border-color);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.aipg-action-buttons .button:hover {
    background-color: #f9fafb;
    border-color: #b5bcc2;
    color: var(--aipg-primary-color);
}
/* === [NÂNG CẤP GIAO DIỆN V2] Tab Nhân vật Nhất quán === */

/* 1. Style cho container chứa các cảnh */
#aipg-consistent-scenes-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 2. Style cho từng thẻ (card) của một cảnh */
.aipg-scene-item {
    background-color: #ffffff;
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
    transition: box-shadow 0.2s ease;
}

.aipg-scene-item:focus-within {
    border-color: var(--aipg-primary-color);
    box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.1);
}

/* 3. Style cho các ô input bên trong thẻ */
.aipg-scene-item .aipg-scene-title,
.aipg-scene-item .aipg-scene-description {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.aipg-scene-item .aipg-scene-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.aipg-scene-item .aipg-scene-description {
    resize: vertical;
    min-height: 80px;
}

/* 4. Style cho nút Xóa (X) - Chuyên nghiệp hơn */
.aipg-scene-item .aipg-remove-scene-btn {
    position: absolute;
    top: -12px;  /* Đưa nút lên cao hơn một chút */
    right: -12px; /* Đưa nút ra ngoài một chút */
    background-color: #374151; /* Màu xám đậm */
    color: white;
    border: 2px solid white; /* Tạo viền trắng xung quanh */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 24px; /* Căn giữa dấu X */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.aipg-scene-item .aipg-remove-scene-btn:hover {
    background-color: var(--aipg-error-color); /* Chuyển sang màu đỏ khi hover */
    transform: scale(1.15); /* Phóng to nhẹ */
}

/* 5. Style cho nút "+ Thêm Cảnh" - Tinh tế hơn */
#aipg-add-scene-btn {
    width: 100%;
    padding: 12px;
    font-weight: 600;
    font-size: 15px;
    border: 2px dashed var(--aipg-border-color);
    background-color: transparent;
    color: var(--aipg-text-light);
    transition: all 0.2s ease;
}

#aipg-add-scene-btn:hover {
    border-color: var(--aipg-primary-color);
    background-color: #f0f7ff;
    color: var(--aipg-primary-color);
}

/* 6. Style cho nút "Tạo Prompt" chính - Nổi bật và đồng bộ */
#aipg-generate-consistent-prompts-btn {
    background-image: linear-gradient(to right, #4f46e5, #7c3aed); /* Gradient tím-xanh */
    color: white !important;
    border: none !important;
    width: 100%;
    margin-top: 20px;
    padding: 15px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.2);
    transition: all 0.3s ease;
}

#aipg-generate-consistent-prompts-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3);
}
.aipg-input-with-button {
    display: flex;
    gap: 10px;
    align-items: center;
}
.aipg-input-with-button select {
    flex-grow: 1;
}
.aipg-input-with-button .aipg-refresh-char-list-btn .dashicons {
    animation: none;
}
.aipg-input-with-button .aipg-refresh-char-list-btn.is-loading .dashicons {
    animation: rotation 1.5s infinite linear;
}
.aipg-scene-item {
    padding-bottom: 15px; /* Thêm khoảng đệm dưới */
}
.aipg-scene-assistant {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e0e0e0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.aipg-assistant-keyword {
    flex-grow: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}
.aipg-assistant-buttons {
    display: flex;
    gap: 5px;
}
.aipg-assistant-btn.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
}
/* --- Styles for Inline Scene Suggestions --- */
.aipg-scene-suggestion-results {
    margin-top: 15px;
    padding: 15px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.aipg-suggestion-category h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--aipg-text-dark);
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 5px;
}
.aipg-suggestion-category:last-child {
    margin-bottom: 0;
}
.aipg-suggestion-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.aipg-suggestion-tag {
    display: inline-block;
    padding: 5px 12px;
    background-color: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.aipg-suggestion-tag:hover {
    background-color: var(--aipg-primary-color);
    border-color: var(--aipg-primary-hover);
    color: white;
    transform: translateY(-2px);
}
/* Tạo kiểu cho khu vực chứa gợi ý */
.aipg-scene-suggestion-results {
    position: relative; /* Bắt buộc phải có để định vị nút con */
    padding-top: 25px; /* Thêm khoảng trống để nút X không đè lên nội dung */
}

/* Tạo kiểu cho chính nút X */
.aipg-close-suggestions-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
    border-radius: 50%; /* Bo tròn */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    padding: 0;
}

.aipg-close-suggestions-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}
/* Container chính cho khu vực chọn nhân vật */
.aipg-char-selection-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

/* Ô tìm kiếm */
.aipg-char-search-wrapper {
    position: relative;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.aipg-char-search-wrapper .dashicons {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #aaa;
}

.aipg-char-search-wrapper input {
    width: 100%;
    padding: 8px 8px 8px 30px; /* Thêm không gian cho icon */
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: none;
}

/* Danh sách nhân vật có thể cuộn */
.aipg-char-list-scroll {
    max-height: 180px;
    overflow-y: auto;
    padding: 8px;
    margin: 0;
}

/* Kiểu cho từng dòng trong danh sách */
.aipg-char-list-scroll li {
    list-style: none;
    margin: 0;
    padding: 6px 4px;
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.aipg-char-list-scroll li:hover {
    background-color: #f0f7ff;
}

.aipg-char-list-scroll li.no-results {
    color: #888;
    font-style: italic;
}

.aipg-char-list-scroll input[type="checkbox"] {
    margin-right: 10px;
}

.aipg-char-list-scroll label {
    font-weight: 500;
    cursor: pointer;
}

/* Phần chân của danh sách */
.aipg-char-list-footer {
    padding: 8px;
    text-align: right;
    border-top: 1px solid #eee;
    background-color: #f9f9f9;
}
.aipg-suggestion-card {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.aipg-suggestion-card h4 {
    margin-top: 0;
    font-size: 14px;
    color: #1d2327;
}

.aipg-suggestion-strategy {
    font-style: italic;
    color: #50575e;
    background-color: #f0f6fc;
    border-left: 3px solid #72aee6;
    padding: 8px 12px;
    margin: 10px 0;
}

.aipg-suggestion-tech {
    font-size: 12px;
    color: #50575e;
}

.aipg-suggestion-tech code {
    background-color: #e7e7e7;
    padding: 3px 6px;
    border-radius: 3px;
    color: #d63384;
    cursor: pointer;
    display: inline-block;
    margin-top: 5px;
}
.aipg-suggestion-tech code:hover {
    background-color: #dcdcdc;
}

.aipg-suggestion-strategy .dashicons,
.aipg-suggestion-tech .dashicons {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 5px;
}
/* ==========================================================================
   [AIPG] NÂNG CẤP GIAO DIỆN CÁC NÚT BẤM
   ========================================================================== */

/* --- 1. Thiết lập chung cho các nút có icon --- */
.aipg-pro-container .button .dashicons,
.aipg-pro-container .button .icon-copy {
    margin-right: 6px; /* Tạo khoảng cách giữa icon và chữ */
    font-size: 18px;   /* Kích thước icon lớn hơn một chút */
    line-height: 1;    /* Căn chỉnh icon theo chiều dọc */
    vertical-align: middle;
}

/* --- 2. Nút hành động chính (Màu đỏ) --- */
/* Áp dụng cho nút "Tải lại danh sách", "Cập nhật danh sách", "Tìm gợi ý" */
.aipg-pro-container .aipg-btn-refresh-primary,
.aipg-pro-container .aipg-scene-assistant .button-primary {
    background-color: #e53935 !important; /* Màu đỏ chính */
    color: #ffffff !important;
    border: 1px solid #d32f2f !important;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    display: inline-flex; /* Giúp căn chỉnh icon và chữ */
    align-items: center;
    justify-content: center;
}

.aipg-pro-container .aipg-btn-refresh-primary:hover,
.aipg-pro-container .aipg-scene-assistant .button-primary:hover {
    background-color: #d32f2f !important; /* Màu đỏ đậm hơn khi hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px); /* Hiệu ứng nhấc lên nhẹ */
}


/* --- 3. Nút hành động phụ (Màu xám/viền) --- */
/* Áp dụng cho nút "+ Thêm Cảnh" */
#aipg-add-scene-btn {
    background-color: #ffffff !important;
    color: #444 !important;
    border: 2px dashed #d0d0d0 !important;
    border-radius: 8px;
    font-weight: 600;
    width: 100%;
    padding: 12px;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.5px;
}

#aipg-add-scene-btn:hover {
    background-color: #f7f7f7 !important;
    border-color: #b0b0b0 !important;
    color: #000 !important;
}

/* --- 4. Căn chỉnh lại bố cục cho khu vực chọn nhân vật và nút tải lại --- */
.aipg-char-list-footer {
    padding-top: 10px;
    border-top: 1px solid #eee;
    text-align: right; /* Đẩy nút sang phải */
}

/* Thay đổi màu sắc cho nút nhỏ hơn */
.aipg-char-list-footer .button-secondary {
    background-color: #f0f0f1 !important;
    border-color: #e0e0e0 !important;
    color: #50575e !important;
    font-weight: 500;
}

.aipg-char-list-footer .button-secondary:hover {
    background-color: #e0e0e0 !important;
    color: #000 !important;
}
/* === [MỚI] Giao diện Tab Hoạt hình AI === */
.aipg-animation-workspace {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 20px;
}

/* Panel nhập liệu bên trái */
.aipg-animation-input-panel {
    display: flex;
    flex-direction: column;
    gap: 20px; /* <-- TĂNG KHOẢNG CÁCH giữa các Bước */
}

/* Panel kết quả bên phải */
.aipg-animation-output-panel {
    background-color: var(--aipg-bg-light);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--aipg-border-color);
    position: sticky; /* <-- THÊM MỚI: Giúp khu vực kết quả đứng yên khi cuộn */
    top: 50px;       /* <-- THÊM MỚI: Vị trí bắt đầu dính */
}
/* === [MỚI] Style cho các thẻ gợi ý (Tags) === */
.aipg-tags-group {
    margin-bottom: 15px;
}
.aipg-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.aipg-tag-chip {
    display: inline-block;
    padding: 5px 12px;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #374151;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aipg-tag-chip:hover {
    background-color: #e5e7eb;
    border-color: #d1d5db;
}

/* Style cho thẻ KHI ĐÃ ĐƯỢC CHỌN */
.aipg-tag-chip.selected {
    background-color: var(--aipg-primary-color);
    border-color: var(--aipg-primary-hover);
    color: white;
    font-weight: 500;
    cursor: default;
}
/* === [CẬP NHẬT] Style cho Công cụ Gợi ý Sổ ra === */

/* Wrapper chung, giờ sẽ căn chỉnh nút bấm sang phải */
.aipg-inline-suggester-wrapper {
    text-align: right;
    margin-top: -10px; /* Kéo lên một chút cho gần ô ý tưởng */
    margin-bottom: 15px;
}

/* Nút bấm để mở/đóng, giờ là một link có icon */
#aipg-toggle-concept-suggester-btn {
    display: inline-flex; /* Chỉ chiếm chiều rộng vừa đủ */
    align-items: center;
    gap: 4px; /* Khoảng cách giữa icon và chữ */
    background: none;
    border: none;
    color: var(--aipg-primary-color);
    font-weight: 500;
    cursor: pointer;
    font-size: 13px;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

#aipg-toggle-concept-suggester-btn:hover {
    text-decoration: none; /* Bỏ gạch chân khi hover */
    background-color: #eef5ff; /* Thêm nền xanh rất nhạt */
}

/* Panel nội dung sổ ra (giữ nguyên nhưng thêm một chút tinh chỉnh) */
#aipg-concept-suggester-panel {
    padding: 20px;
    background-color: #f0f7ff; /* Dùng màu xanh nhạt hơn */
    border: 1px solid #b3d7ff;  /* Viền xanh nhạt */
    border-radius: 8px;
    margin-top: 8px;
    text-align: left; /* Căn lề trái lại cho nội dung bên trong */
}

/* Giao diện bên trong panel (giữ nguyên) */
#aipg-inline-concept-results {
    max-height: 250px;
    overflow-y: auto;
    padding: 15px;
    margin-top: 15px;
    border-top: 1px solid var(--aipg-border-color);
    background-color: var(--aipg-bg-white);
    border-radius: 6px;
}
/* === [CẬP NHẬT] Style cho Công cụ Gợi ý Sổ ra === */

/* Wrapper chung, giờ sẽ được tích hợp gọn gàng hơn */
.aipg-inline-suggester-wrapper {
    margin-top: 8px; /* Giảm khoảng cách với ô textarea ở trên */
    margin-bottom: 15px;
}

/* Nút bấm để mở/đóng, đổi thành dạng link tinh tế */
#aipg-toggle-template-suggester-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--aipg-text-light); /* Màu chữ xám nhạt */
    font-weight: 500;
    cursor: pointer;
    font-size: 13px;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: 100%; /* Chiếm hết chiều rộng */
    justify-content: flex-start; /* Căn lề trái */
    font-style: italic; /* In nghiêng cho giống chữ gợi ý */
}

#aipg-toggle-template-suggester-btn:hover {
    color: var(--aipg-primary-color); /* Đổi sang màu chính khi hover */
    background-color: #f9fafb;
}

/* Panel nội dung sổ ra, thiết kế lại cho giống một "cái giếng" (well) */
#aipg-template-suggester-panel {
    padding: 20px;
    background-color: #f9fafb; /* Nền xám rất nhạt */
    border: 1px solid #e5e7eb;  /* Viền xám nhạt */
    border-radius: 8px;
    margin-top: 10px;
    text-align: left;
}

/* Giao diện bên trong panel */
#aipg-template-suggester-panel p {
    margin-top: 0;
    font-size: 14px;
    color: var(--aipg-text-light);
}
#aipg-inline-template-results {
    max-height: 250px;
    overflow-y: auto;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid var(--aipg-border-color);
}
/* -- BẮT ĐẦU CSS CHO NÚT CHỌN CHẾ ĐỘ SERIES -- */

/* Container chính chứa 2 nút */
.aipg-mode-selector {
    display: flex; /* Sắp xếp 2 nút nằm ngang */
    gap: 20px;     /* Khoảng cách giữa 2 nút */
    margin-top: 10px;
}

/* Kiểu dáng cho mỗi nút */
.aipg-mode-btn {
    flex: 1; /* Giúp 2 nút có chiều rộng bằng nhau */
    padding: 20px;
    border: 2px solid #ccd0d4; /* Viền xám nhạt mặc định */
    border-radius: 8px;       /* Bo góc mềm mại */
    background-color: #f6f7f7; /* Nền xám rất nhạt */
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease-in-out; /* Hiệu ứng chuyển động mượt mà */
    display: flex;
    flex-direction: column; /* Sắp xếp nội dung bên trong theo chiều dọc */
    gap: 5px; /* Khoảng cách giữa các dòng chữ */
}

/* Hiệu ứng khi di chuột vào nút */
.aipg-mode-btn:hover {
    border-color: #0073e6; /* Đổi màu viền thành màu xanh dương */
    box-shadow: 0 4px 12px rgba(0, 115, 230, 0.1); /* Tạo bóng mờ */
    transform: translateY(-3px); /* Nút sẽ "nổi" lên một chút */
}

/* Kiểu dáng khi nút được chọn (active) */
.aipg-mode-btn.active {
    border-color: #0073e6;
    background-color: #f0f7ff; /* Nền xanh dương rất nhạt */
    box-shadow: 0 4px 12px rgba(0, 115, 230, 0.1);
    transform: translateY(-3px);
}

/* Kiểu dáng cho icon */
.aipg-mode-btn .dashicons {
    font-size: 24px;
    color: #50575e;
    margin-bottom: 8px;
}

/* Đổi màu icon khi nút được chọn */
.aipg-mode-btn.active .dashicons {
    color: #0073e6;
}

/* Kiểu dáng cho tiêu đề chính */
.aipg-mode-btn strong {
    font-size: 16px;
    color: #1d2327;
}

/* Kiểu dáng cho dòng mô tả nhỏ */
.aipg-mode-btn small {
    font-size: 13px;
    color: #50575e;
    line-height: 1.4;
}

/* -- KẾT THÚC CSS -- */
/* -- CSS CHO TRẠNG THÁI VÔ HIỆU HÓA CỦA NHÂN VẬT CHÍNH -- */

#aipg-series-characters-list li.is-disabled {
    opacity: 0.6; /* Làm mờ cả dòng đi một chút */
}

#aipg-series-characters-list li.is-disabled label {
    color: #a0a5aa; /* Đổi màu chữ thành xám */
    cursor: not-allowed; /* Đổi con trỏ chuột để báo hiệu không thể nhấp */
}
/* --- NÂNG CẤP GIAO DIỆN TRỢ LÝ KỊCH BẢN AI --- */

/* 1. Nút bấm "Trợ lý Kịch bản AI" */
.aipg-toggle-assistant-btn {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    background-color: #f0f0f1; /* Màu nền xám nhạt */
    color: #1d2327;
    border: 1px solid #dcdcde;
    justify-content: center;
    font-weight: 600;
}
.aipg-toggle-assistant-btn .dashicons {
    color: #c8221f; /* Màu đỏ cho icon */
    font-size: 20px;
    line-height: 1.2;
}
.aipg-toggle-assistant-btn:hover {
    background-color: #e8e8e9;
    border-color: #b7b9bb;
}

/* 2. Panel Trợ lý xổ ra */
.aipg-scene-assistant-panel {
    padding: 20px;
    background-color: #f6f7f7;
    border: 1px solid #dcdcde;
    border-top: none; /* Bỏ viền trên để liền mạch với nút bấm */
    border-radius: 0 0 6px 6px; /* Bo góc chỉ ở dưới */
    margin-bottom: 15px;
}
.aipg-scene-assistant-panel p {
    margin-top: 0;
    font-style: italic;
    color: #50575e;
}

/* 3. Ô nhập từ khóa và nút "Lấy Gợi ý" */
.aipg-scene-assistant-panel .aipg-form-group-inline {
    display: flex;
    gap: 10px;
}
.aipg-scene-assistant-panel .aipg-assistant-keyword {
    flex-grow: 1; /* Cho ô nhập từ khóa chiếm hết không gian thừa */
}
.aipg-scene-assistant-panel .aipg-get-assistant-suggestions-btn {
    background-color: #c8221f; /* Màu đỏ đồng bộ */
    border-color: #c8221f;
    color: #fff;
    font-weight: 600;
}
.aipg-scene-assistant-panel .aipg-get-assistant-suggestions-btn:hover {
    background-color: #af1e1b;
    border-color: #af1e1b;
}

/* 4. Khu vực kết quả và các thẻ gợi ý */
.aipg-assistant-results {
    margin-top: 20px;
}
.aipg-assistant-results h6 { /* Tiêu đề "Gợi ý Mô tả", "Gợi ý Lời thoại" */
    margin: 15px 0 8px 0;
    font-size: 13px;
    color: #1d2327;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid #dcdcde;
    padding-bottom: 5px;
}
.aipg-suggestion-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.aipg-suggestion-tag {
    display: inline-block;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 15px; /* Bo tròn như viên thuốc */
    font-size: 13px;
    color: #1d2327;
    cursor: pointer;
    transition: all 0.2s ease;
}
.aipg-suggestion-tag:hover {
    background-color: #f0f7ff;
    border-color: #0073e6;
    color: #0073e6;
}

/* --- NÂNG CẤP GIAO DIỆN CÁC NÚT MÀU ĐỎ --- */
#aipg-add-scene-btn-multi,
#aipg-get-series-variables-btn {
    background-color: #c8221f !important;
    border-color: #c8221f !important;
    color: #fff !important;
    font-weight: 600;
    justify-content: center;
    width: 100%;
    transition: background-color 0.2s ease;
}
#aipg-add-scene-btn-multi:hover,
#aipg-get-series-variables-btn:hover {
    background-color: #af1e1b !important;
    border-color: #af1e1b !important;
}

/* Tùy chỉnh riêng cho nút tạo danh sách biến số */
#aipg-get-series-variables-btn {
    width: auto; /* Thu hẹp lại để vừa với nội dung */
}
/* --- TỐI ƯU GIAO DIỆN CÁC NÚT BẤM VÀ INPUT --- */

/* 1. Container chứa 2 nút gợi ý biến số */
.aipg-inline-suggester-wrapper .aipg-main-form {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống dòng trên màn hình nhỏ */
    gap: 10px;
    align-items: center;
}

.aipg-inline-suggester-wrapper .aipg-main-form input.large-text {
    flex-grow: 1; /* Cho ô nhập liệu chiếm không gian thừa */
    min-width: 200px; /* Đặt chiều rộng tối thiểu */
}

/* 2. Style chung cho các nút trong khu vực này */
#aipg-get-variables-from-topic-btn,
#aipg-get-variables-from-script-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px; /* Bo tròn góc */
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
}

/* 3. Style cho nút Phụ (Gợi ý từ Chủ đề) */
#aipg-get-variables-from-topic-btn {
    background-color: #f6f7f7;
    border-color: #ccd0d4;
    color: #1d2327;
}

#aipg-get-variables-from-topic-btn:hover {
    background-color: #f0f0f1;
    border-color: #b7b9bb;
}

/* 4. Style cho nút Chính (Phân tích Kịch bản & Gợi ý) - MÀU XANH DƯƠNG */
#aipg-get-variables-from-script-btn {
    background-color: #0073e6; /* Màu xanh dương chủ đạo */
    border-color: #0073e6;
    color: #fff;
}

#aipg-get-variables-from-script-btn:hover {
    background-color: #005a9c;
    border-color: #005a9c;
}

/* 5. Style cho nút "Tạo Danh sách" cũ (nếu còn dùng) để đồng bộ */
#aipg-get-series-variables-btn {
    background-color: #c8221f !important;
    border-color: #c8221f !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
#aipg-get-series-variables-btn:hover {
    background-color: #af1e1b !important;
    border-color: #af1e1b !important;
}
/* Thêm vào cuối tệp aipg-style.css */

/* -- BẮT ĐẦU CSS CHO NÚT CHỌN CHẾ ĐỘ SERIES -- */

/* Container chính chứa các nút */
.aipg-mode-selector {
    display: grid; /* Sử dụng Grid Layout */
    grid-template-columns: repeat(3, 1fr); /* Tạo 3 cột bằng nhau */
    gap: 20px;     /* Khoảng cách giữa các nút */
    margin-top: 10px;
}

/* Kiểu dáng cho mỗi nút */
.aipg-mode-btn {
    flex: 1; /* Giúp 2 nút có chiều rộng bằng nhau */
    padding: 20px;
    border: 2px solid #ccd0d4; /* Viền xám nhạt mặc định */
    border-radius: 8px;       /* Bo góc mềm mại */
    background-color: #f6f7f7; /* Nền xám rất nhạt */
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease-in-out; /* Hiệu ứng chuyển động mượt mà */
    display: flex;
    flex-direction: column; /* Sắp xếp nội dung bên trong theo chiều dọc */
    gap: 5px; /* Khoảng cách giữa các dòng chữ */
}

/* Hiệu ứng khi di chuột vào nút */
.aipg-mode-btn:hover {
    border-color: #0073e6; /* Đổi màu viền thành màu xanh dương */
    box-shadow: 0 4px 12px rgba(0, 115, 230, 0.1); /* Tạo bóng mờ */
    transform: translateY(-3px); /* Nút sẽ "nổi" lên một chút */
}

/* Kiểu dáng khi nút được chọn (active) */
.aipg-mode-btn.active {
    border-color: #0073e6;
    background-color: #f0f7ff; /* Nền xanh dương rất nhạt */
    box-shadow: 0 4px 12px rgba(0, 115, 230, 0.1);
    transform: translateY(-3px);
}

/* Kiểu dáng cho icon */
.aipg-mode-btn .dashicons {
    font-size: 24px;
    color: #50575e;
    margin-bottom: 8px;
}

/* Đổi màu icon khi nút được chọn */
.aipg-mode-btn.active .dashicons {
    color: #0073e6;
}

/* Kiểu dáng cho tiêu đề chính */
.aipg-mode-btn strong {
    font-size: 16px;
    color: #1d2327;
}

/* Kiểu dáng cho dòng mô tả nhỏ */
.aipg-mode-btn small {
    font-size: 13px;
    color: #50575e;
    line-height: 1.4;
}

/* -- KẾT THÚC CSS -- */
/* === [NÂNG CẤP] Style cho nút AI Gợi ý vị trí Biến số === */
#aipg-suggest-variable-position-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f0f7ff; /* Nền xanh dương rất nhạt */
    color: #005a9c; /* Chữ màu xanh dương đậm */
    border: 1px solid #b3d7ff; /* Viền xanh nhạt */
    padding: 6px 12px;
    border-radius: 20px; /* Bo tròn để tạo hình viên thuốc */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

#aipg-suggest-variable-position-btn:hover {
    background-color: #dbeeff;
    border-color: #9ac2ff;
    transform: translateY(-2px); /* Hiệu ứng nhấc lên nhẹ khi hover */
    box-shadow: 0 4px 8px rgba(0, 115, 230, 0.1);
}

#aipg-suggest-variable-position-btn .dashicons {
    font-size: 16px;
}
/* === [NÂNG CẤP] Style cho các placeholder có thể nhấp === */
.aipg-insert-placeholder {
    cursor: pointer;
    border-bottom: 1px dashed #0073e6;
    transition: all 0.2s ease;
}

.aipg-insert-placeholder code {
    color: #0073e6;
    font-weight: bold;
}

.aipg-insert-placeholder:hover {
    background-color: #eaf4ff;
    border-bottom-style: solid;
}
/* === [NÂNG CẤP] Giao diện ô thoại động cho nhiều nhân vật === */
.aipg-scene-dialogue-container-multi {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các ô thoại */
    margin-top: 10px;
}

.aipg-dialogue-line-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.aipg-dialogue-line-wrapper label {
    font-weight: 500;
    font-size: 14px;
    color: #333;
}

.aipg-scene-dialogue-line {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    resize: vertical;
}
/* === [NÂNG CẤP] Style cho thẻ tên nhân vật trong phân cảnh === */
.aipg-scene-char-checkboxes-multi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Khoảng cách giữa các thẻ tên */
    padding-top: 5px;
}

.aipg-character-tag {
    background-color: #eef2f6; /* Màu nền xám nhạt */
    color: #374151; /* Màu chữ */
    padding: 4px 10px;
    border-radius: 12px; /* Bo tròn */
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}
/* === [MISE À NIVEAU] Style pour les boutons d'action principaux === */
#aipg-main-cast-character-btn,
#aipg-cast-group-btn {
    background-color: #d63638 !important; /* Couleur rouge principale */
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase; /* Texte en majuscules */
    letter-spacing: 0.5px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(214, 54, 56, 0.2);
}

#aipg-main-cast-character-btn:hover:not(:disabled),
#aipg-cast-group-btn:hover:not(:disabled) {
    background-color: #b22222 !important; /* Rouge plus foncé au survol */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(214, 54, 56, 0.3);
}

/* Style pour les boutons secondaires */
#aipg-add-group-member-btn {
    background-color: #6c757d !important; /* Couleur grise secondaire */
    border-color: #6c757d !important;
    color: white !important;
    font-weight: 500;
}
#aipg-add-group-member-btn:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}

/* === [MISE À NIVEAU] Style pour la liste des membres du groupe === */
.aipg-group-member-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aipg-group-member-item input {
    flex-grow: 1; /* Permet au champ de saisie de s'étendre */
}

.aipg-remove-group-member-btn {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #dc3545;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    line-height: 1;
}
.aipg-remove-group-member-btn:hover {
    background-color: #dc3545;
    color: white;
}
/* === [MỚI] Giao diện Trợ lý Sáng tạo Nhóm === */
#aipg-group-suggester-wrapper {
    background-color: #f0f7ff;
    border: 1px solid #b3d7ff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}
#aipg-group-suggestions-panel {
    margin-top: 15px;
    border-top: 1px solid #b3d7ff;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.aipg-suggestion-card {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.aipg-suggestion-card:hover {
    border-color: #0073e6;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.aipg-suggestion-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15px;
}
.aipg-suggestion-card ul {
    margin: 0 0 15px 20px;
    font-size: 14px;
    color: #555;
}
/* === [MỚI] Styles for In-Page CRUD Workspace (Scene Profiles) === */
.aipg-crud-workspace {
    display: grid;
    grid-template-columns: 300px 1fr; /* Cột danh sách cố định, cột form co giãn */
    gap: 25px;
    margin-top: 20px;
}

.aipg-crud-list-panel,
.aipg-crud-form-panel {
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    background-color: #fff;
}

.aipg-crud-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--aipg-border-color);
}

.aipg-crud-list-header h4 {
    margin: 0;
    font-size: 16px;
}

.aipg-crud-list-wrapper {
    max-height: 500px;
    overflow-y: auto;
}

#aipg-scene-profiles-list {
    list-style: none;
    margin: 0;
    padding: 8px;
}

#aipg-scene-profiles-list li {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    cursor: default;
    transition: background-color 0.2s ease;
}

#veo-tab-scene-profiles .aipg-crud-list-header button,
 #veo-tab-scene-profiles #aipg-scene-profile-form button {
     background-color: #1e3a8a; /* Màu xanh dương đậm */
     color: white;
     border: none;
     padding: 10px 15px;
     border-radius: 5px;
     cursor: pointer;
     font-size: 14px;
     transition: background-color 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ nhẹ */
 }
 
 #veo-tab-scene-profiles .aipg-crud-list-header button:hover,
 #veo-tab-scene-profiles #aipg-scene-profile-form button:hover {
     background-color: #1a2e6a;
 }
 
 #veo-tab-scene-profiles #aipg-generate-scene-dna-btn {
     background-color: #38bdf8; /* Màu xanh dương nhạt hơn cho nút tạo DNA */
     color: #0f172a; /* Chữ màu tối hơn */
 }
 
 #veo-tab-scene-profiles #aipg-generate-scene-dna-btn:hover {
     background-color: #03a9f4;
 }
 
 #veo-tab-scene-profiles #aipg-scene-cancel-edit-btn {
     background-color: #64748b; /* Màu xám trung tính cho nút hủy */
 }
 
 #veo-tab-scene-profiles #aipg-scene-cancel-edit-btn:hover {
     background-color: #4a5568;
 }
 
 #veo-tab-scene-profiles .aipg-spinner {
     display: none;
     margin-right: 5px;
     animation: aipg-spin 1s linear infinite;
     border: 2px solid white;
     border-top: 2px solid transparent;
     border-radius: 50%;
     width: 14px;
     height: 14px;
     vertical-align: middle;
 }
 
 #veo-tab-scene-profiles button.loading .aipg-spinner {
     display: inline-block;
 }
 
 @keyframes aipg-spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
 
 #veo-tab-scene-profiles .char-actions button {
     background: none;
     color: inherit;
     border: none;
     padding: 5px; /* Tăng padding cho dễ bấm */
     font: inherit;
     cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     margin-left: 5px;
     border-radius: 4px; /* Bo tròn nhẹ icon button */
     transition: background-color 0.2s ease;
 }
 
 #veo-tab-scene-profiles .char-actions button:hover {
     background-color: #e5e7eb; /* Màu nền nhạt khi hover */
 }
 
 #veo-tab-scene-profiles .char-actions .dashicons {
     font-size: 18px; /* Giảm kích thước icon một chút */
     line-height: 1;
     width: 18px;
     height: 18px;
 }
 
 #veo-tab-scene-profiles .aipg-input-with-button {
     display: flex;
     gap: 10px;
 }
 
 #veo-tab-scene-profiles .aipg-input-with-button input {
     flex-grow: 1;
     padding: 10px;
     border: 1px solid #e5e7eb;
     border-radius: 4px;
 }
 
 #veo-tab-scene-profiles .aipg-crud-list-header button.aipg-add-new-btn {
     background-color: #dc2626; /* Màu đỏ cho nút thêm mới */
 }
 
 #veo-tab-scene-profiles .aipg-crud-list-header button.aipg-add-new-btn:hover {
     background-color: #b01a1a;
 }
 /* === [MỚI] CSS cho Nâng cấp Tab Sản xuất Hàng loạt === */
.aipg-select-with-link {
    display: flex;
    align-items: center;
    gap: 15px;
}

.aipg-select-with-link select {
    flex-grow: 1;
}

.aipg-manage-link {
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
    color: var(--aipg-primary-color);
}

.aipg-dna-preview {
    margin-top: 15px;
    padding: 12px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #4b5563;
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
}
/* Container của phần xem trước tổng thể */
.aipg-series-preview-container {
    background-color: #f7fafd; /* Một sắc xanh nhạt rất tinh tế và dễ chịu */
    border: 1px solid #e0e7ed; /* Viền màu xanh xám nhạt để tạo sự phân cách nhẹ */
    border-radius: 8px; /* Bo góc nhẹ nhàng */
    padding: 20px; /* Tăng padding để nội dung có không gian */
    margin-top: 25px; /* Khoảng cách với phần tử phía trên */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* Đổ bóng nhẹ để tạo chiều sâu */
    transition: all 0.3s ease-in-out; /* Hiệu ứng chuyển động mượt mà khi ẩn/hiện */
}

/* Tiêu đề "Xem trước kết quả cho các tập:" */
.aipg-series-preview-container h5 {
    color: #2c3e50; /* Màu chữ đậm hơn để nổi bật */
    font-size: 1.1em; /* Kích thước chữ lớn hơn một chút */
    margin-bottom: 15px; /* Khoảng cách dưới tiêu đề */
    border-bottom: 1px dashed #e0e7ed; /* Đường gạch dưới nét đứt */
    padding-bottom: 10px; /* Padding dưới đường gạch */
}

/* Mỗi item xem trước (Tập 1, Tập 2,...) */
.aipg-preview-item {
    background-color: #ffffff; /* Nền trắng cho mỗi tập để nổi bật trên nền xanh nhạt */
    border: 1px solid #eef2f7; /* Viền rất nhạt */
    border-radius: 6px; /* Bo góc cho từng tập */
    padding: 15px; /* Padding bên trong mỗi tập */
    margin-bottom: 15px; /* Khoảng cách giữa các tập */
    box-shadow: 0 1px 3px rgba(0,0,0,0.02); /* Bóng nhẹ hơn */
}

/* Tiêu đề tập (Tập 1 (chữ A):) */
.aipg-preview-item p:first-child strong {
    color: #0056b3; /* Màu xanh đậm hơn cho tiêu đề tập */
    font-size: 1em;
}

/* Phần "Hành động" và "Lời thoại" */
.aipg-preview-item .preview-action,
.aipg-preview-item .preview-dialogue {
    font-size: 0.95em; /* Kích thước chữ nhỏ hơn một chút */
    line-height: 1.5;
    color: #34495e; /* Màu chữ dễ đọc */
    margin-bottom: 5px; /* Khoảng cách giữa các dòng */
}

/* Chữ "Hành động:" và "Lời thoại:" in nghiêng */
.aipg-preview-item .preview-action em,
.aipg-preview-item .preview-dialogue em {
    color: #7f8c8d; /* Màu xám nhạt hơn cho chữ nghiêng */
}

/* Phần biến số in đậm trong Hành động */
.aipg-preview-item .preview-action strong {
    color: #e67e22; /* Một màu cam nổi bật cho biến số */
}

/* Mô tả "... và X tập khác." */
.aipg-series-preview-container .description {
    font-style: italic;
    color: #95a5a6; /* Màu xám cho phần mô tả thêm */
    text-align: center;
    margin-top: 10px;
}
/* Đánh dấu phân cảnh đang được chọn để nhận gợi ý */
.aipg-scene-item-multi.is-active-target {
    border: 2px solid #0073e6 !important; /* Dùng !important để đảm bảo được áp dụng */
    box-shadow: 0 0 10px rgba(0, 115, 230, 0.5);
}
/* --- NÂNG CẤP GIAO DIỆN KHỐI KỊCH BẢN --- */

/* Container chính cho các lượt lời thoại */
.aipg-scene-dialogue-container-multi {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

/* Wrapper cho MỖI lượt thoại (bao gồm tay nắm, nội dung, nút xóa) */
.aipg-dialogue-line-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 15px;
    transition: box-shadow 0.2s ease-in-out;
    position: relative; /* <<< THÊM DÒNG NÀY ĐỂ SỬA LỖI XẾP CHỒNG */
}

.aipg-dialogue-line-wrapper:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Tay nắm kéo-thả */
.dialogue-drag-handle {
    cursor: move;
    color: #999;
    font-size: 24px;
    line-height: 1;
    padding-top: 20px; /* Căn giữa với label */
}
.dialogue-drag-handle:hover {
    color: #333;
}

/* Khối nội dung chính (label + textarea) */
.dialogue-input-content {
    flex-grow: 1; /* Chiếm hết không gian còn lại */
        width: 100%;
}

/* Tên nhân vật */
.dialogue-input-content label {
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    color: #1d2327;
}

/* Ô nhập lời thoại */
.aipg-scene-dialogue-line {
    width: 100%;
    border: 1px solid #ccc;
    box-shadow: none;
}

.aipg-scene-dialogue-line:focus {
    border-color: #0073e6;
    box-shadow: 0 0 0 1px #0073e6;
}

/* Nút xóa một lượt thoại */
.remove-dialogue-turn-btn {
    background: none;
    border: none;
    color: #a0a5aa;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    margin-left: 10px;
    transition: color 0.2s;
    padding-top: 20px; /* Căn giữa với label */
}

.remove-dialogue-turn-btn:hover {
    color: #d63638; /* Màu đỏ khi hover */
}

/* Nút "+ Thêm Lượt thoại" */
.aipg-add-dialogue-turn-btn {
    width: 100%;
    border-style: dashed !important;
    background-color: #f0f6fc !important;
    color: #0073e6 !important;
    border-color: #0073e6 !important;
    font-weight: 600;
}

.aipg-add-dialogue-turn-btn:hover {
    background-color: #e5effa !important;
    border-color: #005a9c !important;
}

/* Placeholder cho việc kéo-thả */
.dialogue-placeholder {
    height: 80px;
    background-color: #f0f8ff;
    border: 2px dashed #b3d7ff;
    margin-bottom: 15px;
    border-radius: 8px;
}
/* CSS cho Bảng chọn Nhân vật (Popup) */
.aipg-popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.aipg-popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
}
.aipg-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.aipg-popup-header h3 {
    margin: 0;
}
.aipg-popup-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
#aipg-char-selector-popup-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#aipg-char-selector-popup-body .char-select-btn {
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    font-size: 14px;
}
/* --- NÂNG CẤP GIAO DIỆN KHỐI KỊCH BẢN (SERIES NHIỀU NHÂN VẬT) --- */

/* Biến màu để dễ dàng tùy chỉnh */
:root {
    --aipg-primary-color: #0073e6;
    --aipg-secondary-color: #f0f0f1;
    --aipg-border-color: #dcdcde;
    --aipg-text-color: #1d2327;
    --aipg-subtle-text-color: #50575e;
    --aipg-danger-color: #d63638;
}

/* 1. Thiết kế lại mỗi phân cảnh thành một "thẻ" (Card) */
.aipg-scene-item-multi {
    background-color: #ffffff;
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    transition: all 0.2s ease-in-out;
}

/* 2. Cải thiện khu vực chọn nhân vật và tên cảnh */
.aipg-scene-item-multi .aipg-scene-character-selector-multi {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aipg-secondary-color);
}

.aipg-scene-item-multi .aipg-scene-character-selector-multi label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.aipg-scene-item-multi .aipg-scene-char-checkboxes-multi label {
    font-weight: normal;
    margin-right: 15px;
}

.aipg-scene-item-multi .aipg-scene-title,
.aipg-scene-item-multi .aipg-scene-description {
    font-size: 14px;
    padding: 10px;
}

/* 3. Thiết kế lại khối lời thoại cho gọn gàng */
.aipg-scene-dialogue-container-multi {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--aipg-border-color);
}

.aipg-dialogue-line-wrapper {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 8px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fdfdfd;
    margin-bottom: 10px;
}

.dialogue-drag-handle {
    cursor: move;
    color: #999;
    font-size: 20px;
    align-self: center; /* Giữ tay nắm ở giữa */
}

.dialogue-input-content {
    flex-grow: 1;
}

.dialogue-input-content label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.aipg-scene-dialogue-line {
    font-size: 14px;
    padding: 8px;
    min-height: 40px; /* Chiều cao tối thiểu */
    line-height: 1.5;
}

.remove-dialogue-turn-btn {
    font-size: 22px;
    line-height: 1;
}

/* 4. Thiết kế lại các nút bấm cho tinh tế hơn */
.aipg-add-dialogue-turn-btn {
    border-style: 1px dashed var(--aipg-primary-color) !important;
    background-color: transparent !important;
    color: var(--aipg-primary-color) !important;
    font-weight: 600;
    width: 100%;
    margin-top: 5px;
}
.aipg-add-dialogue-turn-btn:hover {
    background-color: rgba(0, 115, 230, 0.05) !important;
}

/* Nút "Trợ lý Kịch bản AI" */
.aipg-scene-item-multi .aipg-toggle-assistant-btn {
    background-color: var(--aipg-secondary-color) !important;
    color: var(--aipg-subtle-text-color) !important;
    border: 1px solid var(--aipg-border-color) !important;
    font-weight: normal !important;
    width: 100%;
    text-align: center;
    justify-content: center;
}
.aipg-scene-item-multi .aipg-toggle-assistant-btn:hover {
    background-color: #e5e5e5 !important;
    color: var(--aipg-text-color) !important;
}

/* Nút "+ Thêm Phân cảnh" */
#aipg-add-scene-btn-multi,
#aipg-add-scene-btn-ai-writer {
    background-color: var(--aipg-text-color) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
#aipg-add-scene-btn-multi:hover,
#aipg-add-scene-btn-ai-writer:hover {
    background-color: #000 !important;
}
/* --- [MỚI] CSS Tối ưu cho Tab Tạo Prompt Ảnh --- */

/* --- Bố cục & Các khối chức năng --- */
#veo-tab-image-generator .aipg-form-section {
    background-color: #fcfcfc;
    border: 1px solid #e9e9e9;
    padding: 20px;
    border-radius: 8px;
    margin-top: 25px;
}

#veo-tab-image-generator .aipg-section-header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

#veo-tab-image-generator .aipg-section-header .dashicons {
    margin-right: 8px;
    color: #0073e6;
}

/* --- Layout Lưới (Grid) --- */
.aipg-form-grid-2col, .aipg-form-grid-3col {
    display: grid;
    gap: 20px;
}

.aipg-form-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

.aipg-form-grid-3col {
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 782px) {
    .aipg-form-grid-2col, .aipg-form-grid-3col {
        grid-template-columns: 1fr;
    }
}


/* --- Trợ lý Sáng tạo --- */
.aipg-suggester-wrapper {
    margin-bottom: 25px;
    padding: 10px;
}

.aipg-suggester-toggle-btn {
    background: linear-gradient(to right, #eef5ff, #f6f9ff);
    border: 1px solid #cce0ff;
    border-radius: 6px;
    padding: 10px 15px;
    font-weight: 600;
    color: #0056b3;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.2s ease-in-out;
}
.aipg-suggester-toggle-btn:hover {
    border-color: #0073e6;
    background-color: #e6f0ff;
}
.aipg-suggester-toggle-btn .dashicons {
    margin-right: 5px;
}

.aipg-suggester-panel {
    background-color: #f7f8fa;
    border: 1px solid #e0e0e0;
    border-top: none;
    padding: 20px;
    border-radius: 0 0 8px 8px;
}

.aipg-suggester-panel .aipg-main-form {
    display: flex;
    gap: 10px;
}
.aipg-suggester-panel .aipg-main-form input[type="text"]{
    flex-grow: 1;
}

/* --- Tùy chọn Nâng cao --- */
#aipg-image-toggle-advanced .dashicons {
    transition: transform 0.3s ease;
}
#aipg-image-toggle-advanced.active .dashicons {
    transform: rotate(180deg);
}

/* --- Nút bấm chính --- */
#aipg-generate-image-prompt-btn {
    margin-top: 30px;
    width: 100%;
}
/* --- [MỚI] CSS Tối ưu cho Dropdown Chọn Chuyên gia AI --- */

/* 1. Style cho chính dropdown để trông hiện đại hơn */
#aipg-image-field-expert {
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    transition: border-color 0.2s ease;
}

#aipg-image-field-expert:focus {
    border-color: #0073e6;
    outline: none;
    box-shadow: 0 0 0 1px #0073e6;
}

/* 2. Style cho các tiêu đề nhóm (optgroup) để làm chúng nổi bật */
#aipg-image-field-expert optgroup {
    font-weight: 700;        /* In đậm hơn */
    font-style: italic;      /* In nghiêng */
    color: #005a9c;          /* Màu xanh dương đậm cho tiêu đề */
    background-color: #f0f5fa; /* Nền màu xanh rất nhạt để phân tách */
    padding: 6px 10px;       /* Thêm khoảng đệm */
    border-top: 1px solid #e0e0e0;
}

/* 3. Style cho các lựa chọn (option) để thụt vào, tạo phân cấp */
#aipg-image-field-expert option {
    padding: 8px 15px;      /* Tăng khoảng đệm */
    color: #333;
    background-color: #fff; /* Đảm bảo nền của option là màu trắng */
}

/* Loại bỏ option đầu tiên của mỗi nhóm khỏi việc có đường kẻ trên */
#aipg-image-field-expert optgroup:first-of-type {
    border-top: none;
}

/* Style riêng cho option mặc định */
#aipg-image-field-expert option[value="general"] {
    font-weight: 600;
    color: #1d2327;
}
/* --- [MỚI] BỘ CSS TỐI ƯU GIAO DIỆN V2 CHO TAB TẠO PROMPT ẢNH --- */

/* 1. Biến màu để dễ quản lý và đồng bộ */
:root {
    --aipg-primary-blue: #0073e6;
    --aipg-light-blue-bg: #f5f9ff;
    --aipg-border-color: #dce1e6;
    --aipg-header-text: #2c3338;
    --aipg-body-text: #50575e;
    --aipg-primary-red: #d63638; /* Giữ lại màu đỏ cho nút chính */
}

/* 2. Cải thiện bố cục chung của Tab */
#veo-tab-image-generator {
    background-color: #f9fafb;
    padding: 15px;
    border: 1px solid var(--aipg-border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* 3. Thiết kế lại các khối Section cho đẹp hơn */
#veo-tab-image-generator .aipg-form-section {
    background-color: #ffffff;
    border: 1px solid var(--aipg-border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    margin-top: 20px;
    overflow: hidden; /* Giúp bo góc header */
    padding: 0; /* Bỏ padding cũ */
}

/* 4. Thiết kế lại Tiêu đề của các Section */
#veo-tab-image-generator .aipg-section-header {
    background-color: var(--aipg-light-blue-bg);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--aipg-header-text);
    border-bottom: 1px solid var(--aipg-border-color);
    margin: 0;
    display: flex;
    align-items: center;
}

#veo-tab-image-generator .aipg-section-header .dashicons {
    color: var(--aipg-primary-blue);
    font-size: 20px;
    margin-right: 10px;
}

/* Thêm padding cho nội dung bên trong các section */
#veo-tab-image-generator .aipg-form-section > *:not(.aipg-section-header) {
    padding: 20px;
}
#veo-tab-image-generator .aipg-form-section > .aipg-form-grid-2col,
#veo-tab-image-generator .aipg-form-section > .aipg-form-grid-3col {
     padding: 20px;
}


/* 5. Tinh chỉnh các ô nhập liệu và nút bấm */
#veo-tab-image-generator .aipg-input-with-button {
    display: flex;
    align-items: center;
    gap: 8px;
}

#veo-tab-image-generator .aipg-input-with-button select {
    flex-grow: 1; /* Để select chiếm hết không gian còn lại */
}

#veo-tab-image-generator .aipg-input-with-button .button {
    height: 40px; /* Căn chỉnh chiều cao nút refresh */
    width: 40px;
    padding: 0;
    background-color: #f0f0f1;
    border-color: #dce1e6;
    color: #50575e;
}
#veo-tab-image-generator .aipg-input-with-button .button:hover {
    background-color: #e0e0e1;
    border-color: #b4b9be;
}
#veo-tab-image-generator .aipg-input-with-button .button .dashicons {
    font-size: 20px;
    line-height: 40px;
}

/* 6. Làm đẹp lại nút chính */
#aipg-generate-image-prompt-btn {
    background: var(--aipg-primary-red);
    border-color: #b4292b;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 20px;
    height: auto;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#aipg-generate-image-prompt-btn:hover {
    background: #e03d3f;
    transform: translateY(-1px);
}
/* --- [MỚI] CSS Tối ưu cho Nút "Trợ lý Sáng tạo" --- */

/* 1. Thêm khoảng cách phía trên cho toàn bộ khối trợ lý */
#veo-tab-image-generator .aipg-suggester-wrapper {
    margin-top: 20px; /* Tạo khoảng trống với phần tử bên trên */
}

/* 2. Thiết kế lại nút bấm cho nổi bật và chuyên nghiệp hơn */
#aipg-image-suggester-toggle {
    display: flex; /* Sử dụng flexbox để căn chỉnh icon và chữ */
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    background-color: var(--aipg-light-blue-bg, #f5f9ff); /* Dùng biến màu đã có */
    border: 1px dashed #a0bde3; /* Viền đứt cho cảm giác "hộp công cụ" */
    border-radius: 8px;
    color: var(--aipg-primary-blue, #0073e6);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 115, 230, 0.05);
}

/* 3. Hiệu ứng khi di chuột qua */
#aipg-image-suggester-toggle:hover {
    border-color: var(--aipg-primary-blue, #0073e6);
    border-style: solid; /* Chuyển thành viền liền khi hover */
    background-color: #eaf2fa;
    color: #005a9c;
}

/* 4. Style cho icon bên trong nút */
#aipg-image-suggester-toggle .dashicons {
    font-size: 20px;
    margin-right: 10px;
    height: auto;
    width: auto;
}
/* --- [MỚI] CSS TỐI ƯU V3 CHO TAB PHÂN TÍCH ẢNH (WORKBENCH UI) --- */

/* 1. Bố cục lưới 2 cột */
.aipg-workbench-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Cột output rộng hơn một chút */
    gap: 25px;
    margin-top: 25px;
}

.aipg-workbench-panel {
    background-color: #fff;
    border: 1px solid var(--aipg-border-color, #e0e4e7);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.aipg-workbench-panel h4 {
    margin-top: 0;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--aipg-border-color, #e0e4e7);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--aipg-header-text, #2c3338);
}

/* 2. Thiết kế vùng tải ảnh */
.aipg-image-uploader-wrapper {
    flex-grow: 1;
    margin-bottom: 15px;
    position: relative;
}
.aipg-image-upload-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    border: 2px dashed var(--aipg-border-color, #dce1e6);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f9fafb;
}
.aipg-image-upload-label:hover {
    border-color: var(--aipg-primary-blue, #0073e6);
    background-color: #f5f9ff;
}
.aipg-image-upload-label .upload-icon-wrapper {
    background: #e9eff5;
    border-radius: 50%;
    padding: 15px;
    margin-bottom: 15px;
}
.aipg-image-upload-label .dashicons {
    font-size: 32px;
    color: var(--aipg-primary-blue, #0073e6);
    height: 32px;
    width: 32px;
}
.aipg-image-upload-label span {
    font-weight: 600;
    color: #444;
}
.aipg-image-upload-label small {
    color: #777;
    margin-top: 5px;
}

/* 3. Thiết kế vùng xem trước ảnh */
#aipg-image-preview-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}
#aipg-image-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}
#aipg-remove-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}
#aipg-remove-image-btn:hover {
    opacity: 1;
}

/* 4. Thiết kế vùng Output */
#aipg-image-analysis-result-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.aipg-output-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #777;
    height: 100%;
    background-color: #f9fafb;
    border-radius: 6px;
}
.aipg-output-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #dce1e6;
}
#aipg-image-analysis-result-container {
    margin-top: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#aipg-image-analysis-result-container .aipg-card-body {
    flex-grow: 1;
}

/* 5. Nút bấm */
#aipg-analyze-image-btn {
    width: 100%;
    background-color: var(--aipg-primary-blue, #0073e6);
    border-color: #006acc;
}
#aipg-analyze-image-btn:hover:not(:disabled) {
     background-color: #005a9c;
}
#aipg-analyze-image-btn .dashicons {
    margin-right: 5px;
    font-size: 18px;
    vertical-align: middle;
    line-height: 1;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 960px) {
    .aipg-workbench-grid {
        grid-template-columns: 1fr;
    }
}
/* --- [MỚI] CSS Tối ưu V2 cho Giao diện Quản lý Bối cảnh (Asset Manager UI) --- */

/* 1. Layout chung */
.asset-manager-ui {
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar cố định, nội dung linh hoạt */
    gap: 25px;
    background-color: #f9fafb;
    border: 1px solid var(--aipg-border-color, #e0e4e7);
    border-radius: 8px;
    padding: 20px;
}

/* 2. Sidebar (Cây thư mục) */
.aipg-asset-sidebar {
    background-color: #fff;
    border-radius: 6px;
    padding: 15px;
    border: 1px solid var(--aipg-border-color, #e0e4e7);
    display: flex;
    flex-direction: column;
}
.aipg-asset-sidebar h4 {
    margin-top: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--aipg-header-text, #2c3338);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.aipg-folder-list {
    flex-grow: 1; /* Đẩy phần tạo thư mục xuống dưới */
}
.aipg-folder-list ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}
.aipg-folder-list .folder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    color: var(--aipg-body-text, #50575e);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.aipg-folder-list .folder-item:hover {
    background-color: #f5f9ff;
    color: var(--aipg-primary-blue, #0073e6);
}
.aipg-folder-list .folder-item.active {
    background-color: #eaf2fa;
    color: var(--aipg-primary-blue, #0073e6);
    font-weight: 600;
    border-color: #d1e3f8;
}
.aipg-folder-actions {
    margin-top: auto; /* Đẩy xuống cuối sidebar */
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}
#aipg-new-folder-name {
    margin-bottom: 8px;
}

/* 3. Thanh công cụ (Toolbar) */
.aipg-asset-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.aipg-asset-search {
    position: relative;
    flex-grow: 1;
    margin-right: 15px;
}
.aipg-asset-search .dashicons {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #999;
}
#aipg-scene-search-input {
    width: 100%;
    padding: 8px 12px 8px 35px;
    border-radius: 6px;
}
#aipg-scene-open-popup-btn {
    background-color: var(--aipg-primary-red, #d63638);
    border-color: #b4292b;
    color: #fff;
}
#aipg-scene-open-popup-btn:hover {
    background-color: #e03d3f;
    border-color: #b4292b;
    color: #fff;
}

/* 4. Danh sách Bối cảnh (thay vì grid) */
.aipg-asset-grid { /* Giữ tên class nhưng đổi style */
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
}
.aipg-asset-card {
    background-color: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    transition: all 0.2s ease;
}
.aipg-asset-card:hover {
    background-color: #f5f9ff;
    border-color: #c0c8d1;
}
.asset-card-name {
    font-weight: 500;
    color: var(--aipg-header-text, #2c3338);
    padding-right: 10px;
}
.asset-card-actions .char-action-btn {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 4px;
    opacity: 0; /* Ẩn mặc định */
    transition: all 0.2s ease;
}
.aipg-asset-card:hover .asset-card-actions .char-action-btn {
    opacity: 0.7; /* Hiện khi hover vào card */
}
.asset-card-actions .char-action-btn:hover {
    color: var(--aipg-primary-blue, #0073e6);
    opacity: 1;
}
.asset-card-actions .scene-delete-btn:hover {
    color: var(--aipg-primary-red, #d63638);
}

/* Responsive */
@media (max-width: 960px) {
    .asset-manager-ui {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   [NÂNG CẤP GIAO DIỆN] - Công cụ Chuyển đổi Prompt Đa năng
   ========================================================================== */

/* Container cho các nút chọn lĩnh vực */
.aipg-veo-tab-content#veo-tab-converter .aipg-category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Khoảng cách giữa các nút */
    margin-bottom: 15px; /* Khoảng cách với dropdown bên dưới */
}

/* Kiểu cho các nút lĩnh vực (trạng thái không được chọn) */
.aipg-veo-tab-content#veo-tab-converter .aipg-category-btn {
    background-color: #f0f0f0; /* Màu nền xám nhạt */
    color: #333; /* Màu chữ đen */
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Hiệu ứng chuyển động mượt mà */
}

/* Hiệu ứng khi di chuột qua nút không được chọn */
.aipg-veo-tab-content#veo-tab-converter .aipg-category-btn:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

/* Kiểu cho nút lĩnh vực ĐANG ĐƯỢC CHỌN (active) - Quan trọng nhất! */
.aipg-veo-tab-content#veo-tab-converter .aipg-category-btn.active {
    background-color: #0073e6; /* Màu xanh dương chuyên nghiệp (giống màu tab chính) */
    color: #ffffff; /* Chữ màu trắng */
    border-color: #005a9c;
    font-weight: bold; /* In đậm để nổi bật */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ nhẹ */
}

/* Căn chỉnh lại dropdown bên dưới các nút */
.aipg-veo-tab-content#veo-tab-converter .aipg-target-dropdowns {
    margin-bottom: 20px;
}
.aipg-veo-tab-content#veo-tab-converter .aipg-target-select {
    width: 100%;
    max-width: 400px; /* Giới hạn chiều rộng để đẹp hơn */
}

/* Tinh chỉnh lại nút hành động chính */
.aipg-veo-tab-content#veo-tab-converter #aipg-convert-prompt-btn {
    background-color: #d6336c; /* Sử dụng màu hồng đậm nổi bật */
    border-color: #c2255c;
    font-size: 16px;
    padding: 10px 20px;
}

.aipg-veo-tab-content#veo-tab-converter #aipg-convert-prompt-btn:hover {
    background-color: #c2255c;
}
/* CSS cho Trợ lý Phân tích Prompt */
.aipg-input-with-button-vertical {
    position: relative;
}
#aipg-analyze-prompt-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: 0.8;
}
.aipg-analysis-box {
    background-color: #f0f7ff;
    border: 1px solid #b3d7ff;
    border-radius: 6px;
    padding: 15px;
    margin-top: 15px;
}
.aipg-analysis-box p {
    margin: 0 0 10px 0;
}
.aipg-suggestion-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.aipg-suggestion-btn {
    background: #e0e0e0 !important;
    border-color: #ccc !important;
    color: #333 !important;
}
.aipg-suggestion-btn:hover {
    background: #d0d0d0 !important;
}
/* ========================================================================
   [AIPG] NÂNG CẤP GIAO DIỆN TAB THƯ VIỆN PHONG CÁCH (STYLE LIBRARY)
   ======================================================================== */

/* --- Bố cục chính cho không gian làm việc --- */
#veo-tab-style-library .aipg-crud-workspace {
    display: grid;
    grid-template-columns: 320px 1fr; /* Cột trái 320px, cột phải chiếm phần còn lại */
    gap: 24px; /* Khoảng cách giữa 2 cột */
    align-items: flex-start;
}

/* --- Kiểu dáng chung cho các Panel (Khung) --- */
.aipg-crud-list-panel,
.aipg-crud-form-panel {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

/* --- Cột bên trái: Danh sách Phong cách --- */
.aipg-crud-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.aipg-crud-list-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

#aipg-style-add-new-btn {
    font-weight: 600;
}

#aipg-style-profiles-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 500px;
    overflow-y: auto;
}

#aipg-style-profiles-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border-radius: 6px;
}

#aipg-style-profiles-list li:last-child {
    border-bottom: none;
}

#aipg-style-profiles-list li:hover {
    background-color: #f5f7fa;
}

#aipg-style-profiles-list li.is-editing {
    background-color: #eef7ff;
    font-weight: bold;
    color: #005a9c;
}

#aipg-style-profiles-list li .char-actions {
    opacity: 0; /* Ẩn nút khi bình thường */
    transition: opacity 0.2s ease-in-out;
    display: flex;
    gap: 5px;
}

#aipg-style-profiles-list li:hover .char-actions {
    opacity: 1; /* Hiện nút khi hover */
}

/* --- Cột bên phải: Form Chỉnh sửa --- */
.aipg-crud-form-panel #aipg-style-form-title {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 18px;
    color: #2c3e50;
}

/* Nâng cấp form fields */
#aipg-style-profile-form label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #555;
}

#aipg-style-profile-form input[type="text"],
#aipg-style-profile-form textarea {
    border-radius: 6px;
    border: 1px solid #ccd0d4;
    padding: 10px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#aipg-style-profile-form input[type="text"]:focus,
#aipg-style-profile-form textarea:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
    outline: none;
}

#aipg-style-id-field[readonly] {
    background-color: #f6f7f7;
    cursor: not-allowed;
}

/* --- Khu vực Trợ lý AI Tư vấn --- */
.aipg-crud-form-panel .aipg-form-group:has(#aipg-style-assistant-keyword) {
    background-color: #f0f7ff;
    border: 1px solid #b3d7ff;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

.aipg-crud-form-panel .aipg-form-group:has(#aipg-style-assistant-keyword) label {
    color: #005a9c;
    font-size: 14px;
}

.aipg-crud-form-panel .aipg-input-with-button {
    display: flex;
}

.aipg-crud-form-panel .aipg-input-with-button input {
    flex-grow: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.aipg-crud-form-panel .aipg-input-with-button button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --- Nâng cấp các Nút bấm --- */
.aipg-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

#aipg-style-save-btn,
#aipg-style-cancel-edit-btn {
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
}
/* ==========================================================================
   [NÂNG CẤP GIAO DIỆN] - Danh sách Quản lý (Nhân vật & Đồ vật)
   ========================================================================== */

/* --- Container bao bọc danh sách --- */
.aipg-character-list-wrapper {
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    padding: 8px; /* Giảm padding để các item sát viền hơn */
    background-color: #fcfcfc;
    max-height: 450px;
    overflow-y: auto;
}

/* --- Từng mục trong danh sách (li) --- */
#aipg-main-characters-list li,
#aipg-main-objects-list li {
    display: flex; /* Dùng Flexbox để căn chỉnh tên và nút bấm */
    justify-content: space-between; /* Đẩy tên sang trái, nút sang phải */
    align-items: center; /* Căn giữa theo chiều dọc */
    padding: 10px 15px;
    margin: 0 0 5px 0; /* Giảm margin-bottom */
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    list-style: none; /* Bỏ dấu chấm đầu dòng */
}

#aipg-main-characters-list li:last-child,
#aipg-main-objects-list li:last-child {
    margin-bottom: 0;
}

/* --- Hiệu ứng Hover cho từng mục --- */
#aipg-main-characters-list li:hover,
#aipg-main-objects-list li:hover {
    background-color: #fffaf8; /* Màu nền cam nhạt khi hover */
    border-color: #ffe5d9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

/* --- Tên Nhân vật / Đồ vật --- */
#aipg-main-characters-list .char-name,
#aipg-main-objects-list .char-name {
    font-weight: 500;
    color: #333;
}

/* --- Khu vực chứa các nút hành động (Sửa, Xóa) --- */
#aipg-main-characters-list .char-actions,
#aipg-main-objects-list .char-actions {
    display: flex;
    gap: 8px;
    opacity: 0; /* Ẩn nút bấm mặc định */
    visibility: hidden;
    transform: translateX(10px); /* Hiệu ứng trượt nhẹ từ phải sang */
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* --- Hiển thị các nút hành động khi hover vào mục li --- */
#aipg-main-characters-list li:hover .char-actions,
#aipg-main-objects-list li:hover .char-actions {
    opacity: 1; /* Hiện các nút bấm khi hover */
    visibility: visible;
    transform: translateX(0);
}

/* --- Style cho từng nút hành động --- */
#aipg-main-characters-list .char-action-btn,
#aipg-main-objects-list .char-action-btn {
    background: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 50%; /* Bo tròn nút */
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

#aipg-main-characters-list .char-action-btn:hover,
#aipg-main-objects-list .char-action-btn:hover {
    background-color: #e0e0e0;
    color: #000;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Chỉnh lại kích thước icon cho vừa vặn */
#aipg-main-characters-list .char-action-btn .dashicons,
#aipg-main-objects-list .char-action-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
/* ==========================================================================
   [NÂNG CẤP] GIAO DIỆN TƯƠNG THÍCH VỚI ĐIỆN THOẠI (RESPONSIVE)
   ========================================================================== */

@media (max-width: 768px) {

    /* Chuyển layout chính thành 1 cột */
    .aipg-workbench-layout {
        flex-direction: column;
        gap: 15px;
    }

    /* Sidebar và Main content chiếm toàn bộ chiều rộng */
    .aipg-workbench-sidebar,
    .aipg-workbench-main {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Giao diện tab 2 cấp cũng sẽ tự động xếp chồng lên nhau */
    .aipg-main-tabs {
        flex-direction: column; /* Xếp các tab chính theo chiều dọc */
        gap: 5px;
        border-bottom: none;
    }

    .aipg-main-tab-link {
        justify-content: flex-start; /* Căn trái nội dung */
        text-align: left;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #f9f9f9;
    }
    
    .aipg-main-tab-link.active {
        border-bottom-color: #c82f2f;
        background-color: #fff;
    }

    /* --- [SỬA LỖI THEO YÊU CẦU] --- */
    .aipg-sub-tabs-wrapper {
        padding: 10px;
    }
    
    .aipg-sub-tab-group .aipg-veo-tab-link {
        flex-grow: 0; /* Ngăn nút tự động co giãn */
        flex-basis: auto; /* Để nút có chiều rộng tự nhiên */
        justify-content: flex-start; /* Căn lề icon và chữ sang bên trái */
        
        font-size: 13px; /* Chữ nhỏ hơn */
        padding: 8px 12px; /* Nút nhỏ hơn (chiều cao và chiều rộng) */
    }
}
/* ==========================================================================
   [NÂNG CẤP] GIAO DIỆN TAB 2 CẤP
   ========================================================================== */

.aipg-veo-navigation {
    width: 100%;
    margin-bottom: 25px;
}

/* --- Hàng 1: Các Tab Chính --- */
.aipg-main-tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
}

.aipg-main-tab-link {
    padding: 12px 20px;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    transition: all 0.2s ease-in-out;
    margin-bottom: -2px; /* Nằm đè lên border */
}

.aipg-main-tab-link:hover {
    background-color: #f5f5f5;
    color: #111;
}

.aipg-main-tab-link.active {
    color: #c82f2f; /* Màu đỏ chủ đạo */
    border-bottom-color: #c82f2f;
}

/* --- Hàng 2: Các Nút Công cụ --- */
.aipg-sub-tabs-wrapper {
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.aipg-sub-tab-group {
    display: none; /* Ẩn tất cả các nhóm nút mặc định */
    flex-wrap: wrap;
    gap: 10px;
}

.aipg-sub-tab-group.active {
    display: flex; /* Chỉ hiển thị nhóm active */
}

/* Tái sử dụng style cho các nút công cụ bên trong */
.aipg-sub-tab-group .aipg-veo-tab-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 15px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #ccc;
    font-weight: 500;
    color: #444;
}

.aipg-sub-tab-group .aipg-veo-tab-link .dashicons {
    margin-right: 8px;
}

.aipg-sub-tab-group .aipg-veo-tab-link:hover {
    background-color: #f0f0f0;
    border-color: #aaa;
}

.aipg-sub-tab-group .aipg-veo-tab-link.active {
    background-color: #c82f2f;
    color: #fff;
    border-color: #c82f2f;
}
.history-card-media-section { margin-top: 15px; border-top: 1px dashed #ddd; padding-top: 15px; }
.history-results-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.history-result-item { position: relative; }
.history-result-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; }
.delete-result-btn { position: absolute; top: -5px; right: -5px; background: #c82f2f; color: white; border: none; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; opacity: 0; transition: opacity 0.2s; }
.history-result-item:hover .delete-result-btn { opacity: 1; }
/* --- CSS cho Tính năng Vòng lặp Phản hồi --- */
.history-result-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100px; /* Tăng chiều rộng để chứa thêm nội dung */
}
.history-result-item img {
    width: 100px; /* Tăng chiều rộng ảnh */
    height: 100px;
}
.aipg-feedback-rating {
    display: flex;
    justify-content: center;
}
.aipg-rating-star {
    font-size: 18px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}
.aipg-rating-star:hover,
.aipg-rating-star.is-rated {
    color: #ffc700;
}
/* --- CSS cho Popup Phản hồi & Tinh chỉnh --- */
.aipg-feedback-preview {
    text-align: center;
    margin-bottom: 15px;
}
#aipg-feedback-preview-img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 8px;
    border: 1px solid #ddd;
}
#aipg-refined-prompt-container .aipg-prompt-text {
    background-color: #e9f5ff;
    border-left-color: #2196F3;
}

/* --- CSS cho Kết quả Phân tích Cốt truyện --- */
#aipg-analysis-results-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.aipg-analysis-category { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 15px; }
.aipg-analysis-category h5 { margin: 0 0 10px 0; font-size: 14px; }
.aipg-analysis-category ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.aipg-analysis-item { display: flex; justify-content: space-between; align-items: center; background: #f9f9f9; padding: 5px 5px 5px 10px; border-radius: 4px; }
.aipg-create-asset-btn { font-size: 12px !important; padding: 2px 8px !important; height: auto !important; }
/* --- CSS cho Giai đoạn 3: Xuất Prompt --- */
#aipg-scene-casting-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.aipg-scene-casting-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
}
.aipg-scene-casting-card h5 {
    margin: 0 0 10px 0;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.aipg-scene-casting-card .aipg-form-grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}
.aipg-analysis-item.with-details {
    flex-direction: column;
    align-items: flex-start;
}
.aipg-analysis-item .item-info {
    margin-bottom: 8px;
}
.aipg-analysis-item .item-name {
    font-weight: 600;
}
.aipg-analysis-item .item-dna-suggestion {
    font-size: 13px;
    color: #555;
    margin: 4px 0 0 0;
    padding-left: 10px;
    border-left: 2px solid #eee;
}
.item-info .dialogue-list {
    list-style: none;
    padding: 8px 0 0 12px;
    margin-top: 8px;
    border-top: 1px dashed #e0e0e0;
}
.item-info .dialogue-list li {
    font-size: 13px;
    color: #333;
}
/* --- CSS cho Trợ lý Lời thoại Giai đoạn 3 --- */
.aipg-scene-casting-card h5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.aipg-dialogue-assistant-btn {
    font-size: 12px !important;
    height: auto !important;
    padding: 4px 10px !important;
}
.scene-dialogue-output {
    margin-top: 10px;
    background-color: #f0f7ff;
    border: 1px solid #b3d7ff;
    border-radius: 4px;
    padding: 10px;
    font-size: 13px;
}
.scene-dialogue-output pre {
    white-space: pre-wrap;
    margin: 0;
}
.aipg-analysis-batch-actions {
    grid-column: 1 / -1; /* Chiếm toàn bộ chiều rộng grid */
    text-align: center;
    padding: 20px;
    margin-top: 15px;
    background-color: #f0f7ff;
    border-radius: 6px;
}
/* ==========================================================================
   [MỚI] CSS Trang trí cho Tab AI Marketing Sim Số
   ========================================================================== */

/* --- Bố cục chung của Tab --- */
#veo-tab-sim-marketer {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- Form nhập liệu chính --- */
#aipg-sim-marketer-form {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#aipg-sim-marketer-form .aipg-form-group {
    margin-bottom: 20px;
}

#aipg-sim-marketer-form label {
    font-weight: 600;
    color: #343a40;
    font-size: 15px;
}

/* --- Nút bấm chọn phong cách --- */
#aipg-sim-marketer-form .aipg-brain-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#aipg-sim-marketer-form .aipg-brain-selector label {
    flex-grow: 1;
}

#aipg-sim-marketer-form .aipg-brain-selector span {
    width: 100%;
    text-align: center;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
}

#aipg-sim-marketer-form .aipg-brain-selector input[type="radio"]:checked+span {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* --- Nút bấm chính --- */
#aipg-generate-sim-content-btn {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    background-color: #e60023; /* Màu đỏ thương hiệu */
    border-color: #c3001d;
    padding: 12px 0;
}

#aipg-generate-sim-content-btn:hover {
    background-color: #c3001d;
    border-color: #a00018;
}

/* --- Khu vực kết quả --- */
#aipg-sim-marketer-results-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Cột 1 nhỏ hơn cột 2 */
    gap: 25px;
    align-items: start;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 768px) {
    #aipg-sim-marketer-results-container {
        grid-template-columns: 1fr; /* Chuyển về 1 cột */
    }
}

/* --- Thẻ kết quả (Card) --- */
#aipg-sim-marketer-results-container .aipg-result-card {
    border-left-width: 5px;
}

#aipg-sim-marketer-results-container .aipg-result-card .aipg-card-header {
    background-color: #f1f3f5;
    padding: 12px 15px;
}

#aipg-sim-marketer-results-container .aipg-result-card .aipg-card-header strong {
    font-size: 16px;
    color: #212529;
}

#aipg-sim-marketer-results-container .aipg-card-body ul {
    margin-left: 20px;
    list-style-type: disc;
}

/* --- Thẻ nội dung marketing --- */
.marketing-title {
    font-size: 18px;
    font-weight: bold;
    color: #e60023;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.marketing-content-wrapper pre {
    font-family: inherit; /* Dùng font chữ của trang */
    font-size: 15px;
    line-height: 1.7;
    color: #495057;
}

/* --- Footer của Card (chứa nút sao chép) --- */
.aipg-result-card .aipg-card-footer {
    padding: 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: right;
}

/* --- Trợ lý tạo phôi ảnh --- */
#aipg-sim-mockup-generator {
    margin-top: 20px;
    padding-top: 30px;
    border-top: 2px dashed #ced4da;
}

#aipg-sim-mockup-generator h4 {
    font-size: 18px;
    color: #0056b3;
}

#aipg-generate-sim-mockup-btn {
    background-color: #28a745;
    border-color: #218838;
}

#aipg-generate-sim-mockup-btn:hover {
    background-color: #218838;
    border-color: #1e7e34;
}
/* ==========================================================================
   [MỚI] CSS Trang trí cho Tab AI Lập Kế hoạch Marketing
   ========================================================================== */

/* --- Bố cục chung của Tab --- */
#veo-tab-marketing-planner {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- Form nhập liệu --- */
#aipg-marketing-planner-form {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#aipg-marketing-planner-form label {
    font-weight: 600;
    color: #343a40;
    font-size: 15px;
    margin-bottom: 8px;
    display: block;
}

#aipg-marketing-planner-form textarea {
    margin-bottom: 15px;
}

/* --- Nút bấm chính --- */
#aipg-generate-marketing-plan-btn {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    background-color: #007bff; /* Màu xanh dương chủ đạo */
    border-color: #0069d9;
    padding: 12px 0;
    transition: background-color 0.2s ease;
}

#aipg-generate-marketing-plan-btn:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

/* --- Khu vực kết quả --- */
#aipg-marketing-plan-results-container h3 {
    font-size: 22px;
    color: #212529;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* --- Styling cho từng giai đoạn (thẻ <details>) --- */
.aipg-marketing-stage {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Đảm bảo bo góc hoạt động */
}

.aipg-marketing-stage summary {
    padding: 15px 20px;
    font-weight: bold;
    font-size: 16px;
    background-color: #f8f9fa;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease;
    list-style: none; /* Ẩn mũi tên mặc định */
    display: flex;
    align-items: center;
}

.aipg-marketing-stage summary::-webkit-details-marker {
    display: none; /* Ẩn mũi tên mặc định cho Chrome/Safari */
}

.aipg-marketing-stage summary:before {
    content: '►'; /* Mũi tên tùy chỉnh */
    margin-right: 10px;
    font-size: 12px;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.aipg-marketing-stage[open] > summary {
    background-color: #e9ecef;
}

.aipg-marketing-stage[open] > summary:before {
    transform: rotate(90deg);
}

.aipg-marketing-stage .stage-content {
    padding: 20px;
    background-color: #fff;
    border-top: 1px solid #e9ecef;
}

.stage-content ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stage-content li {
    padding-left: 20px;
    position: relative;
    line-height: 1.6;
}

.stage-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: #28a745;
    font-weight: bold;
}
/* ==========================================================================
   [MỚI] Giao diện cho Công cụ Viết Đánh giá & Bình luận
   ========================================================================== */

/* Biến màu để dễ dàng tùy chỉnh */
:root {
    --aipg-seeding-bg: #f8f9fa; /* Nền của tab */
    --aipg-seeding-border: #e9ecef; /* Viền */
    --aipg-seeding-label: #343a40; /* Màu chữ của nhãn */
    --aipg-seeding-input-bg: #ffffff; /* Nền ô nhập liệu */
    --aipg-seeding-input-border: #ced4da; /* Viền ô nhập liệu */
    --aipg-seeding-input-focus: #80bdff; /* Viền khi focus */
    --aipg-seeding-primary-btn-bg: linear-gradient(135deg, #e74c3c, #c0392b); /* Gradient cho nút chính */
    --aipg-seeding-primary-btn-hover: linear-gradient(135deg, #c0392b, #e74c3c); /* Gradient khi hover */
    --aipg-seeding-result-bg: #e9f7ef; /* Nền khu vực kết quả */
    --aipg-seeding-result-border: #d0e9d9; /* Viền khu vực kết quả */
    --aipg-seeding-result-header: #1d7a46; /* Màu chữ tiêu đề kết quả */
}

/* Container chính của cả hai công cụ */
.aipg-seeding-tool {
    background-color: var(--aipg-seeding-bg);
    border: 1px solid var(--aipg-seeding-border);
    border-radius: 8px;
    padding: 25px;
    margin-top: 15px;
}

/* Tiêu đề và mô tả */
.aipg-seeding-tool h3 {
    margin-top: 0;
    font-size: 22px;
    color: #2c3e50;
    border-bottom: 2px solid var(--aipg-seeding-primary-btn-hover);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.aipg-seeding-tool > p {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 25px;
}

/* Form nhập liệu */
.aipg-seeding-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Nhãn (label) của các ô nhập liệu */
.aipg-seeding-tool .aipg-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--aipg-seeding-label);
}

/* Các ô nhập liệu chung (textarea, input, select) */
.aipg-seeding-tool textarea,
.aipg-seeding-tool input[type="number"],
.aipg-seeding-tool select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--aipg-seeding-input-border);
    border-radius: 6px;
    background-color: var(--aipg-seeding-input-bg);
    font-size: 15px;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.aipg-seeding-tool textarea:focus,
.aipg-seeding-tool input[type="number"]:focus,
.aipg-seeding-tool select:focus {
    outline: none;
    border-color: var(--aipg-seeding-input-focus);
    box-shadow: 0 0 0 3px rgba(128, 189, 255, 0.25);
}

/* Tùy chỉnh riêng cho ô chọn nhiều */
.aipg-seeding-tool select[multiple] {
    height: 120px;
    padding: 10px;
}

/* Nút bấm chính */
.aipg-seeding-tool .button-hero {
    background: var(--aipg-seeding-primary-btn-bg);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.aipg-seeding-tool .button-hero:hover {
    background: var(--aipg-seeding-primary-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.aipg-seeding-tool .button-hero .dashicons,
.aipg-seeding-tool .button-hero .aipg-btn-text {
    font-size: 18px;
    line-height: 1;
}

/* Khu vực kết quả */
.aipg-seeding-tool .aipg-multiple-results-container h4 {
    font-size: 18px;
    color: var(--aipg-seeding-result-header);
    margin-bottom: 15px;
}

.aipg-seeding-tool .aipg-result-card {
    background-color: #fff;
    border: 1px solid var(--aipg-seeding-result-border);
    border-left: 5px solid var(--aipg-seeding-result-header);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.aipg-seeding-tool .aipg-card-body {
    padding: 0;
}

/* Textarea hiển thị kết quả */
.aipg-seeding-tool .aipg-batch-results-textarea {
    background-color: var(--aipg-seeding-result-bg);
    border: none;
    padding: 15px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    resize: vertical;
    box-shadow: none;
}

.aipg-seeding-tool .aipg-batch-results-textarea:focus {
    box-shadow: none;
}

/* Nút sao chép kết quả */
.aipg-seeding-tool .aipg-card-actions {
    padding: 15px;
    text-align: right;
    background-color: #fdfdfd;
    border-top: 1px solid var(--aipg-seeding-result-border);
}

.aipg-seeding-tool .aipg-copy-batch-results-btn {
    background-color: var(--aipg-seeding-result-header);
    border-color: var(--aipg-seeding-result-header);
}

.aipg-seeding-tool .aipg-copy-batch-results-btn:hover {
    background-color: #165c34;
    border-color: #165c34;
}
/* ==========================================================================
   [MỚI] Giao diện tối ưu cho kết quả AI SEO YouTube
   ========================================================================== */

/* Container chính của khu vực kết quả */
#aipg-youtube-seo-results-container {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
    padding: 20px;
}

#aipg-youtube-seo-results-container h3 {
    text-align: center;
    font-size: 22px;
    color: #343a40;
    margin-top: 0;
    margin-bottom: 25px;
}

/* Tùy chỉnh thẻ <details> để trông giống các section có thể thu gọn */
.aipg-marketing-stage {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.aipg-marketing-stage[open] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Tùy chỉnh tiêu đề <summary> */
.aipg-marketing-stage summary {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none; /* Xóa mũi tên mặc định */
}

.aipg-marketing-stage summary::-webkit-details-marker {
    display: none; /* Xóa mũi tên mặc định cho Chrome/Safari */
}

/* Tạo mũi tên tùy chỉnh */
.aipg-marketing-stage summary::after {
    content: '▼';
    font-size: 12px;
    color: #868e96;
    transition: transform 0.2s ease-in-out;
}

.aipg-marketing-stage[open] summary::after {
    transform: rotate(180deg);
}

/* Nội dung bên trong các section */
.aipg-marketing-stage .stage-content {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #e9ecef;
}

/* Tùy chỉnh danh sách (Ý tưởng, Tiêu đề) */
.aipg-marketing-stage .stage-content ul {
    list-style-type: '✓  ';
    padding-left: 20px;
    margin: 10px 0 0 0;
}

.aipg-marketing-stage .stage-content ul li {
    margin-bottom: 10px;
    padding-left: 10px;
    line-height: 1.6;
}

/* Tùy chỉnh cho các tiêu đề video (dùng thẻ code) */
.aipg-marketing-stage .stage-content code {
    background-color: #e9f7ef;
    color: #1d7a46;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
}

/* Tùy chỉnh cho kịch bản */
.aipg-marketing-stage .aipg-outline-item {
    margin-bottom: 15px;
}
.aipg-marketing-stage .aipg-outline-item strong {
    color: #005a9c;
}
.aipg-marketing-stage .aipg-outline-item p {
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 15px;
    border-left: 3px solid #f0f7ff;
}

/* Tùy chỉnh cho container chứa các thẻ tag */
.aipg-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
}

/* Nút sao chép tags */
.aipg-copy-tags-btn {
    background-color: #007bff !important;
    border-color: #007bff !important;
}
.aipg-copy-tags-btn:hover {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}
/* ============================================= */
/* CSS NÂNG CẤP CHO TAB "AI MARKETING SIM SỐ"    */
/* Phiên bản: Chuyên nghiệp & Hiện đại          */
/* ============================================= */

/* --- 1. BIẾN MÀU VÀ BIẾN CHUNG --- */
:root {
    --aipg-primary-red: #D9242A;
    --aipg-primary-red-hover: #B91C1C;
    --aipg-border-color: #d1d5db; /* Xám nhạt */
    --aipg-background-light: #f9fafb; /* Xám rất nhạt */
    --aipg-text-dark: #1f2937;
    --aipg-text-medium: #4b5563;
    --aipg-text-light: #6b7280;
    --aipg-border-radius: 6px;
    --aipg-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* --- 2. BỘ CHUYỂN ĐỔI CHẾ ĐỘ (TABS) --- */
#veo-tab-sim-marketer .aipg-mode-switch {
    display: flex;
    border-bottom: 2px solid var(--aipg-border-color);
    margin-bottom: 24px;
}

#veo-tab-sim-marketer .aipg-mode-switch-btn {
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--aipg-text-medium);
    margin-bottom: -2px; /* Dính vào đường kẻ */
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 8px;
}

#veo-tab-sim-marketer .aipg-mode-switch-btn:hover {
    background-color: var(--aipg-background-light);
    color: var(--aipg-text-dark);
}

#veo-tab-sim-marketer .aipg-mode-switch-btn.active {
    color: var(--aipg-primary-red);
    border-bottom-color: var(--aipg-primary-red);
}

/* --- 3. KHUNG NỘI DUNG CHÍNH --- */
#veo-tab-sim-marketer .aipg-creation-panel {
    padding: 24px;
    background-color: #ffffff;
    border: 1px solid var(--aipg-border-color);
    border-radius: var(--aipg-border-radius);
    box-shadow: var(--aipg-box-shadow);
}

/* --- 4. FORM VÀ CÁC THÀNH PHẦN --- */
#veo-tab-sim-marketer .aipg-form-group {
    margin-bottom: 24px;
}

#veo-tab-sim-marketer .aipg-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--aipg-text-dark);
    font-size: 15px;
}

#veo-tab-sim-marketer .large-text,
#veo-tab-sim-marketer input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--aipg-border-color);
    border-radius: var(--aipg-border-radius);
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: var(--aipg-background-light);
}

#veo-tab-sim-marketer .large-text:focus,
#veo-tab-sim-marketer input[type="text"]:focus {
    border-color: var(--aipg-primary-red);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(217, 36, 42, 0.15);
    outline: none;
}

/* --- 5. BỘ CHỌN PHONG CÁCH (RADIO CARDS) - NÂNG CẤP LỚN NHẤT --- */
#veo-tab-sim-marketer .aipg-radio-card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

#veo-tab-sim-marketer .aipg-radio-card input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    opacity: 0;
}

#veo-tab-sim-marketer .aipg-radio-card {
    display: block;
    position: relative;
    padding: 16px;
    border: 2px solid var(--aipg-border-color);
    border-radius: var(--aipg-border-radius);
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#veo-tab-sim-marketer .aipg-radio-card:hover {
    border-color: var(--aipg-primary-red);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

#veo-tab-sim-marketer .aipg-radio-card input[type="radio"]:checked + .radio-card-content {
    /* Đây là phần tử giả để tạo viền cho card cha khi được chọn */
}
#veo-tab-sim-marketer .aipg-radio-card input[type="radio"]:checked::before {
    content: '✔';
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--aipg-primary-red);
    color: white;
    font-weight: bold;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

#veo-tab-sim-marketer .aipg-radio-card input[type="radio"]:checked {
    /* Áp style cho card cha khi radio được chọn */
    border-color: var(--aipg-primary-red);
    box-shadow: 0 0 0 3px rgba(217, 36, 42, 0.2);
}

#veo-tab-sim-marketer .radio-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#veo-tab-sim-marketer .radio-card-content strong {
    font-size: 15px;
    color: var(--aipg-text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

#veo-tab-sim-marketer .radio-card-content span {
    font-size: 13px;
    color: var(--aipg-text-light);
    line-height: 1.4;
}

/* Thêm icon cho các radio card */
#veo-tab-sim-marketer input[value="luxury"] + .radio-card-content strong::before,
#veo-tab-sim-marketer input[value="rare_gem"] + .radio-card-content strong::before { content: ''; }
#veo-tab-sim-marketer input[value="feng_shui"] + .radio-card-content strong::before { content: ''; }
#veo-tab-sim-marketer input[value="modern"] + .radio-card-content strong::before { content: ''; }
#veo-tab-sim-marketer input[value="flash_sale"] + .radio-card-content strong::before { content: '⚡'; }
#veo-tab-sim-marketer input[value="storytelling"] + .radio-card-content strong::before { content: '📚'; }
#veo-tab-sim-marketer input[value="teaser"] + .radio-card-content strong::before { content: '🤫'; }
#veo-tab-sim-marketer input[value="livestream"] + .radio-card-content strong::before { content: '🔴'; }


/* --- 6. NÚT HÀNH ĐỘNG CHÍNH --- */
#veo-tab-sim-marketer .button-hero {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--aipg-primary-red);
    border: none;
    border-radius: var(--aipg-border-radius);
    transition: all 0.2s ease-in-out;
    box-shadow: var(--aipg-box-shadow);
}

#veo-tab-sim-marketer .button-hero:hover:not(:disabled) {
    background-color: var(--aipg-primary-red-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(217, 36, 42, 0.2);
}

/* --- 7. KHU VỰC HIỂN THỊ KẾT QUẢ --- */
#veo-tab-sim-marketer .aipg-results-container {
    margin-top: 32px;
    border-top: 1px solid var(--aipg-border-color);
    padding-top: 24px;
}
/* DÁN VÀO CUỐI FILE aipg-style.css */

.aipg-form-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Tách biệt với textarea bên dưới */
}

.aipg-form-group-header label {
    margin-bottom: 0 !important; /* Ghi đè margin mặc định */
}
/* DÁN VÀO CUỐI FILE aipg-style.css */

/* --- CSS cho Cẩm nang Prompt Engineering --- */
.aipg-accordion {
    width: 100%;
    margin-top: 20px;
}

.aipg-accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.aipg-accordion-header {
    width: 100%;
    background-color: #f9fafb;
    padding: 15px 20px;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aipg-accordion-header:hover {
    background-color: #f3f4f6;
}

.aipg-accordion-header::after {
    content: '+';
    font-size: 20px;
    font-weight: bold;
    color: #9ca3af;
    transition: transform 0.3s ease;
}

.aipg-accordion-item.active .aipg-accordion-header::after {
    content: '−';
    transform: rotate(180deg);
}

.aipg-accordion-content {
    padding: 20px;
    background-color: #fff;
    display: none; /* Mặc định ẩn */
    border-top: 1px solid #e5e7eb;
}

.aipg-accordion-content ul {
    margin-left: 20px;
}
.aipg-accordion-content li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.aipg-code-snippet {
    background-color: #1f2937;
    color: #d1d5db;
    padding: 15px;
    border-radius: 6px;
    margin: 15px 0;
    font-family: monospace;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-all;
}

.aipg-template-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.aipg-template-card h4 {
    margin-top: 0;
}
/* ==========================================================================
   [MỚI] CSS CHO TRỢ LÝ AI BRAINSTORM (CẤU TRÚC 5P)
   ========================================================================== */

/* --- Nút bấm kích hoạt --- */
.aipg-brainstorm-trigger-wrapper {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--aipg-border-color);
    text-align: center;
}

#aipg-open-brainstorm-popup {
    background-color: #f0f7ff;
    color: #005a9c;
    border: 1px solid #b3d7ff;
    font-weight: 600;
}

#aipg-open-brainstorm-popup:hover {
    background-color: #e0ecf9;
    border-color: #8abcf2;
}

/* --- Tùy chỉnh Popup --- */
#aipg-brainstorm-popup .aipg-popup-content {
    max-width: 800px; /* Rộng hơn để chứa nội dung dài */
}

#aipg-brainstorm-popup .aipg-popup-body {
    padding: 20px 25px;
    max-height: 70vh; /* Giới hạn chiều cao và cho phép cuộn */
    overflow-y: auto;
}

/* --- Tái sử dụng và tùy chỉnh Accordion --- */
#aipg-brainstorm-popup .aipg-accordion-item {
    background-color: #fff;
    margin-bottom: 12px;
}

#aipg-brainstorm-popup .aipg-accordion-header {
    background-color: #f9fafb;
    font-size: 16px;
    padding: 15px 20px;
}

#aipg-brainstorm-popup .aipg-accordion-content {
    padding: 20px;
    border-top: 1px solid var(--aipg-border-color);
}

#aipg-brainstorm-popup .aipg-accordion-content p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.6;
}
#aipg-brainstorm-popup .aipg-accordion-content blockquote {
    margin: 0 0 15px 15px;
    padding-left: 15px;
    border-left: 3px solid var(--aipg-primary-color);
    color: var(--aipg-text-dark);
    font-style: italic;
}

/* --- Khối Gợi ý & Cảnh báo --- */
.aipg-callout {
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
    border-left-width: 5px;
    border-left-style: solid;
}
.aipg-callout.is-suggestion {
    background-color: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}
.aipg-callout.is-warning {
    background-color: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}
/* === [GIAI ĐOẠN 1] RATING SYSTEM === */
.aipg-rating-stars {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed var(--aipg-border-color);
}
.aipg-rating-stars .star {
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}
.aipg-rating-stars .star:hover,
.aipg-rating-stars .star.is-rated {
    color: #ffc700;
}
/* --- [GIAI ĐOẠN 2] WIZARD MODE --- */
#aipg-wizard-progress-bar { display: flex; justify-content: space-between; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.aipg-wizard-progress-step { flex: 1; text-align: center; padding: 5px; color: #aaa; font-weight: 500; border-bottom: 3px solid transparent; }
.aipg-wizard-progress-step.active { color: var(--aipg-primary-color); border-bottom-color: var(--aipg-primary-color); font-weight: bold; }
.aipg-wizard-step h4 { margin-top: 0; }
.aipg-wizard-step textarea, .aipg-wizard-step select { width: 100%; }
#wizard-review-panel { background: #f9f9f9; padding: 15px; border-radius: 6px; margin-bottom: 20px; }
#aipg-wizard-footer { justify-content: space-between; }
/* ==========================================================================
   [NÂNG CẤP V3] CSS CHO AI HASHTAG
   ========================================================================== */

.aipg-strategy-guide {
    background-color: #eef7ff;
    border-left: 4px solid #3b82f6;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
}

.aipg-strategy-guide .dashicons {
    color: #3b82f6;
    margin-right: 8px;
}

.aipg-tags-container .aipg-tag-chip {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.aipg-tags-container .aipg-tag-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Phân loại màu sắc cho hashtag */
.aipg-tag-chip.level-high {
    background-color: #ef4444; /* Red */
    color: white;
    font-weight: 600;
}
.aipg-tag-chip.level-medium {
    background-color: #3b82f6; /* Blue */
    color: white;
}
.aipg-tag-chip.level-niche {
    background-color: #f3f4f6; /* Gray */
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.aipg-tag-chip.copied-once {
    background-color: #10b981 !important; /* Green */
    color: white !important;
}
/* ==========================================================================
   [HOÀN CHỈNH] CSS TỐI ƯU GIAO DIỆN "AI MARKETING POST" V2
   ========================================================================== */

/* Biến màu để dễ quản lý */
:root {
    --aipg-primary-color: #d63638;
    --aipg-primary-border-color: #b02a2e;
    --aipg-text-primary: #1d2327;
    --aipg-text-secondary: #50575e;
    --aipg-border-color: #d1d5db;
    --aipg-bg-light: #f9fafb;
    --aipg-bg-white: #ffffff;
}

/* Tiêu đề chính của Tab */
#veo-tab-marketing-post h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--aipg-text-primary);
    margin-bottom: 8px;
}

#veo-tab-marketing-post > p.description {
    font-size: 15px;
    margin-bottom: 30px;
    max-width: 80ch;
}

/* Định dạng chung cho mỗi bước (section) */
#veo-tab-marketing-post .aipg-form-section {
    background: var(--aipg-bg-white);
    border: 1px solid var(--aipg-border-color);
    border-radius: 8px;
    margin-bottom: 30px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* Tiêu đề của mỗi bước (Bước 1, Bước 2...) */
#veo-tab-marketing-post .aipg-section-header {
    background: var(--aipg-bg-light);
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid var(--aipg-border-color);
    font-size: 16px;
    font-weight: 600;
    color: var(--aipg-text-primary);
}

/* Nội dung bên trong mỗi bước */
#veo-tab-marketing-post .aipg-form-section > div:not(.aipg-section-header),
#veo-tab-marketing-post .aipg-form-section > .aipg-form-group {
    padding: 20px;
}
#veo-tab-marketing-post .aipg-form-section > .aipg-form-group {
     padding-top: 0;
}


/* Bố cục lưới cho các lựa chọn chiến lược ở Bước 2 */
#veo-tab-marketing-post .aipg-form-grid-3col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Nâng cấp giao diện cho các thẻ lựa chọn (Radio Cards) ở Bước 3 */
#veo-tab-marketing-post .aipg-radio-card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

#veo-tab-marketing-post .aipg-radio-card {
    border: 1px solid var(--aipg-border-color);
    border-radius: 6px;
    background: var(--aipg-bg-white);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    padding: 0;
}

#veo-tab-marketing-post .aipg-radio-card .radio-card-content {
    padding: 15px;
    border-radius: 5px; /* Bo góc bên trong */
    border: 2px solid transparent;
}

#veo-tab-marketing-post .aipg-radio-card:hover {
    border-color: var(--aipg-primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#veo-tab-marketing-post .aipg-radio-card input[type="radio"] {
    display: none;
}

#veo-tab-marketing-post .aipg-radio-card input:checked + .radio-card-content {
    border-color: var(--aipg-primary-color);
    background: #fff8f8;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.1);
}

/* Thêm dấu tick vào lựa chọn được chọn */
#veo-tab-marketing-post .aipg-radio-card input:checked + .radio-card-content::after {
    content: '\\2713'; /* Mã ký tự dấu tick */
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--aipg-primary-color);
    font-size: 18px;
    font-weight: bold;
}

#veo-tab-marketing-post .aipg-radio-card strong {
    color: var(--aipg-text-primary);
    font-size: 14px;
}

#veo-tab-marketing-post .aipg-radio-card span {
    font-size: 13px;
    color: var(--aipg-text-secondary);
    line-height: 1.5;
    display: block;
    margin-top: 5px;
}

/* Nâng cấp giao diện cho Bước 4: Lựa chọn "Đòn bẩy tâm lý" (Checkbox Pills) */
.aipg-checkbox-card-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.aipg-checkbox-card {
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aipg-checkbox-card input[type="checkbox"] {
    display: none;
}

.aipg-checkbox-card span {
    display: block;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--aipg-border-color);
    border-radius: 20px;
    background-color: var(--aipg-bg-white);
    color: var(--aipg-text-secondary);
}
.aipg-checkbox-card:hover span {
    border-color: #9ca3af;
}

.aipg-checkbox-card input:checked + span {
    background-color: var(--aipg-primary-color);
    border-color: var(--aipg-primary-border-color);
    color: #fff;
    box-shadow: 0 2px 5px rgba(214, 54, 56, 0.2);
}

/* Nút bấm Cố vấn AI */
.aipg-form-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.aipg-form-group-header .button-secondary.button-small {
    background: #f0f0f1;
    border-color: #d1d5db;
    color: #3c434a;
}
.aipg-form-group-header .button-secondary.button-small:hover {
    background: #e5e7eb;
}
/* ==========================================================================
   [MỚI] CSS CHO TOAST NOTIFICATION
   ========================================================================== */
.aipg-toast {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    position: fixed;
    z-index: 99999;
    right: 30px;
    bottom: 30px;
    font-size: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s, bottom 0.3s;
}

/* Các loại thông báo */
.aipg-toast.success {
    background-color: #28a745;
}
.aipg-toast.error {
    background-color: #dc3545;
}
.aipg-toast.info {
    background-color: #17a2b8;
}


/* Hiệu ứng hiển thị */
.aipg-toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}
/* ==========================================================================
   [NÂNG CẤP] CSS TỐI ƯU GIAO DIỆN CHO CÁC TÍNH NĂNG MỚI
   ========================================================================== */

/* --- 1. Cấu trúc chung cho các container kết quả --- */
.aipg-multiple-results-container {
    display: grid;
    /* Tự động chia cột, mỗi cột tối thiểu 350px */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

/* --- 2. Định dạng thẻ kết quả (Result Card) chung --- */
.aipg-multiple-results-container .aipg-result-card {
    background-color: #ffffff;
    border: 1px solid #e0e2e7;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.aipg-multiple-results-container .aipg-result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.aipg-result-card .aipg-card-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e0e2e7;
    font-weight: 600;
    font-size: 1.05em;
    background-color: #f9fafb;
    color: #111827;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.aipg-result-card .aipg-card-body {
    padding: 16px;
    flex-grow: 1; /* Giúp phần body co giãn lấp đầy thẻ */
    line-height: 1.6;
}

.aipg-result-card .aipg-card-body p:first-child {
    margin-top: 0;
}

.aipg-result-card .aipg-card-body p:last-child {
    margin-bottom: 0;
}

/* --- 3. Định dạng riêng cho từng tính năng --- */

/* a. AI Phân tích Đối tượng */
#veo-tab-audience-persona .aipg-card-body p strong {
    display: block;
    color: #4b5563;
    margin-bottom: 4px;
}

/* b. AI Dò Trend */
#veo-tab-trend-spotter .aipg-card-header strong {
    background-color: #fee2e2;
    color: #b91c1c;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 0.85em;
}

/* c. AI Họa sĩ Storyboard */
#aipg-storyboard-results-container {
    grid-template-columns: 1fr; /* Storyboard luôn hiển thị 1 cột cho dễ đọc */
}

#aipg-storyboard-results-container .aipg-card-header {
    background-color: #f0f9ff;
    color: #0c4a6e;
}

/* d. AI Lai tạo Prompt */
.aipg-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* e. Bộ sưu tập Tài sản (Placeholder) */
.aipg-feature-placeholder {
    text-align: center;
    padding: 60px 30px;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    margin-top: 20px;
    color: #6b7280;
}

.aipg-feature-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    color: #9ca3af;
}

.aipg-feature-placeholder p {
    font-size: 1.1em;
    margin: 0;
}
/* ========================================================================
   [NÂNG CẤP] GIAO DIỆN MỚI CHO TRỢ LÝ AI ĐA NĂNG (SIÊU BỘ NÃO)
   ======================================================================== */

/* --- 1. Định nghĩa Bảng màu & Biến số --- */
.aipg-veo-v4-container {
    --sb-bg: #f7f8fc; /* Nền chính của popup */
    --sb-header-bg: #ffffff; /* Nền của header */
    --sb-chat-bg: #ffffff; /* Nền khu vực chat */
    --sb-footer-bg: #f0f2f7; /* Nền khu vực nhập liệu */
    --sb-border-color: #e5e7eb; /* Màu viền chung */
    --sb-bot-bubble-bg: #edf2f7; /* Nền bong bóng chat của Bot */
    --sb-bot-text-color: #2d3748; /* Màu chữ của Bot */
    --sb-user-bubble-bg: #3b82f6; /* Nền bong bóng chat của User */
    --sb-user-text-color: #ffffff; /* Màu chữ của User */
    --sb-primary-text: #1a202c; /* Màu chữ chính */
    --sb-secondary-text: #718096; /* Màu chữ phụ */
    --sb-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* --- 2. Khung Popup Chính --- */
#aipg-super-brain-popup .aipg-popup-content {
    background-color: var(--sb-bg);
    border-radius: 16px; /* Bo góc mềm mại hơn */
    box-shadow: var(--sb-shadow);
    max-width: 600px; /* Tăng chiều rộng cho không gian thoải mái */
    height: 70vh; /* Chiều cao linh hoạt */
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sb-border-color);
}

/* --- 3. Header --- */
#aipg-super-brain-popup .aipg-popup-header {
    background-color: var(--sb-header-bg);
    border-bottom: 1px solid var(--sb-border-color);
    padding: 16px 24px;
    flex-shrink: 0;
}

#aipg-super-brain-popup .aipg-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--sb-primary-text);
}

#aipg-super-brain-popup .aipg-popup-close {
    font-size: 28px;
    font-weight: 300;
    color: var(--sb-secondary-text);
    transition: all 0.2s ease-in-out;
}
#aipg-super-brain-popup .aipg-popup-close:hover {
    color: var(--sb-primary-text);
    transform: rotate(90deg);
}

/* --- 4. Khu vực Chat & Tin nhắn --- */
#aipg-super-brain-chat-area {
    background-color: var(--sb-chat-bg);
    flex-grow: 1;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Tùy chỉnh thanh cuộn */
#aipg-super-brain-chat-area::-webkit-scrollbar {
    width: 6px;
}
#aipg-super-brain-chat-area::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 3px;
}

/* Định dạng chung cho các tin nhắn */
.chat-message {
    max-width: 80%;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

.chat-message p {
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.6;
    margin: 0;
    font-size: 15px;
    word-wrap: break-word;
}

/* Tin nhắn của Bot (trái) */
.bot-message {
    align-self: flex-start;
    align-items: flex-start;
}

.bot-message p {
    background-color: var(--sb-bot-bubble-bg);
    color: var(--sb-bot-text-color);
    border-top-left-radius: 4px;
}

/* Tin nhắn của User (phải) */
.user-message {
    align-self: flex-end;
    align-items: flex-end;
}

.user-message p {
    background-color: var(--sb-user-bubble-bg);
    color: var(--sb-user-text-color);
    border-top-right-radius: 4px;
}

/* --- 5. Gợi ý & Nút bấm nhanh --- */
.aipg-suggestion-header {
    margin: 20px 0 8px 0;
    font-size: 13px;
    color: var(--sb-secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.aipg-suggestion-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.aipg-quick-action-btn {
    background-color: transparent;
    border: 1px solid var(--sb-border-color);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    color: var(--sb-primary-text);
    transition: all 0.2s ease;
}
.aipg-quick-action-btn:hover {
    background-color: var(--sb-bot-bubble-bg);
    border-color: #a0aec0;
    transform: translateY(-2px);
}

/* --- 6. Footer & Khu vực Nhập liệu --- */
.aipg-super-brain-footer {
    background-color: var(--sb-footer-bg);
    padding: 16px 24px;
    border-top: 1px solid var(--sb-border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

#aipg-super-brain-input {
    flex-grow: 1;
    border-radius: 12px;
    border: 1px solid var(--sb-border-color);
    padding: 12px 16px;
    font-size: 15px;
    resize: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#aipg-super-brain-input:focus {
    outline: none;
    border-color: var(--sb-user-bubble-bg);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

#aipg-super-brain-send-btn {
    background-color: var(--sb-user-bubble-bg);
    color: white;
    border: none;
    border-radius: 50%; /* Nút tròn */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    flex-shrink: 0;
    font-size: 20px; /* Kích thước icon */
}

/* Icon máy bay giấy */
#aipg-super-brain-send-btn::before {
    content: '➤';
    font-family: sans-serif;
    transform: rotate(-45deg) translateY(1px) translateX(1px);
}

#aipg-super-brain-send-btn:hover {
    background-color: #2563eb;
    transform: scale(1.1);
}
#aipg-super-brain-send-btn:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
    transform: scale(1);
}
/* ========================================================================
   [AIPG] NÂNG CẤP GIAO DIỆN V3 - TAB "AI KIẾN TRÚC SƯ PROMPT VIDEO"
   ======================================================================== */

/* --- 1. BIẾN MÀU VÀ BỐ CỤC CHUNG CHO TAB --- */
#veo-tab-funnel-scriptwriter {
    --architect-primary-color: #6d28d9; /* Màu tím chủ đạo */
    --architect-primary-hover: #5b21b6;
    --architect-bg-light: #f9fafb; /* Nền sáng */
    --architect-border-color: #e5e7eb;
    --architect-text-secondary: #6b7280;
    --architect-text-primary: #1f2937;
}

#veo-tab-funnel-scriptwriter h3 {
    font-size: 24px;
    color: var(--architect-text-primary);
    border-bottom: 2px solid var(--architect-primary-color);
    padding-bottom: 10px;
    margin-bottom: 5px;
}

#veo-tab-funnel-scriptwriter > p {
    font-size: 16px;
    color: var(--architect-text-secondary);
    margin-top: 5px;
    max-width: 800px;
}

/* --- 2. NÚT CHUYỂN CHẾ ĐỘ (MẶC ĐỊNH / NÂNG CAO) --- */
#veo-tab-funnel-scriptwriter .aipg-mode-switch-btn {
    background-color: #ffffff;
    border: 1px solid var(--architect-border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease-in-out;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
}

#veo-tab-funnel-scriptwriter .aipg-mode-switch-btn.active {
    background-color: var(--architect-primary-color);
    color: #ffffff;
    border-color: var(--architect-primary-color);
    box-shadow: 0 4px 6px -1px rgba(109, 40, 217, 0.2), 0 2px 4px -1px rgba(109, 40, 217, 0.12);
}
#veo-tab-funnel-scriptwriter .aipg-mode-switch-btn.active .dashicons {
    color: #ffffff;
}
#veo-tab-funnel-scriptwriter .aipg-mode-switch-btn:hover:not(.active) {
    border-color: #a5b4fc;
    background-color: #fafaff;
}


/* --- 3. CÁC KHUNG NHẬP LIỆU (PANELS) --- */
#veo-tab-funnel-scriptwriter .aipg-creation-panel {
    background-color: var(--architect-bg-light);
    border: 1px solid var(--architect-border-color);
    padding: 25px;
    border-radius: 8px;
    margin-top: 20px;
}

#veo-tab-funnel-scriptwriter .aipg-form-group {
    margin-bottom: 25px;
}

#veo-tab-funnel-scriptwriter .aipg-form-group label {
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}

/* --- Đánh số các bước trong chế độ Nâng cao --- */
#architect-panel-advanced .aipg-form-group > label::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--architect-primary-color);
    color: white;
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    line-height: 1;
}
#architect-panel-advanced .aipg-form-group:nth-of-type(1) > label::before { content: '1'; }
#architect-panel-advanced .aipg-form-group:nth-of-type(2) > label::before { content: '2'; }
#architect-panel-advanced .aipg-form-group:nth-of-type(3) > label::before { content: '3'; }


/* --- 4. CÁC Ô NHẬP LIỆU (TEXTAREA, SELECT) --- */
#veo-tab-funnel-scriptwriter textarea,
#veo-tab-funnel-scriptwriter select {
    width: 100%;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    padding: 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
}

#veo-tab-funnel-scriptwriter textarea:focus,
#veo-tab-funnel-scriptwriter select:focus {
    border-color: var(--architect-primary-color) !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15) !important;
    outline: none;
}

/* --- 5. CÁC TRỢ LÝ AI (Sổ ra) --- */
#veo-tab-funnel-scriptwriter .aipg-inline-suggester-wrapper {
    background-color: #ffffff;
    border: 1px solid var(--architect-border-color);
    border-radius: 6px;
    margin-top: 15px;
    padding: 15px;
}
#veo-tab-funnel-scriptwriter .aipg-inline-suggester-wrapper .button-like-link,
#veo-tab-funnel-scriptwriter .aipg-inline-suggester-wrapper h5 {
    font-weight: 600;
    color: var(--architect-primary-color);
    cursor: pointer;
}
#veo-tab-funnel-scriptwriter .aipg-template-suggester-panel,
#veo-tab-funnel-scriptwriter #aipg-architect-dialogue-results {
    margin-top: 15px;
    border-top: 1px solid var(--architect-border-color);
    padding-top: 15px;
}
#veo-tab-funnel-scriptwriter .aipg-suggestion-tag {
    background-color: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}
#veo-tab-funnel-scriptwriter .aipg-suggestion-tag:hover {
    background-color: var(--architect-primary-color);
    border-color: var(--architect-primary-hover);
    color: white;
}

/* --- 6. NÚT BẤM CHÍNH (TẠO PROMPT) --- */
#veo-tab-funnel-scriptwriter .button-hero {
    font-size: 16px !important;
    padding: 14px 28px !important;
    background-image: linear-gradient(to right, #8b5cf6, #6d28d9);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    margin-top: 15px;
    width: 100%;
}

#veo-tab-funnel-scriptwriter .button-hero:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(0,0,0,0.15);
}

/* --- 7. KHU VỰC KẾT QUẢ --- */
#veo-tab-funnel-scriptwriter #aipg-architect-results-container {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--architect-border-color);
    display: flex;
    flex-direction: column;
    gap: 25px;
}
#veo-tab-funnel-scriptwriter #aipg-architect-results-container h4 {
    font-size: 18px;
    color: #111827;
    margin-bottom: 0;
}
#veo-tab-funnel-scriptwriter #aipg-architect-results-container .aipg-result-card {
    border-left-width: 4px;
    border-left-color: var(--architect-primary-color);
}
#veo-tab-funnel-scriptwriter #aipg-architect-results-container .aipg-batch-results-textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.8;
}
#veo-tab-funnel-scriptwriter #aipg-architect-results-container .aipg-copy-multiline-prompt {
    background-color: var(--architect-primary-color);
    color: #ffffff;
    border-radius: 6px;
    font-weight: 500;
}
#veo-tab-funnel-scriptwriter #aipg-architect-results-container .aipg-copy-multiline-prompt:hover {
    background-color: var(--architect-primary-hover);
}
/* DÁN VÀO CUỐI FILE aipg-style.css */

/* --- [MỚI] CSS cho Trợ lý Kịch bản Nâng cao --- */
#aipg-architect-context-results .aipg-suggestion-category {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
}
#aipg-architect-context-results .aipg-suggestion-category:first-child {
    margin-top: 0;
}

/* Hiệu ứng phản hồi khi nhấp vào thẻ gợi ý */
.aipg-suggestion-tag.aipg-tag-clicked {
    background-color: #28a745 !important; /* Màu xanh lá cây */
    color: white !important;
    border-color: #28a745 !important;
    transition: all 0.1s ease-in-out;
}
/* ========================================================================
   [AIPG] NÂNG CẤP GIAO DIỆN V4 - BẢNG ĐIỀU KHIỂN AI KIẾN TRÚC SƯ
   ======================================================================== */

/* --- 1. Container Lưới Chính --- */
.aipg-architect-controls {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Tạo layout 2 cột bằng nhau */
    gap: 24px; /* Khoảng cách giữa 2 cột */
    align-items: start; /* Căn các cột theo đỉnh */
    padding: 20px;
    background-color: var(--architect-bg-light, #f9fafb);
    border: 1px solid var(--architect-border-color, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 25px;
}

/* --- 2. Kiểu dáng chung cho mỗi khối điều khiển --- */
.aipg-control-group .aipg-control-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--architect-text-secondary, #6b7280);
    margin-bottom: 10px;
}

/* --- 3. Cột 1: Nút Chọn Chế độ --- */
.aipg-mode-switch.aipg-button-group {
    display: flex;
    flex-direction: column; /* Xếp các nút theo chiều dọc */
    gap: 10px;
}

#veo-tab-funnel-scriptwriter .aipg-mode-switch-btn {
    width: 100%;
    justify-content: flex-start; /* Căn nội dung nút sang trái */
    text-align: left;
    padding: 12px 15px;
    font-size: 14px;
}

/* --- 4. Cột 2: Các Dropdown Thiết lập --- */
.aipg-global-settings-group .aipg-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr; /* Trong cột này, các dropdown xếp dọc */
    gap: 16px;
}

.aipg-global-settings-group .aipg-form-group {
    margin: 0; /* Bỏ margin mặc định */
}

.aipg-global-settings-group .aipg-control-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--architect-text-secondary, #6b7280);
    margin-bottom: 10px;
}

/* --- 5. Tối ưu cho Điện thoại --- */
@media (max-width: 782px) {
    .aipg-architect-controls {
        grid-template-columns: 1fr; /* Chuyển về 1 cột trên màn hình nhỏ */
        gap: 20px;
    }

    .aipg-global-settings-group .aipg-form-grid-2col {
        grid-template-columns: 1fr; /* Vẫn giữ 1 cột */
    }
}
/* ========================================================================
   [AIPG] NÂNG CẤP GIAO DIỆN V4 - TRỢ LÝ MỞ RỘNG LỜI THOẠI
   ======================================================================== */

/* Container chứa các card kết quả */
#aipg-architect-dialogue-results {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Khoảng cách giữa các card */
}

/* Kiểu dáng cho mỗi card gợi ý */
.aipg-dialogue-suggestion-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background-color: #f8f9fa; /* Nền xám rất nhạt */
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--architect-primary-color, #6d28d9); /* Viền tím bên trái để nhấn mạnh */
    padding: 15px 20px;
    border-radius: 6px;
    transition: box-shadow 0.2s ease-in-out;
}

.aipg-dialogue-suggestion-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
}

/* Phần văn bản gợi ý */
.aipg-dialogue-suggestion-card .suggestion-text {
    flex-grow: 1; /* Cho phép text chiếm hết không gian còn lại */
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #343a40;
}

/* Nút "Sử dụng" */
.aipg-dialogue-suggestion-card .aipg-use-dialogue-suggestion-btn {
    flex-shrink: 0; /* Ngăn nút bị co lại */
    background-color: #ffffff !important;
    border-color: #ced4da !important;
    color: #495057 !important;
    font-weight: 500;
    transition: all 0.2s ease !important;
}

.aipg-dialogue-suggestion-card .aipg-use-dialogue-suggestion-btn:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}
/* ========================================================================
   [AIPG] NÂNG CẤP V5 - TRỢ LÝ KIẾN TRÚC SƯ
   ======================================================================== */

/* Khu vực ghép nối kịch bản */
#aipg-architect-storyboard-area {
    background-color: #f0f7ff;
    border: 1px solid #b3d7ff;
    border-radius: 8px;
    padding: 20px;
}
#aipg-architect-storyboard-area h5 {
    margin-top: 0;
    font-size: 15px;
    color: #005a9c;
}
#aipg-architect-storyboard-area textarea {
    background-color: #fff;
    border-color: #b3d7ff;
}

/* Style cho thẻ gợi ý đã được sử dụng */
#aipg-architect-context-results .aipg-suggestion-tag.is-used {
    background-color: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
    text-decoration: line-through;
    border-color: #dee2e6;
}
#aipg-architect-context-results .aipg-suggestion-tag.is-used:hover {
    transform: none;
    box-shadow: none;
}
/* ========================================================================
   [AIPG] NÂNG CẤP GIAO DIỆN V5 - NÚT TẢI FILE
   ======================================================================== */

.aipg-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.aipg-results-header h4 {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

#aipg-architect-download-all-btn {
    font-size: 13px;
    font-weight: 500;
    background-color: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    transition: all 0.2s ease;
}

#aipg-architect-download-all-btn:hover {
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}

#aipg-architect-download-all-btn .dashicons {
    margin-right: 5px;
    font-size: 16px;
    line-height: 1.2;
}
/* ========================================================================
   NÂNG CẤP - TRỢ LÝ TẠO NHÂN VẬT
   ======================================================================== */
#aipg-character-assistant-modal textarea {
    width: 100%;
    margin-bottom: 10px;
}
#aipg-character-assistant-results textarea {
    width: 100%;
    rows: 4;
    margin-top: 10px;
}
#aipg-character-assistant-results p {
    margin-top: 10px;
    font-style: italic;
    color: #777;
}

/* --- TỔNG THỂ KẾT QUẢ --- */
#aipg-audience-results-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* --- (1) THÔNG TIN TÓM TẮT (CHIPS) --- */
.aiads-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.aiads-chips .chip {
    background-color: #e7f5ff;
    color: #1971c2;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- (2) CARD CHIẾN LƯỢC & BẢNG --- */
.aiads-card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.aiads-card-title {
    font-size: 1.15em;
    font-weight: 600;
    color: #212529;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

.aiads-sublabel {
    font-size: 0.9em;
    font-weight: 600;
    color: #495057;
    margin-top: 15px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Định dạng các danh sách (bullets, tags, keywords) --- */
.aiads-bullets {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.aiads-bullets li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 8px;
    color: #343a40;
}

.aiads-bullets li::before {
    content: '⚡'; /* Icon cho insights */
    position: absolute;
    left: 0;
    color: #fd7e14;
}

/* Icon riêng cho "Góc độ Nội dung" */
.aiads-bullets li:nth-child(n+1)::before {
    content: '🎬'; /* Icon cho angles */
    color: #228be6;
}

.aiads-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.aiads-tags li {
    background-color: #f1f3f5;
    color: #495057;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.aiads-kws {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.aiads-kws code {
    background-color: #e9ecef;
    color: #c92a2a;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* --- (3) BẢNG PHÂN NHÓM ĐỐI TƯỢNG --- */
.aiads-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
}

.aiads-table th,
.aiads-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.aiads-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.aiads-table tbody tr:hover {
    background-color: #f1f3f5;
}

.aiads-table td strong {
    color: #1864ab;
}

/* Phân chia cột cho cân đối */
.aiads-table th:nth-child(1), .aiads-table td:nth-child(1) { width: 18%; }
.aiads-table th:nth-child(2), .aiads-table td:nth-child(2) { width: 25%; }
.aiads-table th:nth-child(3), .aiads-table td:nth-child(3) { width: 22%; }
.aiads-table th:nth-child(4), .aiads-table td:nth-child(4) { width: 20%; }
.aiads-table th:nth-child(5), .aiads-table td:nth-child(5) { width: 15%; }


/* --- NÚT HÀNH ĐỘNG & XEM CHI TIẾT --- */
.aiads-actions {
    text-align: center;
    margin-bottom: 20px;
}

.aiads-details {
    margin-top: 15px;
    border: 1px dashed #ced4da;
    border-radius: 6px;
}

.aiads-details summary {
    padding: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #495057;
    outline: none;
}

.aiads-details pre {
    background-color: #212529;
    color: #f1f3f5;
    padding: 15px;
    border-radius: 0 0 5px 5px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 13px;
}

/* --- TỐI ƯU CHO GIAO DIỆN DI ĐỘNG --- */
@media (max-width: 768px) {
    /* Chuyển các grid 2 cột thành 1 cột */
    .aipg-form-grid-2col {
        grid-template-columns: 1fr;
    }

    /* Cho phép bảng cuộn ngang trên màn hình nhỏ */
    .aiads-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* ========================================================================
   [NÂNG CẤP] CSS CHO KHỐI TÀI SẢN THU GỌN (ACCORDION)
   ======================================================================== */

.aipg-asset-accordion {
    border: 1px solid #e0e4e7;
    border-radius: 8px;
    margin-top: 20px;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.aipg-asset-accordion[open] {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.aipg-asset-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #2c3338;
    cursor: pointer;
    list-style: none; /* Xóa mũi tên mặc định */
}

.aipg-asset-accordion summary::-webkit-details-marker {
    display: none; /* Ẩn mũi tên cho Chrome/Safari */
}

.aipg-asset-accordion summary:hover {
    background-color: #f9fafb;
}

/* Mũi tên tùy chỉnh */
.aipg-asset-accordion summary::after {
    content: '▼';
    font-size: 12px;
    color: #6b7280;
    transition: transform 0.2s ease-in-out;
}

/* Xoay mũi tên khi mở */
.aipg-asset-accordion[open] > summary::after {
    transform: rotate(180deg);
}

/* Panel nội dung bên trong */
.aipg-asset-accordion .aipg-accordion-content {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #e0e4e7;
}

.aipg-asset-accordion .aipg-accordion-content .description {
    margin-top: 0;
}
/* ========================================================================
   [SỬA LỖI] HIỂN THỊ NỘI DUNG ACCORDION
   ======================================================================== */

/* Quy tắc mới này sẽ ghi đè lên display: none; cũ khi thẻ details được mở */
.aipg-asset-accordion[open] > .aipg-accordion-content {
    display: block;
}

/* ========================================================================
   [AIPG] NÂNG CẤP GIAO DIỆN "AI TRỢ LÝ GPT"
   ======================================================================== */

/* --- Trình Khai báo Công cụ --- */
#gpt-tools-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.gpt-tool-item {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 15px;
    position: relative;
}
.gpt-tool-item .full-width {
    grid-column: 1 / -1;
}
.gpt-tool-item input {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
}
.gpt-tool-remove-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #ef4444 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    line-height: 24px;
    font-size: 16px;
    cursor: pointer;
}

/* --- Hộp Kết quả Tối ưu hóa --- */
.aipg-optimization-results-box {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #e5e7eb;
}
.aipg-optimization-results-box h5 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #111827;
}
.aipg-optimization-results-box ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    color: #4b5563;
}
.aipg-optimization-results-box ul li {
    margin-bottom: 8px;
}
/* ======================================================================== */
/* [AIPG] GIAO DIỆN "TỐI GIẢN & HIỆU QUẢ" - TAB "NHÂN VẬT NHẤT QUÁN"
/* ======================================================================== */

/* 0. Bảng màu & Biến số */
.aipg-veo-tab-content#veo-tab-consistent-character {
    --bg-main: #f9fafb;      /* Nền xám rất nhạt */
    --bg-card: #ffffff;     /* Nền thẻ trắng */
    --border-color: #e5e7eb; /* Viền xám nhạt */
    --text-primary: #374151; /* Chữ thường (xám đậm) */
    --text-headings: #111827;/* Chữ tiêu đề (đen hơn) */
    --accent-focus: #4f46e5; /* Màu nhấn khi focus (Tím Indigo) */
    --button-primary-bg: #1f2937; /* Nút chính (xám đen) */
    --button-primary-text: #ffffff;
}

/* 1. Bố cục & Khoảng trắng */
.aipg-veo-tab-content#veo-tab-consistent-character {
    background-color: var(--bg-main);
    color: var(--text-primary);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.aipg-consistent-layout-wrapper {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 30px;
}

.aipg-consistent-setup-column {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
}

/* 2. Kiểu chữ & Tiêu đề */
.aipg-veo-tab-content#veo-tab-consistent-character h3,
.aipg-veo-tab-content#veo-tab-consistent-character h4 {
    color: var(--text-headings);
}

.aipg-veo-tab-content#veo-tab-consistent-character .aipg-form-group > label[style*="font-weight: bold"] {
    display: block;
    font-size: 1.2em !important;
    font-weight: 600 !important;
    color: var(--text-headings);
    padding-bottom: 0;
    border-bottom: none; /* Bỏ gạch chân */
    margin-bottom: 20px;
}

/* 3. Thiết kế Thẻ Tối giản */
.aipg-ad-script-assistant,
.aipg-dialogue-assistant-section,
#aipg-consistent-scenes-container .aipg-scene-item,
#aipg-consistent-results-container .aipg-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* Đổ bóng rất nhẹ */
}

/* 4. Các ô nhập liệu */
#veo-tab-consistent-character input[type="text"],
#veo-tab-consistent-character textarea,
#veo-tab-consistent-character select {
    background-color: #fff;
    border: 1px solid #d1d5db; /* Viền đậm hơn một chút */
    color: var(--text-primary);
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

#veo-tab-consistent-character input[type="text"]:focus,
#veo-tab-consistent-character textarea:focus,
#veo-tab-consistent-character select:focus {
    border-color: var(--accent-focus);
    box-shadow: 0 0 0 1px var(--accent-focus);
    outline: none;
}

/* 5. Nút bấm & Tương tác */
/* Nút chính */
#aipg-generate-consistent-prompts-btn {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: none;
    font-weight: 500;
    border-radius: 8px;
}
#aipg-generate-consistent-prompts-btn:hover {
    background: #374151;
}

/* Nút phụ */
#aipg-add-scene-btn {
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
#aipg-add-scene-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}
/* Các nút nhỏ */
.aipg-input-with-button .button, 
.aipg-scene-item .button-primary {
    background-color: #e5e7eb;
    color: var(--text-headings);
    border: none;
}
.aipg-input-with-button .button:hover,
.aipg-scene-item .button-primary:hover {
    background-color: #d1d5db;
}

/* 6. Khu vực Kết quả */
#aipg-consistent-results-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

#aipg-consistent-results-container .aipg-card-header {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 15px;
    font-weight: 600;
    color: var(--text-headings);
}

#aipg-consistent-results-container pre.aipg-prompt-text {
    background-color: #f3f4f6; /* Nền xám rất nhạt cho prompt */
    color: #111827;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.6;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
#aipg-consistent-results-container .aipg-card-actions {
    border-top: 1px solid var(--border-color);
}

/* 7. Thanh Hành động cuối trang */
.aipg-sticky-action-bar {
    background: rgba(255, 255, 255, 0.85);
    border-top: 1px solid var(--border-color);
}

/* 8. Responsive */
@media (max-width: 1024px) {
    .aipg-consistent-layout-wrapper {
        grid-template-columns: 1fr;
    }
}
/* ======================================================================== */
/* [AIPG] GIAO DIỆN NÂNG CẤP CHO TAB "TẠO BIẾN THỂ" (3 CHẾ ĐỘ)
/* ======================================================================== */

/* 1. Bộ chọn chế độ, quay lại lưới 3 cột */
.aipg-mode-selector-tri {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* <-- KHÔI PHỤC LẠI 3 CỘT */
    gap: 10px;
    margin-top: 10px;
}

/* 2. Kiểu cho từng nút lựa chọn */
.aipg-mode-selector-tri .aipg-mode-btn {
    padding: 12px 15px;
    border: 2px solid #ccd0d4;
    background-color: #f6f7f7;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

/* 3. Hiệu ứng khi di chuột */
.aipg-mode-selector-tri .aipg-mode-btn:hover {
    border-color: #007cba;
    background-color: #f0f6fc;
}

/* 4. Giao diện của nút khi được chọn (active) */
.aipg-mode-selector-tri .aipg-mode-btn.active {
    border-color: #dc3232;
    background-color: #fff;
    color: #dc3232;
    box-shadow: 0 4px 10px rgba(220, 50, 50, 0.1);
    transform: translateY(-2px);
}

/* 5. Định dạng cho tiêu đề và mô tả bên trong nút */
.aipg-mode-selector-tri .aipg-mode-btn strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.aipg-mode-selector-tri .aipg-mode-btn small {
    font-size: 12px;
    color: #50575e;
}

.aipg-mode-selector-tri .aipg-mode-btn.active small {
    color: #dc3232;
}
/* ======================================================================== */
/* [AIPG] GIAO DIỆN 2 CỘT "TINH TẾ & CHUYÊN NGHIỆP" - TAB "AI CODE ARCHITECT"
/* ======================================================================== */

/* 0. Biến màu & Font chữ */
:root {
    --bg-main: #F7F8FC;
    --bg-panel: #FFFFFF;
    --border-color: #EAEBF0;
    --text-primary: #596780;
    --text-headings: #1C274C;
    --accent-primary: #4F46E5;
    --accent-subtle: #EEF2FF;
    --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
}

/* 1. Bố cục 2 cột */
.aipg-veo-tab-content#veo-tab-code-architect {
    background-color: var(--bg-main);
    padding: 25px;
}
.aipg-workbench-layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); /* Cột trái rộng hơn */
    gap: 25px;
    align-items: flex-start;
}
.aipg-workbench-controls, .aipg-workbench-preview {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.sticky-panel {
    position: sticky;
    top: 50px;
}

/* 2. Thiết kế Panel */
.aipg-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.aipg-panel-header {
    padding: 16px 20px;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-headings);
    border-bottom: 1px solid var(--border-color);
    margin: 0;
}
.aipg-panel-body {
    padding: 20px;
}

/* 3. Accordion thu gọn/mở rộng */
#veo-tab-code-architect .aipg-control-accordion {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
}
#veo-tab-code-architect .aipg-control-accordion summary {
    cursor: pointer;
    padding: 12px 15px;
    font-weight: 500;
    list-style: none;
}
#veo-tab-code-architect .aipg-control-accordion summary::-webkit-details-marker {
    display: none;
}
#veo-tab-code-architect .aipg-control-accordion .aipg-accordion-content {
    display: block !important;
    padding: 0 15px 15px 15px;
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
}

/* 4. Responsive */
@media (max-width: 1100px) {
    .aipg-workbench-layout-2col {
        grid-template-columns: 1fr; /* Chuyển thành 1 cột */
    }
    .sticky-panel {
        position: static;
    }
}

/* ======================================================================== */
/* [FIX] SỬA LỖI HIỂN THỊ TAB TRONG AI CODE ARCHITECT
/* ======================================================================== */

/* Ẩn tất cả các panel nội dung trong tab Code Architect theo mặc định */
.aipg-veo-tab-content#veo-tab-code-architect .aipg-casting-panel {
    display: none;
}

/* Chỉ hiển thị panel nào có class 'active' */
.aipg-veo-tab-content#veo-tab-code-architect .aipg-casting-panel.active {
    display: block;
}
/* CSS cho danh sách radio/checkbox mới */
.aipg-form-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.aipg-radio-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    background-color: #fdfdfd;
}

.aipg-radio-list label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

.aipg-radio-list label:hover {
    background-color: #f0f0f0;
}
/* CSS cho khối gợi ý target chi tiết mới */
.aiads-targeting-segment-card {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}
.aiads-targeting-segment-card h5 {
    margin-top: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #1d2327;
}
.targeting-details-block {
    font-size: 13px;
    line-height: 1.6;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.targeting-details-block strong {
    display: block;
    margin-top: 8px;
    margin-bottom: 4px;
    color: #50575e;
    font-weight: 600;
}
.targeting-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.targeting-tags-wrapper span {
    display: inline-block;
    background-color: #e9ebee;
    color: #444;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 12px;
}
.aiads-targeting-segment-card .aipg-card-actions {
    text-align: right;
    margin-top: 15px;
    border-top: 1px dashed #ccc;
    padding-top: 10px;
}
.cta-in-table {
    font-style: italic;
    color: #c42727;
    font-weight: 500;
}
.aipg-brain-selector-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.aipg-pill-btn {
    background-color: #f0f0f1;
    color: #1d2327;
    border: 1px solid #dcdcde;
    border-radius: 15px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.aipg-pill-btn.active, .aipg-pill-btn:hover {
    background-color: #4c22c5; /* Màu tím giống nút chính */
    color: #fff;
    border-color: #4c22c5;
}

/* ========================================================================
   [CSS] AI Soạn bài Quảng cáo từ Ảnh (AI Product Writer)
   ======================================================================== */

/* Bố cục chính cho toàn bộ công cụ */
.aipg-adpic-workspace {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột bằng nhau */
    gap: 30px;
    margin-top: 20px;
}

/* Panel điều khiển bên trái */
.aipg-adpic-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Panel kết quả bên phải */
.aipg-adpic-results .aipg-form-group {
    position: relative; /* Cần cho lớp phủ loading */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.aipg-adpic-results textarea {
    flex-grow: 1; /* De textarea lấp đầy không gian */
}


/* Khu vực tải ảnh lên */
#aipg-adpic-upload-area {
    margin-top: 5px;
}

.aipg-adpic-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 2px dashed #a7aaad;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    color: #50575e;
    transition: all 0.2s ease-in-out;
}

.aipg-adpic-upload-label .dashicons {
    font-size: 40px;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.aipg-adpic-upload-label:hover,
.aipg-adpic-upload-label.is-dragging {
    background-color: #f0f3ff;
    border-color: #4c22c5;
    color: #4c22c5;
}

/* Khung xem trước các ảnh đã tải lên */
#aipg-adpic-preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.adpic-preview-item {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    height: 100px; /* Đặt chiều cao cố định cho ảnh thumbnail */
}

.adpic-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh luôn vừa vặn, không bị méo */
}

/* Nút xóa ảnh preview */
.adpic-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.adpic-preview-item:hover .adpic-delete-btn {
    opacity: 1;
}

/* Lớp phủ loading trên ô kết quả */
#aipg-adpic-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

#aipg-adpic-loading-overlay p {
    margin-top: 10px;
    font-weight: 500;
}


/* Làm cho bố cục responsive trên màn hình nhỏ */
@media (max-width: 782px) {
    .aipg-adpic-workspace {
        grid-template-columns: 1fr; /* Chuyển thành 1 cột */
    }
}


/* ========================================================================
   [CSS Nâng cấp] Giao diện Timeline cho AI Cố vấn Chiến lược
   ======================================================================== */

.aipg-strategy-timeline {
    border-left: 3px solid #7e8993;
    padding-left: 25px;
    margin-top: 20px;
}

.timeline-phase {
    position: relative;
    margin-bottom: 30px;
}

.timeline-phase .phase-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.timeline-phase .phase-header .phase-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #0073aa;
    color: white;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    left: -47px; /* Căn chỉnh với đường timeline */
    border: 3px solid white;
}

.timeline-phase .phase-header .phase-title {
    margin: 0;
    padding-left: 15px;
    font-size: 1.3em;
    color: #0073aa;
}

.timeline-phase .phase-steps {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Chia cột tự động */
}

.timeline-step-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
}

.timeline-step-card .step-name {
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 8px;
}

.timeline-step-card .step-details {
    font-size: 13px;
    color: #50575e;
    flex-grow: 1; /* Đẩy phần rủi ro xuống dưới */
}

.timeline-step-card .step-risks-solutions {
    font-size: 12px;
    margin-top: 10px;
    border-top: 1px dashed #e0e0e0;
    padding-top: 10px;
}

.timeline-step-card .step-risks-solutions summary {
    cursor: pointer;
    color: #0073aa;
}

.timeline-step-card .risk-solution-content {
    margin-top: 8px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.timeline-step-card .task-actions {
    margin-top: 15px;
    text-align: right;
}
/* --- [REFINED] CSS for AI Cinematic Studio Tab --- */

/* 1. BỘ CHỌN ĐẠO DIỄN */

.aipg-director-selector-container {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.aipg-director-selector-container h4 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* Các thẻ chọn đạo diễn */
.director-selector {
    display: grid;
    /* Tự động chia cột và xuống hàng khi không đủ chỗ */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    gap: 15px;
}

.director-selector .aipg-radio-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background-color: #fdfdfd;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.director-selector .aipg-radio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
    border-color: #6D28D9; /* Màu tím đậm hơn */
}

/* Giao diện khi một đạo diễn được chọn */
.director-selector .aipg-radio-card:has(input:checked) {
    border-color: #6D28D9;
    background-color: #f5f3ff;
    box-shadow: 0 0 0 2px #8B5CF6; /* Viền tím sáng */
}

.director-selector .aipg-radio-card strong {
    display: block;
    color: #111827;
    font-size: 15px;
    margin-bottom: 4px;
    font-weight: 600;
}

.director-selector .aipg-radio-card span span { /* Target the inner span */
    font-size: 13px;
    color: #6b7280;
}

/* 2. KHU VỰC NHẬP LIỆU */

.director-input-panel {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px 30px;
    margin-top: 25px;
}
.director-input-panel .aipg-section-header {
    font-size: 1.1em;
    color: #333;
    margin-top: 0;
}
.director-input-panel textarea, 
.director-input-panel input[type="text"],
.director-input-panel select {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

/* Nút bấm chính */
#aipg-generate-cinematic-storyboard-btn {
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    background: linear-gradient(45deg, #8E44AD, #6D28D9) !important;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.3);
    transition: all 0.3s ease;
}
#aipg-generate-cinematic-storyboard-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(142, 68, 173, 0.4);
}

/* 3. KHU VỰC KẾT QUẢ (STORYBOARD) */

#aipg-cinematic-results-container {
    margin-top: 30px;
}

.aipg-storyboard-summary-card {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-left: 5px solid #6366f1;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 25px;
}
.aipg-storyboard-summary-card h4 {
    margin-top: 0;
    color: #4338ca;
}
.aipg-storyboard-summary-card ol {
    margin-bottom: 0;
    padding-left: 20px;
}

h4.storyboard-main-title {
    font-size: 20px;
    font-weight: 600;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.aipg-storyboard-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
    overflow: hidden; /* To contain the header background */
    transition: all 0.3s ease;
}
.aipg-storyboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08);
}

.aipg-storyboard-card .aipg-card-header {
    background-color: #f9fafb;
    padding: 12px 20px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.aipg-storyboard-card .aipg-card-body {
    padding: 20px;
}

.aipg-storyboard-card .scene-voiceover {
    background: #fffbeb;
    border-left: 3px solid #fBBF24;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.9em;
}

.aipg-storyboard-card .aipg-editable-prompt {
    background-color: #f9fafb;
    border-color: #d1d5db;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
}
/* CSS cho khu vực Tích hợp Tài sản trong Cinematic Studio */
.aipg-asset-accordion {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 25px;
    background: #fcfcfc;
}
.aipg-asset-accordion summary {
    padding: 15px;
    font-size: 1.1em;
    cursor: pointer;
    font-weight: 600;
    color: #444;
}
.aipg-asset-accordion .aipg-accordion-content {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #e0e0e0;
}
select.aipg-asset-select[multiple] {
    height: 120px !important;
    padding: 10px;
    background: #fff;
}
/* ==========================================================================
   [AIPG] Giao diện cho Tab "AI Tối ưu Fanpage Facebook"
   ========================================================================== */

/* --- Bố cục chính cho toàn bộ tab --- */
#veo-tab-fanpage-seo {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Khoảng cách giữa các thành phần */
}

/* --- Tiêu đề chính của tab --- */
#veo-tab-fanpage-seo h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    color: #1a202c;
    margin-bottom: 0;
}

#veo-tab-fanpage-seo h3 .dashicons {
    color: #1877f2; /* Màu xanh của Facebook */
    font-size: 24px;
    height: 24px;
    width: 24px;
}

/* --- Lưới 2 cột cho 2 công cụ --- */
#veo-tab-fanpage-seo .aipg-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột bằng nhau */
    gap: 25px;
}

/* --- Styling cho mỗi khu vực công cụ (Tạo tên, Tạo Bio) --- */
#veo-tab-fanpage-seo .aipg-form-section {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%; /* Giúp 2 cột cao bằng nhau */
}

#veo-tab-fanpage-seo .aipg-section-header {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 16px;
    color: #343a40;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 10px;
}

/* --- Styling cho nút "Mở Form Nâng cao" --- */
#veo-tab-fanpage-seo .aipg-advanced-toggle-link {
    color: #005a9c;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease-in-out;
}

#veo-tab-fanpage-seo .aipg-advanced-toggle-link:hover {
    color: #c2255c;
}

#veo-tab-fanpage-seo .aipg-advanced-toggle-link .dashicons {
    transition: transform 0.3s ease;
}

#veo-tab-fanpage-seo .aipg-advanced-toggle-link.active .dashicons {
    transform: rotate(180deg);
}

/* --- Styling cho Form Nâng cao --- */
#aipg-fp-name-advanced-form {
    background-color: #f0f7ff;
    border-top: 2px solid #b3d7ff;
    padding: 15px;
    margin-top: 15px;
}

#aipg-fp-name-advanced-form .aipg-form-group {
    margin-bottom: 12px;
}

#aipg-fp-name-advanced-form .aipg-form-group:last-child {
    margin-bottom: 0;
}

#aipg-fp-name-advanced-form label {
    font-weight: 500;
    color: #495057;
}

/* --- Styling cho khu vực kết quả --- */
#aipg-fanpage-seo-results-container h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #1a202c;
}

/* Nút "AI Viết Bio cho các tên này" */
#aipg-generate-bios-from-names-btn {
    background-color: #28a745 !important; /* Màu xanh lá cây nổi bật */
    border-color: #218838 !important;
}

#aipg-generate-bios-from-names-btn:hover {
    background-color: #218838 !important;
}

/* Canh chỉnh lại các nút trong card kết quả */
#aipg-fanpage-seo-results-container .aipg-card-actions {
    display: flex;
    justify-content: flex-end; /* Đẩy các nút về bên phải */
    gap: 10px;
    margin-top: 15px;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 960px) {
    #veo-tab-fanpage-seo .aipg-form-grid-2col {
        grid-template-columns: 1fr; /* Chuyển thành 1 cột */
    }
}/* ==========================================================================
   [AIPG] Nâng cấp Giao diện cho Trình Tạo Prompt Tương tác
   ========================================================================== */

/* --- Các nút bấm chính (Trợ lý & Hướng dẫn) --- */
.aipg-brainstorm-trigger-wrapper .button {
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
    font-weight: 500;
    padding: 8px 16px;
}

#aipg-open-brainstorm-popup {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca !important;
}
#aipg-open-brainstorm-popup:hover {
    background-color: #e0e7ff !important;
    border-color: #a5b4fc !important;
}

#aipg-open-wizard-btn {
    background-color: #fdf2f8 !important;
    border-color: #fbcfe8 !important;
    color: #be185d !important;
}
#aipg-open-wizard-btn:hover {
    background-color: #fce7f3 !important;
    border-color: #f9a8d4 !important;
}

/* --- Giao diện các tab Gợi ý --- */
.aipg-tabs-nav {
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 15px;
}
.aipg-tab {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 10px 16px !important;
    margin: 0 5px -2px 0 !important;
    border-radius: 6px 6px 0 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    transition: all 0.2s ease-in-out;
}
.aipg-tab:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}
.aipg-tab.active {
    border-bottom-color: #c2255c !important;
    background-color: #fff !important;
    color: #c2255c !important;
}
.aipg-tabs-content {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* --- Nút bấm trong khu vực kết quả (Gợi ý) --- */
.aipg-tab-content .aipg-result-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    align-items: center; /* Căn chỉnh các nút theo chiều dọc */
}

.aipg-tab-content .aipg-result-actions button {
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Nút Sao chép */
.aipg-tab-content .aipg-result-actions .aipg-copy-btn {
    background-color: #f0f7ff;
    color: #1e40af;
    border: 1px solid #dbeafe;
}

.aipg-tab-content .aipg-result-actions .aipg-copy-btn:hover {
    background-color: #e0e7ff;
    border-color: #c7d2fe;
}

/* Nút Đã lưu (nên đổi text thành "Lưu vào Bản nháp" cho rõ ràng) */
.aipg-tab-content .aipg-result-actions .aipg-save-to-draft-btn {
    background-color: #e2e7f0;
    color: #4a5568;
    border: 1px solid #cbd5e1;
}

.aipg-tab-content .aipg-result-actions .aipg-save-to-draft-btn:hover {
    background-color: #d2d6dc;
    border-color: #b8c2cc;
}

/* Nút Chạy Prompt */
.aipg-tab-content .aipg-result-actions .aipg-run-prompt-btn {
    background-color: #16a34a; /* Màu xanh lá cây tươi */
    color: #ffffff;
}

.aipg-tab-content .aipg-result-actions .aipg-run-prompt-btn:hover {
    background-color: #15803d;
}

.aipg-tab-content .aipg-result-actions .aipg-run-prompt-btn .dashicons {
    margin-right: 5px;
}

/* --- Giao diện Nâng cao cho "Kết quả thực thi Prompt" --- */
#aipg-run-result-container {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 20px 25px 25px;
}

#aipg-run-result-container h3 {
    margin-top: 0;
    font-size: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* Phần hiển thị prompt gốc */
.aipg-original-prompt-display {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 20px;
}
.aipg-original-prompt-display summary {
    padding: 10px 15px;
    font-weight: 500;
    cursor: pointer;
    color: #475569;
}
.aipg-original-prompt-display pre {
    padding: 0 15px 15px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    background-color: #f1f5f9;
    border-top: 1px solid #e2e8f0;
}

/* Phần hiển thị kết quả đã định dạng của AI */
.aipg-ai-formatted-output {
    line-height: 1.7;
    color: #1e293b;
}

.aipg-ai-formatted-output h1,
.aipg-ai-formatted-output h2,
.aipg-ai-formatted-output h3,
.aipg-ai-formatted-output h4 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: 600;
}

.aipg-ai-formatted-output ul,
.aipg-ai-formatted-output ol {
    padding-left: 25px;
    margin-bottom: 1em;
}

.aipg-ai-formatted-output li {
    margin-bottom: 0.5em;
}

.aipg-ai-formatted-output code {
    background-color: #eef2ff;
    color: #4338ca;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.aipg-ai-formatted-output pre {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 15px;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 1em 0;
}
.aipg-ai-formatted-output pre code {
    background: none;
    padding: 0;
    color: inherit;
}
/* ==========================================================================
   [AIPG] CSS cho Pop-up Hiển thị Kết quả
   ========================================================================== */

.aipg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(31, 41, 55, 0.8); /* Màu nền mờ */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.aipg-modal-content {
    background-color: #ffffff;
    width: 100%;
    max-width: 900px; /* Chiều rộng tối đa của pop-up */
    max-height: 90vh; /* Chiều cao tối đa */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    position: relative;
}

.aipg-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 5px;
}
.aipg-modal-close:hover {
    color: #111827;
}

.aipg-modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #e5e7eb;
}
.aipg-modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: #111827;
}

.aipg-modal-body {
    padding: 25px;
    overflow-y: auto; /* Cho phép cuộn nếu nội dung quá dài */
    flex-grow: 1;
}

.aipg-modal-footer {
    padding: 15px 25px;
    border-top: 1px solid #e5e7eb;
    text-align: right;
    background-color: #f9fafb;
    border-radius: 0 0 12px 12px;
}

/* ==========================================================================
   [AIPG] CSS cho Tab "Bé tập Sáng tạo"
   ========================================================================== */

#aipg-group-kids-studio {
    background-color: #f0f7ff; /* Màu nền nhẹ nhàng, thân thiện */
    border-top: 4px solid #4f46e5;
}

#aipg-group-kids-studio h3 {
    font-size: 24px;
    color: #312e81;
}

#aipg-group-kids-studio #aipg-interactive-builder-kids {
    background-color: #ffffff;
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.aipg-builder-field label {
    font-weight: 600; /* Chữ đậm hơn cho dễ đọc */
    color: #4338ca;
    margin-bottom: 8px;
    font-size: 15px;
}

#aipg-kids-generate-btn {
    padding: 12px 24px !important;
    font-size: 16px !important;
    height: auto !important;
    background-color: #6d28d9 !important; /* Màu tím nổi bật */
    border-color: #5b21b6 !important;
}
#aipg-kids-generate-btn:hover {
    background-color: #5b21b6 !important;
}

#aipg-kids-result-container .aipg-result-card {
    background-color: #fff;
    border-left: 4px solid #6d28d9;
}

#aipg-kids-run-result-popup .aipg-modal-header {
    background-color: #6d28d9;
}

#aipg-kids-run-result-popup .aipg-modal-header h3 {
    color: #ffffff;
}

#aipg-kids-run-result-popup .aipg-modal-close {
    color: #ede9fe;
}
/* ==========================================================================
   [AIPG] CSS cho Thư viện Ý tưởng - "Bé tập Sáng tạo"
   ========================================================================== */

#aipg-kids-idea-library {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px dashed #c7d2fe;
}

.aipg-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.aipg-library-card {
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.aipg-library-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(67, 56, 202, 0.1);
    border-color: #a5b4fc;
}

.aipg-library-card .library-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.aipg-library-card .library-card-title {
    padding: 10px;
    font-weight: 500;
    text-align: center;
    color: #4338ca;
    font-size: 14px;
}

.kids-image-result {
    text-align: center;
}

.kids-image-result img {
    max-width: 100%;
    max-height: 512px;
    border-radius: 8px;
    margin-top: 10px;
}

/* ========================================================================
   [AIPG] STYLING NÂNG CẤP CHO TAB "AI PHÂN TÍCH VIDEO"
   ======================================================================== */

/* --- 1. BIẾN MÀU SẮC VÀ KHOẢNG CÁCH CHUNG --- */
.aipg-veo-tab-content#veo-tab-video-analysis {
    --aipg-primary-color: #4f46e5; /* Màu nhấn chính (tím) */
    --aipg-primary-hover: #4338ca;
    --aipg-border-color: #e5e7eb;  /* Màu viền xám nhạt */
    --aipg-bg-subtle: #f9fafb;     /* Màu nền phụ, hơi xám */
    --aipg-text-color: #374151;
    --aipg-text-secondary: #6b7280;
    --aipg-spacing-xs: 4px;
    --aipg-spacing-sm: 8px;
    --aipg-spacing-md: 16px;
    --aipg-spacing-lg: 24px;
    --aipg-radius: 8px;
    color: var(--aipg-text-color);
}

/* --- 2. GIAO DIỆN TAB CHO KẾT QUẢ PHÂN TÍCH --- */
.aipg-tabs-nav {
    display: flex;
    gap: var(--aipg-spacing-sm);
    border-bottom: 2px solid var(--aipg-border-color);
    margin-bottom: var(--aipg-spacing-lg);
}

.aipg-tabs-nav .aipg-tab {
    padding: var(--aipg-spacing-sm) var(--aipg-spacing-md);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--aipg-text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    margin-bottom: -2px; /* Nâng tab lên để đè lên border dưới */
}

.aipg-tabs-nav .aipg-tab:hover {
    color: var(--aipg-primary-color);
}

.aipg-tabs-nav .aipg-tab.active {
    color: var(--aipg-primary-color);
    border-bottom-color: var(--aipg-primary-color);
}

.aipg-tabs-content .aipg-tab-content {
    display: none; /* Mặc định ẩn tất cả */
    animation: fadeIn 0.5s ease;
}

.aipg-tabs-content .aipg-tab-content.active {
    display: block; /* Chỉ hiện tab active */
}

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


/* --- 3. THẺ KẾT QUẢ CHUNG (CARD) --- */
#aipg-video-analysis-master-results-container .aipg-result-card {
    background-color: #ffffff;
    border: 1px solid var(--aipg-border-color);
    border-radius: var(--aipg-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: var(--aipg-spacing-lg);
    overflow: hidden;
}

#aipg-video-analysis-master-results-container .aipg-result-card .aipg-card-header {
    background-color: var(--aipg-bg-subtle);
    padding: 12px var(--aipg-spacing-md);
    font-weight: 600;
    border-bottom: 1px solid var(--aipg-border-color);
}

#aipg-video-analysis-master-results-container .aipg-result-card .aipg-card-body {
    padding: var(--aipg-spacing-md);
}

#aipg-video-analysis-master-results-container .aipg-result-card .aipg-batch-results-textarea {
    border: 1px solid #dcdcdc;
    background-color: #fdfdfd;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.6;
    width: 100%;
}

#aipg-video-analysis-master-results-container .aipg-card-actions {
    padding: var(--aipg-spacing-sm) var(--aipg-spacing-md);
    text-align: right;
    background-color: var(--aipg-bg-subtle);
    border-top: 1px solid var(--aipg-border-color);
}

/* --- 4. ACCORDION CHO MỤC ĐỀ XUẤT & BIẾN THỂ --- */
details.aipg-marketing-stage {
    border: 1px solid var(--aipg-border-color);
    border-radius: var(--aipg-radius);
    margin-bottom: var(--aipg-spacing-md);
    background: #fff;
}

details.aipg-marketing-stage summary {
    font-weight: 600;
    padding: var(--aipg-spacing-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    list-style: none; /* Ẩn mũi tên mặc định */
}

details.aipg-marketing-stage summary::-webkit-details-marker {
    display: none; /* Ẩn mũi tên mặc định trên Chrome */
}

details.aipg-marketing-stage summary::before {
    content: '►';
    margin-right: var(--aipg-spacing-sm);
    font-size: 10px;
    transition: transform 0.2s ease-in-out;
}

details[open] > summary::before {
    transform: rotate(90deg);
}

details.aipg-marketing-stage .stage-content {
    padding: 0 var(--aipg-spacing-md) var(--aipg-spacing-md);
    border-top: 1px solid var(--aipg-border-color);
}

/* --- 5. DANH SÁCH GỢI Ý VÀ CHECKBOX --- */
.stage-content ul {
    list-style: none;
    padding-left: 0;
    margin: var(--aipg-spacing-md) 0 0 0;
}

.stage-content ul li {
    padding: var(--aipg-spacing-sm) 0;
    border-bottom: 1px solid #f3f4f6;
}
.stage-content ul li:last-child {
    border-bottom: none;
}

.stage-content ul li label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.stage-content ul li label input[type="checkbox"] {
    margin-right: var(--aipg-spacing-sm);
    width: 16px;
    height: 16px;
}


/* --- 6. KHỐI TRIỂN KHAI CHIẾN LƯỢC (BƯỚC CUỐI) --- */
#aipg-advisor-output-mode-selector {
    background-color: var(--aipg-bg-subtle);
    border: 1px dashed var(--aipg-primary-color);
    padding: var(--aipg-spacing-md);
    border-radius: var(--aipg-radius);
}

#aipg-implement-ideas-btn {
    font-size: 16px !important;
    padding: 12px 24px !important;
    height: auto !important;
}


/* --- 7. KẾT QUẢ CUỐI CÙNG SAU KHI TRIỂN KHAI --- */
#aipg-final-prompt-container h4 {
    text-align: center;
    font-size: 1.2em;
    color: var(--aipg-primary-color);
}
/* ========================================================================
   [AIPG] STYLING CHO TAB "AI KIẾN TRÚC SƯ PROMPT"
   ======================================================================== */

/* --- Container chính của tab --- */
.aipg-veo-tab-content#veo-tab-architect {
    --architect-primary-color: #c026d3; /* Màu tím hồng đặc trưng */
    --architect-border-color: #e5e7eb;
    --architect-bg-subtle: #f9fafb;
    --architect-text-color: #374151;
    --architect-radius: 8px;
    --architect-spacing: 16px;
}

/* --- Khối form nhập liệu --- */
.aipg-veo-tab-content#veo-tab-architect .aipg-form-section {
    background-color: var(--architect-bg-subtle);
    border: 1px solid var(--architect-border-color);
    border-radius: var(--architect-radius);
    padding: var(--architect-spacing) 24px;
    margin-top: 20px;
}

.aipg-veo-tab-content#veo-tab-architect .aipg-form-group {
    margin-bottom: var(--architect-spacing);
}

.aipg-veo-tab-content#veo-tab-architect .aipg-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--architect-text-color);
}

/* --- Ô nhập liệu và dropdown --- */
.aipg-veo-tab-content#veo-tab-architect textarea,
.aipg-veo-tab-content#veo-tab-architect select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.aipg-veo-tab-content#veo-tab-architect textarea:focus,
.aipg-veo-tab-content#veo-tab-architect select:focus {
    border-color: var(--architect-primary-color);
    box-shadow: 0 0 0 3px rgba(192, 38, 211, 0.1);
    outline: none;
}

/* --- Nút bấm chính --- */
#aipg-generate-architect-prompt-btn {
    width: 100%;
    margin-top: 10px;
    background-color: var(--architect-primary-color) !important;
    border-color: var(--architect-primary-color) !important;
    font-size: 16px !important;
    padding: 12px 24px !important;
    height: auto !important;
    transition: background-color 0.2s;
}

#aipg-generate-architect-prompt-btn:hover {
    background-color: #a21caf !important; /* Màu đậm hơn khi hover */
}

/* --- Khối hiển thị kết quả --- */
#aipg-architect-result-container {
    margin-top: 30px;
}

/* Tái sử dụng style của các thẻ kết quả khác để đồng bộ */
#aipg-architect-result-container .aipg-result-card {
    background-color: #ffffff;
    border: 1px solid var(--architect-border-color);
    border-radius: var(--architect-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

#aipg-architect-result-container .aipg-card-header {
    background-color: var(--architect-bg-subtle);
    padding: 12px var(--architect-spacing);
    font-weight: 600;
    border-bottom: 1px solid var(--architect-border-color);
}

#aipg-architect-result-container .aipg-card-body {
    padding: var(--architect-spacing);
}

#aipg-architect-result-container .aipg-batch-results-textarea {
    border: 1px solid #dcdcdc;
    background-color: #fdfdfd;
    font-family: 'Courier New', Courier, monospace; /* Font chữ đơn cách để dễ đọc prompt */
    font-size: 13px;
    line-height: 1.6;
    width: 100%;
    color: #1e293b;
}

#aipg-architect-result-container .aipg-card-actions {
    padding: 12px var(--architect-spacing);
    text-align: right;
    background-color: var(--architect-bg-subtle);
    border-top: 1px solid var(--architect-border-color);
}

/* ========================================================================
   [AIPG] CSS CHO CÔNG CỤ "AI KIẾN TRÚC SƯ PROMPT" V4
   ======================================================================== */

/* --- 1. Định dạng cho nút bấm "Kiến trúc sư Prompt" trên thanh công cụ --- */
.aipg-sub-tab-group .aipg-veo-tab-link[data-target="#veo-tab-architect"] {
    background-color: #dc3545; /* Màu đỏ chủ đạo */
    color: #ffffff;
    border-color: #c82333;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
}

.aipg-sub-tab-group .aipg-veo-tab-link[data-target="#veo-tab-architect"]:hover {
    background-color: #c82333; /* Màu đỏ đậm hơn khi hover */
    border-color: #bd2130;
}

/* Biểu tượng (icon) cho nút */
.aipg-sub-tab-group .aipg-veo-tab-link[data-target="#veo-tab-architect"] .dashicons {
    color: #ffffff;
}

/* --- 2. Định dạng cho giao diện công cụ "AI Kiến trúc sư Prompt (V4)" --- */
#veo-tab-architect h3 {
    border-bottom: 3px solid #dc3545;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 20px;
    color: #1d2327;
}

#veo-tab-architect h3 .dashicons {
    color: #dc3545;
}

/* --- 3. Định dạng cho bộ chọn chế độ (Mặc định / Nâng cao) --- */
#veo-tab-architect .aipg-mode-switch.aipg-button-group {
    display: flex;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 25px !important; /* Ghi đè margin mặc định */
}

#veo-tab-architect .aipg-mode-switch-btn {
    flex: 1;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    background-color: #f6f7f7;
    color: #50575e;
    border: none;
    border-left: 1px solid #ccd0d4;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Khoảng cách giữa icon và chữ */
}

#veo-tab-architect .aipg-mode-switch-btn:first-child {
    border-left: none;
}

#veo-tab-architect .aipg-mode-switch-btn:hover {
    background-color: #e8eaeb;
}

#veo-tab-architect .aipg-mode-switch-btn.active {
    background-color: #dc3545;
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

#veo-tab-architect .aipg-mode-switch-btn.active .dashicons {
    color: #ffffff;
}

/* --- 4. Định dạng các ô nhập liệu --- */
#veo-tab-architect .aipg-form-section {
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    background-color: #ffffff;
}

#veo-tab-architect .aipg-form-group label {
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 8px;
}

/* --- 5. Định dạng nút "Kiến tạo Prompt" chính --- */
#aipg-generate-architect-prompt-btn-v4 {
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    background-color: #dc3545 !important;
    border-color: #c82333 !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease;
    text-transform: uppercase;
}

#aipg-generate-architect-prompt-btn-v4:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* ========================================================================
   [AIPG] CSS CHO TAB PHÂN TÍCH PROMPT
   ======================================================================== */

#veo-tab-prompt-analysis .prompt-analysis-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Cột trái nhỏ hơn cột phải */
    gap: 25px;
    margin-top: 20px;
}

#veo-tab-prompt-analysis .original-prompt-column h4,
#veo-tab-prompt-analysis .analysis-breakdown-column h4 {
    margin-top: 0;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

#veo-tab-prompt-analysis .original-prompt-column pre {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 15px;
    border-radius: 6px;
    white-space: pre-wrap; /* Giúp xuống dòng */
    word-break: break-word;
    font-size: 14px;
    line-height: 1.6;
}

#veo-tab-prompt-analysis .analysis-breakdown-column {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các card */
}

#veo-tab-prompt-analysis .analysis-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #dc3545; /* Màu đỏ nhấn mạnh */
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

#veo-tab-prompt-analysis .analysis-card-header {
    font-weight: 600;
    font-size: 15px;
    padding: 10px 15px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

#veo-tab-prompt-analysis .analysis-card-body {
    padding: 15px;
    font-size: 14px;
    line-height: 1.7;
}

#veo-tab-prompt-analysis .analysis-card-body ul {
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 20px;
}

#veo-tab-prompt-analysis .analysis-card-body pre {
    background-color: #f0f0f0;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 5px;
    white-space: pre-wrap;
    word-break: break-word;
}
/* ========================================================================
   [AIPG] CSS CHO CÁC TÍNH NĂNG NÂNG CẤP CỦA PROMPT ANALYZER
   ======================================================================== */

/* Huy hiệu nhận diện AI */
.detected-ai-badge {
    background-color: #eef2ff;
    color: #4338ca;
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 15px;
    display: inline-block;
}

/* Phần gợi ý cải tiến trong thẻ phân tích */
.improvement-suggestion {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #e0e0e0;
    font-size: 13px;
    color: #4b5563;
}
.improvement-suggestion strong {
    color: #1d4ed8;
}

/* Phần gợi ý biến số */
.suggested-placeholder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background-color: #f9fafb;
    border-radius: 4px;
    margin-bottom: 8px;
}

.suggested-placeholder-item span {
    font-style: italic;
    color: #374151;
}

.aipg-make-placeholder-btn:disabled {
    background-color: #d1d5db !important;
    color: #6b7280 !important;
    cursor: default !important;
    border-color: #d1d5db !important;
}

/* ========================================================================
   [MỚI] CSS CHO TAB "AI CỐ VẤN & XƯỞNG SẢN XUẤT YOUTUBE"
   ======================================================================== */

/* 1. Nút bấm chuyển đổi giữa các công cụ con */
#veo-tab-youtube-advisor .aipg-mode-switcher {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống dòng trên màn hình nhỏ */
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

#veo-tab-youtube-advisor .story-workshop-mode-btn {
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 2. Giao diện chung cho các panel công cụ con */
.story-workshop-panel {
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fcfcfc;
}

/* 3. Giao diện cho "Cẩm nang Sản xuất" (dùng thẻ details/summary) */
#yt-advisor-tool-handbook .aipg-marketing-stage {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden; /* Giữ cho bo góc đẹp */
}

#yt-advisor-tool-handbook .aipg-marketing-stage[open] summary {
    border-bottom: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

#yt-advisor-tool-handbook .aipg-marketing-stage summary {
    padding: 12px 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

#yt-advisor-tool-handbook .aipg-marketing-stage summary:hover {
    background-color: #f3f4f6;
}

/* Tạo mũi tên cho thẻ summary */
#yt-advisor-tool-handbook .aipg-marketing-stage summary::after {
    content: '▼';
    font-size: 0.8em;
    color: #666;
    transition: transform 0.3s ease;
}

#yt-advisor-tool-handbook .aipg-marketing-stage[open] summary::after {
    transform: rotate(-180deg);
}

#yt-advisor-tool-handbook .aipg-marketing-stage .stage-content {
    padding: 15px 20px;
}

#yt-advisor-tool-handbook .aipg-marketing-stage .stage-content ul {
    margin: 0;
    padding-left: 20px;
}

#yt-advisor-tool-handbook .aipg-marketing-stage .stage-content li {
    margin-bottom: 8px;
}

/* 4. Giao diện cho "Checklist Xuất bản" */
#yt-advisor-tool-checklist .aipg-task-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

#yt-advisor-tool-checklist .aipg-task-item:last-child {
    border-bottom: none;
}

#yt-advisor-tool-checklist .aipg-task-item:hover {
    background-color: #f7f7f7;
}

#yt-advisor-tool-checklist .aipg-task-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
}

#yt-advisor-tool-checklist .aipg-task-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* 5. Giao diện hiển thị kết quả cho "AI Lập kế hoạch" (Nâng cấp) */
#yt-advisor-results-container .aipg-marketing-stage summary {
    font-size: 1.1em;
}

#yt-advisor-results-container .aipg-script-section {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}
#yt-advisor-results-container .aipg-script-section:last-child {
    border-bottom: none;
}

#yt-advisor-results-container .aipg-script-section strong {
    color: #c2255c; /* Màu nhấn cho các phần của kịch bản */
    display: block;
    margin-bottom: 5px;
}

#yt-advisor-results-container .aipg-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
/* --- [NÂNG CẤP V5] STYLES FOR AI SUMMARY TAB --- */

/* 1. Gợi ý từ khóa (Inspiration Keywords) */
.aipg-inspiration-keywords {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
}

.aipg-inspiration-keywords > span:first-child {
    font-weight: 500;
    color: #50575e;
}

.aipg-inspiration-keyword {
    background-color: #e9ecef;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #495057;
}

.aipg-inspiration-keyword:hover {
    background-color: #ced4da;
    color: #212529;
}

/* 2. Khu vực kết quả tương tác (cho bullet points) */
.aipg-interactive-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Khoảng cách giữa các mục */
}

/* 3. Mỗi mục kết quả trong danh sách */
.aipg-interactive-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 12px 15px;
    border-radius: 6px;
    transition: box-shadow 0.2s ease;
}

.aipg-interactive-result-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.aipg-interactive-result-item .item-text {
    flex-grow: 1; /* Cho phép text chiếm phần lớn không gian */
    margin-right: 15px;
    color: #333;
    line-height: 1.5;
}

/* 4. Nút sao chép cho từng mục */
.aipg-copy-single-item-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    padding: 5px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.aipg-copy-single-item-btn:hover {
    background-color: #e9ecef;
    color: #0073aa;
}

.aipg-copy-single-item-btn .dashicons {
    font-size: 18px;
    line-height: 1;
}

/* 5. Nút sao chép tất cả (ở dưới cùng) */
.aipg-result-card .aipg-card-actions {
    margin-top: 15px;
    text-align: right;
}
/* --- [NÂNG CẤP V6] STYLES FOR PRODUCT DESCRIPTION TAB --- */

/* Nút gợi ý từ khóa */
.aipg-inspiration-keywords .aipg-pd-inspiration-keyword {
    background-color: #f0f0f0;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #333;
}
.aipg-inspiration-keywords .aipg-pd-inspiration-keyword:hover {
    background-color: #e0e0e0;
}

/* Giao diện trình biên tập tương tác */
.product-description-render {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.aipg-editable-section {
    display: flex;
    flex-direction: column;
}
.aipg-editable-section label {
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 6px;
    font-size: 14px;
}
.aipg-editable-item-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    background-color: #fff;
    resize: vertical;
    overflow: hidden;
    line-height: 1.6;
}
.aipg-editable-item-input.is-headline {
    font-size: 1.2em;
    font-weight: bold;
    border-color: #007cba;
}
#pd-package_details-list, #pd-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Hộp Giá & CTA */
.pd-pricing-cta-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}
.pd-pricing, .pd-cta {
    background-color: #f0f7ff;
    border-left: 4px solid #7e8993;
    padding: 15px;
    border-radius: 4px;
}
.pd-pricing p, .pd-cta p {
    margin: 5px 0 0;
    font-size: 1.1em;
}
/* --- [V12 - PROFESSIONAL UI REFINEMENT] STYLES FOR AI PRODUCT DESCRIPTION TAB --- */

/* 1. Bố cục và Thẻ kết quả chính */
#aipg-pd-interactive-editor,
#aipg-pd-complete-post-card {
    border: 1px solid #dcdcde;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    border-radius: 8px;
    overflow: hidden; /* Đảm bảo các góc bo được tôn trọng */
}

.product-description-render {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Tăng khoảng cách giữa các phần */
    padding: 25px;
}

/* 2. Kiểu dáng cho từng phần có thể chỉnh sửa */
.aipg-editable-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid #f0f0f1;
    padding-bottom: 8px;
}

.aipg-editable-section-header label {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
}

.section-header-buttons {
    display: flex;
    gap: 6px;
}

/* 3. Nút hành động nhỏ (Viết lại & A/B) */
.aipg-pd-rewrite-btn, .aipg-pd-ab-test-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid #dcdcde !important;
    background: #fff !important;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

.aipg-pd-rewrite-btn:hover, .aipg-pd-ab-test-btn:hover {
    background: #f0f0f1 !important;
    border-color: #949494 !important;
    transform: translateY(-1px);
}

.aipg-pd-rewrite-btn .dashicons { color: #50575e; font-size: 16px; line-height: 1.5; }
.aipg-pd-ab-test-btn { font-weight: 700 !important; font-size: 11px !important; color: #b91c1c !important; border-color: #fca5a5 !important; }
.aipg-pd-ab-test-btn:hover { background: #fef2f2 !important; border-color: #f87171 !important; }
.aipg-pd-rewrite-btn .aipg-spinner { width: 14px !important; height: 14px !important; }

/* 4. Kiểu dáng cho các ô Textarea */
.aipg-editable-item-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    background-color: #fdfdfd;
    resize: vertical;
    overflow: hidden;
    line-height: 1.6;
    font-size: 14px;
    color: #3c434a;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.aipg-editable-item-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 2px solid transparent;
}

textarea.is-headline {
    font-size: 1.5em;
    font-weight: 700;
    color: #1d2327;
    line-height: 1.4;
    background-color: #fff;
    border-color: #949494;
}

/* 5. Kiểu dáng cho danh sách (Lợi ích, Chi tiết gói) */
.aipg-editable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 25px; /* Tạo khoảng trống cho dấu tick */
}

.aipg-editable-item {
    position: relative;
}

/* Tạo dấu tick ✔ bằng CSS */
.aipg-editable-item::before {
    content: '✔';
    position: absolute;
    left: -25px;
    top: 11px;
    color: #2271b1;
    font-weight: bold;
    font-size: 16px;
}

/* 6. Kiểu dáng cho thẻ "Bài viết hoàn chỉnh" */
#aipg-pd-complete-post-card {
    border: 2px dashed #007cba;
    background: #f0f7ff;
    margin-top: 30px;
}
#aipg-pd-complete-post-card h4 {
    color: #005a9c;
    margin-bottom: 15px;
}
#aipg-pd-complete-post-card textarea {
    font-family: 'Merriweather', 'Georgia', serif;
    font-size: 15px;
    line-height: 1.7;
    color: #1d2327;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* --- [NÂNG CẤP] TRỢ LÝ KỊCH BẢN WORKFLOW --- */

/* Nút bấm Trợ lý AI */
.aipg-label-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.aipg-label-with-button label {
    margin-bottom: 0;
}
.aipg-label-with-button .button-like-link {
    font-size: 13px;
    font-weight: 600;
    color: #007cba;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.aipg-label-with-button .button-like-link:hover {
    color: #005a87;
}

/* Giao diện Popup (sử dụng lại style popup chung) */
.aipg-popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aipg-popup-content {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.aipg-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
}
#assistant-result-container textarea {
    width: 100%;
    margin-bottom: 10px;
}
/* ======================================================================== */
/* [NÂNG CẤP GIAO DIỆN V9] - AI WORKFLOW */
/* ======================================================================== */

/* --- Bố cục chính 2 cột --- */
.aipg-workflow-container {
    display: grid;
    /* Cột 1 chiếm 45% không gian, cột 2 chiếm phần còn lại */
    grid-template-columns: minmax(400px, 45%) 1fr;
    gap: 24px; /* Khoảng cách giữa 2 cột */
    margin-top: 20px;
}

/* --- Panel chung --- */
.aipg-panel {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px; /* Bo góc mềm mại hơn */
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Thêm bóng mờ nhẹ */
}

.aipg-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 12px 16px;
    background: #f7f7f7; /* Nền xám nhẹ cho header */
}

.aipg-panel-header h4 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600; /* Chữ đậm hơn */
}

.aipg-panel-body {
    padding: 16px;
}

/* --- Cột 1: Soạn thảo & Quy trình --- */
#aipg-workflow-steps-panel {
    margin-top: 20px;
}

.aipg-workflow-step {
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #fff;
    transition: box-shadow 0.2s ease;
}
.aipg-workflow-step:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.step-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    background: #f9f9f9;
}

.step-title-display {
    flex-grow: 1;
    margin: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1d2327;
}

.step-body {
    padding: 15px;
    border-top: 1px solid #eee;
    background-color: #fdfdfd;
}

.step-body textarea {
    background-color: #f0f0f1;
    color: #333;
    font-family: monospace;
}

/* --- Cột 2: Thực thi & Kết quả --- */
#aipg-workflow-run-controls {
    margin-bottom: 20px;
    padding: 12px;
    background: #f0f5fa;
    border-radius: 6px;
}

.aipg-workflow-progress-wrapper {
    margin-bottom: 15px;
}

#aipg-workflow-progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    height: 8px;
    margin-top: 5px;
}

#aipg-workflow-progress-bar {
    height: 100%;
    width: 0%;
    background-color: #007cba;
    transition: width 0.4s ease-in-out;
}

#aipg-workflow-progress-text {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.aipg-workflow-run-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#aipg-workflow-results-container {
    max-height: 65vh; /* Chiều cao tối đa bằng 65% chiều cao màn hình */
    overflow-y: auto;  /* Tự động thêm thanh cuộn khi cần */
    padding: 10px;
    border-radius: 4px;
    background-color: #f7f8f9;
    border-top: 2px solid #e0e0e0;
}

.workflow-result-card {
    border: 1px solid #e7e7e7;
    margin-bottom: 15px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.3s;
}
.workflow-result-card h5 {
    margin: 0;
    padding: 10px 15px;
    background: #f1f1f1;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.workflow-result-card .result-content {
    padding: 15px;
    font-size: 13px;
}
.workflow-result-card .result-content pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
}

.workflow-result-card.is-running { border-left: 4px solid #f0ad4e; }
.workflow-result-card.is-complete { border-left: 4px solid #5cb85c; }
.workflow-result-card.is-error { border-left: 4px solid #d9534f; }

/* Container chính cho toàn bộ tính năng */
#veo-tab-prompt-analyzer .prompt-analysis-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Bố cục 2 cột */
    gap: 25px;
    align-items: flex-start;
}

/* Cột bên trái: Phân tích của AI */
#veo-tab-prompt-analyzer .analysis-breakdown-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Cột bên phải: Tùy biến & Hoàn thiện */
#veo-tab-prompt-analyzer .original-prompt-column {
    position: sticky; /* Giữ cố định khi cuộn */
    top: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Thẻ chứa kết quả phân tích từng thành phần */
.analysis-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.analysis-card-header {
    background-color: #f7f7f7;
    padding: 10px 15px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}

.analysis-card-body {
    padding: 15px;
    font-size: 14px;
}

.analysis-card-body p {
    margin-top: 0;
    margin-bottom: 10px;
    color: #444;
}

/* Phần gợi ý cải tiến */
.improvement-suggestion {
    background-color: #eef7ff;
    border-left: 3px solid #3b82f6;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 13px;
}

.improvement-suggestion strong {
    color: #1e40af;
}

/* Các thẻ gợi ý chủ đề trong chế độ Nâng cao */
#aipg-suggestions-checklist .aipg-suggestion-item.is-theme {
    display: block;
    margin-bottom: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s ease-in-out;
}

#aipg-suggestions-checklist .aipg-suggestion-item.is-theme:hover {
    border-color: #d1d5db;
    background: #f3f4f6;
}

#aipg-suggestions-checklist .aipg-suggestion-item.is-theme label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

#aipg-suggestions-checklist .aipg-suggestion-item.is-theme input[type="checkbox"] {
    margin-top: 4px;
}

#aipg-suggestions-checklist .aipg-suggestion-item.is-theme .concept-details {
    flex: 1;
}

#aipg-suggestions-checklist .aipg-suggestion-item.is-theme strong {
    font-weight: 600;
    color: #111827;
}

#aipg-suggestions-checklist .aipg-suggestion-item.is-theme span {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

/* Các ô nhập liệu cho placeholder của chủ đề */
.aipg-theme-placeholders .aipg-form-group {
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-bottom: 8px !important; /* Ghi đè margin mặc định */
}

.aipg-theme-placeholders label {
    font-size: 13px;
    font-weight: 500 !important;
    margin-bottom: 5px;
    display: block;
}

.aipg-theme-placeholders input.theme-placeholder-input {
    font-size: 14px;
}

/* Nút "Tạo Prompt Mới từ các Lựa chọn" */
#analyzer-generate-from-suggestions-btn {
    width: 100%;
    padding: 10px;
    font-size: 15px;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 960px) {
    #veo-tab-prompt-analyzer .prompt-analysis-layout {
        grid-template-columns: 1fr; /* Chuyển thành 1 cột */
    }

    #veo-tab-prompt-analyzer .original-prompt-column {
        position: static; /* Bỏ cố định */
    }
}

/* ========================================================================
   [AIPG] CSS for AI Music Composer Tab (V2 - Workflow)
   ======================================================================== */

/* --- Tiêu đề chính --- */
#veo-tab-music-composer h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    color: #1e1e1e;
    margin-bottom: 8px;
}

#veo-tab-music-composer > p {
    font-size: 15px;
    color: #555;
    margin-top: 0;
    max-width: 800px;
    margin-bottom: 30px;
}

/* --- Các khối chức năng (section) cho từng bước --- */
#veo-tab-music-composer .aipg-form-section {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

#veo-tab-music-composer .aipg-section-header {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 18px; /* Tăng kích thước cho rõ ràng */
    font-weight: 600;
    color: #333;
}

/* --- Kết quả gợi ý Vòng hòa âm --- */
#aipg-music-chords-results h4 {
    margin-top: 0;
    font-size: 16px;
    color: #1e1e1e;
}

/* Tùy chỉnh cho các thẻ radio để trông đẹp hơn */
.aipg-radio-card-group.is-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aipg-radio-card-group .aipg-radio-card {
    border: 1px solid #ccd0d4;
    background: #fff;
}

.aipg-radio-card-group .aipg-radio-card:has(input:checked) {
    border-color: #9d52d9; /* Màu tím chủ đạo */
    box-shadow: 0 0 0 1px #9d52d9;
}

.aipg-radio-card-group .radio-card-content code {
    font-family: monospace;
    background: #eef2ff;
    color: #4338ca;
    padding: 2px 6px;
    border-radius: 4px;
}

/* --- Kết quả sáng tác Giai điệu & Ca từ --- */
#aipg-music-melody-results h4 {
    font-size: 18px;
    margin-top: 0;
}
#aipg-music-melody-results .aipg-task-item {
    margin-bottom: 15px;
}
#aipg-music-melody-results .aipg-task-item strong {
    display: block;
    margin-bottom: 5px;
    color: #333;
}
#aipg-music-melody-results .aipg-task-item p,
#aipg-music-melody-results .aipg-task-item pre {
    margin: 0;
    padding: 10px;
    background: #f0f0f1;
    border-radius: 4px;
}

/* --- Kết quả cuối cùng --- */
#aipg-music-final-composition h3 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 25px;
}
#aipg-music-final-composition .aipg-marketing-stage {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}
#aipg-music-final-composition .aipg-marketing-stage[open] summary {
    border-bottom: 1px solid #e5e7eb;
}
#aipg-music-final-composition .aipg-marketing-stage summary {
    padding: 15px 20px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}
#aipg-music-final-composition .aipg-marketing-stage .stage-content {
    padding: 20px;
    line-height: 1.6;
}
#aipg-music-final-composition .aipg-card-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* --- Responsive --- */
@media (max-width: 782px) {
    #veo-tab-music-composer .aipg-form-grid-3col,
    #veo-tab-music-composer .aipg-form-grid-2col {
        grid-template-columns: 1fr;
    }
}
/* ========================================================================
   [AIPG] CSS for Animal Life Studio Tab (V2 - Upgraded)
   ======================================================================== */

/* --- Tiêu đề & Mô tả --- */
#veo-tab-animal-life-studio h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    color: #1e1e1e;
    margin-bottom: 8px;
}

#veo-tab-animal-life-studio > p {
    font-size: 15px;
    color: #555;
    margin-top: 0;
    max-width: 800px;
    margin-bottom: 30px;
}

/* --- Các khối chức năng (section) --- */
#veo-tab-animal-life-studio .aipg-form-section {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

#veo-tab-animal-life-studio .aipg-section-header {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* --- Nút bấm chính --- */
#aipg-generate-animal-life-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
}

/* --- Khu vực kết quả Storyboard --- */
#aipg-animal-life-results-container h3 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 25px;
}

.aipg-storyboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.aipg-storyboard-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.aipg-storyboard-card .aipg-card-header {
    background-color: #f7f7f7;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}

.aipg-storyboard-card .aipg-card-body {
    padding: 15px;
    flex-grow: 1;
}

.aipg-storyboard-card .aipg-batch-results-textarea {
    min-height: 120px;
    font-size: 13px;
    background-color: #fdfdfd;
}

.aipg-storyboard-card .aipg-card-actions {
    padding: 0 15px 15px;
    text-align: right;
}

/* --- Khu vực tạo Thumbnail --- */
#aipg-animal-life-thumbnail-container .aipg-form-section {
    background-color: #f0f5ff; /* Màu nền khác để nổi bật */
    border: 1px solid #c2d9ff;
}
/* [NÂNG CẤP V3.1] CSS cho phần Lời dẫn chuyện (Voiceover) */
.scene-voiceover {
    background-color: #fffaf0; /* Màu nền vàng nhạt */
    border-left: 4px solid #f6ad55; /* Đường viền cam */
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.scene-voiceover strong {
    font-size: 13px;
    color: #b7791f;
}

.scene-voiceover p {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: #715a3a;
    font-style: italic;
}

.aipg-storyboard-card .aipg-batch-results-textarea {
    min-height: 150px; /* Tăng chiều cao để chứa prompt 8 phần */
    white-space: pre-wrap; /* Hiển thị xuống dòng cho đẹp */
    font-family: monospace;
    font-size: 12px;
}
/* [NÂNG CẤP V3.4] CSS cho Danh sách Tài sản */
.aipg-asset-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.aipg-asset-item {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 12px 15px;
    border-radius: 6px;
}

.aipg-asset-item strong {
    color: #495057;
    display: block;
    margin-bottom: 4px;
}

.aipg-asset-item p {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
}
/* ========================================================================
   [AIPG] CSS CHO TÍNH NĂNG "AI PHOTOBASH STUDIO"
   ======================================================================== */

/* --- Bố cục chính --- */
#veo-tab-photobash-studio .aipg-form-section {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
}

#veo-tab-photobash-studio .aipg-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

/* --- Khu vực Tải ảnh & Xem trước --- */
.aipg-photobash-preview {
    width: 100%;
    min-height: 200px;
    background-color: #f0f3ff;
    border: 2px dashed #c7d2fe;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    overflow: hidden;
    position: relative;
    transition: background-color 0.3s ease;
}

.aipg-photobash-preview:hover {
    background-color: #e5e9f8;
}

.aipg-photobash-preview::before {
    content: 'Nhấp hoặc kéo ảnh vào đây';
    color: #6b7280;
    font-size: 14px;
    position: absolute;
    z-index: 1;
}

.aipg-photobash-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Dùng 'cover' để ảnh lấp đầy khung */
    position: relative;
    z-index: 2;
}

/* Ẩn chữ placeholder khi đã có ảnh */
.aipg-photobash-preview:has(img)::before {
    display: none;
}

/* --- Các ô nhập liệu & Nút bấm --- */
#veo-tab-photobash-studio .button-hero {
    width: 100%;
    padding: 12px;
    font-size: 16px !important;
    height: auto !important;
}

#veo-tab-photobash-studio textarea {
    width: 100%;
    transition: border-color 0.3s ease;
}

#veo-tab-photobash-studio textarea:focus {
    border-color: #9333ea;
    box-shadow: 0 0 0 1px #9333ea;
}

/* --- Khu vực Kết quả --- */
#aipg-photobash-editor-section h4 {
    border-top: 1px dashed #d1d5db;
    padding-top: 25px;
}

#aipg-photobash-result-container .aipg-result-card {
    background: #fdfdfd;
}

#aipg-photobash-result-container textarea {
    background-color: #f3f4f6;
    font-family: monospace;
    font-size: 14px;
    color: #111827;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 768px) {
    #veo-tab-photobash-studio .aipg-form-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   [V5] CSS HOÀN CHỈNH CHO TAB "ACTION 360 POV SUPER DIRECTOR"
   ========================================================================== */

/* --- Layout & Typography chung --- */
#veo-tab-action-360-pov h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    color: #1e293b;
    margin-bottom: 5px;
}

#veo-tab-action-360-pov > p {
    margin-top: 0;
    font-size: 15px;
    color: #475569;
    max-width: 800px;
    margin-bottom: 25px;
}

#veo-tab-action-360-pov .aipg-form-section {
    background-color: #ffffff;
    padding: 25px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

#veo-tab-action-360-pov .aipg-section-header {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

#veo-tab-action-360-pov .aipg-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #334155;
}

/* --- 1. Trợ lý Sáng tạo Nhanh --- */
#veo-tab-action-360-pov .aipg-form-section[style*="fffbe6"] { /* Targeting the assistant panel specifically */
    background-color: #fffbe6;
    border-color: #fde68a;
}

#veo-tab-action-360-pov .aipg-form-section[style*="fffbe6"] .aipg-section-header {
    color: #b45309;
    border-bottom-color: #fde047;
}

#veo-tab-action-360-pov .aipg-input-with-button {
    display: flex;
    gap: 10px;
}

#veo-tab-action-360-pov .aipg-input-with-button input[type="text"] {
    flex-grow: 1;
}

#veo-tab-action-360-pov .aipg-input-with-button .button {
    flex-shrink: 0; /* Prevent button from shrinking */
}


/* --- 2. Bản Yêu cầu Sáng tạo (Creative Brief) --- */
#aipg-pov-mandatory-suggestions {
    margin-top: 10px;
    border-top: 1px dashed #cbd5e1;
    padding-top: 10px;
}

#aipg-pov-mandatory-suggestions .aipg-suggestion-category summary {
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
    outline: none;
}

#aipg-pov-mandatory-suggestions .aipg-suggestion-category summary:hover {
    background-color: #f1f5f9;
}

#aipg-pov-mandatory-suggestions .aipg-tags-wrapper {
    padding: 8px 5px 5px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aipg-tag-chip.is-clickable {
    cursor: pointer;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 13px;
    transition: all 0.2s ease-in-out;
}

.aipg-tag-chip.is-clickable:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.aipg-tag-chip.is-clickable.clicked {
    background-color: #16a34a; /* Green */
    color: #fff;
    border-color: #16a34a;
    font-weight: 500;
}

/* --- 3. Kết quả & Bảng điều khiển Tinh chỉnh --- */
#aipg-pov-results-container h4 {
    font-size: 20px;
    margin-bottom: 15px;
}

#aipg-pov-refinement-panel {
    background-color: #f0f8ff; /* AliceBlue for a subtle look */
    border-color: #ddebf8;
}

#aipg-pov-refinement-panel .aipg-section-header {
    color: #005a9c; /* Dark Blue */
    border-bottom-color: #cce4ff;
}

.aipg-refinement-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

#aipg-pov-split-results-container .aipg-result-card {
    margin-top: 15px;
    border-left-color: #4a90e2; /* Blue accent for split results */
}
/* ==========================================================================
   [V7] CSS HOÀN CHỈNH CHO TAB "VEODOC ARSENAL" (DUAL MODE)
   ========================================================================== */

/* --- Layout & Typography chung --- */
#veo-tab-veodoc-arsenal {
    --arsenal-primary-color: #4A5568; /* Dark Gray-Blue */
    --arsenal-accent-color: #C53030;  /* Red */
    --arsenal-bg-light: #F7FAFC;
    --arsenal-border-color: #E2E8F0;
}

#veo-tab-veodoc-arsenal h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    color: var(--arsenal-primary-color);
    margin-bottom: 5px;
}

#veo-tab-veodoc-arsenal > p {
    margin-top: 0;
    font-size: 15px;
    color: #4A5568;
    max-width: 800px;
    margin-bottom: 25px;
}

/* --- Bộ chọn Chế độ (Mode Switcher) --- */
.aipg-mode-switcher.aipg-button-group {
    display: flex;
    background-color: #E2E8F0;
    border-radius: 8px;
    padding: 4px;
}

.aipg-mode-switcher .aipg-mode-switch-btn {
    flex: 1;
    text-align: center;
    padding: 10px 15px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #4A5568;
    transition: all 0.2s ease-in-out;
}

.aipg-mode-switcher .aipg-mode-switch-btn.active {
    background-color: #FFFFFF;
    color: var(--arsenal-accent-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.aipg-creation-panel {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 25px;
}


/* --- Các Panel Nhập liệu & Trợ lý --- */
#veo-tab-veodoc-arsenal .aipg-form-section {
    background-color: #ffffff;
    border: 1px solid var(--arsenal-border-color);
    border-radius: 8px;
    padding: 25px;
}

#veo-tab-veodoc-arsenal .aipg-section-header {
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--arsenal-border-color);
}

/* Style cho Trợ lý */
#veo-tab-veodoc-arsenal .aipg-form-section[style*="f0f7ff"] { /* Assistant panel */
    background-color: #f0f7ff;
    border-color: #b3d7ff;
}
#veo-tab-veodoc-arsenal .aipg-form-section[style*="f0f7ff"] .aipg-section-header {
    color: #005a9c;
    border-bottom-color: #cce4ff;
}

/* --- Các Thẻ Gợi ý của Trợ lý --- */
#aipg-veodoc-suggestions-container .aipg-veodoc-suggestion-tag {
    cursor: pointer;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease-in-out;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 14px;
    display: inline-block;
    margin: 4px;
}

#aipg-veodoc-suggestions-container .aipg-veodoc-suggestion-tag:hover {
    background-color: #d0d6db;
    border-color: #b9bfc4;
    transform: translateY(-1px);
}

#aipg-veodoc-suggestions-container .aipg-veodoc-suggestion-tag.active {
    background-color: var(--arsenal-accent-color);
    color: #fff;
    border-color: var(--arsenal-accent-color);
    font-weight: 600;
}

/* --- Nút bấm chính --- */
#veo-tab-veodoc-arsenal .button-hero {
    background-color: var(--arsenal-accent-color);
    border-color: #A02828;
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
}

#veo-tab-veodoc-arsenal .button-hero:hover {
    background-color: #A02828;
    border-color: #7F2020;
}


/* --- Khu vực Kết quả --- */
#aipg-veodoc-results-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#aipg-veodoc-results-container .aipg-result-card {
    background: #fff;
    border: 1px solid var(--arsenal-border-color);
    border-left: 4px solid var(--arsenal-primary-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}

#aipg-veodoc-results-container .aipg-card-header {
    background-color: var(--arsenal-bg-light);
    padding: 12px 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--arsenal-border-color);
}

#aipg-veodoc-results-container .aipg-card-body {
    padding: 15px;
}

/* Phần Thuyết minh */
#aipg-veodoc-results-container .aipg-voiceover-section {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
}

#aipg-veodoc-results-container .aipg-voiceover-section p {
    margin: 0;
    line-height: 1.6;
}

#aipg-veodoc-results-container .aipg-voiceover-section strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
}

/* Phần Prompt */
#aipg-veodoc-results-container .aipg-prompt-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

#aipg-veodoc-results-container .aipg-batch-results-textarea {
    background-color: #fdfdff;
    border: 1px solid #eef;
    font-family: monospace;
    font-size: 13px;
    color: #333;
}
/* =============================================================== */
/* CSS CHO TAB "AI REVIEW & VIDEO BÁN HÀNG"                        */
/* =============================================================== */

/* --- Tiêu đề chính của Tab --- */
#veo-tab-ai-review h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    color: #1e293b;
}

#veo-tab-ai-review h3 .dashicons {
    color: #f5b014; /* Màu vàng của ngôi sao */
}

/* --- Form nhập liệu chính --- */
#aipg-ai-review-form {
    padding: 20px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* --- Nút "AI Tìm sản phẩm Hot" và Dropdown Lĩnh vực --- */
#aipg-ai-review-form .aipg-input-with-button {
    display: flex;
    gap: 10px;
}
#aipg-ai-review-form .aipg-input-with-button select {
    flex-grow: 1; /* Cho phép select co giãn */
}
#aipg-find-hot-products-btn {
    flex-shrink: 0; /* Không cho nút bị co lại */
    background-color: #fff;
    border-color: #cbd5e1;
    color: #475569;
    font-weight: 600;
}
#aipg-find-hot-products-btn .dashicons {
    margin-right: 4px;
    color: #f59e0b; /* Màu cam lửa */
}
#aipg-find-hot-products-btn:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

/* --- Khu vực hiển thị sản phẩm hot --- */
#aipg-hot-products-results {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center; /* Căn giữa các tag theo chiều dọc */
}
/* Thêm nhãn "SẢN PHẨM HOT" */
#aipg-hot-products-results::before {
    content: "SẢN PHẨM HOT:";
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    margin-right: 8px;
    text-transform: uppercase;
}

/* --- Nút "AI Làm rõ sản phẩm" --- */
.aipg-form-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
#aipg-clarify-product-btn {
    background-color: #eef7ff;
    border-color: #b3d7ff;
    color: #005a9c;
}
#aipg-clarify-product-btn .dashicons {
    margin-right: 4px;
}

/* --- Card Kịch bản có thể chọn --- */
.aipg-result-card.is-selectable {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
}
.aipg-result-card.is-selectable:hover {
    border-color: #94a3b8;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.aipg-selectable-card-label {
    display: block;
    padding: 15px 20px;
    cursor: pointer;
}
/* Ẩn nút radio mặc định */
.aipg-selectable-card-label input[type="radio"] {
    display: none;
}
/* Thay đổi giao diện khi được chọn */
.aipg-selectable-card-label input[type="radio"]:checked + .aipg-card-content {
    /* Thêm một viền màu để báo hiệu đã chọn */
}
.aipg-result-card.is-selectable input[type="radio"]:checked {
   /* This is a trick selector - the style is applied to the parent label or card */
}
.aipg-result-card.is-selectable:has(input[type="radio"]:checked) {
    border-color: #b91c1c; /* Màu đỏ của nút chính */
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.2);
}
.aipg-result-card .aipg-card-body code {
    background-color: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: #475569;
}

/* --- Nút Tối ưu Kịch bản --- */
#aipg-optimize-review-action {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #cbd5e1;
}
#aipg-optimize-selected-review-btn .dashicons {
    margin-right: 5px;
}

/* --- Container chứa prompt cuối cùng --- */
#aipg-final-review-prompt-container h4 {
    text-align: center;
    color: #1e293b;
    margin-bottom: 15px;
}

/* ========================================================================
 * [CSS HOÀN CHỈNH V3] Giao diện cho tab "AI Tìm Từ khóa" (Keyword Explorer)
 * Tái thiết kế toàn diện theo phong cách hiện đại, chuyên nghiệp.
 * ======================================================================== */

/* --- 1. Form Nhập liệu & Bố cục chung --- */
#veo-tab-keyword-explorer .aipg-seeding-form {
    background-color: #F8F9FA; /* Màu nền xám rất nhạt */
    padding: 25px;
    border: 1px solid #E9ECEF;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

#veo-tab-keyword-explorer .aipg-keyword-explorer-options {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột đều nhau */
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
}

#veo-tab-keyword-explorer .aipg-checkbox-card {
    background-color: #fff;
    border: 1px solid #DEE2E6;
    border-radius: 6px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

#veo-tab-keyword-explorer .aipg-checkbox-card:hover {
    border-color: #0073e6;
    box-shadow: 0 4px 12px rgba(0, 115, 230, 0.1);
}

#veo-tab-keyword-explorer .aipg-checkbox-card input[type="checkbox"]:checked + span strong {
    color: #0073e6;
}

/* --- 2. Đoạn giới thiệu của AI --- */
#veo-tab-keyword-explorer .aipg-ai-introduction {
    background-color: #eef7ff;
    border-left: 5px solid #3b82f6; /* Xanh dương hiện đại */
    padding: 18px 25px;
    margin: 0 0 30px 0;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.65;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- 3. Tiêu đề Phễu Marketing --- */
.aipg-funnel-header {
    margin-top: 40px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E9ECEF;
    font-size: 1.4em;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- 4. Bảng Kết quả Từ khóa --- */
.aipg-keyword-table-wrapper {
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    margin-top: 15px;
}

.aipg-keyword-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.aipg-keyword-table th, .aipg-keyword-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid #f1f3f5;
}

.aipg-keyword-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.aipg-keyword-table tbody tr:last-child td {
    border-bottom: none;
}

.aipg-keyword-table tbody tr:hover {
    background-color: #f1f7ff;
}

/* --- Thẻ "Độ khó" --- */
.difficulty-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    min-width: 30px;
    text-align: center;
}
.difficulty-pill.easy { background-color: #28a745; } /* Green */
.difficulty-pill.medium { background-color: #ffc107; color: #212529; } /* Amber */
.difficulty-pill.hard { background-color: #dc3545; } /* Red */


/* --- 5. Khối "Ý tưởng Nội dung" --- */
.aipg-content-idea-wrapper {
    margin-top: 15px;
    padding: 18px 20px;
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
    border-left: 5px solid #f59e0b;
    border-radius: 6px;
}

.aipg-content-idea-wrapper .idea-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #92400e;
    font-weight: 700;
    font-size: 14px;
}

.aipg-content-idea-wrapper .idea-title::before {
    content: '💡';
    margin-right: 8px;
    font-size: 18px;
}

.aipg-content-idea-wrapper .idea-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #573d1c;
}

/* --- 6. Khung chứa các nhóm kết quả (Accordion/Card) --- */
#veo-tab-keyword-explorer .aipg-marketing-stage {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease-in-out;
}

#veo-tab-keyword-explorer .aipg-marketing-stage summary {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #343a40;
    cursor: pointer;
}

#veo-tab-keyword-explorer .aipg-marketing-stage .stage-content {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #f1f3f5;
}
/* ========================================================================
 * [CSS NÂNG CẤP] Giao diện cho tính năng Tối ưu Prompt Sản phẩm
 * ======================================================================== */

.aipg-optimization-trigger-wrapper {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 2px dashed #e0e0e0;
    text-align: center;
}

#aipg-run-product-optimization-btn {
    font-size: 16px !important;
    height: 46px !important;
    padding: 0 24px !important;
}

#aipg-product-optimization-results {
    margin-top: 20px;
    text-align: left;
}

/* ========================================================================
 * [CSS MỚI] Giao diện cho "Studio Thơ ca cho Bé"
 * ======================================================================== */
#veo-tab-kids-poem-studio .aipg-seeding-form {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#veo-tab-kids-poem-studio #aipg-kids-poem-input {
    min-height: 200px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.7;
}

#aipg-kids-poem-results-container .aipg-result-card .aipg-card-body {
    background-color: #fdfae6; /* Nền vàng kem nhẹ nhàng */
}