/*
Theme Name: Công Viên Chức
Theme URI: https://congvienchuc.com
Author: PCTech
Description: Frontend WordPress cho nền tảng Công Viên Chức.
Version: 1.2.0
*/

/* --- Design tokens --- */
:root {
    --cvc-color-primary: #123a63;
    --cvc-color-primary-dark: #0b2744;
    --cvc-color-primary-deep: #0b2744;
    --cvc-color-primary-tint: #eaf3fc;
    --cvc-color-primary-tint-strong: #d6e6f5;
    --cvc-color-accent-green: #16734f;
    --cvc-color-accent-amber:#8a5300;--cvc-color-accent-amber-ink:#814d00;
    --cvc-color-accent-red: #b42318;
    --cvc-color-accent-purple: #1767aa;
    --cvc-color-text: #111111;
    --cvc-color-text-muted: #262626;
    --cvc-color-text-subtle: #303030;
    --cvc-color-border: #d4d4d4;
    --cvc-color-border-strong: #9a9a9a;
    --cvc-color-bg: #ffffff;
    --cvc-color-bg-alt: #f6f6f4;
    --cvc-color-bg-tint: #eaf3fc;

    --cvc-font-sans: "Times New Roman", Times, "Liberation Serif", "Tinos", serif;

    /* Type scale - clamp() để tự responsive, không cần media query riêng
       cho từng heading (Phase 10A.2 - typography trước đây quá nhỏ). */
    --cvc-text-h1: clamp(1.9rem, 1.5rem + 2vw, 3.25rem);
    --cvc-text-h2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
    --cvc-text-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --cvc-text-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --cvc-text-body: 1rem;

    --cvc-space-1: 0.25rem;
    --cvc-space-2: 0.5rem;
    --cvc-space-3: 0.75rem;
    --cvc-space-4: 1rem;
    --cvc-space-6: 1.5rem;
    --cvc-space-8: 2rem;
    --cvc-space-12: 3rem;
    --cvc-space-16: 4rem;
    --cvc-space-20: 5rem;

    /* Nhịp section (Phần 12 - "homepage phải có rhythm") - dùng chung cho
       mọi <section> homepage/domain page, thay vì mỗi nơi tự đặt padding. */
    --cvc-section-py: clamp(2.5rem, 2rem + 2vw, 5rem);
    --cvc-section-py-lg: clamp(3rem, 2.5rem + 2.5vw, 6rem);

    --cvc-radius-sm: 2px;
    --cvc-radius: 2px;
    --cvc-radius-lg: 3px;
    --cvc-radius-pill: 999px;

    --cvc-shadow-sm: none;
    --cvc-shadow: none;
    --cvc-shadow-md: none;
    --cvc-shadow-lg: none;

    --cvc-container-width: 1240px;
    --cvc-prose-width: 72ch;
}

/* --- Reset nhẹ --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* Phase 10A.11, Phần 20 - tôn trọng prefers-reduced-motion: tắt mọi
   transition/animation/scroll mượt cho người dùng đã bật cài đặt hệ
   thống này (chóng mặt/rối loạn tiền đình), áp dụng toàn site 1 lần thay
   vì phải lặp lại ở từng component (hover card, journey icon, v.v.). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    font-family: var(--cvc-font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--cvc-color-text);
    background: var(--cvc-color-bg);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--cvc-color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Focus visibility (bàn phím) --- */
a:focus-visible,
button:focus-visible,
.cvc-card a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--cvc-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Nền tối (footer, section --deep, CTA banner) - outline xanh đậm gần như
   biến mất trên nền cũng xanh đậm, đổi sang outline trắng cho đủ tương
   phản (Phần 29 Accessibility - "focus visible"). */
.site-footer a:focus-visible,
.cvc-section--deep a:focus-visible,
.cvc-section--deep button:focus-visible,
.cvc-cta-banner a:focus-visible {
    outline-color: #ffffff;
}

/* --- Skip link (bỏ qua navigation, tới nội dung chính) --- */
.cvc-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: var(--cvc-color-primary);
    color: #fff;
    border-radius: 0 0 var(--cvc-radius-sm) 0;
}

.cvc-skip-link:focus {
    top: 0;
    text-decoration: none;
}

/* --- Screen-reader-only text (label vẫn tồn tại cho a11y, ẩn thị giác) --- */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Layout --- */
.container {
    width: 100%;
    max-width: var(--cvc-container-width);
    margin: 0 auto;
    padding: 0 var(--cvc-space-4);
}

.site-header {
    border-bottom: 1px solid var(--cvc-color-border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.2) blur(6px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cvc-space-4);
    padding: 0.65rem var(--cvc-space-4);
    min-height: 72px;
    /* Header là 1 dải riêng biệt, không cần bó hẹp theo max-width nội
       dung chính (Phase 10A.8, Phần 11/12 - "header hiện tại còn hơi
       nhỏ", tránh nav 7 mục bị wrap xuống dòng 2 ở 1440px). */
    max-width: 1420px;
}

.site-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--cvc-color-text);
    letter-spacing: -0.01em;
}

.site-title__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--cvc-radius);
    background: linear-gradient(155deg, var(--cvc-color-primary), var(--cvc-color-primary-deep));
    color: #fff;
    box-shadow: var(--cvc-shadow-sm);
}

.site-title__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.site-title__tagline {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cvc-color-text-subtle);
}

/* Icon link tới trang tìm kiếm - luôn hiện (không nằm trong menu mobile
   collapse), tránh làm nav chính (7 mục) dài thêm 1 text link. */
.site-search-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
    font-size: 1.1rem;
    color: var(--cvc-color-text);
}

.site-search-link:hover {
    border-color: var(--cvc-color-primary);
    text-decoration: none;
}

/* Nút mở/đóng menu mobile - ẩn mặc định, chỉ hiện khi có JS (class .js
   trên <html>) VÀ ở màn hình hẹp. Không JS hoặc desktop -> nav luôn hiện
   đầy đủ (progressive enhancement, không bao giờ ẩn hẳn navigation). */
