/* ============================================================================
   PORTAL LIGHT — "Civic Calm" v1.0.0
   ----------------------------------------------------------------------------
   Lớp phủ sáng cho các trang portal (trang chủ, giới thiệu, hướng dẫn, tìm
   kiếm, trang nội bộ). Nạp SAU portal-dashboard.css + unified-search.css để
   chuyển toàn bộ bề mặt "kính tối navy" sang nền sáng, nhẹ nhàng, hiện đại
   mà không đổi markup, không đổi layout, không đổi hành vi.

   Direction: light-first, gentle public sector
   - Nền off-white phớt xanh, 1 accent xanh công vụ (#1d4ed8), họ xám slate
   - Bề mặt trắng + viền hairline + bóng slate rất nhẹ (không bóng đen đậm)
   - Chữ mực slate đậm trên nền sáng — đạt tương phản AA
   - Giữ nguyên mọi khoảng cách, bo góc, hiệu ứng chuyển động sẵn có
   ========================================================================== */

:root {
    --pl-ink: #0f172a;
    --pl-ink-soft: #334155;
    --pl-muted: #5b6879;
    --pl-faint: #94a3b8;
    --pl-canvas: #f5f7fb;
    --pl-surface: #ffffff;
    --pl-surface-tint: #f8fafd;
    --pl-hairline: #e3e8f0;
    --pl-accent: #1d4ed8;
    --pl-accent-strong: #1e40af;
    --pl-accent-soft: rgba(29, 78, 216, 0.08);
    --pl-green: #047857;
    --pl-green-soft: rgba(16, 185, 129, 0.12);
    --pl-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.06);
    --pl-shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 44px rgba(15, 23, 42, 0.10);
}

/* ---------------------------------------------------------------------------
   1. NỀN TRANG — thay gradient navy tối bằng canvas sáng phớt xanh
   --------------------------------------------------------------------------- */
body.portal-dashboard {
    color: var(--pl-ink);
    background:
        radial-gradient(900px 420px at 12% -6%, rgba(59, 130, 246, 0.08), transparent 60%),
        radial-gradient(820px 380px at 92% -4%, rgba(16, 185, 129, 0.06), transparent 60%),
        var(--pl-canvas);
}

/* ---------------------------------------------------------------------------
   2. TOPBAR — bề mặt trắng, viền hairline, không blur nặng
   --------------------------------------------------------------------------- */
.portal-topbar {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--pl-hairline);
    backdrop-filter: blur(10px);
    box-shadow: var(--pl-shadow-soft);
}

.portal-brand h1 { color: var(--pl-ink); }
.portal-brand span { color: var(--pl-muted); }

.portal-brand-icon {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.22);
}

.portal-mobile-menu-trigger {
    color: var(--pl-ink);
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
}

.portal-mobile-menu-panel {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--pl-hairline);
    box-shadow: var(--pl-shadow-lift);
}

.portal-mobile-menu-link {
    color: var(--pl-ink-soft);
    background: var(--pl-surface-tint);
    border: 1px solid var(--pl-hairline);
}

.portal-mobile-menu-link:hover {
    color: var(--pl-accent-strong);
    background: var(--pl-accent-soft);
}

.portal-mobile-menu-link.is-tv {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.12), rgba(14, 165, 233, 0.10));
}

/* Bộ chọn ngôn ngữ trên nền sáng */
.portal-dashboard .lang-switcher {
    --lang-switcher-toggle-border: var(--pl-hairline);
    --lang-switcher-toggle-bg: var(--pl-surface);
    --lang-switcher-toggle-color: var(--pl-ink-soft);
    --lang-switcher-toggle-hover-bg: var(--pl-surface-tint);
    --lang-switcher-menu-border: var(--pl-hairline);
    --lang-switcher-menu-bg: rgba(255, 255, 255, 0.98);
    --lang-switcher-menu-color: var(--pl-ink-soft);
    --lang-switcher-menu-shadow: var(--pl-shadow-lift);
    --lang-switcher-option-hover-bg: var(--pl-surface-tint);
    --lang-switcher-option-active-bg: var(--pl-accent-soft);
    --lang-switcher-option-active-color: var(--pl-accent-strong);
    --lang-switcher-option-strong-color: var(--pl-ink);
    --lang-switcher-option-note-color: var(--pl-muted);
    --lang-switcher-divider-color: var(--pl-hairline);
}

