/* ==========================================================================
   CV BUILDER - GIAO DIỆN ĐỘC LẬP & TRỰC QUAN (PHASE 1)
   Quy chuẩn: Quản lý toàn bộ màu sắc tập trung bằng Class CSS
   ========================================================================== */

/* Nền toàn trang */
.cv-builder-body {
    background-color: #f8fafc;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Header độc lập */
.cv-builder-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.cv-builder-brand-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #334155;
}

/* Pill Navigation (3 menu) */
.cv-nav-pills {
    background-color: #f1f5f9;
    padding: 4px;
    border-radius: 9999px;
    display: inline-flex;
    gap: 4px;
}

.cv-nav-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.cv-nav-pill-item:hover {
    color: #0284c7;
    background-color: #ffffff;
}

.cv-nav-pill-item.active {
    background-color: #e0f2fe;
    color: #0284c7;
    font-weight: 600;
}

/* User Avatar */
.cv-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #1d4ed8;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

/* Thẻ CV của tôi (My CV Card) */
.cv-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cv-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

.cv-card-preview-wrapper {
    background-color: #f1f5f9;
    padding: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}

/* Link bao bọc xem trước CV chi tiết */
.cv-card-preview-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

.cv-card-preview-link::after {
    content: "";
    position: absolute;
    top: -16px;
    left: -16px;
    right: -16px;
    bottom: -16px;
    z-index: 2;
}