.site-nav-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
    color: var(--cvc-color-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.site-nav-toggle__box {
    position: relative;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.site-nav-toggle__box::before,
.site-nav-toggle__box::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.site-nav-toggle__box::before {
    top: -6px;
}

.site-nav-toggle__box::after {
    top: 6px;
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.5rem;
    color: var(--cvc-color-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: var(--cvc-radius-pill);
    white-space: nowrap;
}

.site-nav a:hover {
    text-decoration: none;
    color: var(--cvc-color-primary);
    background: var(--cvc-color-primary-tint);
}

.cvc-nav-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Phase 10A.17 - class dùng chung cho mọi icon render qua
   cvc_render_cvc_icon() (CVC Design Icon Library). Icon là <img> nên cần
   vertical-align để không lệch baseline khi đứng cạnh text inline; icon
   đã tự có màu/nền baked-in (duotone tile) nên không cần color/background
   CSS thêm như icon SVG inline cũ. */
.cvc-lib-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.site-nav .cvc-nav-current a {
    color: var(--cvc-color-primary-dark);
    background: var(--cvc-color-primary-tint);
    font-weight: 700;
}

.site-nav .cvc-nav-current .cvc-nav-icon {
    opacity: 1;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.site-content {
    min-height: 60vh;
    padding: var(--cvc-space-8) 0;
}

/* Skyline mờ làm nền footer (Phase 10A.10, Phần 12) - ảnh đã tối màu sẵn
   (cùng tông xanh đậm với --cvc-color-primary-deep) nên hoà vào nền, chỉ
   đặt ở dải trên cùng, không lặp lại - không ảnh hưởng độ tương phản chữ
   footer (vẫn text sáng trên nền tối như cũ). */
.site-footer {
    border-top: 1px solid #1c3a63;
    background:
        linear-gradient(180deg, rgba(9, 46, 108, 0.75) 0%, var(--cvc-color-primary-deep) 55%),
        url('assets/images/homepage/footer-bg.webp') top center / cover no-repeat,
        var(--cvc-color-primary-deep);
    padding: var(--cvc-space-12) 0 0;
    color: #a9c2e8;
    font-size: 0.9rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--cvc-space-8);
    padding-bottom: var(--cvc-space-8);
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: #ffffff;
}

.site-footer__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--cvc-radius-sm);
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.site-footer__tagline {
    margin: 0 0 0.75rem;
    color: #cfe1ff;
    font-size: 0.85rem;
    font-weight: 600;
}

.site-footer__about {
    margin: 0;
    max-width: 34ch;
    color: #90a9cf;
    font-size: 0.85rem;
    line-height: 1.6;
}

.site-footer__col-title {
    margin: 0 0 var(--cvc-space-3);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
}

.site-footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__nav a {
    color: #a9c2e8;
    font-weight: 500;
    font-size: 0.88rem;
}

.site-footer__nav a:hover {
    color: #ffffff;
}

/* --- Newsletter (footer) --- */
.site-footer__newsletter-desc {
    margin: 0 0 var(--cvc-space-3);
    color: #90a9cf;
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 28ch;
}

.site-footer__newsletter-col .cvc-notice {
    margin-bottom: var(--cvc-space-3);
    padding: 0.6rem 0.85rem;
    font-size: 0.82rem;
}

.site-footer__newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-footer__newsletter-input {
    flex: 1 1 12rem;
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--cvc-radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font: inherit;
}

.site-footer__newsletter-input::placeholder {
    color: #7fa0d1;
}

.site-footer__newsletter-input:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.site-footer__newsletter-submit {
    flex-shrink: 0;
}

.site-footer__bottom {
    padding: var(--cvc-space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__copyright {
    margin: 0;
    font-size: 0.8rem;
    color: #7fa0d1;
}

/* --- Typography --- */
h1, h2, h3, h4 {
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    color: var(--cvc-color-text);
    font-weight: 800;
}

h1 {
    font-size: var(--cvc-text-h1);
    line-height: 1.1;
}

h2 {
    font-size: var(--cvc-text-h2);
}

h3 {
    font-size: var(--cvc-text-h3);
    font-weight: 700;
}

p {
    margin: 0 0 1rem;
    line-height: 1.65;
}

/* --- State: loading / empty / error ---
 * Empty KHÔNG PHẢI warning (Phase 10A.2, Phần 25) - trước đây dùng cùng
 * nền vàng cảnh báo với validation error, khiến "chưa có dữ liệu" (bình
 * thường, nhất là trên DEV) trông như lỗi. Giờ trung tính + có icon, chỉ
 * .cvc-state--error mới dùng màu cảnh báo thật.
 */
.cvc-state {
    padding: var(--cvc-space-6) var(--cvc-space-4);
    border-radius: var(--cvc-radius);
    margin: 1rem 0;
    text-align: center;
    font-size: 0.95rem;
}

/* Phase 10A.17: icon thật (CVC icon library) đặt trước message trong
   .cvc-state - thay cho emoji nhúng qua CSS content:'\...' (📂/🔍) trước
   đây, xem cvc_render_empty_state()/cvc_render_error_state()/
   cvc_render_notfound_state(). Icon rỗng nếu thiếu asset (không vỡ layout). */
.cvc-state__icon {
    display: block;
    margin: 0 auto 0.5rem;
    width: 28px;
    height: 28px;
}

.cvc-state__icon:empty {
    display: none;
}

.cvc-state--loading {
    background: var(--cvc-color-bg-alt);
    color: var(--cvc-color-text-subtle);
}

.cvc-state--empty {
    background: var(--cvc-color-bg-alt);
    border: 1px dashed var(--cvc-color-border-strong);
    color: var(--cvc-color-text-muted);
}

.cvc-state--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* --- Dev tools (Phase 7 status page) --- */
.cvc-status-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.cvc-status-table th,
.cvc-status-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.cvc-status-ok {
    color: #166534;
    font-weight: 600;
}

.cvc-status-error {
    color: #991b1b;
    font-weight: 600;
}

/* --- Buttons --- */
.cvc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.65rem 1.4rem;
    border-radius: var(--cvc-radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.cvc-btn:hover {
    text-decoration: none;
}

.cvc-btn:active {
    transform: translateY(1px);
}

.cvc-btn--primary {
    background: var(--cvc-color-primary);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(6, 42, 92, 0.08);
}

.cvc-btn--primary:hover {
    background: var(--cvc-color-primary-dark);
    color: #ffffff;
    box-shadow: var(--cvc-shadow-sm);
}

.cvc-btn--secondary {
    background: var(--cvc-color-bg);
    border-color: var(--cvc-color-border-strong);
    color: var(--cvc-color-text);
}

.cvc-btn--secondary:hover {
    border-color: var(--cvc-color-primary);
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary-dark);
}

.cvc-btn--secondary:hover {
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary);
}

/* Dùng cho CTA phụ, không cần khung viền (vd: "Xem chi tiết" trong card). */
.cvc-btn--text {
    padding: 0;
    border: none;
    color: var(--cvc-color-primary);
    font-weight: 600;
}

.cvc-btn--text:hover {
    text-decoration: underline;
}

/* --- Homepage hero (Phase 10A.2 - Visual Benchmark) ---
 * 2 cột: nội dung + search bên trái, minh họa SVG bên phải. Nền gradient
 * xanh rất nhạt (KHÔNG dùng ảnh chụp generic - Phần 10) tạo chiều sâu mà
 * không cần ảnh ngoài, không rủi ro vỡ ảnh/chậm tải.
 */
/* Hoạ tiết nền mờ (Phase 10A.10, Phần 11) - chỉ áp cho riêng section hero,
   KHÔNG phải toàn site. Đặt phía trên bên phải, không lặp lại, mờ nhẹ nên
   không cạnh tranh với text/search bên trái. */
.cvc-hero {
    position: relative;
    background:
        url('assets/images/homepage/bg-pattern.webp') top right / min(60%, 640px) auto no-repeat,
        linear-gradient(180deg, #f5f9ff 0%, #ffffff 75%);
    border-bottom: 1px solid var(--cvc-color-border);
    padding: var(--cvc-space-16) 0 var(--cvc-space-12);
    overflow: hidden;
}

/* Cột chữ giới hạn chiều rộng riêng (Phase 10A.11) - trước đây dựa vào
   grid-template-columns để chừa chỗ cho .cvc-hero__visual, giờ visual đã
   tách ra khỏi .container (bleed full-bleed cạnh phải) nên content tự set
   max-width để không bị ảnh full-bleed che mất ở màn rộng. */
.cvc-hero__content {
    position: relative;
    z-index: 1;
    max-width: 38rem;
}

.cvc-hero__eyebrow {
    display: inline-block;
    margin: 0 0 var(--cvc-space-3);
    padding: 0.3rem 0.85rem;
    border-radius: var(--cvc-radius-pill);
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* H1 2 dòng - dòng 2 màu xanh thương hiệu (đối chiếu ảnh benchmark thật -
   "Học đúng - Thi tốt - Vươn xa" tách màu khỏi dòng 1). */
.cvc-hero__accent {
    color: var(--cvc-color-primary);
}

.cvc-hero__lead {
    color: var(--cvc-color-text-muted);
    font-size: var(--cvc-text-lead);
    max-width: 46ch;
}

.cvc-hero .cvc-search-form {
    margin: var(--cvc-space-6) 0 0;
}

/* "Tìm kiếm nhanh" - shortcut tĩnh, KHÔNG phải "phổ biến" (Phần 12/31). */
.cvc-hero__quick-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: var(--cvc-space-3) 0 0;
}

.cvc-hero__quick-search-label {
    font-size: 0.85rem;
    color: var(--cvc-color-text-subtle);
    margin-right: 0.15rem;
}

.cvc-tag {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: var(--cvc-radius-pill);
    background: var(--cvc-color-bg-alt);
    border: 1px solid var(--cvc-color-border);
    color: var(--cvc-color-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.cvc-tag:hover {
    border-color: var(--cvc-color-primary);
    color: var(--cvc-color-primary-dark);
    background: var(--cvc-color-primary-tint);
    text-decoration: none;
}

.cvc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: var(--cvc-space-6);
}

/* Trust micro-signal (Phần 10) - checklist năng lực thật, không phải
   số liệu xã hội. */
.cvc-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: var(--cvc-space-6) 0 0;
    padding: 0;
    list-style: none;
}

.cvc-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.83rem;
    color: var(--cvc-color-text-muted);
}

.cvc-hero__trust svg {
    flex-shrink: 0;
    color: #0e672f;
}

/* Base (mobile/tablet): minh họa trong luồng bình thường, căn giữa, bo
   góc + shadow như 1 khối ảnh. Desktop override (min-width:1025px, dưới
   đây) chuyển sang position:absolute để bleed hết mép phải + chiều cao
   hero band, đúng benchmark-homepage.png mới (Phase 10A.11) - trước đó
   ảnh chỉ là 1 khối nhỏ nổi giữa nhiều khoảng trống, đây là phần người
   dùng phản hồi trực tiếp là "chẳng ra sao". */
.cvc-hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto var(--cvc-space-8);
}

.cvc-hero__visual-inner {
    width: 100%;
    height: 100%;
}

.cvc-hero__illustration {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--cvc-radius-lg);
    box-shadow: var(--cvc-shadow-lg);
    object-fit: cover;
}

@media (min-width: 1025px) {
    .cvc-hero__visual {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(48vw, 760px);
        max-width: none;
        margin: 0;
        justify-content: stretch;
    }

    .cvc-hero__visual-inner {
        width: 100%;
        height: 100%;
    }

    /* Full-bleed: không bo góc/shadow nữa (ảnh chạm mép section, đọc như
       1 phần nền chứ không phải card nổi), phủ kín cả chiều rộng lẫn
       chiều cao khối visual. */
    .cvc-hero__illustration {
        width: 100%;
        height: 100%;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        object-position: center 22%;
    }

    /* Dải gradient mờ bên trái ảnh - hoà mép ảnh vào nền hero sáng thay
       vì có 1 đường cắt cứng giữa ảnh và nền trắng/xanh nhạt. */
    .cvc-hero__visual::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 18%;
        background: linear-gradient(90deg, #f5f9ff 0%, rgba(245, 249, 255, 0) 100%);
        z-index: 2;
        pointer-events: none;
    }
}

/* Card nổi trong hero (Phần B/10) - đè lên góc dưới-phải minh họa. */
.cvc-hero-feature-card {
    position: absolute;
    right: var(--cvc-space-8);
    bottom: var(--cvc-space-8);
    width: 15rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: var(--cvc-space-4);
    background: var(--cvc-color-bg);
    border-radius: var(--cvc-radius-lg);
    box-shadow: var(--cvc-shadow-lg);
}

.cvc-hero-feature-card__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cvc-hero-feature-card__row strong {
    display: block;
    font-size: 0.82rem;
    line-height: 1.3;
}

.cvc-hero-feature-card__row small {
    display: block;
    font-size: 0.72rem;
    color: var(--cvc-color-text-subtle);
}

.cvc-hero-feature-card__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--cvc-radius-sm);
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary);
}

.cvc-hero-feature-card__icon--green {
    background: #dcfce7;
    color: #0e672f;
}

.cvc-hero-feature-card__icon--amber {
    background: #fef3c7;
    color: #864a04;
}

.cvc-hero-feature-card__icon--purple {
    background: #ede9fe;
    color: #6a1fea;
}

/* --- Homepage / domain page sections - nhịp nền (Phần 12 SECTION RHYTHM):
 * trắng (mặc định) -> tint (xanh rất nhạt, Tuyển dụng) -> deep (xanh đậm,
 * Thi trắc nghiệm) -> trắng (Resource hub) -> CTA banner xanh đậm đặc.
 * Thay cho .cvc-section--alt cũ (xám be, không có nhịp rõ ràng). */
.cvc-section {
    padding: var(--cvc-section-py) 0;
}

.cvc-section--tight {
    padding: var(--cvc-space-8) 0;
}

.cvc-section--tint {
    background: var(--cvc-color-bg-tint);
}

.cvc-section--deep {
    background: var(--cvc-color-primary-deep);
    color: #fff;
}

.cvc-section--deep h2,
.cvc-section--deep .cvc-section__more {
    color: #fff;
}

.cvc-section--deep .cvc-section__more:hover {
    color: #cfe1ff;
}

.cvc-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--cvc-space-6);
}

.cvc-section__header h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cvc-section__header-icon {
    display: inline-flex;
    color: var(--cvc-color-primary);
}

.cvc-section__more {
    white-space: nowrap;
    font-weight: 700;
    color: var(--cvc-color-primary);
}

/* Panel viền bao value strip (Phần 13, đối chiếu ảnh benchmark thật -
   value strip nằm trong 1 khối bo tròn viền nhẹ, không trôi tự do). */
.cvc-value-panel {
    padding: var(--cvc-space-6);
    background: var(--cvc-color-bg);
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-lg);
    box-shadow: var(--cvc-shadow-sm);
}

/* Statistics strip (Phase 10A.6, Phần 13) - CHỈ render khi demo mode bật
   (xem cvc_render_homepage_statistics_strip()). Tách biệt trực quan khỏi
   Value strip thật ở trên bằng border-top + nhãn "Demo" riêng. */
.cvc-stats-strip {
    margin-top: var(--cvc-space-6);
    padding-top: var(--cvc-space-6);
    border-top: 1px dashed var(--cvc-color-border);
}

.cvc-stats-strip__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: var(--cvc-space-3);
    font-size: 0.75rem;
    color: var(--cvc-color-text-subtle);
}

.cvc-stats-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cvc-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cvc-stats-strip__item {
    flex: 1 1 0;
    min-width: 8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cvc-stats-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--cvc-radius-sm);
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary);
    flex-shrink: 0;
}

.cvc-stats-strip__value {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cvc-color-primary-dark);
    line-height: 1.2;
}

.cvc-stats-strip__desc {
    display: block;
    font-size: 0.78rem;
    color: var(--cvc-color-text-subtle);
}

@media (max-width: 900px) {
    .cvc-stats-strip__list {
        gap: var(--cvc-space-4);
    }

    .cvc-stats-strip__item {
        flex: 1 1 40%;
    }
}

/* --- Value strip (Phần 8 VALUE STRIP) --- */
.cvc-value-strip {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--cvc-space-6);
}

.cvc-value-strip__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0 var(--cvc-space-4);
    border-left: 1px solid var(--cvc-color-border);
}

.cvc-value-strip__item:first-child {
    border-left: none;
    padding-left: 0;
}

.cvc-value-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary);
    margin-bottom: 0.25rem;
}

/* 5 màu icon riêng biệt (đối chiếu ảnh benchmark thật - value strip
   KHÔNG đồng loạt xanh). Chỉ trang trí, không gắn ý nghĩa dữ liệu. */
.cvc-value-strip__icon--green {
    background: #dcfce7;
    color: #0e672f;
}

.cvc-value-strip__icon--amber {
    background: #fef3c7;
    color: #864a04;
}

.cvc-value-strip__icon--purple {
    background: #ede9fe;
    color: #6a1fea;
}

.cvc-value-strip__icon--pink {
    background: #fce7f3;
    color: #a81c5a;
}

/* Phase 10A.16 - biến thể dùng asset PNG thật (Homepage V2 cut assets):
   ảnh đã tự có màu tròn riêng baked-in, không cần nền màu CSS phía sau
   nữa (đứng sau .cvc-value-strip__icon--{color} trong file nên thắng
   cascade mà không cần !important - cùng độ đặc hiệu, thắng theo thứ tự
   khai báo). object-fit:contain giữ nguyên toàn bộ ảnh, không crop mất
   nội dung icon. */
.cvc-value-strip__icon--asset {
    background: transparent;
    padding: 0;
}

.cvc-value-strip__icon--asset img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cvc-value-strip__title {
    font-weight: 700;
    font-size: 0.98rem;
}

.cvc-value-strip__desc {
    font-size: 0.85rem;
    color: var(--cvc-color-text-subtle);
    line-height: 1.5;
}

/* --- Resource hub (Chủ đề/Kiến thức/Văn bản gộp 1 hàng) --- */
.cvc-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--cvc-space-6);
}

.cvc-resource-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: var(--cvc-space-8) var(--cvc-space-6);
    background: var(--cvc-color-bg);
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-lg);
    color: var(--cvc-color-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cvc-resource-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cvc-shadow-md);
    border-color: var(--cvc-color-primary);
    text-decoration: none;
}

.cvc-resource-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--cvc-radius);
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary);
    margin-bottom: 0.35rem;
}

/* Mỗi resource card 1 màu icon riêng (đối chiếu ảnh benchmark thật -
   Cẩm nang/Thi nâng ngạch/Tin tức mỗi cái 1 màu khác nhau). */
