/* UNIHUB English portal — kid-friendly teal theme (scoped to .pxt-portal) */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500;600;700;800&family=Nunito:wght@500;600;700;800&display=swap');

.pxt-portal {
    --pxt-brand: #5ec7b6;
    --pxt-brand-dark: #3aafa0;
    --pxt-brand-deep: #2a8f84;
    --pxt-sky: #5ec7b6;
    --pxt-teal: #3aafa0;
    --pxt-lime: #84cc16;
    --pxt-amber: #ffc857;
    --pxt-coral: #ff8a65;
    --pxt-rose: #fb7185;
    --pxt-violet: #7ec8e3;
    --pxt-ink: #1e3a3a;
    --pxt-muted: #6b8585;
    --pxt-card: #ffffff;
    --pxt-glow: rgba(94, 199, 182, 0.2);

    --bs-primary: #5ec7b6;
    --bs-primary-rgb: 94, 199, 182;
    --bs-success: #3aafa0;
    --bs-success-rgb: 58, 175, 160;
    --bs-info: #7ec8e3;
    --bs-info-rgb: 126, 200, 227;
    --bs-warning: #ffc857;
    --bs-warning-rgb: 255, 200, 87;
    --bs-danger: #ff8a65;
    --bs-danger-rgb: 255, 138, 101;
    --bs-body-color: var(--pxt-ink);
    --bs-body-bg: transparent;
    --bs-modal-bg: #ffffff;
    --bs-modal-color: var(--pxt-ink);
    --bs-modal-border-color: #e6f8f5;
    --bs-modal-header-border-color: #e6f8f5;
    --bs-modal-footer-border-color: #e6f8f5;
    --bs-border-radius: 1rem;
    --bs-border-radius-lg: 1.25rem;
    --bs-link-color: #2a8f84;
    --bs-link-hover-color: #1f6f66;

    font-family: 'Nunito', 'Be Vietnam Pro', system-ui, sans-serif;
    color: var(--pxt-ink);
    min-height: 100vh;
}