/* ---------------------------------------------------------------------------
   3. PILL / NÚT TOPBAR
   --------------------------------------------------------------------------- */
.portal-pill.is-badge {
    color: var(--pl-ink-soft);
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
}

.portal-pill.is-light {
    color: var(--pl-accent-strong);
    background: var(--pl-accent-soft);
}

.portal-pill.is-primary {
    color: #ffffff;
    background: var(--pl-accent);
    border: 1px solid var(--pl-accent);
    box-shadow: 0 8px 18px rgba(29, 78, 216, 0.20);
}

.portal-pill.is-primary:hover {
    background: var(--pl-accent-strong);
}

.portal-pill.is-danger {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.08);
}

.portal-pill.is-tv {
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.18);
}

/* ---------------------------------------------------------------------------
   4. THÔNG BÁO GIỚI HẠN
   --------------------------------------------------------------------------- */
.portal-notice,
.portal-v2 .portal-notice {
    color: #92400e;
    background: #fef7e8;
    border: 1px solid rgba(217, 119, 6, 0.25);
    backdrop-filter: none;
}

/* ---------------------------------------------------------------------------
   5. HERO — thẻ sáng thoáng, chữ mực, accent xanh duy nhất
   --------------------------------------------------------------------------- */
.portal-hero {
    background:
        radial-gradient(circle at 16% 10%, rgba(16, 185, 129, 0.07), transparent 38%),
        radial-gradient(circle at 84% 16%, rgba(59, 130, 246, 0.09), transparent 40%),
        linear-gradient(150deg, #ffffff 0%, #f2f6fd 60%, #ecf2fc 100%);
    border: 1px solid var(--pl-hairline);
    box-shadow: var(--pl-shadow-soft);
}

.portal-hero-glow--one { background: rgba(59, 130, 246, 0.10); }
.portal-hero-glow--two { background: rgba(16, 185, 129, 0.08); }

.portal-eyebrow,
.portal-section-kicker {
    color: var(--pl-green);
    background: var(--pl-green-soft);
    border: 1px solid rgba(4, 120, 87, 0.16);
}

.portal-hero-title,
.portal-hero-copy h2 {
    color: var(--pl-ink);
}

.portal-hero-title em {
    background: linear-gradient(90deg, #1d4ed8, #0e7490);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portal-hero-subtitle,
.portal-hero-copy p {
    color: var(--pl-muted);
}

.portal-hero-btn.is-primary {
    color: #ffffff;
    background: var(--pl-accent);
    box-shadow: 0 12px 26px rgba(29, 78, 216, 0.22);
}

.portal-hero-btn.is-ghost {
    color: var(--pl-ink-soft);
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
}

.portal-hero-stat {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--pl-hairline);
    backdrop-filter: none;
}

.portal-hero-stat strong { color: var(--pl-accent-strong); }
.portal-hero-stat span { color: var(--pl-muted); }

.portal-hero-guide {
    color: var(--pl-ink-soft);
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
}

.portal-hero-guide i { color: var(--pl-accent); }

/* Vùng quỹ đạo bên phải hero: sao trắng → chấm xanh dịu trên nền sáng */
.portal-hero-art {
    background-image:
        radial-gradient(1.5px 1.5px at 22% 28%, rgba(29, 78, 216, 0.35), transparent 55%),
        radial-gradient(1px 1px at 68% 12%, rgba(29, 78, 216, 0.25), transparent 55%),
        radial-gradient(1.2px 1.2px at 84% 62%, rgba(14, 116, 144, 0.30), transparent 55%),
        radial-gradient(1px 1px at 38% 74%, rgba(29, 78, 216, 0.22), transparent 55%),
        radial-gradient(1.6px 1.6px at 55% 45%, rgba(59, 130, 246, 0.30), transparent 55%),
        radial-gradient(1px 1px at 12% 58%, rgba(29, 78, 216, 0.22), transparent 55%),
        radial-gradient(1.3px 1.3px at 78% 88%, rgba(14, 116, 144, 0.26), transparent 55%),
        radial-gradient(1px 1px at 30% 8%, rgba(29, 78, 216, 0.20), transparent 55%),
        radial-gradient(1.1px 1.1px at 90% 30%, rgba(59, 130, 246, 0.24), transparent 55%),
        radial-gradient(1.4px 1.4px at 46% 92%, rgba(16, 185, 129, 0.28), transparent 55%);
}

.portal-hero-orbit {
    border-color: rgba(100, 116, 139, 0.28);
}

.portal-hero-orbit--outer {
    box-shadow:
        inset 0 0 60px rgba(59, 130, 246, 0.05),
        0 0 40px rgba(59, 130, 246, 0.04);
}

.portal-hero-orbit--inner {
    border-color: rgba(100, 116, 139, 0.34);
    background: radial-gradient(circle at 50% 42%, rgba(59, 130, 246, 0.08), transparent 62%);
}

.portal-hero-card {
    color: var(--pl-ink);
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
    box-shadow: var(--pl-shadow-soft);
}

.portal-hero-card--link { color: var(--pl-ink); }

.portal-hero-card--link:hover {
    box-shadow: var(--pl-shadow-lift);
    border-color: rgba(29, 78, 216, 0.35);
}

.portal-hero-card--link i { color: var(--pl-accent); }

/* ---------------------------------------------------------------------------
   6. SECTION HEAD / STAT / STORY
   --------------------------------------------------------------------------- */
.portal-section-head h2 { color: var(--pl-ink); }
.portal-section-head p { color: var(--pl-muted); }

.portal-stat-card {
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
}

.portal-stat-card strong { color: var(--pl-accent-strong); }
.portal-stat-card span { color: var(--pl-ink-soft); }
.portal-stat-card small { color: var(--pl-muted); }

/* Nhóm thẻ kính tối dùng chung trên trang giới thiệu / hướng dẫn */
.portal-hero-copy,
.portal-hero-panel,
.portal-story-card,
.portal-recommendation-card,
.portal-info-card,
.portal-step-card,
.portal-guide-card {
    border: 1px solid var(--pl-hairline);
    backdrop-filter: none;
    box-shadow: var(--pl-shadow-soft);
    background: var(--pl-surface);
}

/* Trang chủ v2 đã bỏ lớp thẻ con của hero — giữ nguyên trạng thái "phẳng" */
.portal-v2 .portal-hero-copy,
.portal-v2 .portal-hero-panel {
    background: none;
    border: 0;
    box-shadow: none;
}

.portal-story-card h3,
.portal-recommendation-card h3,
.portal-info-card h3,
.portal-step-card h3,
.portal-guide-card h3 {
    color: var(--pl-ink);
}

.portal-hero-copy p,
.portal-story-card p,
.portal-section-head p,
.portal-recommendation-card p,
.portal-info-card p,
.portal-step-card p,
.portal-guide-card p,
.portal-card-summary,
.portal-guide-list {
    color: var(--pl-muted);
}

.portal-guide-card .portal-card-summary { color: var(--pl-muted); }

.portal-story-icon {
    color: var(--pl-green);
    background: var(--pl-green-soft);
}

/* Icon phân hệ thiếu màu trong CSS gốc (medical/legal) — bổ sung để không
   còn ô trắng trống trên thẻ hướng dẫn */
.portal-card.medical .portal-card-icon,
.portal-guide-card.medical .portal-guide-icon { background: linear-gradient(135deg, #0e7490, #0ea5e9); }
.portal-card.legal .portal-card-icon,
.portal-guide-card.legal .portal-guide-icon { background: linear-gradient(135deg, #92400e, #b45309); }
.portal-manual-card.legal .portal-manual-icon { background: linear-gradient(135deg, #92400e, #b45309); }

.portal-recommendation-meta {
    color: var(--pl-green);
    background: var(--pl-green-soft);
}

.portal-info-top i { color: var(--pl-accent); }
.portal-step-card span { color: var(--pl-accent); }

/* ---------------------------------------------------------------------------
   7. TRANG HƯỚNG DẪN (manual)
   --------------------------------------------------------------------------- */
.portal-manual-jump {
    color: var(--pl-ink-soft);
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
}

.portal-manual-jump:hover {
    color: var(--pl-accent-strong);
    background: var(--pl-accent-soft);
}

.portal-manual-card {
    border: 1px solid var(--pl-hairline);
    background: var(--pl-surface);
    backdrop-filter: none;
    box-shadow: var(--pl-shadow-soft);
}

.portal-manual-title-wrap h3 { color: var(--pl-ink); }

.portal-manual-meta span {
    color: var(--pl-accent-strong);
    background: var(--pl-accent-soft);
}

.portal-manual-action,
.portal-manual-doc-link {
    color: var(--pl-accent-strong);
    background: var(--pl-surface-tint);
    border: 1px solid var(--pl-hairline);
}

.portal-manual-action:hover,
.portal-manual-doc-link:hover {
    color: var(--pl-accent-strong);
    background: var(--pl-accent-soft);
}

.portal-manual-intro { color: var(--pl-muted); }

.portal-manual-doc-shell {
    background: var(--pl-surface-tint);
    border: 1px solid var(--pl-hairline);
}

.portal-manual-doc-head h4 { color: var(--pl-ink); }
.portal-manual-doc-head p { color: var(--pl-muted); }

.portal-manual-doc-frame-wrap {
    border: 1px solid var(--pl-hairline);
    background: var(--pl-surface);
}

.portal-manual-feature {
    background: var(--pl-surface-tint);
    border: 1px solid var(--pl-hairline);
}

.portal-manual-feature summary { color: var(--pl-ink); }
.portal-manual-feature p { color: var(--pl-muted); }
.portal-manual-step-list { color: var(--pl-ink-soft); }

.portal-manual-feature .portal-inline-link { color: var(--pl-accent); }
.portal-manual-feature .portal-inline-link:hover { color: var(--pl-accent-strong); }

/* ---------------------------------------------------------------------------
   8. FOOTER — hạ xuống nền nhẹ, chữ dịu
   --------------------------------------------------------------------------- */
.portal-footer {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--pl-hairline);
    border-radius: 0;
    backdrop-filter: none;
}

.portal-footer-note {
    color: var(--pl-muted);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   9. TÌM KIẾM HỢP NHẤT — hero input trắng, panel trắng
   --------------------------------------------------------------------------- */
.unified-search--hero .unified-search-form {
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
    box-shadow: var(--pl-shadow-soft);
    backdrop-filter: none;
}

.unified-search--hero .unified-search-form:focus-within {
    border-color: rgba(29, 78, 216, 0.45);
    box-shadow: 0 0 0 3px var(--pl-accent-soft), var(--pl-shadow-soft);
}

.unified-search--hero .unified-search-field i { color: var(--pl-faint); }

.unified-search--hero .unified-search-input {
    color: var(--pl-ink);
}

.unified-search--hero .unified-search-input::placeholder {
    color: var(--pl-faint);
}

.unified-search--hero .unified-search-panel {
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
    color: var(--pl-ink-soft);
    box-shadow: var(--pl-shadow-lift);
}

.unified-search--hero .unified-search-group-head { color: var(--pl-accent-strong); }

.unified-search--hero .unified-search-item:hover,
.unified-search--hero .unified-search-item:focus-visible {
    background: var(--pl-surface-tint);
}

.unified-search--hero .unified-search-more { color: var(--pl-accent); }

/* Trang kết quả tìm kiếm */
.search-page-head h1 { color: var(--pl-ink); }
.search-page-head p { color: var(--pl-muted); }

.search-page-group {
    background: var(--pl-surface);
    border: 1px solid var(--pl-hairline);
    box-shadow: var(--pl-shadow-soft);
}

.search-page-group h2 { color: var(--pl-accent-strong); }

.search-page-item { color: var(--pl-ink); }

.search-page-item + .search-page-item {
    border-top: 1px solid var(--pl-hairline);
}

.search-page-item span,
.search-page-item em {
    color: var(--pl-muted);
}

/* ---------------------------------------------------------------------------
   10. MOBILE — panel menu sáng (đè rule kính tối trong media query gốc)
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .portal-mobile-menu-panel {
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--pl-hairline);
        backdrop-filter: blur(10px);
        box-shadow: var(--pl-shadow-lift);
    }

    body.portal-v2 .portal-actions-utility .lang-switcher {
        box-shadow: var(--pl-shadow-lift);
        border: 1px solid var(--pl-hairline);
    }
}