.cvc-resource-card__icon--purple {
    background: #ede9fe;
    color: #6a1fea;
}

.cvc-resource-card__icon--green {
    background: #dcfce7;
    color: #0e672f;
}

.cvc-resource-grid--footer {
    margin-top: var(--cvc-space-12);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cvc-resource-card__title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cvc-color-text);
}

.cvc-resource-card__desc {
    font-size: 0.9rem;
    color: var(--cvc-color-text-subtle);
    line-height: 1.55;
}

.cvc-resource-card__count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cvc-color-primary-dark);
}

.cvc-resource-card__link {
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 700;
    color: var(--cvc-color-primary);
}

/* --- Homepage 2-cột: Khóa học/Tài nguyên (chính) | Tuyển dụng (sidebar)
 * (Phase 10A.3, đối chiếu ảnh benchmark thật - đây là khác biệt cấu trúc
 * lớn nhất so với bản trước: recruitment KHÔNG phải 1 section riêng nữa,
 * mà là 1 sidebar dọc chạy song song với course + resource ở cột chính).
 */
.cvc-home-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: var(--cvc-space-8);
    align-items: start;
}

.cvc-home-main {
    min-width: 0;
}

.cvc-recruitment-panel {
    background: var(--cvc-color-bg);
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--cvc-shadow-sm);
}

/* Ảnh banner trang trí đầu sidebar tuyển dụng (Phase 10A.10) - margin âm
   để ảnh tràn hết viền panel (bleeds to edge), bo góc trên khớp panel. */
.cvc-recruitment-panel__banner {
    margin: -1.25rem -1.25rem var(--cvc-space-4);
    border-radius: var(--cvc-radius-lg) var(--cvc-radius-lg) 0 0;
    overflow: hidden;
}

.cvc-recruitment-panel__banner img {
    display: block;
    width: 100%;
    aspect-ratio: 220 / 130;
    object-fit: cover;
    object-position: center 25%;
}

.cvc-recruitment-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cvc-space-2);
    margin-bottom: var(--cvc-space-4);
}

.cvc-recruitment-panel__header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.2rem;
}

.cvc-recruitment-panel__icon {
    display: inline-flex;
}

.cvc-recruitment-list {
    display: flex;
    flex-direction: column;
    gap: var(--cvc-space-4);
}

.cvc-recruitment-row {
    display: flex;
    gap: var(--cvc-space-3);
    padding: var(--cvc-space-2);
    margin: 0 calc(-1 * var(--cvc-space-2)) var(--cvc-space-2);
    padding-bottom: var(--cvc-space-4);
    border-bottom: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius);
    transition: background-color 0.15s ease;
}

.cvc-recruitment-row:hover {
    background: var(--cvc-color-bg-alt);
}

.cvc-recruitment-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.cvc-recruitment-row__avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--cvc-radius-sm);
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary-dark);
    font-weight: 800;
    font-size: 0.95rem;
}

.cvc-recruitment-row__avatar--teal {
    background: #ccfbf1;
    color: #0d645d;
}

.cvc-recruitment-row__avatar--amber {
    background: #fef3c7;
    color: #904307;
}

.cvc-recruitment-row__avatar--purple {
    background: #ede9fe;
    color: #6d28d9;
}

.cvc-recruitment-row__body {
    min-width: 0;
    flex: 1;
}

.cvc-recruitment-row__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.cvc-recruitment-row__title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.cvc-recruitment-row__title a {
    color: var(--cvc-color-text);
}

.cvc-recruitment-row__status {
    flex-shrink: 0;
    white-space: nowrap;
}

.cvc-recruitment-row__agency {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--cvc-color-text-muted);
}

.cvc-recruitment-row__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.35rem 0 0;
}

.cvc-recruitment-row__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--cvc-color-text-subtle);
}

.cvc-recruitment-row__meta-item svg {
    flex-shrink: 0;
    opacity: 0.75;
}

/* --- Learning Journey "Con đường của bạn" (Phần 12) - timeline ngang
   desktop, có đường nối; dọc ở mobile (xem @media bên dưới). --- */
.cvc-journey {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--cvc-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.cvc-journey__step {
    position: relative;
}

.cvc-journey__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.85rem;
    left: calc(50% + 2.05rem);
    right: calc(-50% + 2.05rem);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--cvc-color-primary) 0 6px, transparent 6px 12px);
    opacity: 0.35;
}

.cvc-journey__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    color: var(--cvc-color-text);
    padding: var(--cvc-space-2);
    border-radius: var(--cvc-radius);
}

.cvc-journey__link:hover {
    text-decoration: none;
    background: var(--cvc-color-bg-alt);
}

.cvc-journey__link:hover .cvc-journey__icon {
    background: var(--cvc-color-primary);
    color: #fff;
    transform: translateY(-2px);
}

.cvc-journey__number {
    position: absolute;
    top: -0.35rem;
    right: calc(50% - 2rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cvc-color-primary-deep);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    z-index: 1;
}

.cvc-journey__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cvc-color-bg);
    color: var(--cvc-color-primary);
    box-shadow: var(--cvc-shadow-sm);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.cvc-journey__title {
    font-weight: 700;
    font-size: 0.95rem;
}

.cvc-journey__desc {
    font-size: 0.78rem;
    color: var(--cvc-color-text-subtle);
    line-height: 1.4;
}

/* Rule @max-width:900px cho .cvc-journey (layout dọc, trước Homepage V2)
 * đã bị xoá (Phase 10A.13 cleanup) - .cvc-journey chỉ dùng ở homepage,
 * và Homepage V2 (.cvc-home-v2, cuối file) đã có bộ breakpoint riêng đầy
 * đủ cho component này (grid 5 cột ở ≥768px, carousel cuộn ngang ở
 * ≤767px). Rule cũ để lại gây conflict thật: ở đúng 768px, nó set
 * grid-template-columns:1fr (đè "repeat(5,...)" - specificity bằng nhau,
 * source order sau nên thắng) khiến cả 5 step chồng lên nhau trong 1 ô
 * grid duy nhất, tràn ngang 736px→1045px - phát hiện qua QA screenshot/
 * overflow check thật, không phải suy đoán.
 */

/* --- Goal direction section "Bạn đang hướng đến điều gì?" (Phần 18) --- */
.cvc-goal-section__subtitle {
    margin: -0.75rem 0 var(--cvc-space-6);
    color: var(--cvc-color-text-subtle);
}

.cvc-goal-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--cvc-space-6);
    align-items: stretch;
}

.cvc-goal-direction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--cvc-space-4);
}

.cvc-goal-direction-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: var(--cvc-space-6) var(--cvc-space-3);
    background: var(--cvc-color-bg);
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius);
    text-align: center;
    color: var(--cvc-color-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cvc-goal-direction-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cvc-shadow-md);
    border-color: var(--cvc-color-primary);
    text-decoration: none;
}

.cvc-goal-direction-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--cvc-radius);
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary);
}

.cvc-goal-direction-card__label {
    font-weight: 700;
    font-size: 0.9rem;
}

.cvc-goal-direction-card__desc {
    font-size: 0.78rem;
    color: var(--cvc-color-text-subtle);
}

.cvc-goal-cta-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--cvc-space-6);
    background: var(--cvc-color-bg);
    border-radius: var(--cvc-radius-lg);
    box-shadow: var(--cvc-shadow-sm);
}

.cvc-goal-cta-card h3 {
    margin: 0;
    font-size: 1.05rem;
}

.cvc-goal-cta-card p {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    color: var(--cvc-color-text-subtle);
}

.cvc-goal-cta-card .cvc-btn {
    align-self: flex-start;
}

/* --- Empty state cao cấp cho section chủ lực homepage (Phần 25) --- */
.cvc-empty-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: var(--cvc-space-12) var(--cvc-space-6);
    background: var(--cvc-color-bg);
    border: 1px dashed var(--cvc-color-border-strong);
    border-radius: var(--cvc-radius-lg);
}

.cvc-section--deep .cvc-empty-panel {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
}

.cvc-empty-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary);
}

.cvc-section--deep .cvc-empty-panel__icon {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cvc-empty-panel__heading {
    margin: 0;
    font-size: 1.15rem;
}

.cvc-section--deep .cvc-empty-panel__heading {
    color: #fff;
}

.cvc-empty-panel__desc {
    margin: 0 0 0.5rem;
    max-width: 46ch;
    color: var(--cvc-color-text-subtle);
}

.cvc-section--deep .cvc-empty-panel__desc {
    color: #dbe9ff;
}

/* --- CTA banner cuối trang chủ (Phần 8 FINAL CTA) --- */
/* CTA banner - 3 vùng ngang (icon+heading | quote | CTA), đối chiếu ảnh
 * benchmark thật: KHÔNG phải 1 cột căn giữa như bản trước. */
.cvc-cta-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cvc-color-primary-deep), var(--cvc-color-primary-dark));
    padding: var(--cvc-space-16) 0;
    color: #fff;
}

.cvc-cta-banner__skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
}

/* Ảnh trụ sở/skyline thật bên phải banner CTA (Phase 10A.10) - chỉ dùng
   phần ảnh, KHÔNG dùng headline/nút baked-in trong ảnh gốc (đã cắt bỏ ở
   khâu xử lý asset - xem docs/PHASE_10A.10_ASSET_INTEGRATION.md mục 6).
   Gradient phủ từ màu nền banner -> trong suốt để ảnh hoà vào nền xanh
   đậm thay vì dán cứng 1 khối chữ nhật, đồng thời giữ đủ tương phản cho
   phần quote text đè lên bên phải. */
.cvc-cta-banner__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(46%, 32rem);
    z-index: 0;
}

.cvc-cta-banner__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--cvc-color-primary-deep) 0%, rgba(9, 46, 108, 0.55) 35%, rgba(9, 46, 108, 0.35) 100%);
}

.cvc-cta-banner__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: 0.85;
}

.cvc-cta-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cvc-space-8);
    text-align: left;
}

.cvc-cta-banner__main {
    flex: 1 1 auto;
    max-width: 34rem;
}