.cv-card-preview-link:hover .cv-paper-preview {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Mô phỏng tờ giấy A4 */
.cv-paper-preview {
    background-color: #ffffff;
    width: 175px;
    height: 245px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
    display: flex;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cv-paper-preview-sm {
    background-color: #ffffff;
    width: 160px;
    height: 226px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
    display: flex;
}

/* Badge CV Chính */
.cv-primary-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background-color: #2563eb;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
    pointer-events: none;
}

.cv-favorite-star {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
}

.cv-favorite-star.active {
    color: #3b82f6;
}

button.cv-favorite-star {
    border: none;
    outline: none;
    padding: 0;
}

button.cv-favorite-star:not(.active):hover {
    color: #eab308;
    background-color: #fefce8;
}

.no-arrow::after {
    display: none !important;
}

.cv-card .dropdown-menu {
    border-radius: 10px;
    min-width: 190px;
    z-index: 1050;
}

.cv-card .dropdown-item {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Class màu sắc điểm số (Score Circles) */
.cv-score-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
}

.cv-score-green  { background-color: #10b981; }
.cv-score-orange { background-color: #f59e0b; }
.cv-score-red    { background-color: #ef4444; }

/* Status Badges */
.badge-status-completed {
    background-color: #ecfdf5;
    color: #059669;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
}

.badge-status-approved {
    background-color: #ecfdf5;
    color: #059669;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
}

.badge-status-pending {
    background-color: #fffbeb;
    color: #d97706;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
}

.badge-status-draft {
    background-color: #f1f5f9;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
}

/* Typography Font-Size Helpers */
.fs-11 { font-size: 0.6875rem !important; }
.fs-12 { font-size: 0.75rem !important; }
.fs-13 { font-size: 0.8125rem !important; }
.fs-14 { font-size: 0.875rem !important; }

/* Action Buttons */
.cv-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.15s ease;
}

.cv-action-btn:hover {
    background-color: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

.cv-btn-edit {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.cv-btn-edit:hover {
    background-color: #1d4ed8;
    color: #ffffff;
}

/* Template Gallery Cards */
.template-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.template-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1);
    border-color: #93c5fd;
}

.template-preview-box {
    background-color: #f8fafc;
    padding: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    overflow: hidden;
}

.template-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 30%, rgba(15, 23, 42, 0.65) 100%);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    transition: opacity 0.2s ease;
}

.template-card:hover .template-overlay {
    opacity: 1;
}

/* Tag filter pills */
.cv-filter-pill {
    padding: 6px 18px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.cv-filter-pill:hover {
    border-color: #cbd5e1;
    color: #1e293b;
}

.cv-filter-pill.active {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    font-weight: 600;
}

/* ==========================================================================
   CLASSES MÀU SẮC ĐỊNH DANH CHO CÁC MẪU TEMPLATE (THEME CLASSES)
   Chỉ bao gồm 11 màu chuẩn của 4 template hiện tại (default, simple, fresher, it)
   ========================================================================== */
.theme-amber      { background-color: #f59e0b !important; border-color: #f59e0b !important; }
.theme-steel_blue { background-color: #0284c7 !important; border-color: #0284c7 !important; }
.theme-emerald    { background-color: #059669 !important; border-color: #059669 !important; }
.theme-navy       { background-color: #1e3a8a !important; border-color: #1e3a8a !important; }
.theme-teal       { background-color: #0d9488 !important; border-color: #0d9488 !important; }
.theme-sky_blue   { background-color: #0284c7 !important; border-color: #0284c7 !important; }
.theme-mint       { background-color: #10b981 !important; border-color: #10b981 !important; }
.theme-peach      { background-color: #f97316 !important; border-color: #f97316 !important; }
.theme-plum       { background-color: #a15277 !important; border-color: #a15277 !important; }
.theme-blue       { background-color: #2563eb !important; border-color: #2563eb !important; }
.theme-slate      { background-color: #334155 !important; border-color: #334155 !important; }
.theme-purple     { background-color: #9333ea !important; border-color: #9333ea !important; }
.theme-coral      { background-color: #f43f5e !important; border-color: #f43f5e !important; }
.theme-ocean      { background-color: #003746 !important; border-color: #003746 !important; }

/* Text color helpers */
.text-theme-amber      { color: #f59e0b !important; }
.text-theme-steel_blue { color: #0284c7 !important; }
.text-theme-emerald    { color: #059669 !important; }
.text-theme-navy       { color: #1e3a8a !important; }
.text-theme-teal       { color: #0d9488 !important; }
.text-theme-sky_blue   { color: #0284c7 !important; }
.text-theme-mint       { color: #10b981 !important; }
.text-theme-peach      { color: #f97316 !important; }
.text-theme-plum       { color: #a15277 !important; }
.text-theme-blue       { color: #2563eb !important; }
.text-theme-slate      { color: #334155 !important; }
.text-theme-purple     { color: #9333ea !important; }
.text-theme-coral      { color: #f43f5e !important; }
.text-theme-ocean      { color: #003746 !important; }

/* Các thành phần chi tiết của bản vẽ mô phỏng CV A4 */
.cv-mock-sidebar {
    width: 36%;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background-color: var(--cv-primary-subtle, #fef3c7);
    border-right: 1px solid var(--cv-mock-border, rgba(0, 0, 0, 0.06));
    flex-shrink: 0;
}

.cv-mock-main {
    width: 64%;
    background-color: #ffffff;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.cv-mock-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid var(--cv-primary, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cv-primary, #f59e0b);
    font-size: 9px;
    flex-shrink: 0;
}

.cv-mock-line {
    border-radius: 2px;
}

.cv-mock-line-light         { background-color: rgba(255, 255, 255, 0.6); }
.cv-mock-line-subtle        { background-color: rgba(255, 255, 255, 0.4); }
.cv-mock-line-gray          { background-color: #e2e8f0; }
.cv-mock-line-primary       { background-color: var(--cv-primary); }
.cv-mock-line-subtle-theme  { background-color: rgba(var(--cv-primary-rgb, 245, 158, 11), 0.28); }

/* Mockup Micro-Headings dùng chung cho cv-paper-preview */
.cv-mock-title,
.cv-mock-section-title {
    font-size: 7.5px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 2px;
    color: var(--cv-primary, #1e293b);
    letter-spacing: 0.2px;
}

.cv-mock-title-dark {
    font-size: 7.5px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 2px;
    color: #1e293b;
    letter-spacing: 0.2px;
}

.cv-mock-title-white {
    font-size: 7.5px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 2px;
    color: #ffffff;
    letter-spacing: 0.2px;
}

/* Mockup Marketing thu nhỏ cho cv-paper-preview */
.cv-mock-marketing {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    overflow: hidden;
}

.cv-mock-marketing-sidebar {
    width: 36%;
    height: 100%;
    background-color: var(--cv-primary-subtle, #e5d6d3);
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid var(--cv-mock-border, rgba(0, 0, 0, 0.08));
    overflow: hidden;
    flex-shrink: 0;
}

.cv-mock-marketing-main {
    width: 64%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
    flex-grow: 1;
}

.cv-mock-marketing-banner {
    background-color: var(--cv-primary, #3d323e);
    padding: 8px 6px;
    color: #ffffff;
    flex-shrink: 0;
}

.cv-mock-marketing-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    overflow: hidden;
    background-color: #ffffff;
}

.cv-mock-marketing-title-line {
    border-bottom: 1.5px solid #212529;
    padding-bottom: 1px;
    margin-bottom: 2px;
}

/* Mockup Unique (Độc đáo) thu nhỏ cho cv-paper-preview */
.cv-mock-unique {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    padding: 6px;
    gap: 6px;
    overflow: hidden;
}

.cv-mock-unique-sidebar {
    width: 36%;
    height: 100%;
    background-color: var(--cv-primary-subtle, #fef3c7);
    border-radius: 9999px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.cv-mock-unique-main {
    width: 64%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
    flex-grow: 1;
}

.cv-mock-unique-pill {
    border-radius: 9999px;
    background-color: var(--cv-primary, #f59e0b);
    min-height: 12px;
    padding: 1px 6px;
    width: auto;
    max-width: 80%;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.cv-mock-it-pill {
    border-radius: 9999px;
    background-color: var(--cv-primary, #0ea5e9);
    min-height: 11px;
    padding: 1px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cv-mock-unique-box {
    border-radius: 12px;
    background-color: var(--cv-primary-subtle, #fef3c7);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Mockup Style (Phong cách) thu nhỏ cho cv-paper-preview */
.cv-mock-style {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
}

.cv-mock-style-header {
    background-image: url('/images/cv-templates/yellow-banner.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 6px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    flex-shrink: 0;
}

.cv-mock-style-header-left {
    width: 38%;
    overflow: hidden;
}

.cv-mock-style-header-center {
    width: 24%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cv-mock-style-header-right {
    width: 38%;
    display: flex;
    gap: 3px;
    overflow: hidden;
}

.cv-mock-style-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--cv-primary, #003746);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cv-mock-style-body {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 6px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-style-col {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.cv-mock-style-title {
    font-size: 8px;
    font-weight: 700;
    color: var(--cv-primary, #003746);
    text-transform: uppercase;
    border-bottom: 1px solid var(--cv-mock-border, #e2e8f0);
    padding-bottom: 1px;
    margin-bottom: 2px;
}

/* Mockup Star (Cá tính) thu nhỏ cho cv-paper-preview */
.cv-mock-star {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
}

.cv-mock-star-header {
    background-image: url('/images/cv-templates/header-star.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    flex-shrink: 0;
}

.cv-mock-star-avatar {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    max-width: 26px;
    max-height: 26px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    border: 1.5px solid #1e293b;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #1e293b;
    flex-shrink: 0;
}

.cv-mock-star-header-info {
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-star-body {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 6px 8px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-star-left {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.cv-mock-star-right {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.cv-mock-star-title {
    font-size: 7.5px;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 1px;
}

/* Mockup Elegant (Thanh Lịch) thu nhỏ cho cv-paper-preview */
.cv-mock-elegant {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
    padding: 6px 8px;
}

.cv-mock-elegant-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.cv-mock-elegant-avatar {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    max-width: 26px;
    max-height: 26px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--cv-primary, #be123c);
    flex-shrink: 0;
}

.cv-mock-elegant-header-info {
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-elegant-section-title {
    font-size: 7px;
    font-weight: 700;
    color: var(--cv-primary, #be123c);
    text-transform: uppercase;
    border-top: 1px solid var(--cv-primary, #be123c);
    border-bottom: 1px solid var(--cv-primary, #be123c);
    padding: 1px 0;
    margin-bottom: 2px;
    line-height: 1.1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-mock-elegant-row-3 {
    display: flex;
    gap: 4px;
    margin-bottom: 3px;
    flex-shrink: 0;
}

.cv-mock-elegant-col-3 {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.cv-mock-elegant-full-row {
    margin-bottom: 3px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.cv-mock-elegant-row-2 {
    display: flex;
    gap: 6px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-elegant-col-2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* Mockup Modern (Hiện đại) thu nhỏ cho cv-paper-preview */
.cv-mock-modern {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    overflow: hidden;
}

.cv-mock-modern-sidebar {
    width: 35%;
    height: 100%;
    background-color: var(--cv-primary-subtle, #eff6ff);
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border-right: 1px solid var(--cv-mock-border, rgba(0, 0, 0, 0.06));
    overflow: hidden;
    flex-shrink: 0;
}

.cv-mock-modern-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1.5px solid var(--cv-primary, #2563eb);
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--cv-primary, #2563eb);
    flex-shrink: 0;
}

.cv-mock-modern-main {
    width: 65%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 6px 6px;
    gap: 3px;
    overflow: hidden;
    flex-grow: 1;
}

.cv-mock-modern-title-line {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 2px;
}

.cv-mock-modern-title-line .cv-mock-title {
    margin-bottom: 0;
    white-space: nowrap;
}

.cv-mock-modern-title-line .cv-mock-line-bar {
    flex-grow: 1;
    height: 1px;
    background-color: var(--cv-primary, #2563eb);
    opacity: 0.8;
}

/* Mockup Dynamic (Năng Động) thu nhỏ cho cv-paper-preview */
.cv-mock-dynamic {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
}

.cv-mock-dynamic-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    flex-shrink: 0;
}

.cv-mock-dynamic-header-avatar {
    width: 32%;
    height: 100%;
    background-color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cv-mock-dynamic-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1.5px solid #ffffff;
    background-color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #ffffff;
}

.cv-mock-dynamic-header-info {
    width: 68%;
    height: 100%;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}

.cv-mock-dynamic-contact-bar {
    width: 100%;
    height: 14px;
    background-color: var(--cv-primary, #059669);
    padding: 1px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cv-mock-dynamic-body {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.cv-mock-dynamic-sidebar {
    width: 32%;
    height: 100%;
    background-color: #1e293b;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    overflow: hidden;
}

.cv-mock-dynamic-main {
    width: 68%;
    height: 100%;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-dynamic-section-title {
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1e293b;
    border-bottom: 1px solid var(--cv-primary, #059669);
    padding-bottom: 1px;
    margin-bottom: 2px;
    line-height: 1.1;
}

.cv-mock-dynamic-sidebar-title {
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 1px solid var(--cv-primary, #059669);
    padding-bottom: 1px;
    margin-bottom: 2px;
    line-height: 1.1;
}

/* Mockup thu nhỏ cho template `sales` (Kinh Doanh) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/sales.css riêng -> các class .cv-mock-sales-* BẮT BUỘC định nghĩa tại đây
   (đúng precedent của .cv-mock-dynamic-*), không đặt trong sales.css. */
.cv-mock-sales-sidebar {
    width: 36%;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background-color: var(--cv-primary, #1e3a8a);
    flex-shrink: 0;
}

.cv-mock-sales-main {
    width: 64%;
    background-color: #ffffff;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.cv-mock-sales-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 9px;
    flex-shrink: 0;
}

/* Mockup thu nhỏ cho template `timeline` (Dòng Thời Gian) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/timeline.css riêng -> các class .cv-mock-timeline-* BẮT BUỘC định nghĩa tại đây
   (đúng precedent của .cv-mock-sales-*, .cv-mock-dynamic-*), không đặt trong timeline.css. */
.cv-mock-timeline {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
}

.cv-mock-timeline-banner {
    width: 100%;
    background-color: var(--cv-primary, #2563eb);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cv-mock-timeline-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 9px;
    flex-shrink: 0;
}

.cv-mock-timeline-banner-info {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-mock-timeline-body {
    width: 100%;
    background-color: #ffffff;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-timeline-track {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cv-mock-timeline-dot {
    width: 5px;
    height: 5px;
    min-width: 5px;
    border-radius: 50%;
    background-color: var(--cv-primary, #2563eb);
    flex-shrink: 0;
}

/* Mockup thu nhỏ cho template `highlight` (Nổi Bật) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/highlight.css riêng -> các class .cv-mock-highlight-* BẮT BUỘC định nghĩa tại đây
   (đúng precedent của .cv-mock-sales-*, .cv-mock-timeline-*), không đặt trong highlight.css. */
.cv-mock-highlight {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
}

.cv-mock-highlight-header {
    width: 100%;
    background-color: #ffffff;
    border-left: 3px solid var(--cv-primary, #1d4ed8);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cv-mock-highlight-accent {
    display: none;
}

.cv-mock-highlight-avatar {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--cv-primary, #1d4ed8);
    background-color: var(--cv-primary-subtle, #dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cv-primary, #1d4ed8);
    font-size: 9px;
    flex-shrink: 0;
}

.cv-mock-highlight-header-info {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-mock-highlight-ribbon {
    width: 100%;
    background-color: var(--cv-primary-subtle, #dbeafe);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cv-mock-highlight-ribbon-label {
    font-size: 6px;
    font-weight: 700;
    color: var(--cv-primary, #1d4ed8);
    flex-shrink: 0;
}

.cv-mock-highlight-ribbon-pill {
    width: 16px;
    height: 5px;
    border-radius: 9999px;
    background-color: #ffffff;
    border: 1px solid var(--cv-primary, #1d4ed8);
    flex-shrink: 0;
}

.cv-mock-highlight-body {
    width: 100%;
    display: flex;
    gap: 6px;
    padding: 8px 6px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-highlight-main {
    flex: 0 0 62%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.cv-mock-highlight-aside {
    flex: 0 0 34%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    border-left: 1px solid #e2e8f0;
    padding-left: 6px;
}

/* Mockup thu nhỏ cho template `neat` (Chỉn Chu) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/neat.css riêng -> các class .cv-mock-neat-* BẮT BUỘC định nghĩa tại đây
   (đúng precedent của .cv-mock-sales-*, .cv-mock-highlight-*), không đặt trong neat.css. */
.cv-mock-neat {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    overflow: hidden;
}

.cv-mock-neat-sidebar {
    width: 32%;
    height: 100%;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background-color: var(--cv-sidebar-bg, var(--cv-theme-sidebar-bg, #eef2f7));
    border-right: 1px solid var(--cv-mock-border, #cbd5e1);
    flex-shrink: 0;
}

.cv-mock-neat-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background-color: var(--cv-primary, #1e293b);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 8px;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.cv-mock-neat-heading {
    width: 100%;
    max-width: 100%;
    background-color: var(--cv-primary-dark, #0f172a);
    color: #ffffff;
    font-size: 6.5px;
    font-weight: 700;
    text-align: center;
    border-radius: 2px;
    padding: 1.5px 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.cv-mock-neat-main {
    width: 68%;
    height: 100%;
    background-color: #ffffff;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-neat-row {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    width: 100%;
}

.cv-mock-neat-date {
    width: 18px;
    height: 4px;
    background-color: #94a3b8;
    border-radius: 1px;
    flex-shrink: 0;
    margin-top: 2px;
}

.cv-mock-neat-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Mockup thu nhỏ cho template `magazine` (Tạp Chí) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/magazine.css riêng -> các class .cv-mock-magazine-* BẮT BUỘC định nghĩa tại đây
   (đúng precedent của .cv-mock-sales-*, .cv-mock-neat-*), không đặt trong magazine.css. */
.cv-mock-magazine-sidebar {
    width: 36%;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background-color: var(--cv-sidebar-bg, var(--cv-theme-sidebar-bg, #18181b));
    flex-shrink: 0;
}

.cv-mock-magazine-main {
    width: 64%;
    background-color: #ffffff;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-magazine-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 8px;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.cv-mock-magazine-sidebar-box {
    width: 100%;
    background-color: #ffffff;
    color: var(--cv-primary, #18181b);
    font-size: 6.5px;
    font-weight: 700;
    text-align: center;
    border-radius: 1px;
    padding: 1px 2px;
    margin-top: 2px;
    margin-bottom: 1px;
    letter-spacing: 0.2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-mock-magazine-bar-heading {
    width: 100%;
    background-color: var(--cv-primary, #18181b);
    color: #ffffff;
    font-size: 6.5px;
    font-weight: 700;
    text-align: center;
    padding: 1.5px 2px;
    margin-top: 2px;
    margin-bottom: 1px;
    letter-spacing: 0.2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Mockup thu nhỏ cho template `clarity` (Rõ Ràng) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/clarity.css riêng -> các class .cv-mock-clarity-* BẮT BUỘC định nghĩa tại đây
   (đúng precedent của .cv-mock-sales-*, .cv-mock-neat-*, .cv-mock-magazine-*), không đặt trong clarity.css.
   Bố cục 2 cột: Cột Main bên trái rộng (width: 65%), Cột Sidebar bên phải hẹp (width: 35%). */
.cv-mock-clarity-main {
    width: 65%;
    background-color: #ffffff;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-clarity-sidebar {
    width: 35%;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background-color: var(--cv-sidebar-bg, var(--cv-theme-sidebar-bg, #f0f8ff));
    border-left: 1px solid var(--cv-mock-border, #bae6fd);
    flex-shrink: 0;
}

.cv-mock-clarity-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--cv-primary, #0284c7);
    background-color: var(--cv-primary, #0284c7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 8px;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.cv-mock-clarity-heading {
    width: 100%;
    color: var(--cv-primary, #0284c7);
    font-size: 6.5px;
    font-weight: 700;
    text-align: left;
    margin-top: 2px;
    margin-bottom: 1px;
    letter-spacing: 0.2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.cv-mock-clarity-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--cv-primary, #0284c7);
    flex-shrink: 0;
}

.cv-mock-clarity-timeline-row {
    display: flex;
    gap: 3px;
    align-items: flex-start;
    width: 100%;
    position: relative;
    padding-left: 5px;
    border-left: 1px solid var(--cv-mock-border, #bae6fd);
}

.cv-mock-clarity-dot {
    position: absolute;
    left: -2.5px;
    top: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--cv-primary, #0284c7);
}

/* Mockup thu nhỏ cho template `executive` (Điều Hành) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/executive.css riêng -> các class .cv-mock-executive-* BẮT BUỘC định nghĩa tại đây
   (đúng precedent của .cv-mock-timeline-*, .cv-mock-highlight-*), không đặt trong executive.css. */
.cv-mock-executive {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
}

.cv-mock-executive-banner {
    width: 100%;
    background-image: linear-gradient(135deg, var(--cv-primary, #be185d), var(--cv-primary-dark, #9d174d));
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cv-mock-executive-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 9px;
    flex-shrink: 0;
}

.cv-mock-executive-banner-info {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-mock-executive-subheader {
    width: 100%;
    background-color: var(--cv-primary-subtle, #fdf2f8);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cv-mock-executive-pill {
    width: 16px;
    height: 5px;
    border-radius: 9999px;
    background-color: #ffffff;
    border: 1px solid var(--cv-primary, #be185d);
    flex-shrink: 0;
}

.cv-mock-executive-body {
    width: 100%;
    display: flex;
    gap: 6px;
    padding: 8px 6px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-executive-main {
    flex: 0 0 58%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.cv-mock-executive-aside {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    border-left: 1px solid #e2e8f0;
    padding-left: 6px;
}

/* Mockup thu nhỏ cho template `geometric` (Hình Khối) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/geometric.css riêng -> các class .cv-mock-geometric-* BẮT BUỘC định
   nghĩa tại đây (đúng precedent của .cv-mock-neat-*, .cv-mock-executive-*), không đặt trong
   geometric.css. Bố cục: Sidebar cắt vát chéo góc (36%) + Main trắng timeline chấm tròn (64%). */
.cv-mock-geometric-sidebar {
    width: 36%;
    height: 100%;
    position: relative;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background-color: var(--cv-sidebar-bottom-bg, var(--cv-theme-sidebar-bottom-bg, #f1f5f9));
    overflow: hidden;
    flex-shrink: 0;
}

.cv-mock-geometric-angle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    background-color: var(--cv-sidebar-top-bg, var(--cv-theme-sidebar-top-bg, #1e40af));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%);
}

.cv-mock-geometric-avatar {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background-color: var(--cv-primary, #1e40af);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 8px;
    flex-shrink: 0;
    margin-top: 10px;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
}

.cv-mock-geometric-main {
    width: 64%;
    height: 100%;
    background-color: #ffffff;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-geometric-timeline-row {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    width: 100%;
    position: relative;
    padding-left: 6px;
    border-left: 1px solid var(--cv-mock-border, #cbd5e1);
}

.cv-mock-geometric-dot {
    position: absolute;
    left: -3px;
    top: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--cv-primary, #1e40af);
}

.cv-mock-geometric-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Mockup thu nhỏ cho template `artistic` (Nghệ Thuật) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/artistic.css riêng -> các class .cv-mock-artistic-* BẮT BUỘC định
   nghĩa tại đây (đúng precedent của .cv-mock-neat-*, .cv-mock-geometric-*), không đặt trong
   artistic.css. Bố cục: Cột trái Arched Avatar + 3 chấm phân cách (35%) + Cột phải Heading gạch chân thanh mảnh (65%). */
.cv-mock-artistic-sidebar {
    width: 35%;
    height: 100%;
    position: relative;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background-color: var(--cv-primary-subtle, var(--cv-theme-primary-subtle, #f5f3ff));
    border-right: 1px solid var(--cv-mock-border, #e9d5ff);
    flex-shrink: 0;
}

.cv-mock-artistic-avatar {
    width: 18px;
    height: 22px;
    min-width: 18px;
    min-height: 22px;
    border-radius: 9px 9px 2px 2px;
    border: 1px solid #ffffff;
    background-color: var(--cv-primary, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 7px;
    flex-shrink: 0;
    margin-bottom: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cv-mock-artistic-name {
    font-size: 8px !important;
    color: var(--cv-primary, #7c3aed) !important;
    font-family: serif;
}

.cv-mock-artistic-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    margin: 1px 0;
}

.cv-mock-artistic-divider span {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--cv-primary, #7c3aed);
    opacity: 0.7;
    display: inline-block;
}

.cv-mock-artistic-main {
    width: 65%;
    height: 100%;
    background-color: #ffffff;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    overflow: hidden;
}

.cv-mock-artistic-heading {
    font-size: 7.5px !important;
    font-weight: 700 !important;
    color: var(--cv-primary, #7c3aed) !important;
    border-bottom: 1px solid var(--cv-primary, #7c3aed) !important;
    padding-bottom: 1px !important;
    margin-bottom: 2px !important;
}

.cv-mock-artistic-timeline-row {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    width: 100%;
    position: relative;
    padding-left: 5px;
    border-left: 1px solid var(--cv-mock-border, #e9d5ff);
}

.cv-mock-artistic-dot {
    position: absolute;
    left: -2.5px;
    top: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--cv-primary, #7c3aed);
}

.cv-mock-artistic-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Mockup thu nhỏ cho template `browser` (Trình Duyệt) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/browser.css riêng -> các class .cv-mock-browser-* BẮT BUỘC định
   nghĩa tại đây. Bố cục: Thanh tab và controls macOS + Ô URL bar + Thân nền lưới nhẹ + Các floating white cards. */
.cv-mock-browser {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--cv-primary-subtle, #f0f9ff);
    overflow: hidden;
}

.cv-mock-browser-header {
    width: 100%;
    background-color: var(--cv-primary-subtle, #e0f2fe);
    border-bottom: 1px solid var(--cv-mock-border, #bae6fd);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.cv-mock-browser-tabbar {
    display: flex;
    align-items: center;
    padding: 3px 4px 1px 4px;
    gap: 4px;
}

.cv-mock-browser-dots {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cv-mock-browser-dot-close,
.cv-mock-browser-dot-min,
.cv-mock-browser-dot-max {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    display: inline-block;
}

.cv-mock-browser-dot-close { background-color: #ef4444; }
.cv-mock-browser-dot-min   { background-color: #f59e0b; }
.cv-mock-browser-dot-max   { background-color: #10b981; }

.cv-mock-browser-tab {
    background-color: #ffffff;
    border-radius: 3px 3px 0 0;
    padding: 1px 4px;
    border: 1px solid var(--cv-mock-border, #bae6fd);
    border-bottom: none;
    display: inline-flex;
    align-items: center;
}

.cv-mock-browser-tab-text {
    font-size: 5.5px;
    font-weight: 700;
    color: var(--cv-primary, #0284c7);
    line-height: 1;
}

.cv-mock-browser-url-bar {
    margin: 1px 4px 2px 4px;
    padding: 1px 4px;
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid var(--cv-mock-border, #bae6fd);
    display: flex;
    align-items: center;
    gap: 3px;
}

.cv-mock-browser-url-icon {
    font-size: 5px;
    color: var(--cv-primary, #0284c7);
}

.cv-mock-browser-url-line {
    flex-grow: 1;
    height: 2px;
    border-radius: 1px;
    background-color: var(--cv-mock-border, #bae6fd);
}

.cv-mock-browser-body {
    flex-grow: 1;
    padding: 3px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background-color: var(--cv-primary-subtle, #f0f9ff);
    background-image:
        linear-gradient(to right, var(--cv-mock-border, #bae6fd) 0.5px, transparent 0.5px),
        linear-gradient(to bottom, var(--cv-mock-border, #bae6fd) 0.5px, transparent 0.5px);
    background-size: 10px 10px;
    overflow: hidden;
}

.cv-mock-browser-card {
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid var(--cv-mock-border, #bae6fd);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 3px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-mock-browser-avatar {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    border: 1px solid var(--cv-mock-border, #bae6fd);
    background-color: var(--cv-primary, #0284c7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 6px;
    flex-shrink: 0;
}

.cv-mock-browser-name {
    font-size: 7.5px !important;
    font-weight: 700;
    color: var(--cv-primary, #0284c7) !important;
    line-height: 1.1;
}

.cv-mock-browser-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: 100%;
}

.cv-mock-browser-cols {
    display: flex;
    gap: 3px;
    width: 100%;
    flex-grow: 1;
}

.cv-mock-browser-col-left {
    width: 58%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-mock-browser-col-right {
    width: 42%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-mock-browser-heading {
    font-size: 6.5px !important;
    font-weight: 700 !important;
    color: var(--cv-primary, #0284c7) !important;
    margin-bottom: 1px !important;
    line-height: 1 !important;
}

/* --- MOCKUP CHO TEMPLATE VERTICAL (CHỮ DỌC - Subtask 11) --- */
.cv-mock-vertical-sidebar {
    width: 32%;
    height: 100%;
    background-color: #ffffff;
    border-right: 1px solid var(--cv-mock-border, var(--cv-border, #fde68a));
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
}

.cv-mock-vertical-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--cv-primary-subtle, #fefce8);
    color: var(--cv-primary, #b45309);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    border: 1px solid var(--cv-mock-border, #fde68a);
    margin-bottom: 2px;
}

.cv-mock-vertical-name {
    font-size: 6.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
    letter-spacing: 0.5px;
    margin: 2px 0;
    white-space: nowrap;
    max-height: 55px;
    overflow: hidden;
}

.cv-mock-vertical-quote {
    font-family: Georgia, serif;
    font-size: 14px;
    line-height: 0.8;
    color: var(--cv-primary, #b45309);
    user-select: none;
    margin-top: auto;
}

.cv-mock-vertical-main {
    width: 68%;
    height: 100%;
    background-color: var(--cv-primary-subtle, #fef3c7);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
}

.cv-mock-vertical-heading {
    font-size: 6.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    border-bottom: 1px solid var(--cv-mock-border, var(--cv-border, #fde68a));
    padding-bottom: 1px !important;
    margin-bottom: 1px !important;
    line-height: 1 !important;
}

/* --- MOCKUP CHO TEMPLATE PASTEL (TƯƠI SÁNG - Subtask 12) --- */
.cv-mock-pastel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
}

.cv-mock-pastel-header {
    background-color: var(--cv-banner-bg, #d1fae5);
    border-radius: 6px;
    border: 1px solid var(--cv-mock-border, var(--cv-border, #a7f3d0));
    padding: 3px 5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.cv-mock-pastel-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background-color: #ffffff;
    color: var(--cv-secondary, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    flex-shrink: 0;
}

.cv-mock-pastel-header-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cv-mock-pastel-name {
    font-size: 6.5px !important;
    font-weight: 700 !important;
    color: var(--cv-primary, #ea580c) !important;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
    letter-spacing: 0.2px;
}

.cv-mock-pastel-title {
    font-size: 5px !important;
    font-weight: 600;
    color: var(--cv-accent, #059669) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.cv-mock-pastel-body {
    display: flex;
    gap: 4px;
    width: 100%;
    flex-grow: 1;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.cv-mock-pastel-sidebar {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.cv-mock-pastel-card {
    background-color: var(--cv-bubble-bg, #ecfdf5);
    border-radius: 5px;
    border: 1px solid var(--cv-mock-border, var(--cv-border, #a7f3d0));
    padding: 2.5px 3px;
    display: flex;
    flex-direction: column;
    gap: 1.5px;
    box-sizing: border-box;
}

.cv-mock-pastel-pill-title {
    font-size: 5px !important;
    font-weight: 700 !important;
    color: var(--cv-primary, #ea580c) !important;
    background-color: #ffffff;
    border-radius: 9999px;
    padding: 0.5px 3.5px;
    display: inline-block;
    width: fit-content;
    line-height: 1.1 !important;
    border: 0.5px solid var(--cv-mock-border, var(--cv-border, #a7f3d0));
    letter-spacing: 0.2px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.cv-mock-pastel-main {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.cv-mock-pastel-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-mock-pastel-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background-color: var(--cv-banner-bg, #d1fae5);
    border-radius: 9999px;
    padding: 0.5px 4px 0.5px 1px;
    border: 0.5px solid var(--cv-mock-border, var(--cv-border, #a7f3d0));
    width: fit-content;
}

.cv-mock-pastel-section-icon {
    font-size: 4px;
    color: #ffffff;
    background-color: var(--cv-secondary, #10b981);
    border-radius: 50%;
    width: 7.5px;
    height: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cv-mock-pastel-section-title {
    font-size: 5px !important;
    font-weight: 700 !important;
    color: var(--cv-primary, #ea580c) !important;
    line-height: 1 !important;
    margin-bottom: 0;
    letter-spacing: 0.2px;
}

.cv-mock-pastel-timeline {
    border-left: 1px solid var(--cv-timeline-line, #fde68a);
    margin-left: 3.5px;
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

/* --- MOCKUP CHO TEMPLATE WAVE (SÓNG LƯỢN - Subtask 13) --- */
.cv-mock-wave {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
}

.cv-mock-wave-header {
    background: var(--cv-wave-gradient, linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #78350f 100%));
    border-bottom-left-radius: 50% 8px;
    border-bottom-right-radius: 50% 8px;
    padding: 4px 6px 5px;
    text-align: center;
    flex-shrink: 0;
}

.cv-mock-wave-name {
    font-size: 6.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.cv-mock-wave-title {
    font-size: 4.8px !important;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.cv-mock-wave-body {
    display: flex;
    gap: 5px;
    padding: 5px 6px 0;
    width: 100%;
    flex-grow: 1;
    min-height: 0;
    box-sizing: border-box;
}

.cv-mock-wave-sidebar {
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.cv-mock-wave-avatar {
    width: 26px;
    height: 34px;
    border-radius: 3px;
    background-color: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    margin: 0 auto 2px;
    border: 1px solid #e2e8f0;
}

.cv-mock-wave-sidebar-block {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

.cv-mock-wave-sidebar-header {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 1px;
}

.cv-mock-wave-icon-gold {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background-color: var(--cv-gold-icon, #d97706);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5px;
    flex-shrink: 0;
}

.cv-mock-wave-sidebar-title {
    font-size: 5px !important;
    font-weight: 700 !important;
    color: var(--cv-primary, #1e3a8a) !important;
    letter-spacing: 0.3px;
    line-height: 1;
}

.cv-mock-wave-main {
    width: 68%;
    display: flex;
    flex-direction: column;
    gap: 3.5px;
    box-sizing: border-box;
}

.cv-mock-wave-section {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

.cv-mock-wave-section-heading {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 1px;
}

.cv-mock-wave-main-title {
    font-size: 5px !important;
    font-weight: 700 !important;
    color: var(--cv-primary, #1e3a8a) !important;
    letter-spacing: 0.3px;
    line-height: 1;
}

.cv-mock-wave-heading-line {
    width: 100%;
    height: 1px;
    background-color: var(--cv-accent, #3b82f6);
    margin-top: 1px;
}

.cv-mock-wave-footer {
    background: var(--cv-wave-gradient, linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #78350f 100%));
    border-top-left-radius: 50% 6px;
    border-top-right-radius: 50% 6px;
    height: 8px;
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
}

/* --- MOCKUP CHO TEMPLATE CREATIVE (SÁNG TẠO - Subtask 14) --- */
/* Mockup thu nhỏ cho template `creative` (Sáng Tạo) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/creative.css riêng -> các class .cv-mock-creative-* BẮT BUỘC định
   nghĩa tại đây (đúng precedent của .cv-mock-sales-*, .cv-mock-wave-*), không đặt trong
   creative.css. Bố cục: Không sidebar, dải liên hệ ngang + card Header (Tên/Avatar vuông) +
   card Kinh nghiệm timeline chấm tròn + hàng card ngang Học vấn, Giải thưởng, Kỹ năng. */
.cv-mock-creative {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background-color: #ffffff;
    padding: 5px 5px 4px;
    overflow: hidden;
    box-sizing: border-box;
}

.cv-mock-creative-strip {
    width: 100%;
    flex-shrink: 0;
}

.cv-mock-creative-card {
    background-color: var(--cv-card-bg, var(--cv-theme-card-bg, #ebe5e0));
    border-radius: 3px;
    padding: 3px 4px;
    box-sizing: border-box;
}

.cv-mock-creative-header {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cv-mock-creative-header-info {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cv-mock-creative-name {
    color: var(--cv-primary, #8c3b2a) !important;
}

.cv-mock-creative-avatar {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 3px;
    background-color: var(--cv-primary, #8c3b2a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 8px;
    flex-shrink: 0;
}

.cv-mock-creative-timeline-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    position: relative;
    padding-left: 6px;
    margin-top: 2px;
    border-left: 1.5px solid var(--cv-mock-border, #f2b5a2);
}

.cv-mock-creative-dot {
    position: absolute;
    left: -3px;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--cv-accent, #f07b5a);
}

.cv-mock-creative-row {
    display: flex;
    gap: 3px;
    width: 100%;
    flex-grow: 1;
    min-height: 0;
}

.cv-mock-creative-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* --- MOCKUP CHO TEMPLATE PRESTIGE (UY TÍN - Subtask 15) --- */
/* Mockup thu nhỏ cho template `prestige` (Uy Tín) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/prestige.css riêng -> các class .cv-mock-prestige-* BẮT BUỘC định
   nghĩa tại đây (đúng precedent của .cv-mock-sales-*, .cv-mock-creative-*), không đặt trong
   prestige.css. Bố cục: Sidebar tối toàn chiều cao (36%) + Main xám nhạt (64%), banner màu
   primary phủ ngang 2 cột gần đỉnh trang kèm avatar tròn tràn mép. */
.cv-mock-prestige-sidebar {
    width: 36%;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background-color: var(--cv-primary, #2c3a47);
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}

.cv-mock-prestige-main {
    width: 64%;
    background-color: #f1f1f1;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    position: relative;
    box-sizing: border-box;
}

.cv-mock-prestige-sidebar-spacer,
.cv-mock-prestige-main-spacer {
    height: 20px;
    flex-shrink: 0;
}

.cv-mock-prestige-banner {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 24px;
    background-color: var(--cv-mock-prestige-banner-bg, #7d977a);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
}

.cv-mock-prestige-banner-name {
    max-width: 70%;
}

.cv-mock-prestige-banner-avatar {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    border: 1.5px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 7px;
    flex-shrink: 0;
}

/* --- MOCKUP CHO TEMPLATE ANALYTIC (PHÂN TÍCH - Subtask 16) --- */
/* Mockup thu nhỏ cho template `analytic` (Phân Tích) - dùng ở Catalog (/cv-online/mau-cv-dep)
   và thẻ CV "Quản lý CV" (cv_card.blade.php). Trang này chỉ nạp cv-builder.css dùng chung,
   KHÔNG nạp cv-templates/analytic.css riêng -> các class .cv-mock-analytic-* BẮT BUỘC định
   nghĩa tại đây (đúng precedent của .cv-mock-prestige-*), không đặt trong analytic.css.
   Bố cục: Main ivory bên trái (64%) + Sidebar tối bên phải (36%), header xám căn phải
   phủ ngang 2 cột gần đỉnh trang. */
.cv-mock-analytic-main {
    width: 64%;
    background-color: var(--cv-mock-analytic-main-bg, #fdf6dc);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    position: relative;
    box-sizing: border-box;
}

.cv-mock-analytic-sidebar {
    width: 36%;
    background-color: var(--cv-mock-analytic-sidebar-bg, #363b3e);
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}

.cv-mock-analytic-main-spacer,
.cv-mock-analytic-sidebar-spacer {
    height: 20px;
    flex-shrink: 0;
}

.cv-mock-analytic-header {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 24px;
    background-color: var(--cv-mock-analytic-header-bg, #7a7978);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 6px;
    box-sizing: border-box;
}

.cv-mock-analytic-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1.5px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 8px;
    flex-shrink: 0;
}

.cv-mock-analytic-bar {
    width: 100%;
    height: 3px;
    background-color: var(--cv-mock-analytic-skill-track, #c9c9c9);
}

.cv-mock-analytic-bar-fill {
    height: 100%;
    background-color: var(--cv-accent, #f59e0b);
}

.cv-mock-analytic-fill-60 { width: 60%; }
.cv-mock-analytic-fill-80 { width: 80%; }

/* Theme Utility Classes hỗ trợ đổi màu linh động theo biến CSS --cv-primary */
.theme-primary-bg {
    background-color: var(--cv-primary) !important;
}

.theme-primary-subtle-bg {
    background-color: var(--cv-primary-subtle) !important;
}

.theme-primary-text {
    color: var(--cv-primary) !important;
}

.theme-primary-border {
    border-color: var(--cv-primary) !important;
}

.theme-primary-border-subtle {
    border-color: var(--cv-mock-border, var(--cv-primary-subtle)) !important;
}

/* ==========================================================================
   VIDEO CV CLASSES (ẢNH 2)
   ========================================================================== */
.video-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

.video-player-wrapper {
    background-color: #1e293b;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
    border-radius: 12px 12px 0 0;
}

.video-play-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.video-play-button:hover {
    transform: scale(1.1);
}

.video-duration-pill {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.badge-video-status {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 10;
}

.badge-video-approved {
    background-color: #15803d;
    color: #ffffff;
}

.badge-video-pending {
    background-color: #1d4ed8;
    color: #ffffff;
}

.badge-video-draft {
    background-color: #475569;
    color: #ffffff;
}

/* ==========================================================================
   BỘ TỪ ĐIỂN MÀU THEME & PALETTE SWATCHES (CHỈ CHỨA 11 MÀU HỢP LỆ)
   Nguyên tắc: Chỉ khai báo màu của các template đã triển khai (default, simple, fresher, it).
   Danh sách 11 màu chuẩn:
   1. amber (Cam ấm - default & simple)
   2. steel_blue (Xanh công nghiệp - simple)
   3. emerald (Xanh lục bảo - simple & it)
   4. navy (Xanh dương đậm - default)
   5. teal (Xanh ngọc - default)
   6. sky_blue (Xanh thiên thanh - fresher)
   7. mint (Xanh mint - fresher)
   8. peach (Cam đào - fresher)
   9. plum (Tím mận bản gốc #a15277 - it)
   10. blue (Xanh công nghệ - it)
   11. slate (Đen xám IT - it)
   ========================================================================== */

/* 1. Thiết lập CSS Variables cho 11 bộ màu ăn theo [data-theme] */
:root,
[data-theme="amber"] {
    --cv-primary: #f59e0b;
    --cv-primary-subtle: #fef3c7;
    --cv-primary-dark: #b45309;
    --cv-primary-rgb: 245, 158, 11;
    --cv-accent: #b45309;
    --cv-mock-border: #fde68a;
}

[data-theme="steel_blue"] {
    --cv-primary: #0284c7;
    --cv-primary-subtle: #f0f9ff;
    --cv-primary-dark: #0369a1;
    --cv-primary-rgb: 2, 132, 199;
    --cv-accent: #0369a1;
    --cv-mock-border: #bae6fd;
}

[data-theme="emerald"] {
    --cv-primary: #059669;
    --cv-primary-subtle: #ecfdf5;
    --cv-primary-dark: #047857;
    --cv-primary-rgb: 5, 150, 105;
    --cv-accent: #047857;
    --cv-mock-border: #a7f3d0;
}

[data-theme="navy"] {
    --cv-primary: #1e3a8a;
    --cv-primary-subtle: #eff6ff;
    --cv-primary-dark: #172554;
    --cv-primary-rgb: 30, 58, 138;
    --cv-accent: #1d4ed8;
    --cv-mock-border: #bfdbfe;
}

[data-theme="teal"] {
    --cv-primary: #0d9488;
    --cv-primary-subtle: #f0fdfa;
    --cv-primary-dark: #0f766e;
    --cv-primary-rgb: 13, 148, 136;
    --cv-accent: #0f766e;
    --cv-mock-border: #99f6e4;
}

[data-theme="sky_blue"] {
    --cv-primary: #0284c7;
    --cv-primary-subtle: #e0f2fe;
    --cv-primary-dark: #0369a1;
    --cv-primary-rgb: 2, 132, 199;
    --cv-accent: #0369a1;
    --cv-mock-border: #bae6fd;
}

[data-theme="mint"] {
    --cv-primary: #10b981;
    --cv-primary-subtle: #d1fae5;
    --cv-primary-dark: #059669;
    --cv-primary-rgb: 16, 185, 129;
    --cv-accent: #059669;
    --cv-mock-border: #a7f3d0;
}

[data-theme="peach"] {
    --cv-primary: #f97316;
    --cv-primary-subtle: #ffedd5;
    --cv-primary-dark: #c2410c;
    --cv-primary-rgb: 249, 115, 22;
    --cv-accent: #c2410c;
    --cv-mock-border: #fed7aa;
}

[data-theme="plum"] {
    --cv-primary: #a15277;
    --cv-primary-subtle: #fdf2f8;
    --cv-primary-dark: #833c5e;
    --cv-primary-rgb: 161, 82, 119;
    --cv-accent: #833c5e;
    --cv-mock-border: #fbcfe8;
}

[data-theme="blue"] {
    --cv-primary: #2563eb;
    --cv-primary-subtle: #eff6ff;
    --cv-primary-dark: #1d4ed8;
    --cv-primary-rgb: 37, 99, 235;
    --cv-accent: #1d4ed8;
    --cv-mock-border: #bfdbfe;
}

[data-theme="slate"] {
    --cv-primary: #334155;
    --cv-primary-subtle: #f1f5f9;
    --cv-primary-dark: #0f172a;
    --cv-primary-rgb: 51, 65, 85;
    --cv-accent: #475569;
    --cv-mock-border: #cbd5e1;
}

[data-theme="charcoal"] {
    --cv-primary: #3d323e;
    --cv-primary-subtle: #e5d6d3;
    --cv-primary-dark: #2a222b;
    --cv-primary-rgb: 61, 50, 62;
    --cv-accent: #2a222b;
    --cv-mock-border: #d4c2bf;
}

[data-theme="crimson"] {
    --cv-primary: #e11d48;
    --cv-primary-subtle: #ffe4e6;
    --cv-primary-dark: #be123c;
    --cv-primary-rgb: 225, 29, 72;
    --cv-accent: #be123c;
    --cv-mock-border: #fecdd3;
}

[data-theme="violet"] {
    --cv-primary: #7c3aed;
    --cv-primary-subtle: #f5f3ff;
    --cv-primary-dark: #6d28d9;
    --cv-primary-rgb: 124, 58, 237;
    --cv-accent: #6d28d9;
    --cv-mock-border: #ddd6fe;
}

[data-theme="sunset"] {
    --cv-primary: #ea580c;
    --cv-primary-subtle: #ffedd5;
    --cv-primary-dark: #c2410c;
    --cv-primary-rgb: 234, 88, 12;
    --cv-accent: #c2410c;
    --cv-mock-border: #fed7aa;
}

[data-theme="purple"] {
    --cv-primary: #9333ea;
    --cv-primary-subtle: #faf5ff;
    --cv-primary-dark: #7e22ce;
    --cv-primary-rgb: 147, 51, 234;
    --cv-accent: #7e22ce;
    --cv-mock-border: #f3e8ff;
}

[data-theme="coral"] {
    --cv-primary: #f43f5e;
    --cv-primary-subtle: #fff1f2;
    --cv-primary-dark: #e11d48;
    --cv-primary-rgb: 244, 63, 94;
    --cv-accent: #e11d48;
    --cv-mock-border: #ffe4e6;
}

[data-theme="ocean"] {
    --cv-primary: #003746;
    --cv-primary-subtle: #f0f9ff;
    --cv-primary-dark: #082f49;
    --cv-primary-rgb: 0, 55, 70;
    --cv-accent: #082f49;
    --cv-mock-border: #bae6fd;
}

[data-theme="gold"] {
    --cv-primary: #d97706;
    --cv-primary-subtle: #fffbeb;
    --cv-primary-dark: #b45309;
    --cv-primary-rgb: 217, 119, 6;
    --cv-accent: #b45309;
    --cv-mock-border: #fde68a;
}

[data-theme="graphite"] {
    --cv-primary: #374151;
    --cv-primary-subtle: #f9fafb;
    --cv-primary-dark: #1f2937;
    --cv-primary-rgb: 55, 65, 81;
    --cv-accent: #1f2937;
    --cv-mock-border: #e5e7eb;
}

[data-theme="sapphire"] {
    --cv-primary: #1d4ed8;
    --cv-primary-subtle: #eff6ff;
    --cv-primary-dark: #1e40af;
    --cv-primary-rgb: 29, 78, 216;
    --cv-accent: #1e40af;
    --cv-mock-border: #bfdbfe;
}

[data-theme="ruby"] {
    --cv-primary: #be123c;
    --cv-primary-subtle: #fff1f2;
    --cv-primary-dark: #9f1239;
    --cv-primary-rgb: 190, 18, 60;
    --cv-accent: #9f1239;
    --cv-mock-border: #fecdd3;
}

[data-theme="cobalt"] {
    --cv-primary: #2563eb;
    --cv-primary-subtle: #eff6ff;
    --cv-primary-dark: #1d4ed8;
    --cv-primary-rgb: 37, 99, 235;
    --cv-accent: #1d4ed8;
    --cv-mock-border: #bfdbfe;
}

[data-theme="orange"] {
    --cv-primary: #ea580c;
    --cv-primary-subtle: #fff7ed;
    --cv-primary-dark: #c2410c;
    --cv-primary-rgb: 234, 88, 12;
    --cv-accent: #c2410c;
    --cv-mock-border: #fed7aa;
}

[data-theme="forest"] {
    --cv-primary: #15803d;
    --cv-primary-subtle: #f0fdf4;
    --cv-primary-dark: #166534;
    --cv-primary-rgb: 21, 128, 61;
    --cv-accent: #166534;
    --cv-mock-border: #bbf7d0;
}

[data-theme="azure"] {
    --cv-primary: #2563eb;
    --cv-primary-subtle: #eff6ff;
    --cv-primary-dark: #1e3a8a;
    --cv-primary-rgb: 37, 99, 235;
    --cv-accent: #1e3a8a;
    --cv-mock-border: #bfdbfe;
}

[data-theme="royal_blue"] {
    --cv-primary: #1d4ed8;
    --cv-primary-subtle: #eff6ff;
    --cv-primary-dark: #1e3a8a;
    --cv-primary-rgb: 29, 78, 216;
    --cv-accent: #3b82f6;
    --cv-mock-border: #bfdbfe;
}

[data-theme="rose"] {
    --cv-primary: #e11d48;
    --cv-primary-subtle: #fff1f2;
    --cv-primary-dark: #9f1239;
    --cv-primary-rgb: 225, 29, 72;
    --cv-accent: #fb7185;
    --cv-mock-border: #fecdd3;
}

[data-theme="marigold"] {
    --cv-primary: #d97706;
    --cv-primary-subtle: #fffbeb;
    --cv-primary-dark: #92400e;
    --cv-primary-rgb: 217, 119, 6;
    --cv-accent: #fbbf24;
    --cv-mock-border: #fde68a;
}

[data-theme="ink"] {
    --cv-primary: #1e293b;
    --cv-primary-subtle: #f8fafc;
    --cv-primary-dark: #0f172a;
    --cv-primary-rgb: 30, 41, 59;
    --cv-sidebar-bg: #eef2f7;
    --cv-theme-sidebar-bg: #eef2f7;
    --cv-accent: #334155;
    --cv-mock-border: #cbd5e1;
}

[data-theme="lagoon"] {
    --cv-primary: #0f766e;
    --cv-primary-subtle: #f0fdfa;
    --cv-primary-dark: #134e4a;
    --cv-primary-rgb: 15, 118, 110;
    --cv-sidebar-bg: #ecfdf5;
    --cv-theme-sidebar-bg: #ecfdf5;
    --cv-accent: #14b8a6;
    --cv-mock-border: #99f6e4;
}

[data-theme="wine"] {
    --cv-primary: #9f1239;
    --cv-primary-subtle: #fff1f2;
    --cv-primary-dark: #881337;
    --cv-primary-rgb: 159, 18, 57;
    --cv-sidebar-bg: #fff1f2;
    --cv-theme-sidebar-bg: #fff1f2;
    --cv-accent: #e11d48;
    --cv-mock-border: #fecdd3;
}

[data-theme="onyx"] {
    --cv-primary: #18181b;
    --cv-primary-subtle: #f4f4f5;
    --cv-primary-dark: #09090b;
    --cv-primary-rgb: 24, 24, 27;
    --cv-sidebar-bg: #18181b;
    --cv-theme-sidebar-bg: #18181b;
    --cv-accent: #a1a1aa;
    --cv-mock-border: #3f3f46;
}

[data-theme="espresso"] {
    --cv-primary: #3f2d20;
    --cv-primary-subtle: #faf5f0;
    --cv-primary-dark: #271b13;
    --cv-primary-rgb: 63, 45, 32;
    --cv-sidebar-bg: #3f2d20;
    --cv-theme-sidebar-bg: #3f2d20;
    --cv-accent: #c9a989;
    --cv-mock-border: #5c4530;
}

[data-theme="midnight"] {
    --cv-primary: #0c1a2e;
    --cv-primary-subtle: #eff6ff;
    --cv-primary-dark: #050d18;
    --cv-primary-rgb: 12, 26, 46;
    --cv-sidebar-bg: #0c1a2e;
    --cv-theme-sidebar-bg: #0c1a2e;
    --cv-accent: #7dd3fc;
    --cv-mock-border: #1e3a5f;
}

[data-theme="cyan"] {
    --cv-primary: #0284c7;
    --cv-primary-subtle: #f0f8ff;
    --cv-primary-dark: #0369a1;
    --cv-primary-rgb: 2, 132, 199;
    --cv-sidebar-bg: #f0f8ff;
    --cv-theme-sidebar-bg: #f0f8ff;
    --cv-accent: #0284c7;
    --cv-mock-border: #bae6fd;
}

[data-theme="mint_fresh"] {
    --cv-primary: #0d9488;
    --cv-primary-subtle: #f0fdfa;
    --cv-primary-dark: #0f766e;
    --cv-primary-rgb: 13, 148, 136;
    --cv-sidebar-bg: #f0fdfa;
    --cv-theme-sidebar-bg: #f0fdfa;
    --cv-accent: #0d9488;
    --cv-mock-border: #99f6e4;
}

[data-theme="indigo"] {
    --cv-primary: #4f46e5;
    --cv-primary-subtle: #eef2ff;
    --cv-primary-dark: #3730a3;
    --cv-primary-rgb: 79, 70, 229;
    --cv-sidebar-bg: #eef2ff;
    --cv-theme-sidebar-bg: #eef2ff;
    --cv-accent: #4f46e5;
    --cv-mock-border: #c7d2fe;
}

[data-theme="rose_gold"] {
    --cv-primary: #be185d;
    --cv-primary-subtle: #fdf2f8;
    --cv-primary-dark: #9d174d;
    --cv-primary-rgb: 190, 24, 93;
    --cv-sidebar-bg: #fce7f3;
    --cv-theme-sidebar-bg: #fce7f3;
    --cv-accent: #e11d48;
    --cv-mock-border: #fbcfe8;
}

[data-theme="warm_sunset"] {
    --cv-primary: #c2410c;
    --cv-primary-subtle: #fff7ed;
    --cv-primary-dark: #9a3412;
    --cv-primary-rgb: 194, 65, 12;
    --cv-sidebar-bg: #ffedd5;
    --cv-theme-sidebar-bg: #ffedd5;
    --cv-accent: #ea580c;
    --cv-mock-border: #fed7aa;
}

[data-theme="amethyst"] {
    --cv-primary: #7e22ce;
    --cv-primary-subtle: #faf5ff;
    --cv-primary-dark: #6b21a8;
    --cv-primary-rgb: 126, 34, 206;
    --cv-sidebar-bg: #f3e8ff;
    --cv-theme-sidebar-bg: #f3e8ff;
    --cv-accent: #9333ea;
    --cv-mock-border: #e9d5ff;
}

[data-theme="cobalt_angle"] {
    --cv-primary: #1e40af;
    --cv-primary-subtle: #eff6ff;
    --cv-primary-dark: #1e3a8a;
    --cv-primary-rgb: 30, 64, 175;
    --cv-sidebar-top-bg: #1e40af;
    --cv-sidebar-bottom-bg: #f1f5f9;
    --cv-theme-sidebar-top-bg: #1e40af;
    --cv-theme-sidebar-bottom-bg: #f1f5f9;
    --cv-accent: #93c5fd;
    --cv-mock-border: #cbd5e1;
}

[data-theme="forest_angle"] {
    --cv-primary: #065f46;
    --cv-primary-subtle: #ecfdf5;
    --cv-primary-dark: #064e3b;
    --cv-primary-rgb: 6, 95, 70;
    --cv-sidebar-top-bg: #065f46;
    --cv-sidebar-bottom-bg: #f0fdf4;
    --cv-theme-sidebar-top-bg: #065f46;
    --cv-theme-sidebar-bottom-bg: #f0fdf4;
    --cv-accent: #6ee7b7;
    --cv-mock-border: #a7f3d0;
}

[data-theme="slate_angle"] {
    --cv-primary: #334155;
    --cv-primary-subtle: #f1f5f9;
    --cv-primary-dark: #1e293b;
    --cv-primary-rgb: 51, 65, 85;
    --cv-sidebar-top-bg: #334155;
    --cv-sidebar-bottom-bg: #f8fafc;
    --cv-theme-sidebar-top-bg: #334155;
    --cv-theme-sidebar-bottom-bg: #f8fafc;
    --cv-accent: #94a3b8;
    --cv-mock-border: #cbd5e1;
}

[data-theme="lilac"] {
    --cv-primary: #7c3aed;
    --cv-primary-subtle: #f5f3ff;
    --cv-primary-dark: #5b21b6;
    --cv-primary-rgb: 124, 58, 237;
    --cv-sidebar-bg: #f5f3ff;
    --cv-theme-sidebar-bg: #f5f3ff;
    --cv-line-art: #ddd6fe;
    --cv-accent: #a855f7;
    --cv-border: #e9d5ff;
    --cv-mock-border: #e9d5ff;
}

[data-theme="soft_peach"] {
    --cv-primary: #ea580c;
    --cv-primary-subtle: #fff7ed;
    --cv-primary-dark: #c2410c;
    --cv-primary-rgb: 234, 88, 12;
    --cv-sidebar-bg: #fff7ed;
    --cv-theme-sidebar-bg: #fff7ed;
    --cv-line-art: #fed7aa;
    --cv-accent: #f97316;
    --cv-border: #fed7aa;
    --cv-mock-border: #fed7aa;
}

[data-theme="sage"] {
    --cv-primary: #4d7c0f;
    --cv-primary-subtle: #f7fee7;
    --cv-primary-dark: #3f6212;
    --cv-primary-rgb: 77, 124, 15;
    --cv-sidebar-bg: #f7fee7;
    --cv-theme-sidebar-bg: #f7fee7;
    --cv-line-art: #d9f99d;
    --cv-accent: #65a30d;
    --cv-border: #ecfccb;
    --cv-mock-border: #ecfccb;
}

[data-theme="safari_blue"] {
    --cv-primary: #0284c7;
    --cv-primary-subtle: #f0f9ff;
    --cv-primary-dark: #0369a1;
    --cv-primary-rgb: 2, 132, 199;
    --cv-grid-bg: #e0f2fe;
    --cv-card-bg: #ffffff;
    --cv-accent: #0284c7;
    --cv-border: #bae6fd;
    --cv-text-dark: #1e293b;
    --cv-mock-border: #bae6fd;
}

[data-theme="chrome_emerald"] {
    --cv-primary: #059669;
    --cv-primary-subtle: #ecfdf5;
    --cv-primary-dark: #047857;
    --cv-primary-rgb: 5, 150, 105;
    --cv-grid-bg: #d1fae5;
    --cv-card-bg: #ffffff;
    --cv-accent: #059669;
    --cv-border: #a7f3d0;
    --cv-text-dark: #1e293b;
    --cv-mock-border: #a7f3d0;
}

[data-theme="firefox_coral"] {
    --cv-primary: #ea580c;
    --cv-primary-subtle: #fff7ed;
    --cv-primary-dark: #c2410c;
    --cv-primary-rgb: 234, 88, 12;
    --cv-grid-bg: #ffedd5;
    --cv-card-bg: #ffffff;
    --cv-accent: #ea580c;
    --cv-border: #fed7aa;
    --cv-text-dark: #1e293b;
    --cv-mock-border: #fed7aa;
}

[data-theme="ochre"] {
    --cv-primary: #b45309;
    --cv-primary-subtle: #fef3c7;
    --cv-primary-dark: #78350f;
    --cv-primary-rgb: 180, 83, 9;
    --cv-accent: #d97706;
    --cv-border: #fde68a;
    --cv-text-dark: #1e293b;
    --cv-mock-border: #fde68a;
}

[data-theme="deep_crimson"] {
    --cv-primary: #991b1b;
    --cv-primary-subtle: #fee2e2;
    --cv-primary-dark: #7f1d1d;
    --cv-primary-rgb: 153, 27, 27;
    --cv-accent: #dc2626;
    --cv-border: #fecaca;
    --cv-text-dark: #1e293b;
    --cv-mock-border: #fecaca;
}

[data-theme="slate_dark"] {
    --cv-primary: #334155;
    --cv-primary-subtle: #e2e8f0;
    --cv-primary-dark: #0f172a;
    --cv-primary-rgb: 51, 65, 85;
    --cv-accent: #475569;
    --cv-border: #cbd5e1;
    --cv-text-dark: #1e293b;
    --cv-mock-border: #cbd5e1;
}

[data-theme="mint_orange"] {
    --cv-primary: #ea580c;
    --cv-primary-subtle: #ecfdf5;
    --cv-primary-dark: #c2410c;
    --cv-primary-rgb: 234, 88, 12;
    --cv-secondary: #10b981;
    --cv-banner-bg: #d1fae5;
    --cv-bubble-bg: #ecfdf5;
    --cv-accent: #059669;
    --cv-border: #a7f3d0;
    --cv-text-dark: #1e293b;
    --cv-timeline-line: #fde68a;
    --cv-mock-border: #a7f3d0;
}

[data-theme="sky_rose"] {
    --cv-primary: #e11d48;
    --cv-primary-subtle: #f0f9ff;
    --cv-primary-dark: #be123c;
    --cv-primary-rgb: 225, 29, 72;
    --cv-secondary: #0284c7;
    --cv-banner-bg: #bae6fd;
    --cv-bubble-bg: #f0f9ff;
    --cv-accent: #0369a1;
    --cv-border: #7dd3fc;
    --cv-text-dark: #1e293b;
    --cv-timeline-line: #fecdd3;
    --cv-mock-border: #7dd3fc;
}

[data-theme="lavender_gold"] {
    --cv-primary: #d97706;
    --cv-primary-subtle: #faf5ff;
    --cv-primary-dark: #b45309;
    --cv-primary-rgb: 217, 119, 6;
    --cv-secondary: #7c3aed;
    --cv-banner-bg: #e9d5ff;
    --cv-bubble-bg: #faf5ff;
    --cv-accent: #6d28d9;
    --cv-border: #d8b4fe;
    --cv-text-dark: #1e293b;
    --cv-timeline-line: #fef08a;
    --cv-mock-border: #d8b4fe;
}

[data-theme="ocean_wave"] {
    --cv-primary: #1e3a8a;
    --cv-primary-subtle: #eff6ff;
    --cv-primary-dark: #172554;
    --cv-primary-rgb: 30, 58, 138;
    --cv-wave-gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #78350f 100%);
    --cv-accent: #3b82f6;
    --cv-gold-icon: #d97706;
    --cv-border: #bfdbfe;
    --cv-text-dark: #1e293b;
    --cv-mock-border: #bfdbfe;
}

[data-theme="burgundy_wave"] {
    --cv-primary: #881337;
    --cv-primary-subtle: #fff1f2;
    --cv-primary-dark: #4c0519;
    --cv-primary-rgb: 136, 19, 55;
    --cv-wave-gradient: linear-gradient(135deg, #881337 0%, #e11d48 50%, #713f12 100%);
    --cv-accent: #e11d48;
    --cv-gold-icon: #d97706;
    --cv-border: #fecdd3;
    --cv-text-dark: #1e293b;
    --cv-mock-border: #fecdd3;
}

[data-theme="teal_wave"] {
    --cv-primary: #0f766e;
    --cv-primary-subtle: #f0fdfa;
    --cv-primary-dark: #134e4a;
    --cv-primary-rgb: 15, 118, 110;
    --cv-wave-gradient: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #1e3a5f 100%);
    --cv-accent: #14b8a6;
    --cv-gold-icon: #d97706;
    --cv-border: #99f6e4;
    --cv-text-dark: #1e293b;
    --cv-mock-border: #99f6e4;
}

[data-theme="terracotta"] {
    --cv-primary: #8c3b2a;
    --cv-primary-subtle: #faf3ef;
    --cv-primary-dark: #6b2a1d;
    --cv-primary-rgb: 140, 59, 42;
    --cv-card-bg: #ebe5e0;
    --cv-accent: #f07b5a;
    --cv-border: #f2b5a2;
    --cv-text-dark: #1f1f1f;
    --cv-mock-border: #f2b5a2;
}

[data-theme="cocoa_latte"] {
    --cv-primary: #6f4e37;
    --cv-primary-subtle: #f8f4f0;
    --cv-primary-dark: #4a3424;
    --cv-primary-rgb: 111, 78, 55;
    --cv-card-bg: #ece6df;
    --cv-accent: #c08a5b;
    --cv-border: #dcc3ab;
    --cv-text-dark: #1f1f1f;
    --cv-mock-border: #dcc3ab;
}

[data-theme="moss_studio"] {
    --cv-primary: #3f6212;
    --cv-primary-subtle: #f5f8ef;
    --cv-primary-dark: #2d4a0c;
    --cv-primary-rgb: 63, 98, 18;
    --cv-card-bg: #e7eadf;
    --cv-accent: #84a33a;
    --cv-border: #c5d6a0;
    --cv-text-dark: #1f1f1f;
    --cv-mock-border: #c5d6a0;
}

/* Bảng màu template `prestige` (Uy Tín - Subtask 15): primary = sidebar_bg (tối), kèm biến riêng
   --cv-mock-prestige-banner-bg dùng cho dải banner sage xuyên ngang trên thẻ mockup thu nhỏ
   (đúng nguyên tắc "làm đến đâu bổ sung đến đó", đã grep xác nhận chưa tồn tại). */
[data-theme="sage_slate"] {
    --cv-primary: #2c3a47;
    --cv-primary-subtle: #e6ece5;
    --cv-primary-dark: #1e2833;
    --cv-primary-rgb: 44, 58, 71;
    --cv-accent: #c7d6c4;
    --cv-border: #b8c4b6;
    --cv-text-dark: #1f2937;
    --cv-mock-border: #b8c4b6;
    --cv-mock-prestige-banner-bg: #7d977a;
}

[data-theme="taupe_ink"] {
    --cv-primary: #2e2a3a;
    --cv-primary-subtle: #efe9e1;
    --cv-primary-dark: #1d1a26;
    --cv-primary-rgb: 46, 42, 58;
    --cv-accent: #e2d6c6;
    --cv-border: #cfc3b3;
    --cv-text-dark: #1f2937;
    --cv-mock-border: #cfc3b3;
    --cv-mock-prestige-banner-bg: #9c8a74;
}

[data-theme="mist_navy"] {
    --cv-primary: #1e2f4d;
    --cv-primary-subtle: #e3eaf1;
    --cv-primary-dark: #13203a;
    --cv-primary-rgb: 30, 47, 77;
    --cv-accent: #c3d3e2;
    --cv-border: #b6c6d6;
    --cv-text-dark: #1f2937;
    --cv-mock-border: #b6c6d6;
    --cv-mock-prestige-banner-bg: #7b95ad;
}

/* Bảng màu template `analytic` (Phân Tích - Subtask 16): primary dùng cho heading/icon Main ivory,
   kèm 4 biến riêng --cv-mock-analytic-header-bg / --cv-mock-analytic-main-bg /
   --cv-mock-analytic-sidebar-bg / --cv-mock-analytic-skill-track dành riêng cho thẻ mockup thu nhỏ
   (đúng nguyên tắc "làm đến đâu bổ sung đến đó", đã grep xác nhận chưa tồn tại). */
[data-theme="amber_charcoal"] {
    --cv-primary: #c86b05;
    --cv-primary-subtle: #fff8e1;
    --cv-primary-dark: #9a5204;
    --cv-primary-rgb: 200, 107, 5;
    --cv-accent: #f59e0b;
    --cv-border: #f2c66d;
    --cv-text-dark: #1f2937;
    --cv-mock-border: #f2c66d;
    --cv-mock-analytic-header-bg: #7a7978;
    --cv-mock-analytic-main-bg: #fdf6dc;
    --cv-mock-analytic-sidebar-bg: #363b3e;
    --cv-mock-analytic-skill-track: #c9c9c9;
}

[data-theme="teal_graphite"] {
    --cv-primary: #0f766e;
    --cv-primary-subtle: #effaf8;
    --cv-primary-dark: #115e59;
    --cv-primary-rgb: 15, 118, 110;
    --cv-accent: #2dd4bf;
    --cv-border: #99e2d6;
    --cv-text-dark: #1f2937;
    --cv-mock-border: #99e2d6;
    --cv-mock-analytic-header-bg: #6b7a78;
    --cv-mock-analytic-main-bg: #f2faf8;
    --cv-mock-analytic-sidebar-bg: #2f3a3a;
    --cv-mock-analytic-skill-track: #c9d2d1;
}

[data-theme="coral_slate"] {
    --cv-primary: #c2410c;
    --cv-primary-subtle: #fff4ef;
    --cv-primary-dark: #9a3412;
    --cv-primary-rgb: 194, 65, 12;
    --cv-accent: #fb7a59;
    --cv-border: #f6b8a2;
    --cv-text-dark: #1f2937;
    --cv-mock-border: #f6b8a2;
    --cv-mock-analytic-header-bg: #78716c;
    --cv-mock-analytic-main-bg: #fdf3ee;
    --cv-mock-analytic-sidebar-bg: #3a3533;
    --cv-mock-analytic-skill-track: #cfc8c5;
}

/* 2. Color Swatch Classes cho các gam màu chuẩn (Thay thế hoàn toàn Inline style màu nền) */
.cv-swatch-amber      { background-color: #f59e0b; }
.cv-swatch-steel_blue { background-color: #0284c7; }
.cv-swatch-emerald    { background-color: #059669; }
.cv-swatch-navy       { background-color: #1e3a8a; }
.cv-swatch-teal       { background-color: #0d9488; }
.cv-swatch-sky_blue   { background-color: #0284c7; }
.cv-swatch-mint       { background-color: #10b981; }
.cv-swatch-peach      { background-color: #f97316; }
.cv-swatch-plum       { background-color: #a15277; }
.cv-swatch-blue       { background-color: #2563eb; }
.cv-swatch-slate      { background-color: #334155; }
.cv-swatch-charcoal   { background-color: #3d323e; }
.cv-swatch-crimson    { background-color: #dc2626; }
.cv-swatch-violet     { background-color: #7c3aed; }
.cv-swatch-sunset     { background-color: #ea580c; }
.cv-swatch-purple     { background-color: #9333ea; }
.cv-swatch-coral      { background-color: #f43f5e; }
.cv-swatch-ocean      { background-color: #003746; }
.cv-swatch-gold       { background-color: #d97706; }
.cv-swatch-graphite   { background-color: #374151; }
.cv-swatch-sapphire   { background-color: #1d4ed8; }
.cv-swatch-ruby       { background-color: #be123c; }
.cv-swatch-cobalt     { background-color: #2563eb; }
.cv-swatch-orange     { background-color: #ea580c; }
.cv-swatch-forest     { background-color: #15803d; }
.cv-swatch-azure      { background-color: #2563eb; }
.cv-swatch-royal_blue { background-color: #1d4ed8; }
.cv-swatch-rose       { background-color: #e11d48; }
.cv-swatch-marigold   { background-color: #d97706; }
.cv-swatch-ink        { background-color: #1e293b; }
.cv-swatch-lagoon     { background-color: #0f766e; }
.cv-swatch-wine       { background-color: #9f1239; }
.cv-swatch-onyx       { background-color: #18181b; }
.cv-swatch-espresso   { background-color: #3f2d20; }
.cv-swatch-midnight   { background-color: #0c1a2e; }
.cv-swatch-cyan        { background-color: #0284c7; }
.cv-swatch-mint_fresh  { background-color: #0d9488; }
.cv-swatch-indigo      { background-color: #4f46e5; }
.cv-swatch-rose_gold    { background-color: #be185d; }
.cv-swatch-warm_sunset  { background-color: #c2410c; }
.cv-swatch-amethyst     { background-color: #7e22ce; }
.cv-swatch-cobalt_angle { background-color: #1e40af; }
.cv-swatch-forest_angle { background-color: #065f46; }
.cv-swatch-slate_angle  { background-color: #334155; }
.cv-swatch-lilac        { background-color: #7c3aed; }
.cv-swatch-soft_peach   { background-color: #ea580c; }
.cv-swatch-sage         { background-color: #4d7c0f; }
.cv-swatch-safari_blue   { background-color: #0284c7; }
.cv-swatch-chrome_emerald { background-color: #059669; }
.cv-swatch-firefox_coral { background-color: #ea580c; }
.cv-swatch-ochre        { background-color: #b45309; }
.cv-swatch-deep_crimson { background-color: #991b1b; }
.cv-swatch-slate_dark   { background-color: #334155; }
.cv-swatch-mint_orange   { background-color: #ea580c; }
.cv-swatch-sky_rose      { background-color: #e11d48; }
.cv-swatch-lavender_gold { background-color: #d97706; }
.cv-swatch-ocean_wave    { background-color: #1e3a8a; }
.cv-swatch-burgundy_wave { background-color: #881337; }
.cv-swatch-teal_wave     { background-color: #0f766e; }
.cv-swatch-terracotta    { background-color: #8c3b2a; }
.cv-swatch-cocoa_latte   { background-color: #6f4e37; }
.cv-swatch-moss_studio   { background-color: #3f6212; }
.cv-swatch-sage_slate    { background-color: #2c3a47; }
.cv-swatch-taupe_ink     { background-color: #2e2a3a; }
.cv-swatch-mist_navy     { background-color: #1e2f4d; }
.cv-swatch-amber_charcoal { background-color: #c86b05; }
.cv-swatch-teal_graphite  { background-color: #0f766e; }
.cv-swatch-coral_slate    { background-color: #c2410c; }

/* Nút chấm màu Swatch */
.cv-swatch-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.cv-swatch-btn:hover {
    transform: scale(1.15);
}

.cv-swatch-btn.active {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0f172a;
}

/* 3. Vùng sân khấu A4 Preview Stage */
.cv-preview-stage {
    background-color: #eaeff5;
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: auto;
}

@media (min-width: 768px) {
    .cv-preview-stage {
        padding: 36px 24px;
    }
}

/* 4. Khung giấy A4 chuẩn cho template simple */
.cv-a4-paper {
    width: 100%;
    max-width: 660px;
    min-height: 934px;
    background-color: #ffffff;
    box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.18), 0 6px 14px -3px rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Responsive: Trên màn hình nhỏ co giãn tự nhiên */
@media (max-width: 575.98px) {
    .cv-a4-paper {
        flex-direction: column;
        min-height: auto;
    }
}

/* 5. Cột trái (Sidebar) của Template Simple */
.cv-simple-sidebar {
    width: 36%;
    flex-shrink: 0;
    background-color: var(--cv-primary);
    color: #ffffff;
    padding: 28px 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: background-color 0.15s ease-in-out;
}

@media (max-width: 575.98px) {
    .cv-simple-sidebar {
        width: 100%;
    }
}

.cv-simple-avatar {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, 0.85);
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    display: block;
}

.cv-simple-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.cv-simple-sidebar-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    color: #ffffff;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 4px;
}

.cv-simple-sidebar-item {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cv-simple-sidebar-item i {
    color: rgba(255, 255, 255, 0.85);
    margin-top: 3px;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Progress bar & Dots trong sidebar */
.cv-simple-progress {
    height: 5px;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 4px;
}

.cv-simple-progress-bar {
    background-color: #ffffff;
    height: 100%;
    border-radius: 9999px;
    transition: width 0.2s ease;
}

.cv-simple-dots {
    display: inline-flex;
    gap: 4px;
}

.cv-simple-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
}

.cv-simple-dot.active {
    background-color: #ffffff;
}

/* 6. Cột phải (Main Panel) của Template Simple */
.cv-simple-main {
    width: 64%;
    flex-grow: 1;
    background-color: #ffffff;
    padding: 28px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 575.98px) {
    .cv-simple-main {
        width: 100%;
    }
}

/* Họa tiết bo cong trang trí góc trên phải */
.cv-simple-decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 105px;
    height: 105px;
    background-color: var(--cv-primary-subtle);
    border-bottom-left-radius: 105px;
    opacity: 0.65;
    pointer-events: none;
    transition: background-color 0.15s ease-in-out;
}

.cv-simple-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--cv-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin-bottom: 2px;
    transition: color 0.15s ease-in-out;
}

.cv-simple-job-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.5px;
}

.cv-simple-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cv-primary);
    border-bottom: 1.5px solid var(--cv-primary-subtle);
    padding-bottom: 4px;
    margin-bottom: 8px;
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.cv-simple-desc {
    font-size: 0.75rem;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 0;
}

.cv-simple-item-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
}

.cv-simple-item-company {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cv-primary);
    transition: color 0.15s ease-in-out;
}

.cv-simple-item-time {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}

.cv-simple-bullet-item {
    font-size: 0.75rem;
    color: #475569;
    line-height: 1.45;
}

.cv-simple-check-icon {
    color: var(--cv-primary);
    font-size: 0.75rem;
    margin-right: 6px;
    transition: color 0.15s ease-in-out;
}

/* 7. Icon wrapper cho danh sách đặc điểm mẫu */
.cv-feature-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #f1f5f9;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ==========================================================================
   CV BUILDER - FORM MODE & LIVE PREVIEW (PHASE 3)
   Quy chuẩn: 100% Class CSS, Zero Inline Styles, Hỗ trợ Split View & Sticky
   ========================================================================== */

/* 1. Thanh công cụ Top Toolbar */
.cv-form-toolbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1010;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cv-toolbar-title-input {
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    color: #1e293b;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    max-width: 280px;
}

.cv-toolbar-title-input:focus {
    background-color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
    outline: none;
}

/* 2. Nút Toggle Chuyển Mode (Biểu mẫu / Trực tiếp) */
.cv-mode-toggle {
    background-color: #f1f5f9;
    padding: 3px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #e2e8f0;
}

.cv-mode-btn {
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
}

.cv-mode-btn.active {
    background-color: #ffffff;
    color: #0284c7;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.cv-mode-btn:not(.active) {
    color: #64748b;
    background-color: transparent;
}

.cv-mode-btn:not(.active):hover {
    color: #0f172a;
}

/* 3. Quick Palette Dots trên Toolbar */
.cv-toolbar-swatches {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cv-toolbar-swatch-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #cbd5e1;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cv-toolbar-swatch-btn:hover {
    transform: scale(1.15);
}

.cv-toolbar-swatch-btn.active {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0f172a;
}

/* 4. Chấm xanh Live Indicator nhấp nháy */
.cv-live-indicator-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: cv-pulse-green 1.8s infinite;
}

@keyframes cv-pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* 5. Cột phải Live Preview Sticky */
.cv-sticky-preview {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 125px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.cv-sticky-preview::-webkit-scrollbar {
    width: 6px;
}

.cv-sticky-preview::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.cv-sticky-preview::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 6. Form Card bên cột trái */
.cv-form-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.cv-form-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.cv-form-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 7. Avatar Upload Box */
.cv-avatar-upload-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cv-avatar-preview-img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    background-color: #f8fafc;
}

.cv-avatar-preview-placeholder {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background-color: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

/* 8. Dynamic Repeater Block (Kinh nghiệm, Học vấn, Kỹ năng, Tham khảo) */
.cv-repeater-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cv-repeater-item {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    transition: all 0.2s ease;
}

.cv-repeater-item:hover {
    border-color: #cbd5e1;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.cv-repeater-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cv-btn-delete-item {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #fee2e2;
    color: #ef4444;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.cv-btn-delete-item:hover {
    background-color: #fecaca;
    color: #dc2626;
}

.cv-btn-add-repeater {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1.5px dashed #86efac;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.9rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.cv-btn-add-repeater:hover {
    background-color: #dcfce7;
    border-color: #4ade80;
    color: #15803d;
}

.cv-skill-level-select-wrap {
    width: 140px;
    flex-shrink: 0;
}

/* 9. Trình Cắt Ảnh Đại Diện (#cropModal & Cropper.js) & Avatar Badge */
#cropModal .img-container {
    max-height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0f172a;
    border-radius: 8px;
    overflow: hidden;
}

#cropModal .img-container img {
    max-width: 100%;
    max-height: 480px;
    display: block;
}

.cursor-pointer {
    cursor: pointer;
}

.cv-avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.cv-avatar-upload-box .selectPicture:hover .cv-avatar-badge {
    transform: scale(1.1);
    background-color: #1d4ed8;
}

/* 10. Flatpickr Datepicker Custom Styling */
.flatpickr-calendar {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange {
    background: #0284c7;
    border-color: #0284c7;
}

.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover {
    background: #0369a1;
    border-color: #0369a1;
}

/* 11. Header Logo & Utilities */
.cv-builder-logo-img {
    height: 38px;
    width: auto;
}

/* 12. Virtual Select (vselect) Custom Styling */
.vscomp-ele {
    max-width: none !important;
    width: 100% !important;
    display: block !important;
}

.vscomp-wrapper {
    width: 100% !important;
    display: block !important;
    border: 0 !important; /* Tránh double border vì toggle-button đã có border */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

.vscomp-toggle-button {
    width: 100% !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.vscomp-wrapper.focused .vscomp-toggle-button,
.vscomp-wrapper:focus-within .vscomp-toggle-button {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.vscomp-value-tag {
    background-color: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
    border-radius: 6px !important;
    color: #0369a1 !important;
    font-size: 0.775rem !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
}

.vscomp-value-tag .vscomp-value-tag-clear-button {
    color: #0284c7 !important;
}

.vscomp-value-tag .vscomp-value-tag-clear-button:hover {
    color: #dc2626 !important;
}

.vscomp-dropbox-container {
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e2e8f0 !important;
    z-index: 1055 !important;
}

.vscomp-option {
    font-size: 0.875rem !important;
    padding: 8px 14px !important;
}

.vscomp-option.focused,
.vscomp-option:hover {
    background-color: #f1f5f9 !important;
}

.vscomp-option.selected {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    font-weight: 600 !important;
}

/* Virtual Select trong Chế độ Sửa trực tiếp A4 (Direct Mode) - Không viền, phẳng phiu như Resume cũ */
.cv-a4-sheet .vscomp-wrapper,
.cv-paper-stage .vscomp-wrapper {
    width: 100% !important;
    display: block !important;
    border: 0 !important;
}

.cv-a4-sheet .vscomp-toggle-button,
.cv-paper-stage .vscomp-toggle-button {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 2px 4px !important;
    min-height: 32px !important;
    border-radius: 4px !important;
    transition: border 0.15s ease-in-out;
}

/* Hiệu ứng hover và focus nét đứt theo màu theme giống .hover-border */
.cv-a4-sheet .vscomp-wrapper:hover .vscomp-toggle-button,
.cv-a4-sheet .vscomp-wrapper.focused .vscomp-toggle-button,
.cv-a4-sheet .vscomp-wrapper:focus .vscomp-toggle-button,
.cv-paper-stage .vscomp-wrapper:hover .vscomp-toggle-button,
.cv-paper-stage .vscomp-wrapper.focused .vscomp-toggle-button,
.cv-paper-stage .vscomp-wrapper:focus .vscomp-toggle-button {
    border: 1px dashed var(--cv-primary, #f59e0b) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.cv-a4-sheet .vscomp-placeholder,
.cv-paper-stage .vscomp-placeholder {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.cv-a4-sheet .vscomp-value-tag,
.cv-paper-stage .vscomp-value-tag {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    padding: 2px 8px !important;
    color: #334155 !important;
}

/* 13. Dynamic Repeater Award Styling */
.award-row {
    border-left: 3px solid #0284c7;
}

.cv-live-award-item {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
}

/* ==========================================================================
   CV BUILDER - DIRECT MODE (PHASE 3.5)
   Quy chuẩn: Sân khấu A4 canvas, plaintext hover-border, zero inline styles
   ========================================================================== */

/* 14.1. Sân khấu canvas A4 căn giữa */
.cv-paper-stage {
    background-color: #f1f5f9;
    min-height: calc(100vh - 120px);
    padding-top: 1.5rem;
    padding-bottom: 3.5rem;
}

/* 14.2. Khung trang giấy A4 */
.cv-a4-sheet {
    max-width: 860px;
    width: 100%;
    min-height: 1200px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* 14.3. Hiệu ứng Hover Border viền nét đứt màu theme khi tương tác */
.hover-border {
    border: 1px dashed transparent !important;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.hover-border:hover, 
.hover-border:focus {
    border: 1px dashed var(--cv-theme-primary, #f59e0b) !important;
    background-color: rgba(245, 158, 11, 0.04);
    outline: none !important;
}

select.hover-border {
    cursor: pointer;
}

/* 14.4. Nút Thêm Dòng Repeater trên Trang Giấy Direct Mode */
.cv-direct-add-btn {
    border: 1px dashed var(--cv-theme-border, #cbd5e1);
    background-color: transparent;
    color: var(--cv-theme-accent, #64748b);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.cv-direct-add-btn:hover {
    background-color: var(--cv-theme-sidebar-bg, #f8fafc);
    border-color: var(--cv-theme-primary, #0284c7);
    color: var(--cv-theme-primary, #0284c7);
}

/* 14.5. Nút Xóa Dòng Repeater trong Direct Mode */
.cv-direct-remove-btn {
    border: none;
    background: transparent;
    color: #ef4444;
    opacity: 0.5;
    padding: 0 4px;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.cv-direct-remove-btn:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* 14.6. Các khối item động trong Direct Mode */
.cv-direct-item-box {
    border-color: var(--cv-theme-border, #e2e8f0) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.cv-direct-item-box:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cv-direct-edu-card {
    margin-bottom: 0.75rem;
}

.cv-direct-skill-row {
    border-bottom: 1px solid var(--cv-theme-border, #e2e8f0) !important;
    transition: background-color 0.15s ease-in-out;
}

.cv-direct-skill-row:hover {
    background-color: rgba(0, 0, 0, 0.015);
}

.cv-direct-exp-card,
.cv-direct-award-card {
    border-left: 3px solid var(--cv-theme-primary, #f59e0b) !important;
    padding-left: 12px;
    margin-bottom: 1rem;
    transition: border-color 0.15s ease-in-out;
}

/* ==========================================================================
   CV BUILDER - MÀN HÌNH XEM CHI TIẾT CV (PHASE 4.2 - T057)
   ========================================================================== */

/* Top Action Bar cố định */
.cv-show-topbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   CV BUILDER - TỐI ƯU HÓA IN ẤN & XUẤT PDF (@media print - T057)
   Quy chuẩn: Ẩn thanh công cụ & header, căn chuẩn A4 không lề, giữ nguyên màu sắc
   ========================================================================== */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    html, body {
        background: #ffffff !important;
        background-color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    header,
    footer,
    nav,
    .cv-builder-header,
    .cv-show-topbar,
    .cv-form-toolbar,
    .cv-public-topbar,
    .cv-public-share-bar,
    .navbar,
    .btn,
    .cv-action-btn,
    .d-print-none,
    .modal,
    .dropdown-menu,
    .tooltip,
    .popover {
        display: none !important;
        visibility: hidden !important;
    }

    main {
        padding: 0 !important;
        margin: 0 !important;
    }

    .cv-paper-stage {
        background: transparent !important;
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
    }

    .cv-a4-sheet {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .cv-template-simple,
    .cv-simple-sidebar,
    .cv-simple-main {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Giữ nguyên nền màu sidebar khi in ấn */
    .cv-simple-sidebar {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ngăn ngắt trang xấu giữa chừng ở các khối nội dung quan trọng */
    .cv-simple-contact-item,
    .cv-live-exp-item,
    .cv-live-edu-item,
    .cv-live-skill-item,
    .cv-live-award-item,
    .cv-live-ref-item,
    .cv-direct-edu-card,
    .cv-direct-exp-card,
    .cv-direct-award-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}

/* ==========================================================================
   CV BUILDER - MÀN HÌNH ĐÁNH GIÁ CV BẰNG AI (REVIEW PAGE)
   ========================================================================== */

.fs-15 {
    font-size: 0.9375rem !important;
}

/* Nút quay lại trên Header */
.cv-review-back-btn {
    width: 42px;
    height: 42px;
    transition: all 0.2s ease-in-out;
}

.cv-review-back-btn:hover {
    background-color: #f1f5f9 !important;
    transform: translateX(-2px);
}

/* Đồng hồ tròn Donut Gauge hiển thị điểm số */
.cv-review-gauge-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto;
}

.cv-review-gauge-svg {
    width: 160px;
    height: 160px;
    transform: rotate(-90deg);
}

.cv-gauge-bg {
    fill: none;
    stroke: #f1f5f9;
    stroke-width: 12;
}

.cv-gauge-val {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease-in-out;
}

.cv-gauge-val.gauge-green {
    stroke: #10b981;
}

.cv-gauge-val.gauge-orange {
    stroke: #f59e0b;
}

.cv-gauge-val.gauge-red {
    stroke: #ef4444;
}

.cv-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Thanh tiến trình chi tiết theo tiêu chí */
.cv-review-progress {
    height: 6px;
    background-color: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
}

.cv-review-progress .progress-bar {
    border-radius: 9999px;
    transition: width 0.6s ease-in-out;
}

/* Utility width classes cho progress bar (Zero inline styles) */
.cv-progress-w-0   { width: 0%; }
.cv-progress-w-5   { width: 5%; }
.cv-progress-w-10  { width: 10%; }
.cv-progress-w-15  { width: 15%; }
.cv-progress-w-20  { width: 20%; }
.cv-progress-w-25  { width: 25%; }
.cv-progress-w-30  { width: 30%; }
.cv-progress-w-35  { width: 35%; }
.cv-progress-w-40  { width: 40%; }
.cv-progress-w-45  { width: 45%; }
.cv-progress-w-50  { width: 50%; }
.cv-progress-w-55  { width: 55%; }
.cv-progress-w-60  { width: 60%; }
.cv-progress-w-65  { width: 65%; }
.cv-progress-w-70  { width: 70%; }
.cv-progress-w-75  { width: 75%; }
.cv-progress-w-80  { width: 80%; }
.cv-progress-w-85  { width: 85%; }
.cv-progress-w-90  { width: 90%; }
.cv-progress-w-95  { width: 95%; }
.cv-progress-w-100 { width: 100%; }

/* Thẻ Gợi ý cải thiện */
.cv-suggestion-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cv-suggestion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Nút mạng xã hội trong Modal chia sẻ (T085) */
.cv-social-btn {
    width: 44px;
    height: 44px;
    transition: all 0.2s ease-in-out;
}

.cv-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}