/* Standalone portal shell (legacy); shared site keeps UNIHUB homepage atmosphere */
body.pxt-portal:not(.pxt-unihub) {
    background:
        radial-gradient(900px 420px at 8% -10%, rgba(94, 199, 182, 0.28), transparent 55%),
        radial-gradient(720px 380px at 92% 0%, rgba(255, 200, 87, 0.22), transparent 50%),
        radial-gradient(640px 360px at 70% 100%, rgba(126, 200, 227, 0.18), transparent 55%),
        linear-gradient(180deg, #e6f8f5 0%, #fff9ef 48%, #f4fbf9 100%);
    background-attachment: fixed;
}

.pxt-portal .btn-primary {
    --bs-btn-bg: #5ec7b6;
    --bs-btn-border-color: #3aafa0;
    --bs-btn-hover-bg: #3aafa0;
    --bs-btn-hover-border-color: #2a8f84;
    --bs-btn-active-bg: #2a8f84;
    --bs-btn-active-border-color: #247a71;
    background-image: linear-gradient(135deg, #7dd9cb 0%, #5ec7b6 45%, #3aafa0 100%);
    border: 0;
    box-shadow: 0 8px 20px rgba(94, 199, 182, 0.35);
    font-weight: 800;
    border-radius: 999px;
}

.pxt-portal .btn-primary:hover,
.pxt-portal .btn-primary:focus {
    background-image: linear-gradient(135deg, #9ae4d8 0%, #3aafa0 50%, #2a8f84 100%);
    filter: brightness(1.02);
}

.pxt-portal .btn-success {
    background-image: linear-gradient(135deg, #4ade80, #16a34a);
    border: 0;
    font-weight: 700;
}

.pxt-portal .btn-outline-secondary {
    --bs-btn-color: #2a8f84;
    --bs-btn-border-color: #b8e8df;
    --bs-btn-hover-bg: #5ec7b6;
    --bs-btn-hover-border-color: #3aafa0;
    --bs-btn-hover-color: #fff;
    font-weight: 700;
}

.pxt-portal .card {
    background: var(--pxt-card);
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        0 10px 30px rgba(30, 58, 58, 0.06),
        0 2px 8px rgba(94, 199, 182, 0.08) !important;
    overflow: hidden;
    position: relative;
}

.pxt-portal main > .card::before,
.pxt-portal main .vstack > .card::before,
.pxt-portal main .row .card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pxt-sky), var(--pxt-teal), var(--pxt-lime), var(--pxt-amber), var(--pxt-coral));
}

.pxt-portal main .vstack > .card:nth-child(3n + 2)::before {
    background: linear-gradient(90deg, var(--pxt-coral), var(--pxt-rose), var(--pxt-violet));
}

.pxt-portal main .vstack > .card:nth-child(3n)::before {
    background: linear-gradient(90deg, var(--pxt-lime), var(--pxt-teal), var(--pxt-sky));
}

.pxt-portal .card-header {
    background: linear-gradient(180deg, #e6f8f5 0%, #ffffff 100%) !important;
    border-bottom-color: #d4f0ea !important;
}

.pxt-portal main h1,
.pxt-portal main .h3.fw-bold {
    background: linear-gradient(90deg, #2a8f84, #5ec7b6 45%, #ffc857);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pxt-portal .pxt-login-hero h1 {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #fff !important;
}

.pxt-portal .text-primary {
    color: #2a8f84 !important;
}

.pxt-portal .table thead {
    background: linear-gradient(90deg, #e6f8f5, #fff4d6, #d4f0ea);
}

.pxt-portal .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #e6f8f5;
}

.pxt-portal .badge.text-bg-primary,
.pxt-portal .badge.text-bg-success,
.pxt-portal .badge.text-bg-info,
.pxt-portal .badge.text-bg-warning,
.pxt-portal .badge.text-bg-danger,
.pxt-portal .badge.text-bg-secondary,
.pxt-portal .badge.text-bg-light {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pxt-portal .badge.text-bg-primary {
    background: linear-gradient(135deg, #7dd9cb, #5ec7b6) !important;
}

.pxt-portal .badge.text-bg-success {
    background: linear-gradient(135deg, #5ec7b6, #3aafa0) !important;
}

.pxt-portal .badge.text-bg-info {
    background: linear-gradient(135deg, #7ec8e3, #5ec7b6) !important;
}

.pxt-portal .badge.text-bg-warning {
    background: linear-gradient(135deg, #ffc857, #ff8a65) !important;
    color: #5c3d10 !important;
}

.pxt-portal .badge.text-bg-light {
    background: linear-gradient(135deg, #e6f8f5, #fff4d6) !important;
    color: #1e3a3a !important;
    border: 1px solid #b8e8df;
}

.pxt-portal .alert-info {
    background: linear-gradient(135deg, #e6f8f5, #eef9ff);
    border-color: #7dd9cb;
    color: #1f6f66;
}

.pxt-portal .alert-success {
    background: linear-gradient(135deg, #dcfce7, #ccfbf1);
    border-color: #86efac;
    color: #14532d;
}

.pxt-portal .alert-warning {
    background: linear-gradient(135deg, #fef3c7, #ffedd5);
    border-color: #fcd34d;
    color: #78350f;
}

.pxt-portal .alert-danger {
    background: linear-gradient(135deg, #ffe4e6, #fecdd3);
    border-color: #fda4af;
    color: #881337;
}

.pxt-portal .form-control:focus,
.pxt-portal .form-select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.2);
}

/* Modal hồ sơ: nền đặc, không kế thừa body transparent */
.pxt-portal .modal-content {
    background-color: #ffffff !important;
    color: var(--pxt-ink);
    border: 0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.pxt-portal .modal-header,
.pxt-portal .modal-footer {
    background-color: #ffffff !important;
}

.pxt-portal .modal-header {
    background: linear-gradient(90deg, #e0f2fe, #ffedd5, #dcfce7) !important;
    border-bottom: 1px solid #bae6fd;
}

.pxt-portal .modal-body {
    background-color: #ffffff !important;
}

.pxt-portal .modal-footer {
    background: #f8fafc !important;
}

/* Ensure Bootstrap modals sit above sticky chrome */
.pxt-unihub .modal {
    z-index: 1060;
}
.pxt-unihub .modal-backdrop {
    z-index: 1055;
}

.pxt-portal .pxt-person-card .border.rounded-3 {
    background-color: #f8fafc !important;
}

.pxt-portal .list-group-item {
    border-color: #e0f2fe;
}

.pxt-portal .list-group-item:hover {
    background: #f0f9ff;
}

/* Navbar */
.pxt-portal-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 0 !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.12);
}

.pxt-portal-nav::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #5ec7b6, #3aafa0, #ffc857, #ff8a65, #7ec8e3);
}

.pxt-portal-nav .navbar-brand {
    background: linear-gradient(90deg, #2a8f84, #5ec7b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 800;
}

.pxt-portal-nav .nav-link {
    color: #475569 !important;
    border-radius: 999px;
    padding: 0.45rem 0.9rem !important;
    margin-right: 0.2rem;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pxt-portal-nav .nav-link:hover {
    background: linear-gradient(135deg, #e0f2fe, #ffedd5);
    color: #0369a1 !important;
    transform: translateY(-1px);
}

.pxt-portal-nav .nav-link.active {
    background: linear-gradient(135deg, #5ec7b6, #3aafa0) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

.pxt-portal-nav .pxt-user-chip {
    background: linear-gradient(135deg, #e0f2fe, #ffedd5);
    border: 1px solid #bae6fd;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    color: #0f172a !important;
    font-weight: 700;
}

/* Login hero */
.pxt-login-hero {
    background:
        radial-gradient(420px 280px at 20% 20%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(145deg, #2a8f84 0%, #3aafa0 28%, #5ec7b6 58%, #ffc857 82%, #ff8a65 100%) !important;
}

.pxt-login-hero .pxt-feature {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    transition: transform 0.2s ease, background 0.2s ease;
}

.pxt-login-hero .pxt-feature:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.22);
}

.pxt-login-panel .badge {
    background: linear-gradient(135deg, #5ec7b6, #ffc857) !important;
}

/* Classroom bar accent */
.pxt-classroom-shell > header {
    background: linear-gradient(90deg, #1e3a3a 0%, #2a8f84 45%, #3aafa0 100%) !important;
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(90deg, #5ec7b6, #ffc857, #ff8a65, #7ec8e3) 1;
}

.pxt-classroom-shell .btn-outline-light:hover {
    background: linear-gradient(135deg, #5ec7b6, #ffc857);
    border-color: transparent;
}

/* Person trigger links */
.pxt-portal a.pxt-person-link,
.pxt-portal .btn-link {
    color: #2a8f84;
    font-weight: 700;
}

.pxt-portal a.pxt-person-link:hover {
    color: #ff8a65;
}

/* Soft page motion */
@keyframes pxt-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pxt-portal main.container {
    animation: pxt-fade-up 0.45s ease both;
}

.pxt-portal .toast.text-bg-success {
    background: linear-gradient(135deg, #5ec7b6, #3aafa0) !important;
}

.pxt-portal .toast.text-bg-danger {
    background: linear-gradient(135deg, #ff8a65, #fb7185) !important;
}

.pxt-portal .toast.text-bg-info {
    background: linear-gradient(135deg, #7ec8e3, #5ec7b6) !important;
}

.pxt-portal .toast.text-bg-warning {
    background: linear-gradient(135deg, #ffc857, #ff8a65) !important;
    color: #5c3d10 !important;
}

.pxt-portal .toast.text-bg-warning .btn-close {
    filter: none;
}

/* Homework */
.pxt-hw-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.pxt-hw-band {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid #d7efe9;
    background: #fff;
    color: #2a6f68;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pxt-hw-band:hover {
    background: #eef9f6;
    color: #1f5c56;
}
.pxt-hw-band.is-active {
    background: linear-gradient(135deg, #5ec7b6, #3aafa0);
    border-color: transparent;
    color: #fff;
}
.pxt-hw-item,
.pxt-hw-q,
.pxt-hw-score {
    background: #fff;
    border: 1px solid #e4f2ee;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 6px 18px rgba(58, 175, 160, 0.05);
}
.pxt-hw-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.pxt-hw-q-head {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-bottom: 0.55rem;
}
.pxt-hw-q-prompt .fw-semibold {
    font-size: 0.98rem;
    line-height: 1.35;
}
.pxt-hw-q-prompt .small {
    font-size: 0.8rem;
    line-height: 1.3;
}
.pxt-hw-q.is-correct {
    border-color: #9fd9c8;
    background: #f3fbf8;
}
.pxt-hw-q.is-wrong {
    border-color: #f5c2c7;
    background: #fff8f8;
}
.pxt-hw-q.is-blank {
    border-color: #dee2e6;
}
.pxt-hw-body.has-media {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    width: fit-content;
    max-width: 100%;
}
.pxt-hw-body.has-media > .pxt-hw-options {
    flex: 0 1 13.5rem;
    width: 13.5rem;
    max-width: 13.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    min-width: 0;
}
.pxt-hw-body.has-media > .pxt-hw-media {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 9.5rem;
    margin: 0;
}
.pxt-hw-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9rem;
    height: 9rem;
    padding: 0.2rem;
    border-radius: 0.55rem;
    background: #f4faf8;
    border: 1px solid #e4f2ee;
    overflow: hidden;
}
.pxt-hw-visual.is-placeholder {
    width: 9rem;
    height: auto;
    min-height: 3.5rem;
    padding: 0.35rem;
    color: #6c757d;
    font-size: 0.72rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.25;
}
.pxt-hw-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pxt-hw-audio {
    width: 9.5rem;
    max-width: 9.5rem;
    height: 1.85rem;
}
.pxt-hw-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    min-width: 0;
}
@media (max-width: 575.98px) {
    .pxt-hw-body.has-media {
        flex-direction: column-reverse !important;
        width: 100%;
    }
    .pxt-hw-body.has-media > .pxt-hw-options {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
    }
    .pxt-hw-body.has-media > .pxt-hw-media {
        flex-direction: row !important;
        flex-wrap: wrap;
        width: auto;
        gap: 0.45rem;
    }
    .pxt-hw-visual,
    .pxt-hw-visual.is-placeholder {
        width: 4.75rem;
        height: 4.75rem;
    }
    .pxt-hw-audio {
        width: min(100%, 11rem);
        max-width: 11rem;
        flex: 1 1 9rem;
    }
}
.pxt-hw-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid #e4f2ee;
    border-radius: 0.55rem;
    cursor: pointer;
    background: #fafefd;
    font-size: 0.95rem;
    margin: 0;
}
.pxt-hw-option:hover {
    border-color: #5ec7b6;
}
.pxt-hw-option input {
    flex: 0 0 auto;
    margin: 0;
}
.pxt-hw-score {
    text-align: center;
}
.pxt-hw-score-pct {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    color: #3aafa0;
    line-height: 1.1;
}
.min-w-120 {
    min-width: 7.5rem;
}