.cvc-cta-banner__eyebrow {
    display: inline-block;
    margin: 0 0 var(--cvc-space-3);
    padding: 0.3rem 0.85rem;
    border-radius: var(--cvc-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cvc-cta-banner h2 {
    color: #fff;
    margin: 0 0 var(--cvc-space-3);
    font-size: 1.9rem;
    line-height: 1.25;
}

.cvc-cta-banner h2 span {
    color: #7fb3ff;
}

.cvc-cta-banner__desc {
    margin: 0 0 var(--cvc-space-6);
    color: #dbe9ff;
    font-size: 1rem;
    max-width: 40ch;
}

.cvc-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cvc-cta-banner__quote {
    flex: 0 1 22rem;
    margin: 0;
    padding: 0 0 0 var(--cvc-space-8);
    color: #dbe9ff;
    font-size: 1.05rem;
    font-style: italic;
    text-align: right;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.cvc-btn--cta {
    flex-shrink: 0;
    background: #fff;
    color: var(--cvc-color-primary-deep);
    padding: 0.75rem 1.6rem;
    font-size: 0.98rem;
}

.cvc-btn--cta-outline {
    flex-shrink: 0;
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    padding: 0.75rem 1.6rem;
    font-size: 0.98rem;
}

.cvc-btn--cta-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: #fff;
}

.cvc-btn--cta:hover {
    background: #eef4ff;
    color: var(--cvc-color-primary-deep);
}

/* --- Domain pages (Courses / Topics) --- */
.cvc-page {
    padding-bottom: 2rem;
}

.cvc-page-header {
    margin-bottom: 1.5rem;
}

.cvc-page-header__lead {
    color: #282d34;
    font-size: 1.05rem;
}

/* Phase 10A.19 - illustration trang trí (Lecturer/Expert, CVC Homepage
   Icon Pack V1) cạnh tiêu đề trang Khóa học. Ẩn trên mobile để không
   chiếm chỗ nội dung chính (Phần 15 - "mobile không bị dày đặc"). */
.cvc-page-header--illustrated {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.cvc-page-header__illustration {
    display: none;
    flex-shrink: 0;
    align-items: flex-end;
}

/* Che dải caption "0N_ten_file.png" bake sẵn ở đáy ảnh gốc (đo được ở
   y=92-108/109px) bằng overflow:hidden - ảnh PNG/WebP không bị xử lý lại,
   chỉ giới hạn khung hiển thị đúng phần nhân vật. */
.cvc-lecturer-illustration {
    display: block;
    height: 72px;
    width: 63px;
    overflow: hidden;
}

.cvc-lecturer-illustration:not(:first-child) {
    margin-left: -0.85rem;
}

.cvc-lecturer-illustration img {
    display: block;
    height: 86px;
    width: 63px;
}

@media (min-width: 768px) {
    .cvc-page-header__illustration {
        display: flex;
    }
}

.cvc-page-header__meta {
    color: #42464f;
    font-size: 0.9rem;
}

.cvc-prose {
    max-width: var(--cvc-prose-width);
    line-height: 1.7;
    color: var(--cvc-color-text);
    margin-bottom: 1.5rem;
}

/* --- Breadcrumbs --- */
.cvc-breadcrumbs {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #94a3b8;
}

.cvc-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cvc-breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin-left: 0.35rem;
    color: #3e4755;
    font-weight: 700;
}

.cvc-breadcrumbs a {
    color: #94a3b8;
    transition: color 0.15s ease;
}

.cvc-breadcrumbs a:hover {
    color: #38bdf8;
}

.cvc-breadcrumbs [aria-current='page'] {
    color: #f8fafc;
    font-weight: 700;
}

.cvc-exam-os-workspace .cvc-breadcrumbs a,
.bg-navy-950 .cvc-breadcrumbs a,
.bg-slate-900 .cvc-breadcrumbs a,
.bg-slate-950 .cvc-breadcrumbs a,
body.bg-slate-950 .cvc-breadcrumbs a,
body.bg-navy-950 .cvc-breadcrumbs a {
    color: #cbd5e1;
}

.cvc-exam-os-workspace .cvc-breadcrumbs [aria-current='page'],
.bg-navy-950 .cvc-breadcrumbs [aria-current='page'],
.bg-slate-900 .cvc-breadcrumbs [aria-current='page'],
.bg-slate-950 .cvc-breadcrumbs [aria-current='page'],
body.bg-slate-950 .cvc-breadcrumbs [aria-current='page'],
body.bg-navy-950 .cvc-breadcrumbs [aria-current='page'] {
    color: #f8fafc !important;
    font-weight: 800 !important;
}

/* --- Card grid --- */
.cvc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--cvc-space-6);
    margin: 0;
}

.cvc-card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cvc-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .cvc-card-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cvc-card-grid--4,
    .cvc-card-grid--3 {
        grid-template-columns: 1fr;
    }
}

.cvc-card {
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--cvc-color-bg);
    box-shadow: var(--cvc-shadow-sm);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cvc-card:hover {
    border-color: var(--cvc-color-primary);
    box-shadow: var(--cvc-shadow-md);
    transform: translateY(-3px);
}

.cvc-card__media {
    position: relative;
    overflow: hidden;
}

.cvc-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.25s ease;
}

/* Artwork zoom rất nhẹ khi hover card (Phần 9/20 - "subtle scale", không
   parallax/animation liên tục). */
.cvc-card:hover .cvc-card__media img {
    transform: scale(1.04);
}

/* Placeholder minh họa khi course chưa có thumbnail thật (Phần 10) - màu
   nền đổi theo course_type (cvc_course_type_color()) để tạo variety thị
   giác giống ảnh benchmark thật thay vì đồng loạt 1 màu xanh. Tỷ lệ 4:3
   (thay vì 16:9 cũ, Phase 10A.10) - khớp hơn với khung hình ảnh course
   thật (gần vuông) nên object-fit:cover không phải cắt mất chủ thể chính. */
.cvc-card__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--cvc-color-primary), var(--cvc-color-primary-deep));
}

/* Course artwork ảnh thật (Phase 10A.10) - cùng tỷ lệ 4:3, object-position
   hơi lệch lên trên vì hầu hết ảnh nguồn có chủ thể chính (người/vật) ở
   nửa trên, phần dưới thường là bàn/nền ít quan trọng hơn. */
.cvc-card__media--photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 30%;
}

.cvc-card__media--teal {
    background: linear-gradient(135deg, #0d9488, #115e59);
}

.cvc-card__media--amber {
    background: linear-gradient(135deg, #d97706, #92400e);
}

.cvc-card__media--pink {
    background: linear-gradient(135deg, #db2777, #831843);
}

.cvc-card__media-link {
    position: relative;
    display: block;
}

/* Badge overlay trên ảnh course card - top-left category, top-right cờ
   Mới/Miễn phí (đối chiếu ảnh benchmark thật §E - badge nằm ở GÓC TRÊN
   ảnh, không phải góc dưới như bản 10A.3). */
.cvc-card__media-badge {
    position: absolute;
    left: var(--cvc-space-3);
    top: var(--cvc-space-3);
}

.cvc-card__media-flags {
    position: absolute;
    right: var(--cvc-space-3);
    top: var(--cvc-space-3);
}

.cvc-card__media-flags:empty {
    display: none;
}

/* Badge category trên ảnh course card - nền đặc (không phải pill nhạt
   như .cvc-badge--subject) để đủ tương phản khi đặt trên ảnh/gradient. */
.cvc-badge--category {
    color: #ffffff;
    background: var(--cvc-color-primary);
}

.cvc-badge--category-teal {
    background: #0d9488;
}

.cvc-badge--category-amber {
    background: #d97706;
}

.cvc-badge--category-pink {
    background: #db2777;
}

.cvc-badge--flag-new {
    background: #16a34a;
    color: #ffffff;
}

/* Badge "Demo" (Phase 10A.6, Phần 17) - PHẢI gắn lên mọi design fixture
   hiển thị ra trang, không đánh lừa người xem là dữ liệu thật. */
.cvc-badge--demo {
    background: #f3f4f6;
    color: #42464f;
    border: 1px dashed #d1d5db;
}

.cvc-card--demo,
.cvc-recruitment-row--demo {
    opacity: 0.92;
}

.cvc-btn--block {
    display: flex;
    width: 100%;
}

.cvc-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.cvc-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cvc-card__title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.35;
}

.cvc-card__title a {
    color: var(--cvc-color-text);
}

.cvc-card__excerpt {
    margin: 0;
    color: var(--cvc-color-text-muted);
    font-size: 0.92rem;
}

.cvc-card__meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    color: var(--cvc-color-text-subtle);
    font-size: 0.85rem;
}

.cvc-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0;
    color: var(--cvc-color-text-subtle);
    font-size: 0.85rem;
}

/* Phase 10A.17 - icon lesson/duration/question/timer đứng cạnh số liệu
   trong meta-row (trước đây chỉ có text, không icon). */
.cvc-card__meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.cvc-card__footer {
    margin-top: auto;
    padding-top: 0.5rem;
}

.cvc-card__footer--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cvc-card__deadline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--cvc-color-text-subtle);
}

.cvc-card__deadline strong {
    color: var(--cvc-color-accent-amber-ink);
}

/* --- Exam card: accent bar + icon riêng (Phần 8 EXAMS "accent mạnh") --- */
.cvc-card--exam {
    position: relative;
    border-top: 3px solid var(--cvc-color-primary-dark);
}

.cvc-card--exam .cvc-card__accent {
    position: absolute;
    top: var(--cvc-space-4);
    right: var(--cvc-space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary-dark);
}

/* --- Course "featured" (1 khóa học duy nhất, Phần 15/29) - ngang, ảnh
   bên trái ~42%, nội dung bên phải, tránh 1 card nhỏ lọt thỏm. --- */
.cvc-card--course-featured {
    flex-direction: row;
    align-items: stretch;
}

.cvc-card--course-featured .cvc-card__media-link {
    flex: 0 0 42%;
}

.cvc-card--course-featured .cvc-card__media,
.cvc-card--course-featured .cvc-card__media--placeholder {
    height: 100%;
    aspect-ratio: auto;
}

.cvc-card--course-featured .cvc-card__body {
    flex: 1;
    justify-content: center;
}

.cvc-card__title--lg {
    font-size: 1.35rem;
}

@media (max-width: 720px) {
    .cvc-card--course-featured {
        flex-direction: column;
    }

    .cvc-card--course-featured .cvc-card__media-link {
        flex: none;
    }

    .cvc-card--course-featured .cvc-card__media,
    .cvc-card--course-featured .cvc-card__media--placeholder {
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

/* --- Badges --- */
.cvc-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    align-self: flex-start;
}

.cvc-badge--featured {
    background: #fef3c7;
    color: #92400e;
}

.cvc-badge--subject {
    background: #e0e7ff;
    color: #3730a3;
}

.cvc-badge--free {
    background: #dcfce7;
    color: #166534;
}

.cvc-badge--paid {
    background: #fee2e2;
    color: #991b1b;
}

/* --- Pagination --- */
.cvc-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    font-size: 0.9rem;
}

.cvc-pagination__link {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1rem;
    min-height: 44px;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
    font-weight: 600;
}

.cvc-pagination__link:hover {
    border-color: var(--cvc-color-primary);
    text-decoration: none;
}

.cvc-pagination__link--disabled {
    color: #9ca3af;
    border-color: var(--cvc-color-border);
}

.cvc-pagination__status {
    color: #42464f;
}

/* --- Lesson list / navigation --- */
.cvc-lesson-list-section {
    margin: 2rem 0;
}

.cvc-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.cvc-lesson-list__item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.cvc-lesson-list__item:last-child {
    border-bottom: none;
}

.cvc-lesson-list__title {
    flex: 1;
    min-width: 160px;
    font-weight: 600;
}

.cvc-lesson-list__duration {
    color: #42464f;
    font-size: 0.85rem;
}

.cvc-lesson-video {
    margin: 1rem 0;
}

.cvc-lesson-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

/* --- Related content (topics) --- */
.cvc-related-section {
    margin: 2rem 0;
}

.cvc-related-list {
    margin: 0;
    padding-left: 1.25rem;
}

.cvc-related-list--inline {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    font-size: 0.9rem;
    color: #282d34;
}

/* --- Recruitment position card --- */
.cvc-position-card {
    margin-bottom: 1rem;
}

/* --- Exam question preview --- */
.cvc-question-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cvc-question-list__item {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.cvc-question-list__text {
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.cvc-question-list__options {
    margin: 0;
    padding-left: 1.25rem;
    color: #282d34;
}

/* --- State: not found / locked --- */
.cvc-state--notfound {
    background: var(--cvc-color-bg-alt);
    border: 1px dashed var(--cvc-color-border-strong);
    color: var(--cvc-color-text-muted);
}

.cvc-state--locked {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.cvc-state--expired {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* --- Search form --- */
.cvc-search-form {
    display: flex;
    gap: 0.5rem;
    max-width: 560px;
    margin: 1.25rem 0;
}

.cvc-search-form__input {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
    font: inherit;
    font-size: 1rem;
    color: var(--cvc-color-text);
    background: var(--cvc-color-bg);
}

.cvc-search-form__input:focus-visible {
    outline: 2px solid var(--cvc-color-primary);
    outline-offset: 1px;
}

/* Search trong hero là focal point lớn nhất (Phần 8 HERO) - to hơn, bo
   tròn hơn, có shadow riêng để nổi bật trên nền gradient. */
.cvc-hero .cvc-search-form {
    max-width: 34rem;
    gap: 0.6rem;
    padding: 0.4rem;
    background: var(--cvc-color-bg);
    border-radius: var(--cvc-radius-lg);
    box-shadow: var(--cvc-shadow-lg);
}

.cvc-hero .cvc-search-form__input {
    border: none;
    padding: 0.7rem 1rem;
    font-size: 1.02rem;
}

.cvc-hero .cvc-search-form__input:focus-visible {
    outline: none;
}

.cvc-hero .cvc-btn {
    border-radius: var(--cvc-radius);
}

/* --- Search filters --- */
.cvc-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.cvc-search-filters__item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.9rem;
    min-height: 40px;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-pill);
    color: var(--cvc-color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.cvc-search-filters__item:hover {
    border-color: var(--cvc-color-primary);
    text-decoration: none;
}

.cvc-search-filters__item.is-active {
    background: var(--cvc-color-primary);
    border-color: var(--cvc-color-primary);
    color: #ffffff;
}

/* --- Field shortcuts (Phase 10A.19 - "Duyệt nhanh theo lĩnh vực", icon
   Public Service Positions màu đỏ dùng làm accent phụ, nền/viền vẫn theo
   hệ thống thiết kế hiện tại - không để đỏ lấn át xanh thương hiệu). --- */
.cvc-field-shortcuts {
    margin: 1.25rem 0;
}

.cvc-field-shortcuts__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cvc-color-text-subtle);
    margin: 0 0 0.6rem;
}

.cvc-field-shortcuts__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.6rem;
    margin: 0;
    padding: 0 0 0.25rem;
    list-style: none;
    scrollbar-width: thin;
}

.cvc-field-shortcuts__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.5rem 0.85rem 0.5rem 0.5rem;
    background: var(--cvc-color-bg);
    border: 1px solid var(--cvc-color-border);
    border-radius: 999px;
    color: var(--cvc-color-text);
    text-decoration: none;
    white-space: nowrap;
}

