:root {
    --ca-bg: linear-gradient(135deg, #f6efe4 0%, #fffaf2 42%, #eef6ff 100%);
    --ca-ink: #14213d;
    --ca-soft: #60708a;
    --ca-primary: #0f766e;
    --ca-primary-strong: #115e59;
    --ca-accent: #d97706;
    --ca-line: rgba(20, 33, 61, 0.1);
    --ca-surface: rgba(255, 255, 255, 0.92);
    --ca-surface-strong: #ffffff;
    --ca-shadow: 0 26px 60px rgba(15, 23, 42, 0.10);
}

* {
    box-sizing: border-box;
}

body.ca-body,
body.ca-admin-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 30%),
        radial-gradient(circle at top right, rgba(217, 119, 6, 0.10), transparent 32%),
        var(--ca-bg);
    color: var(--ca-ink);
    font-family: 'Be Vietnam Pro', sans-serif;
}

.ca-shell,
.ca-admin-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 18px 32px;
}

.ca-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.76fr);
    gap: 16px;
    align-items: start;
}

.ca-procedure-column,
.ca-ai-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.ca-topbar,
.ca-admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--ca-line);
    border-radius: 20px;
    background: var(--ca-surface);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    margin-bottom: 18px;
}

.ca-back-link,
.ca-chip,
.ca-need-card,
.ca-btn-primary,
.ca-btn-secondary {
    text-decoration: none;
}

.ca-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ca-ink);
    font-weight: 700;
}

.ca-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ca-ink);
    font-weight: 800;
    text-decoration: none;
}

.ca-topbar-brand i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-accent));
}

.ca-topbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.ca-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(15, 118, 110, 0.12);
    color: var(--ca-primary-strong);
    font-weight: 700;
}

.ca-chip.is-light {
    background: rgba(20, 33, 61, 0.05);
    border-color: rgba(20, 33, 61, 0.08);
    color: var(--ca-ink);
}

.ca-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.12);
    color: #9a5a05;
    font-weight: 800;
    margin-bottom: 12px;
}

.ca-hero,
.ca-detail-grid,
.ca-section,
.ca-admin-grid,
.ca-admin-stats {
    display: grid;
    gap: 20px;
}

.ca-hero {
    grid-template-columns: 1.2fr 0.95fr;
    margin-bottom: 22px;
}

.ca-hero.ca-hero-single {
    grid-template-columns: 1fr;
}

.ca-hero-copy,
.ca-search-card,
.ca-panel,
.ca-note-card,
.ca-admin-panel,
.ca-admin-stat-card,
.ca-detail-hero {
    background: var(--ca-surface);
    border: 1px solid var(--ca-line);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.ca-hero-copy,
.ca-search-card,
.ca-panel,
.ca-note-card,
.ca-admin-panel,
.ca-detail-hero {
    padding: 20px;
}

.ca-hero-copy h1,
.ca-detail-hero h1,
.ca-admin-topbar h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.08;
}

.ca-column-title {
    margin: 0 0 6px;
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    line-height: 1.1;
}

.ca-column-desc {
    color: var(--ca-soft);
    line-height: 1.65;
}

.ca-hero-copy p,
.ca-search-card p,
.ca-detail-hero p {
    margin: 0;
    color: var(--ca-soft);
    line-height: 1.65;
}

.ca-stat-row,
.ca-admin-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ca-stat-row {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.ca-stat-card,
.ca-admin-stat-card {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--ca-line);
}

.ca-stat-card strong,
.ca-admin-stat-card strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
}

.ca-stat-card span,
.ca-admin-stat-card span {
    color: var(--ca-soft);
    font-weight: 600;
}

.ca-search-card h2,
.ca-panel h2,
.ca-admin-panel h2,
.ca-note-card h3 {
    margin: 0 0 8px;
    font-size: 1.18rem;
    font-weight: 800;
}

.ca-search-row,
.ca-support-filter,
.ca-callback-form,
.ca-detail-actions,
.ca-action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ca-search-row {
    margin-top: 14px;
}

.ca-input,
.ca-btn-mic {
    min-height: 52px;
    border-radius: 18px;
    border: 1px solid var(--ca-line);
    background: var(--ca-surface-strong);
    font: inherit;
}