.cvc-field-shortcuts__item:hover {
    border-color: var(--cvc-color-primary);
    text-decoration: none;
}

.cvc-field-shortcuts__icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.cvc-field-shortcuts__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cvc-field-shortcuts__label {
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- Filter form (dùng cho listing có filter riêng, vd Tuyển dụng) --- */
.cvc-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 1.5rem;
}

.cvc-filter-form__field input,
.cvc-filter-form__field select {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
    font: inherit;
    color: var(--cvc-color-text);
    background: var(--cvc-color-bg);
}

.cvc-filter-form__field input:focus-visible,
.cvc-filter-form__field select:focus-visible {
    outline: 2px solid var(--cvc-color-primary);
    outline-offset: 1px;
}

/* Nhấn nhẹ deadline trên card mà không lạm dụng màu (chỉ đậm chữ, không
   nền đỏ/badge cảnh báo - backend chưa có business rule "sắp hết hạn"). */
.cvc-card__meta--highlight {
    color: var(--cvc-color-text);
    font-weight: 700;
}

/* ============================================================
 * PHASE 10 - Auth / Dashboard / Exam-taking design system
 * Mở rộng design system hiện có (Phase 1-4B) - dùng lại đúng token/
 * button/badge/card/state đã có ở trên, không tạo hệ thống thứ hai.
 * ============================================================ */

/* --- Buttons: reset cho <button> (Phase 1-4B chỉ dùng .cvc-btn trên <a>) --- */
button.cvc-btn {
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

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

.cvc-btn--small {
    min-height: 36px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.cvc-btn--icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* --- Notices (flash message sau Post/Redirect/Get) --- */
.cvc-notice {
    padding: 0.85rem 1.1rem;
    border-radius: var(--cvc-radius-sm);
    margin: 0 0 var(--cvc-space-4);
    font-weight: 500;
}

.cvc-notice--success {
    background: #dcfce7;
    color: #166534;
}

.cvc-notice--error {
    background: #fee2e2;
    color: #991b1b;
}

/* --- Forms --- */
.cvc-form {
    display: flex;
    flex-direction: column;
    gap: var(--cvc-space-4);
    max-width: 32rem;
}

.cvc-form--auth {
    background: var(--cvc-color-bg-alt);
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius);
    padding: var(--cvc-space-6);
}

.cvc-form--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    max-width: none;
}

.cvc-form--inline .cvc-form__field {
    flex: 1 1 14rem;
}

.cvc-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cvc-form__field label {
    font-weight: 600;
    font-size: 0.9rem;
}

.cvc-form__field input,
.cvc-form__field select,
.cvc-form__field textarea {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
    font: inherit;
    color: var(--cvc-color-text);
    background: var(--cvc-color-bg);
    width: 100%;
}

.cvc-form__field input:focus-visible,
.cvc-form__field select:focus-visible,
.cvc-form__field textarea:focus-visible {
    outline: 2px solid var(--cvc-color-primary);
    outline-offset: 1px;
}

.cvc-form__field input:disabled {
    background: var(--cvc-color-bg-alt);
    color: var(--cvc-color-text-subtle);
}

.cvc-form__hint {
    font-size: 0.85rem;
    color: var(--cvc-color-text-subtle);
    margin: 0;
}

.cvc-auth-switch {
    margin-top: var(--cvc-space-4);
    color: var(--cvc-color-text-muted);
}

/* Nút hành động nhanh trên trang detail công khai (bookmark/đặt mục tiêu/
   bắt đầu thi) - vốn là <form> 1 nút, cần trông giống 1 CTA đơn, không
   giống 1 form nhiều field. */
.cvc-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cvc-space-3);
    margin-bottom: var(--cvc-space-6);
}

.cvc-inline-action {
    display: inline-block;
    margin: 0;
}

/* --- Header: vùng đăng nhập/tài khoản --- */
.site-header__auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
    flex-shrink: 0;
}

/* Thu hẹp padding ngang riêng cho nút Đăng ký/Đăng nhập trong header
   (Phase 10A.14 - sửa nav bị wrap ở 1440px) - không đổi
   .cvc-btn--small gốc vì class đó còn dùng ở nhiều nơi khác (dashboard,
   account sections) không liên quan tới header. */
.site-header__auth .cvc-btn--small {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
}

.site-header__account-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--cvc-color-text);
}

.site-header__bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--cvc-color-text-muted);
}

.site-header__bell:hover {
    background: var(--cvc-color-bg-alt);
    color: var(--cvc-color-primary);
}

.site-header__bell .cvc-notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
}

.cvc-notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: var(--cvc-radius-pill);
    background: #dc2626;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2rem;
}

/* --- Account dashboard --- */
.cvc-account-page .cvc-page-header {
    margin-bottom: var(--cvc-space-4);
}

.cvc-account-layout {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: var(--cvc-space-8);
    align-items: start;
}

.cvc-account-nav {
    background: var(--cvc-color-bg-alt);
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius);
    padding: var(--cvc-space-4);
    position: sticky;
    top: var(--cvc-space-4);
}

.cvc-account-nav ul {
    list-style: none;
    margin: 0 0 var(--cvc-space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cvc-account-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--cvc-radius-sm);
    color: var(--cvc-color-text);
    font-weight: 500;
}

/* Phase 10A.17 - icon menu tài khoản (CVC icon library); mục không có
   icon khớp (vd "Tổng quan") vẫn thẳng hàng nhờ padding-left thay chỗ
   icon lẽ ra chiếm (20px + gap 0.6rem). */
.cvc-account-nav__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.cvc-account-nav a:not(:has(.cvc-account-nav__icon)) {
    padding-left: calc(0.75rem + 20px + 0.6rem);
}

.cvc-account-nav a:hover {
    background: var(--cvc-color-primary-tint);
    text-decoration: none;
}

.cvc-account-nav a.is-active {
    background: var(--cvc-color-primary);
    color: #fff;
    font-weight: 600;
}

.cvc-account-nav__logout {
    display: block;
    padding: 0.55rem 0.75rem;
    border-top: 1px solid var(--cvc-color-border);
    color: var(--cvc-color-text-muted);
    font-weight: 500;
}

.cvc-account-content {
    min-width: 0;
}

.cvc-account-section {
    margin-bottom: var(--cvc-space-8);
}

.cvc-account-section h2 {
    margin-bottom: var(--cvc-space-4);
}

.cvc-section-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cvc-space-3);
    margin-bottom: var(--cvc-space-4);
}

.cvc-section-header-row h2 {
    margin-bottom: 0;
}

/* Tổng quan - lưới ô liên kết nhanh */
.cvc-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--cvc-space-4);
}

.cvc-overview-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--cvc-space-4);
    background: var(--cvc-color-bg);
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius);
    color: var(--cvc-color-text);
}

.cvc-overview-tile:hover {
    border-color: var(--cvc-color-primary);
    text-decoration: none;
    box-shadow: var(--cvc-shadow-sm);
}

/* Phase 10A.18 - icon feature-block (CVC Icon Library V2, PNG 144x128
   gốc, hiển thị nhỏ lại 40px - không crop/méo vì chỉ scale nguyên tỷ lệ
   qua width/height, giữ đúng nội dung ảnh gốc). */
.cvc-overview-tile__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    margin-bottom: 0.25rem;
}

.cvc-overview-tile__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cvc-overview-tile__label {
    font-weight: 700;
}

.cvc-overview-tile__hint {
    font-size: 0.85rem;
    color: var(--cvc-color-text-subtle);
}

/* Danh sách card dạng "goal" - dùng chung cho Goals/Matches/Bookmarks/
   Learning path (đều là 1 cột card có badge + tiêu đề + action). */
.cvc-goal-list {
    display: flex;
    flex-direction: column;
    gap: var(--cvc-space-4);
}

.cvc-goal-card .cvc-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.cvc-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cvc-space-2);
    margin-top: 0.4rem;
}

.cvc-card__actions form {
    margin: 0;
}

/* --- Badges trạng thái (status) --- */
.cvc-badge--status-draft,
.cvc-badge--status-new {
    background: #e5e7eb;
    color: #212731;
}

.cvc-badge--status-active,
.cvc-badge--status-interested {
    background: #dcfce7;
    color: #166534;
}

.cvc-badge--status-paused,
.cvc-badge--status-seen {
    background: #fef3c7;
    color: #92400e;
}

.cvc-badge--status-completed {
    background: #dbeafe;
    color: #1e40af;
}

.cvc-badge--status-archived,
.cvc-badge--status-dismissed {
    background: #f3f4f6;
    color: #42464f;
}

.cvc-badge--expired {
    background: #fee2e2;
    color: #991b1b;
}

/* --- Recommendations --- */
.cvc-recommendation-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cvc-recommendation-item__reason {
    font-size: 0.85rem;
    color: var(--cvc-color-text-subtle);
    margin: 0;
}

/* --- Learning path --- */
.cvc-learning-path-steps {
    display: flex;
    flex-direction: column;
    gap: var(--cvc-space-2);
    padding-left: 0;
    list-style: none;
    counter-reset: cvc-step;
}

.cvc-learning-path-steps__item {
    counter-increment: cvc-step;
    display: flex;
    align-items: center;
    gap: var(--cvc-space-3);
    padding: 0.75rem 1rem;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
}

.cvc-learning-path-steps__item::before {
    content: counter(cvc-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--cvc-color-primary-tint);
    color: var(--cvc-color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- Notifications --- */
.cvc-notification-list {
    display: flex;
    flex-direction: column;
    gap: var(--cvc-space-2);
}

.cvc-notification-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cvc-space-3);
    padding: var(--cvc-space-4);
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
}

.cvc-notification-item.is-unread {
    background: var(--cvc-color-primary-tint);
    border-color: var(--cvc-color-primary);
}

.cvc-notification-item__body {
    flex: 1 1 20rem;
}

.cvc-notification-item__title {
    margin: 0 0 0.25rem;
}

/* --- Table (lịch sử làm bài) --- */
.cvc-table-wrap {
    overflow-x: auto;
}

.cvc-table {
    width: 100%;
    border-collapse: collapse;
}

.cvc-table th,
.cvc-table td {
    padding: 0.65rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--cvc-color-border);
    white-space: nowrap;
}

.cvc-table th {
    font-size: 0.85rem;
    color: var(--cvc-color-text-subtle);
}

/* --- Exam attempt (làm bài / kết quả) --- */
.cvc-exam-status-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cvc-space-3);
    padding: var(--cvc-space-3) var(--cvc-space-4);
    background: var(--cvc-color-bg);
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius);
    box-shadow: var(--cvc-shadow-sm);
    margin-bottom: var(--cvc-space-4);
}

.cvc-exam-timer {
    font-weight: 700;
}

.cvc-exam-autosave {
    font-size: 0.85rem;
    color: var(--cvc-color-text-subtle);
    min-width: 6rem;
}

.cvc-exam-question-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--cvc-space-6);
}

.cvc-exam-question-nav__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
    color: var(--cvc-color-text);
    font-weight: 600;
}

.cvc-exam-question-nav__item:hover {
    border-color: var(--cvc-color-primary);
    text-decoration: none;
}

.cvc-exam-question-nav__item.is-answered {
    background: var(--cvc-color-primary-tint);
    border-color: var(--cvc-color-primary);
    color: var(--cvc-color-primary-dark);
}

.cvc-exam-question {
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius);
    padding: var(--cvc-space-4);
    margin-bottom: var(--cvc-space-4);
}

.cvc-exam-question legend {
    font-weight: 600;
    padding: 0 0.25rem;
}

.cvc-exam-question__number {
    display: inline-block;
    margin-right: 0.4rem;
    color: var(--cvc-color-primary);
}

.cvc-exam-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: var(--cvc-space-3);
}

.cvc-exam-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--cvc-color-border);
    border-radius: var(--cvc-radius-sm);
    cursor: pointer;
}

.cvc-exam-option:hover {
    border-color: var(--cvc-color-primary);
}

.cvc-exam-option input {
    margin-top: 0.2rem;
}

.cvc-exam-submit-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cvc-space-3);
    padding: var(--cvc-space-4);
    background: var(--cvc-color-bg-alt);
    border-radius: var(--cvc-radius);
}

/* --- Exam result / review --- */
.cvc-exam-result {
    padding: var(--cvc-space-6);
    background: var(--cvc-color-bg-alt);
    border-radius: var(--cvc-radius);
    margin-bottom: var(--cvc-space-6);
    text-align: center;
}

.cvc-exam-result__score {
    font-size: 2rem;
    font-weight: 800;
    margin: 0.25rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.cvc-exam-question--review.is-correct {
    border-color: #16a34a;
}

.cvc-exam-question--review.is-incorrect {
    border-color: #dc2626;
}

.cvc-exam-options--review .cvc-exam-option {
    cursor: default;
    display: block;
}

.cvc-exam-options--review .is-correct-answer {
    background: #dcfce7;
    border-color: #16a34a;
}

.cvc-exam-options--review .is-wrong-choice {
    background: #fee2e2;
    border-color: #dc2626;
}

.cvc-exam-question__explanation {
    margin-top: var(--cvc-space-3);
    padding-top: var(--cvc-space-3);
    border-top: 1px dashed var(--cvc-color-border);
    color: var(--cvc-color-text-muted);
}

/* --- Responsive --- */
/*
 * Nav chính có 7 item ("Văn bản pháp luật", "Thi trắc nghiệm" khá dài) -
 * cho header xuống dòng sớm từ tablet để nav có đủ chiều rộng tự wrap
 * (site-nav ul đã có flex-wrap), tránh bị bóp sát vào logo.
 */
@media (max-width: 900px) {
    .site-header__inner {
        flex-wrap: wrap;
        align-items: center;
    }

    /* Chỉ áp dụng hành vi collapse khi JS đã chạy (class .js được thêm
       ngay trong <head>) - không JS thì nav vẫn hiện đầy đủ như cũ. */
    html.js .site-nav-toggle {
        display: inline-flex;
    }

    html.js .site-nav {
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
    }

    html.js .site-nav.is-open {
        max-height: 600px;
    }

    html.js .site-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0;
    }

    html.js .site-nav a {
        display: block;
        padding: 0.75rem 0.25rem;
    }

    .site-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-header__auth {
        margin-left: 0;
        padding: 0.5rem 0.25rem;
        border-top: 1px solid var(--cvc-color-border);
    }
}

/* --- Phase 10: dashboard / exam-taking mobile --- */
@media (max-width: 800px) {
    .cvc-account-layout {
        grid-template-columns: 1fr;
    }

    .cvc-account-nav {
        position: static;
    }

    .cvc-account-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .cvc-account-nav a {
        padding: 0.4rem 0.65rem;
        font-size: 0.9rem;
    }

    .cvc-account-nav__logout {
        border-top: none;
        margin-top: 0.35rem;
    }
}