.ca-input {
    flex: 1 1 220px;
    padding: 0 16px;
    color: var(--ca-ink);
}

.ca-btn-mic,
.ca-btn-primary,
.ca-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    min-height: 52px;
    border-radius: 18px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
}

.ca-btn-mic {
    width: 52px;
    color: var(--ca-primary-strong);
}

.ca-btn-primary {
    background: linear-gradient(135deg, var(--ca-primary) 0%, var(--ca-primary-strong) 100%);
    color: #fff;
}

.ca-btn-secondary {
    background: rgba(20, 33, 61, 0.06);
    color: var(--ca-ink);
}

.ca-help-text,
.ca-search-feedback,
.ca-section-head p,
.ca-inline-note,
.ca-guide-head small {
    color: var(--ca-soft);
}

.ca-search-feedback.is-success {
    color: var(--ca-primary-strong);
    font-weight: 700;
}

.ca-search-feedback.is-error {
    color: #b42318;
    font-weight: 700;
}

.ca-action-row {
    margin-top: 14px;
    align-items: center;
}

.ca-results {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.ca-result-card {
    border: 1px solid var(--ca-line);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.82);
}

.ca-result-card h3,
.ca-guide-card h3,
.ca-support-card h3,
.ca-need-card h3 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 800;
}

.ca-result-card p,
.ca-need-card p,
.ca-guide-card p,
.ca-support-card p,
.ca-empty-state,
.ca-note-card li {
    margin: 0;
    line-height: 1.6;
    color: var(--ca-soft);
}

.ca-result-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    color: var(--ca-primary-strong);
    font-weight: 800;
    text-decoration: none;
}

.ca-section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.ca-section-head h2 {
    margin-bottom: 6px;
}

.ca-need-grid,
.ca-note-section,
.ca-guide-list,
.ca-support-list,
.ca-menu-stack,
.ca-video-grid {
    display: grid;
    gap: 14px;
}

.ca-menu-card {
    border: 1px solid var(--ca-line);
    border-radius: 20px;
    background: var(--ca-surface);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.ca-menu-summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    cursor: pointer;
}

.ca-menu-summary::-webkit-details-marker {
    display: none;
}

.ca-menu-summary strong {
    display: block;
    font-size: 1.08rem;
    font-weight: 800;
}

.ca-menu-summary span {
    color: var(--ca-soft);
    line-height: 1.55;
}

.ca-menu-card[open] .ca-menu-summary i {
    transform: rotate(180deg);
}

.ca-menu-summary i {
    transition: transform 0.2s ease;
    color: var(--ca-primary-strong);
}

.ca-menu-links,
.ca-menu-body {
    padding: 0 18px 18px;
}

.ca-menu-links {
    display: grid;
    gap: 10px;
}

.ca-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(20, 33, 61, 0.05);
    color: var(--ca-ink);
    font-weight: 700;
    text-decoration: none;
}

.ca-menu-link:hover {
    color: var(--ca-ink);
}

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

.ca-need-card {
    display: block;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--ca-line);
    background: var(--ca-surface);
    box-shadow: var(--ca-shadow);
    color: var(--ca-ink);
    transition: transform 0.2s ease;
}

.ca-need-card:hover {
    transform: translateY(-4px);
    color: var(--ca-ink);
}

.ca-need-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    margin-bottom: 14px;
}

.ca-tag-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ca-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(20, 33, 61, 0.05);
    font-size: 0.88rem;
    font-weight: 700;
    color: #526077;
}

.ca-note-section,
.ca-detail-grid,
.ca-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ca-note-card ul,
.ca-admin-list,
.ca-admin-query-list,
.ca-doc-list,
.ca-checklist {
    margin: 0;
    padding-left: 18px;
}

.ca-note-card.is-warm {
    background: linear-gradient(180deg, rgba(255, 245, 230, 0.95), rgba(255, 255, 255, 0.92));
}

.ca-detail-hero {
    margin-bottom: 20px;
}

.ca-panel {
    min-width: 0;
}

.ca-checklist li,
.ca-doc-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.ca-divider {
    height: 1px;
    background: var(--ca-line);
    margin: 20px 0;
}

.ca-inline-note {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(15, 118, 110, 0.08);
    margin-top: 14px;
}