@media (max-width: 640px) {
    .cvc-form--auth {
        padding: var(--cvc-space-4);
    }

    .cvc-form--inline {
        flex-direction: column;
        align-items: stretch;
    }

    .cvc-exam-status-bar {
        position: static;
        flex-direction: column;
        align-items: flex-start;
    }

    .cvc-exam-question-nav {
        gap: 0.3rem;
    }

    .cvc-exam-question-nav__item {
        width: 2rem;
        height: 2rem;
    }

    .cvc-exam-submit-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .cvc-table th,
    .cvc-table td {
        white-space: normal;
    }

    .cvc-notification-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .cvc-detail-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cvc-detail-actions form,
    .cvc-detail-actions a {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .cvc-search-form {
        flex-direction: column;
        max-width: none;
    }

    .cvc-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .cvc-filter-form__field input,
    .cvc-filter-form__field select {
        width: 100%;
    }

    .cvc-card-grid {
        grid-template-columns: 1fr;
    }

    .cvc-lesson-nav {
        flex-direction: column;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--cvc-space-6);
    }

    .cvc-hero {
        padding: 2.5rem 0;
    }

    .cvc-section {
        padding: 2rem 0;
    }

    .cvc-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cvc-hero__visual {
        display: none;
    }

    .cvc-value-strip {
        flex-direction: column;
        gap: var(--cvc-space-4);
    }

    .cvc-value-strip__item {
        flex-direction: row;
        align-items: center;
        border-left: none;
        border-top: 1px solid var(--cvc-color-border);
        padding: var(--cvc-space-4) 0 0;
    }

    .cvc-value-strip__item:first-child {
        border-top: none;
        padding-top: 0;
    }

    .cvc-value-strip__icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .cvc-cta-banner {
        padding: var(--cvc-space-8) 0;
    }

    /* Ảnh skyline bên phải (Phase 10A.10) ẩn khi banner chuyển sang layout
       1 cột dưới 640px - tránh đè lên quote text lúc này đã full-width,
       cùng pattern với .cvc-hero__visual ẩn ở mobile. */
    .cvc-cta-banner__photo {
        display: none;
    }

    .cvc-cta-banner__inner {
        flex-direction: column;
        text-align: center;
    }

    .cvc-cta-banner__main {
        max-width: none;
    }

    .cvc-cta-banner__desc {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .cvc-cta-banner__actions {
        justify-content: center;
    }

    .cvc-cta-banner__quote {
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding: var(--cvc-space-4) 0 0;
        text-align: center;
    }

    .cvc-resource-grid--footer {
        grid-template-columns: 1fr;
    }
}

/* Sidebar tuyển dụng xuống dưới course/resource trên tablet trở xuống -
   2 cột cạnh nhau chỉ hợp lý ở desktop rộng (Phần 16/17). */
@media (max-width: 1024px) {
    .cvc-home-split {
        grid-template-columns: 1fr;
    }

    .cvc-goal-section__grid {
        grid-template-columns: 1fr;
    }

    .cvc-goal-cta-card .cvc-btn {
        align-self: stretch;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .cvc-goal-direction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet (768-1024px, benchmark Phần 5 BASELINE SCREENSHOT AUDIT) - hero
   xếp dọc (visual không còn absolute ở dưới 1025px - xem base rule của
   .cvc-hero__visual), minh họa co lại vừa đủ, tránh bóp chật search box.
   Đứng trước .container trong DOM nên tự render phía trên chữ, không cần
   order (Phase 10A.11). */
@media (max-width: 1024px) and (min-width: 641px) {
    .cvc-hero__visual {
        max-width: 320px;
        margin: 0 auto var(--cvc-space-8);
    }

    /* Card nổi (15rem) rộng hơn cả minh họa đã co lại (280px) ở tablet -
       thay vì ẩn hẳn (Phase 10A.9, lúc minh họa còn là SVG có thể để lộ
       vùng trống không cần che), giờ minh họa là ẢNH THẬT (Phase 10A.10)
       và vùng dưới-phải ảnh đã được làm mờ sẵn để nhường chỗ cho đúng
       card này - nếu ẩn card, vùng mờ đó lộ ra như 1 vệt mờ vô nghĩa.
       Chuyển card từ absolute-overlay sang xếp bên dưới ảnh (flow bình
       thường, full width) thay vì che chồng lên minh họa đã co nhỏ. */
    .cvc-hero-feature-card {
        position: static;
        width: 100%;
        max-width: 280px;
        margin: var(--cvc-space-3) auto 0;
    }

    .cvc-value-strip {
        flex-wrap: wrap;
    }

    .cvc-value-strip__item {
        flex: 1 1 40%;
    }
}

/* ================================================================
 * HOMEPAGE V2 — FINAL VISUAL INTEGRATION
 * Production assets are pre-cut; no runtime cropping/screenshot slicing.
 * Scoped to homepage so existing inner templates remain unchanged.
 * ================================================================ */
.cvc-home-v2 .cvc-hero {
    min-height: 560px;
    padding: 0;
    display: flex;
    align-items: stretch;
    background: linear-gradient(110deg, #f7fbff 0%, #eef6ff 54%, #e4f1ff 100%);
    border-bottom: 0;
}

.cvc-home-v2 .cvc-hero > .container {
    width: min(1240px, calc(100% - 40px));
    margin-inline: auto;
    display: flex;
    align-items: center;
    min-height: 560px;
}

.cvc-home-v2 .cvc-hero__content {
    max-width: 650px;
    /* Phase 10A.15 QA: giảm padding dọc (72/58 → 40/32) - nội dung hero
       trước đó cao 786px (đo DOM thật), vượt xa mục tiêu 500-620px chỉ vì
       khoảng đệm/margin quá rộng, không phải vì thiếu nội dung. */
    padding: 40px 0 32px;
}

.cvc-home-v2 .cvc-hero__eyebrow {
    margin-bottom: 10px;
    letter-spacing: .03em;
}

.cvc-home-v2 .cvc-hero h1 {
    max-width: 700px;
    margin: 0;
    /* text-wrap:balance (Phase 10A.15 QA) - tự cân bằng số từ mỗi dòng
       khi trình duyệt hỗ trợ, tránh vỡ dòng kiểu "Công chức, viên" /
       "chức" ở màn hẹp (390px) - không hỗ trợ thì bỏ qua an toàn (vẫn
       wrap tự nhiên như cũ), không cần đổi HTML/thêm <br>. */
    text-wrap: balance;
    /* Giảm từ clamp(2.55rem,4vw,4.25rem) - ở 1440px cũ ra 57.6px, khiến
       H1 (2 cấp text, dòng accent tự nhiên xuống 2 dòng) cao tới 179px,
       chiếm gần 1/4 chiều cao hero. Vẫn "lớn" (44.8px ở 1440px) nhưng
       không còn áp đảo phần search/CTA/trust bên dưới. */
    font-size: clamp(2.3rem, 3.3vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.cvc-home-v2 .cvc-hero__accent {
    display: inline-block;
    margin-top: 8px;
    background: linear-gradient(90deg, #0a58ca, #1e82ef);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cvc-home-v2 .cvc-hero__lead {
    max-width: 620px;
    margin-top: 14px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.cvc-home-v2 .cvc-hero .cvc-search-form {
    max-width: 610px;
    margin-top: 18px;
}

.cvc-home-v2 .cvc-hero__quick-search {
    margin-top: 10px;
}

.cvc-home-v2 .cvc-hero__actions {
    margin-top: 16px;
}

.cvc-home-v2 .cvc-hero__trust {
    margin-top: 14px;
}

.cvc-home-v2 .cvc-hero__visual {
    z-index: 0;
    width: min(57vw, 900px);
}

.cvc-home-v2 .cvc-hero__visual-inner {
    overflow: hidden;
}

.cvc-home-v2 .cvc-hero__illustration {
    object-position: 62% center;
}

.cvc-home-v2 .cvc-hero__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(247,251,255,.98) 0%, rgba(247,251,255,.58) 9%, rgba(247,251,255,0) 32%), linear-gradient(0deg, rgba(247,251,255,.12), rgba(247,251,255,0));
    pointer-events: none;
}

/* position:absolute lặp lại tường minh ở đây (Phase 10A.13 QA fix) - bản
   base .cvc-hero-feature-card đã có position:absolute, nhưng 1 rule
   tablet cũ (10A.10, @media 641-1024px) từng đổi nó thành position:static
   để xếp dưới ảnh khi ảnh minh họa chỉ cao vài trăm px tự động theo nội
   dung. Ở Homepage V2, .cvc-hero__visual tại các breakpoint ≤1024px giờ
   có height CỐ ĐỊNH (330px/270px/235px) - card ở chế độ static sẽ tràn
   ra ngoài khối cố định đó và đè lên H1/eyebrow bên dưới (bug thật, phát
   hiện qua screenshot QA tại 1024px). Khai báo lại absolute ở đây (đặc
   hiệu hơn rule tablet cũ) để card luôn nổi đúng vị trí trong ảnh, mọi
   breakpoint ≥481px. */
.cvc-home-v2 .cvc-hero-feature-card {
    position: absolute;
    z-index: 3;
    right: 44px;
    bottom: 42px;
    width: 250px;
    backdrop-filter: blur(14px);
    background: rgba(255,255,255,.9);
}

.cvc-home-v2 .cvc-section--tight {
    padding-top: 0;
    padding-bottom: 0;
}

.cvc-home-v2 .cvc-value-panel {
    position: relative;
    z-index: 5;
    margin-top: -1px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 12px 35px rgba(13,68,130,.08);
}

.cvc-home-v2 .cvc-value-strip {
    padding: 20px 24px;
    background: rgba(255,255,255,.94);
}

.cvc-home-v2 .cvc-value-strip__item {
    min-height: 58px;
}

.cvc-home-v2 .cvc-journey-section {
    padding-top: 58px;
    padding-bottom: 54px;
    background: linear-gradient(180deg, #eff7ff 0%, #f8fbff 100%);
}

.cvc-home-v2 .cvc-journey-section .cvc-section__header {
    margin-bottom: 30px;
}

.cvc-home-v2 .cvc-journey {
    gap: 0;
}

.cvc-home-v2 .cvc-journey__step {
    position: relative;
    flex: 1;
}

.cvc-home-v2 .cvc-journey__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 58%;
    width: 84%;
    border-top: 1px dashed #9ec6f6;
    pointer-events: none;
}

.cvc-home-v2 .cvc-journey__link {
    position: relative;
    z-index: 1;
    min-height: 130px;
    padding: 0 14px;
    background: transparent;
}

.cvc-home-v2 .cvc-journey__icon {
    width: 56px;
    height: 56px;
    background: #fff;
    border: 1px solid #cfe2fa;
    box-shadow: 0 8px 20px rgba(22,91,167,.08);
}

.cvc-home-v2 #khoa-hoc {
    padding-top: 60px;
    padding-bottom: 64px;
}

.cvc-home-v2 .cvc-home-split {
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 32px;
}

.cvc-home-v2 .cvc-home-main .cvc-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.cvc-home-v2 .cvc-card--course {
    overflow: hidden;
    border: 1px solid #dbe8f7;
    box-shadow: 0 8px 24px rgba(22,70,120,.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cvc-home-v2 .cvc-card--course:hover {
    transform: translateY(-4px);
    border-color: #b9d5f5;
    box-shadow: 0 16px 32px rgba(22,70,120,.12);
}

.cvc-home-v2 .cvc-card--course .cvc-card__media {
    aspect-ratio: 4 / 3;
}

.cvc-home-v2 .cvc-card--course .cvc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cvc-home-v2 .cvc-recruitment-panel {
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(22,70,120,.07);
}

.cvc-home-v2 .cvc-recruitment-panel__banner {
    margin: -18px -18px 18px;
}

.cvc-home-v2 .cvc-recruitment-panel__banner img {
    aspect-ratio: 16 / 7;
}

.cvc-home-v2 .cvc-recruitment-row {
    border: 1px solid #e3edf8;
    border-radius: 14px;
    margin: 0 0 10px;
    padding: 12px;
    background: #fff;
}

.cvc-home-v2 .cvc-goal-section {
    background: #f1f7ff;
}

.cvc-home-v2 .cvc-goal-section__grid {
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 24px;
}

.cvc-home-v2 .cvc-goal-direction-grid {
    gap: 14px;
}

.cvc-home-v2 .cvc-goal-direction-card,
.cvc-home-v2 .cvc-goal-cta-card {
    border: 1px solid #dce9f7;
    box-shadow: 0 8px 22px rgba(22,70,120,.05);
}

.cvc-home-v2 .cvc-goal-cta-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(234,244,255,.96));
}

/* Phase 10A.16: đổi từ goal-journey.jpg (ảnh chụp người leo bậc thang,
   không thật sự khớp ngữ nghĩa "mục tiêu") sang illustration 03_goal_target
   (cắt sẵn từ bộ Homepage V2 cut assets - bia mục tiêu + sách, đúng chủ đề
   "Bạn đang hướng đến điều gì?" của section này hơn). background-position
   top để phần mục tiêu/sách (nửa trên ảnh) hiện rõ trong khung tròn, nửa
   dưới có caption chữ raster bị khung tròn + opacity thấp che bớt tự
   nhiên (không dùng caption đó thay chữ thật). */
.cvc-home-v2 .cvc-goal-cta-card::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -70px;
    width: 230px;
    height: 190px;
    background: url('assets/images/homepage-v2/ILLUSTRATIONS/03_goal_target.webp') top center / cover no-repeat;
    opacity: .22;
    border-radius: 50%;
    pointer-events: none;
}

.cvc-home-v2 .cvc-cta-banner {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    background: #0756b8;
}

.cvc-home-v2 .cvc-cta-banner__photo {
    position: absolute;
    inset: 0;
    opacity: .32;
    pointer-events: none;
}

.cvc-home-v2 .cvc-cta-banner__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cvc-home-v2 .cvc-cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2,54,125,.94), rgba(4,96,196,.72) 60%, rgba(4,72,150,.62));
    pointer-events: none;
}

.cvc-home-v2 .cvc-cta-banner__inner {
    position: relative;
    z-index: 2;
}

@media (max-width: 1200px) {
    .cvc-home-v2 .cvc-hero__content { max-width: 590px; }
    .cvc-home-v2 .cvc-hero__visual { width: 54vw; }
    .cvc-home-v2 .cvc-home-split { grid-template-columns: minmax(0,1fr) 330px; }
}

@media (max-width: 1024px) {
    .cvc-home-v2 .cvc-hero {
        display: block;
    }
    .cvc-home-v2 .cvc-hero > .container {
        min-height: 0;
        width: min(760px, calc(100% - 32px));
    }
    .cvc-home-v2 .cvc-hero__visual {
        display: block;
        position: relative;
        inset: auto;
        width: 100%;
        max-width: none;
        height: 330px;
        margin: 0;
        order: -1;
    }
    .cvc-home-v2 .cvc-hero__visual-inner { height: 100%; }
    .cvc-home-v2 .cvc-hero__illustration {
        height: 100%;
        object-position: center 28%;
    }
    .cvc-home-v2 .cvc-hero__visual::before,
    .cvc-home-v2 .cvc-hero__visual::after { display: none; }
    .cvc-home-v2 .cvc-hero__content {
        max-width: none;
        padding: 44px 0 48px;
    }
    .cvc-home-v2 .cvc-home-split { grid-template-columns: 1fr; }
    .cvc-home-v2 .cvc-home-main .cvc-card-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 767px) {
    .cvc-home-v2 .cvc-hero__visual { height: 270px; }
    .cvc-home-v2 .cvc-hero__content { padding: 34px 0 40px; }
    .cvc-home-v2 .cvc-hero h1 { font-size: clamp(2.15rem, 9vw, 3rem); }
    .cvc-home-v2 .cvc-hero__lead { font-size: 1rem; }
    .cvc-home-v2 .cvc-hero-feature-card {
        right: 14px;
        bottom: 14px;
        width: min(235px, calc(100% - 28px));
    }
    .cvc-home-v2 .cvc-home-main .cvc-card-grid--3 {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 14px;
        padding: 4px 2px 12px;
        scrollbar-width: thin;
    }
    .cvc-home-v2 .cvc-home-main .cvc-card-grid--3 > * {
        flex: 0 0 min(82vw, 330px);
        scroll-snap-align: start;
    }
    .cvc-home-v2 .cvc-journey {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
    }
    .cvc-home-v2 .cvc-journey__step { flex: 0 0 190px; scroll-snap-align: start; }
    .cvc-home-v2 .cvc-journey__step:not(:last-child)::after { display: none; }
    .cvc-home-v2 .cvc-goal-section__grid { grid-template-columns: 1fr; }
    .cvc-home-v2 .cvc-goal-direction-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cvc-home-v2 .cvc-cta-banner__inner { text-align: center; }
    .cvc-home-v2 .cvc-cta-banner__actions { justify-content: center; }
}

@media (max-width: 480px) {
    .cvc-home-v2 .cvc-hero__visual { height: 235px; }
    .cvc-home-v2 .cvc-hero__illustration { object-position: 62% center; }
    .cvc-home-v2 .cvc-hero-feature-card { display: none; }
    .cvc-home-v2 .cvc-goal-direction-grid { grid-template-columns: 1fr 1fr; }
    .cvc-home-v2 .cvc-value-strip { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .cvc-home-v2 .cvc-card--course { transition: none; }
    .cvc-home-v2 .cvc-card--course:hover { transform: none; }
}

/* ============================================================
   Phase 10A.18 - Visual Polish & 99% Visual Parity
   ============================================================ */

/* Hero Quote Badge */
.cvc-hero__illustration-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.cvc-hero__quote-tag {
    position: absolute;
    top: 24px;
    left: 36px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 30px;
    padding: 8px 22px;
    box-shadow: 0 12px 28px -6px rgba(2, 132, 199, 0.22), 0 4px 12px rgba(0, 0, 0, 0.06);
    z-index: 3;
    animation: quotePulse 4s ease-in-out infinite alternate;
}

.cvc-hero__quote-text {
    font-family: var(--cvc-font-heading, inherit);
    font-style: italic;
    font-weight: 700;
    font-size: 1.02rem;
    color: #015e8e;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.cvc-hero-feature-card {
    animation: floatAnimation 5s ease-in-out infinite alternate;
}

@keyframes floatAnimation {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-12px); }
}

@keyframes quotePulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.03); }
}

/* Course Card Flag Badges */
.cvc-badge--flag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 14px;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cvc-badge--flag-red,
.cvc-badge--flag-bán-chạy {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.cvc-badge--flag-green,
.cvc-badge--flag-mới {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.cvc-badge--flag-cyan,
.cvc-badge--flag-miễn-phí {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
}

/* Recruitment Status Badges & Emblems */
.cvc-badge--status-active {
    background: #dcfce7;
    color: #116631;
    border: 1px solid #bbf7d0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.cvc-badge--status-expired {
    background: #f1f5f9;
    color: #3e4755;
    border: 1px solid #e2e8f0;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
}

.cvc-recruitment-row--expired {
    opacity: 0.8;
}

.cvc-recruitment-row__avatar--red,
.cvc-recruitment-row__avatar--blue,
.cvc-recruitment-row__avatar--red_gold {
    background: transparent !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Community Panel Styling */
.cvc-community-panel {
    background: var(--cvc-color-bg, #ffffff);
    border: 1px solid var(--cvc-color-border, #e2e8f0);
    border-radius: var(--cvc-radius-lg, 16px);
    padding: 22px;
    margin-top: 24px;
    box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.05);
}

.cvc-community-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.cvc-community-panel__header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cvc-color-heading, #0f172a);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cvc-community-panel__icon {
    color: #015e8e;
    display: inline-flex;
}

.cvc-community-panel__subtitle {
    font-size: 0.85rem;
    color: var(--cvc-color-text-muted, #3e4755);
    margin: 0 0 16px 0;
}

.cvc-community-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cvc-community-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--cvc-color-bg-alt, #f8fafc);
    border: 1px solid transparent;
}

.cvc-community-item:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.cvc-community-item__avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.28);
}

.cvc-community-item__content {
    flex: 1;
    min-width: 0;
}

.cvc-community-item__title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 4px 0;
}

.cvc-community-item__title a {
    color: var(--cvc-color-heading, #1d2738);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cvc-community-item__title a:hover {
    color: #015e8e;
}

.cvc-community-item__meta {
    font-size: 0.78rem;
    color: #3e4755;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Section Title & Subtitle Styling */
.cvc-section-title-wrap {
    margin-bottom: 20px;
}

.cvc-section-subtitle {
    font-size: 0.92rem;
    color: #3e4755;
    margin: 4px 0 0 0;
}

/* Footer 4 Columns Layout */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 36px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer__links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.site-footer__links a:hover {
    color: #ffffff;
    padding-left: 4px;
}

.site-footer__social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.site-footer__social-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

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

.site-footer__social-btn--fb:hover { background: #1877f2; }
.site-footer__social-btn--yt:hover { background: #ff0000; }
.site-footer__social-btn--zalo:hover { background: #0068ff; }
.zalo-badge { font-weight: 700; font-size: 0.72rem; }

.site-footer__input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 3px 3px 3px 14px;
}

.site-footer__input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 0.88rem;
    outline: none;
}

.site-footer__input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.site-footer__newsletter-submit-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0284c7;
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.site-footer__newsletter-submit-btn:hover {
    background: #0369a1;
    transform: scale(1.05);
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer__motto {
    margin: 0;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .cvc-hero__quote-tag {
        top: 14px;
        left: 14px;
        padding: 6px 14px;
    }
    .cvc-hero__quote-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 640px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
    .site-footer__bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* Header Auth & Bell Styling */
.site-header__auth {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.site-header__bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #1f2734;
    transition: background-color 0.15s ease;
}

.site-header__bell:hover {
    background: #e2e8f0;
    color: #015e8e;
}

.cvc-notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1.5px solid #ffffff;
    line-height: 1;
}

.cvc-btn--outline {
    background: transparent;
    border: 1.5px solid #0284c7;
    color: #015e8e;
    border-radius: 20px;
    font-weight: 600;
    padding: 0.4rem 1.2rem;
    min-height: 36px;
    font-size: 0.88rem;
}

.cvc-btn--outline:hover {
    background: #0284c7;
    color: #ffffff;
    text-decoration: none;
}

.site-header__auth .cvc-btn--primary {
    border-radius: 20px;
    padding: 0.4rem 1.2rem;
    min-height: 36px;
    font-size: 0.88rem;
}

/* Section Header Subtitle */
.cvc-section__header-subtitle {
    font-size: 0.88rem;
    font-weight: 400;
    color: #3e4755;
    margin-left: 10px;
    display: inline-block;
}

/* Course Card Media & Flags */
.cvc-card__media-flags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.cvc-card__meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.82rem;
    color: #3e4755;
    margin: 10px 0 16px;
}

/* ==========================================================================
   EXECUTIVE PRO COMPONENTS & INTERACTIVE WIDGETS
   ========================================================================== */

/* --- 1. Top Announcement Ticker --- */
.cvc-top-ticker {
    background: #091e42;
    color: #e2e8f0;
    font-size: 0.8rem;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 101;
}

.cvc-top-ticker__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cvc-top-ticker__left {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.cvc-top-ticker__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0284c7;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.cvc-top-ticker__dot {
    width: 6px;
    height: 6px;
    background: #38bdf8;
    border-radius: 50%;
    box-shadow: 0 0 6px #38bdf8;
    animation: cvcPulse 1.8s infinite;
}

@keyframes cvcPulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

.cvc-top-ticker__text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #cbd5e1;
}

.cvc-top-ticker__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    font-size: 0.78rem;
}

.cvc-top-ticker__right strong {
    color: #fbbf24;
}

.cvc-top-ticker__ai-btn {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: none;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cvc-top-ticker__ai-btn:hover {
    background: linear-gradient(135deg, #0369a1, #075985);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .cvc-top-ticker__right {
        display: none;
    }
}

/* --- 2. Strategic Partners Marquee --- */
.cvc-partners-marquee {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 0;
    overflow: hidden;
}

.cvc-partners-marquee__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #3e4755;
    text-align: center;
    margin-bottom: 12px;
}

.cvc-partners-marquee__track-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
}

.cvc-partners-marquee__track {
    display: flex;
    align-items: center;
    gap: 40px;
    white-space: nowrap;
    animation: cvcMarquee 28s linear infinite;
    will-change: transform;
}

.cvc-partners-marquee__track-wrap:hover .cvc-partners-marquee__track {
    animation-play-state: paused;
}

@keyframes cvcMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

.cvc-partners-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1f2734;
    background: #ffffff;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cvc-partners-marquee__icon {
    font-size: 1rem;
}

/* --- 3. Career Roadmap Section --- */
.cvc-roadmap-section {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 60px 0;
}

.cvc-roadmap-section h2 {
    color: #ffffff;
}

.cvc-roadmap-section .cvc-section-subtitle {
    color: #94a3b8;
}

.cvc-badge--gold-pill {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 12px;
}

.cvc-roadmap-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0 24px;
}

.cvc-roadmap-tab {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cvc-roadmap-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.cvc-roadmap-tab.is-active {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
}

.cvc-roadmap-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.cvc-roadmap-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.cvc-roadmap-step {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid #0284c7;
}

.cvc-roadmap-step__num {
    font-size: 0.75rem;
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.cvc-roadmap-step__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
}

.cvc-roadmap-step__desc {
    font-size: 0.88rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

/* --- 4. AI Quiz Simulator Section --- */
.cvc-quiz-simulator-section {
    background: #f8fafc;
    padding: 60px 0;
}

.cvc-quiz-card {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 30px;
    background: #ffffff;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
}

@media (max-width: 900px) {
    .cvc-quiz-card {
        grid-template-columns: 1fr;
    }
}

.cvc-quiz-card__left h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    margin: 12px 0 16px;
    line-height: 1.3;
}

.cvc-badge--azure {
    background: #e0f2fe;
    color: #015e8e;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.78rem;
    display: inline-block;
}

.cvc-quiz-card__features {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.cvc-quiz-card__features li {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2734;
    margin-bottom: 8px;
}

.cvc-quiz-widget {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.cvc-quiz-widget__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3e4755;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.cvc-quiz-widget__question {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 18px;
    line-height: 1.45;
}

.cvc-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cvc-quiz-option {
    text-align: left;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1f2734;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.cvc-quiz-option:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.cvc-quiz-option.correct {
    background: #f0fdf4 !important;
    border-color: #22c55e !important;
    color: #116631 !important;
    font-weight: 700;
}

.cvc-quiz-option.incorrect {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #af1b1b !important;
}

.cvc-quiz-feedback {
    margin-top: 16px;
    padding: 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.cvc-quiz-feedback.is-hidden {
    display: none;
}

.cvc-quiz-feedback--correct {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.cvc-quiz-feedback--incorrect {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.cvc-quiz-widget__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #3e4755;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.cvc-btn-link {
    background: none;
    border: none;
    color: #015e8e;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 0.78rem;
}

.cvc-btn-link:hover {
    text-decoration: underline;
}

/* --- 5. Executive Modals --- */
.cvc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cvc-modal.is-hidden {
    display: none !important;
}

.cvc-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
}

.cvc-modal__dialog {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    padding: 32px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    z-index: 2;
    animation: cvcModalIn 0.25s ease-out forwards;
}

.cvc-modal__dialog--search {
    max-width: 680px;
}

@keyframes cvcModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cvc-modal__close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    color: #3e4755;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cvc-modal__close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.cvc-modal__header {
    text-align: center;
    margin-bottom: 24px;
}

.cvc-modal__icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.cvc-modal__icon--success {
    width: 56px;
    height: 56px;
    background: #dcfce7;
    color: #0e672f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.8rem;
    font-weight: 700;
}

.cvc-modal__header h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
}

.cvc-modal__header p {
    font-size: 0.88rem;
    color: #3e4755;
    margin: 0;
}

.cvc-form-group {
    margin-bottom: 18px;
}

.cvc-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2734;
    margin-bottom: 6px;
}

.cvc-form-group input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.92rem;
    transition: border-color 0.2s ease;
}

.cvc-form-group input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.cvc-btn--block {
    width: 100%;
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 10px;
}

.cvc-modal__search-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.cvc-modal__search-row input {
    flex: 1;
    padding: 12px 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 1rem;
}

.cvc-modal__search-row input:focus {
    outline: none;
    border-color: #0284c7;
}

.cvc-modal__quick-tags {
    margin-top: 20px;
}

.cvc-modal__quick-tags p {
    font-size: 0.82rem;
    color: #3e4755;
    margin: 0 0 10px;
    font-weight: 600;
}

.cvc-modal__tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cvc-tag {
    background: #f1f5f9;
    color: #1f2734;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cvc-tag:hover {
    background: #e2e8f0;
    color: #015e8e;
    text-decoration: none;
}

/* === Hiệu ứng xuất hiện khi cuộn trang (scroll reveal) ===
   assets/js/scroll-reveal.js chỉ gắn class .cvc-reveal cho khối nằm
   dưới màn hình đầu tiên - nội dung luôn hiển thị đủ nếu JS lỗi/bị chặn. */
.cvc-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.cvc-reveal.cvc-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .cvc-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =====================================================================
   PHASE 11 (2026-10-03) - tiến độ lộ trình, Recruitment Dossier, bảo mật
   tài khoản, AI Explanation, Homepage Next-Gen. Toàn bộ dùng token có sẵn.
   ===================================================================== */

/* --- Tiến độ lộ trình --- */
.cvc-progress {
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.3);
    overflow: hidden;
    margin: 0.5rem 0 var(--cvc-space-3);
}

.cvc-progress__bar {
    display: block;
    height: 100%;
    background: var(--cvc-success, #10B981);
    transition: width 0.4s ease;
}

.cvc-learning-path-steps__item {
    flex-wrap: wrap;
}

.cvc-learning-path-steps__item--completed {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.45);
}

.cvc-learning-path-steps__item--completed > a,
.cvc-learning-path-steps__item--skipped > a {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.cvc-learning-path-steps__item--skipped {
    opacity: 0.65;
}

.cvc-learning-path-steps__item--in_progress {
    border-color: var(--cvc-color-primary);
}

.cvc-learning-path-steps__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
}

.cvc-learning-path-steps__actions form {
    margin: 0;
}

/* --- Bảo mật tài khoản --- */
.cvc-security-list {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 var(--cvc-space-3);
}

.cvc-security-list > div {
    display: flex;
    justify-content: space-between;
    gap: var(--cvc-space-3);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.cvc-security-list dt {
    color: #94a3b8;
}

.cvc-security-list dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

/* --- Exam: đáp án đúng sau khi nộp bài --- */
.answer-tile.is-correct-answer {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35);
}

/* --- Homepage Next-Gen: token chính thức (spec mục 15) --- */
:root {
    --cvc-midnight: #020C1B;
    --cvc-navy: #0A192F;
    --cvc-gold: #F59E0B;
    --cvc-gold-light: #FBBF24;
    --cvc-cyan: #06B6D4;
    --cvc-cyan-light: #22D3EE;
    --cvc-success: #10B981;
    --cvc-danger: #F43F5E;
}

.cvc-pulse-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--cvc-success);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: cvc-pulse 1.8s infinite;
}

@keyframes cvc-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.cvc-ticker__track {
    display: flex;
    gap: 2.5rem;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    animation: cvc-ticker 60s linear infinite;
}

.cvc-ticker:hover .cvc-ticker__track,
.cvc-ticker:focus-within .cvc-ticker__track {
    animation-play-state: paused;
}

@keyframes cvc-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.cvc-roadmap__tab {
    background: rgba(10, 25, 47, 0.8);
    border-color: rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
}

.cvc-roadmap__tab[aria-selected="true"] {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--cvc-gold);
    color: var(--cvc-gold-light);
}

.cvc-roadmap__tab:focus-visible,
.cvc-quiz-opt:focus-visible {
    outline: 2px solid var(--cvc-cyan-light);
    outline-offset: 2px;
}

.cvc-quiz-opt.is-correct {
    border-color: var(--cvc-success) !important;
    background: rgba(16, 185, 129, 0.12);
}

.cvc-quiz-opt.is-wrong {
    border-color: var(--cvc-danger) !important;
    background: rgba(244, 63, 94, 0.12);
}

.cvc-legal-dialog {
    max-width: min(34rem, calc(100vw - 2rem));
    padding: 1.5rem;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 1.25rem;
    background: var(--cvc-navy);
    color: #e2e8f0;
}

.cvc-legal-dialog::backdrop {
    background: rgba(2, 12, 27, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    .cvc-ticker__track,
    .cvc-pulse-dot {
        animation: none;
    }

    .cvc-ticker {
        overflow-x: auto;
    }
}

/* ==========================================================================
   Phase 12 - Các mục trong trang tài khoản nằm trên nền tối (#0A192F) nhưng
   thẻ .cvc-card/.cvc-form dùng token nền sáng -> chữ tối trên nền tối, thẻ
   trắng lạc tông. Định nghĩa lại token màu trong phạm vi khung tài khoản.
   ========================================================================== */
.cvc-account-section-wrapper {
    /* 16/10/2026: giao diện văn bản - khung tài khoản nền trắng như toàn site. */
    color: var(--cvc-color-text);
}

/* Gợi ý dưới ô nhập (đăng ký, đặt lại mật khẩu). */
.cvc-form__hint {
    display: block;
}