.ca-guide-card,
.ca-support-card {
    border: 1px solid var(--ca-line);
    border-radius: 18px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.84);
}

.ca-subsection {
    margin-top: 18px;
}

.ca-subsection h3 {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 800;
}

.ca-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ca-video-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--ca-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ca-ink);
    text-decoration: none;
}

.ca-video-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.ca-video-card div {
    padding: 14px 16px 18px;
}

.ca-video-card h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.ca-video-card p {
    margin: 0;
    color: var(--ca-soft);
}

.ca-checklist-lg {
    font-size: 1.02rem;
}

.ca-checklist-lg li {
    margin-bottom: 14px;
}

.ca-guide-head {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.ca-audio {
    width: 100%;
    margin-bottom: 12px;
}

.ca-support-card ul {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--ca-soft);
}

.ca-empty-state {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(20, 33, 61, 0.04);
    border: 1px dashed rgba(20, 33, 61, 0.12);
}

.ca-admin-stats {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ca-admin-grid {
    margin-bottom: 20px;
}

.ca-admin-list,
.ca-admin-query-list {
    list-style: none;
    padding: 0;
}

.ca-admin-list li,
.ca-admin-query-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ca-line);
}

.ca-admin-query-list li {
    flex-direction: column;
}

.ca-admin-textarea {
    min-height: 280px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92rem;
}

.ca-ai-panel {
    background: var(--ca-surface);
    border: 1px solid var(--ca-line);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    padding: 20px;
}

.ca-ai-chatbox {
    border: 1px solid var(--ca-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    padding: 16px;
}

.ca-ai-messages {
    display: grid;
    gap: 12px;
    min-height: 280px;
    max-height: 56vh;
    overflow-y: auto;
    margin-bottom: 14px;
}

.ca-ai-message {
    display: flex;
}

.ca-ai-message.is-user {
    justify-content: flex-end;
}

.ca-ai-bubble {
    max-width: min(760px, 100%);
    padding: 14px 16px;
    border-radius: 18px;
    line-height: 1.6;
    background: rgba(20, 33, 61, 0.07);
    white-space: pre-line;
}

.ca-ai-message.is-user .ca-ai-bubble {
    background: linear-gradient(135deg, var(--ca-primary) 0%, var(--ca-primary-strong) 100%);
    color: #fff;
}

.ca-ai-typing {
    color: var(--ca-soft);
    font-weight: 600;
    display: none;
    margin-bottom: 10px;
}

.ca-ai-input-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ca-ai-textarea {
    flex: 1 1 320px;
    min-height: 54px;
    max-height: 160px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--ca-line);
    background: #fff;
    font: inherit;
    resize: vertical;
}

.portal-card.assistant-content .portal-card-icon {
    background: linear-gradient(135deg, #d97706, #0f766e);
}

@media (max-width: 1080px) {
    .ca-workspace,
    .ca-hero,
    .ca-detail-grid,
    .ca-note-section,
    .ca-admin-grid,
    .ca-admin-stats {
        grid-template-columns: 1fr;
    }

    .ca-need-grid,
    .ca-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ca-shell,
    .ca-admin-shell {
        padding: 14px 12px 26px;
    }

    .ca-topbar,
    .ca-admin-topbar,
    .ca-hero-copy,
    .ca-search-card,
    .ca-panel,
    .ca-note-card,
    .ca-detail-hero,
    .ca-admin-panel {
        padding: 18px;
        border-radius: 22px;
    }

    .ca-topbar,
    .ca-admin-topbar {
        flex-direction: column;
    }

    .ca-topbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .ca-topbar-actions > * {
        width: 100%;
        justify-content: center;
    }

    .ca-topbar-actions > .lang-switcher {
        grid-column: 1 / -1;
    }

    .ca-stat-row,
    .ca-need-grid,
    .ca-video-grid {
        grid-template-columns: 1fr;
    }

    .ca-hero-copy h1,
    .ca-detail-hero h1,
    .ca-admin-topbar h1 {
        font-size: 1.9rem;
    }

    .ca-menu-summary,
    .ca-menu-links,
    .ca-menu-body {
        padding-left: 18px;
        padding-right: 18px;
    }
}