.portal-page {
    color: #111827;
    background: #f7f9fb;
}

.portal-main {
    min-height: 720px;
    padding-top: 79px;
}

.portal-page .site-footer {
    margin-top: 0;
}

.portal-header-icon {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #dfe5e8;
    border-radius: 9px;
    color: #475569;
    background: #fff;
}

.portal-header-icon span {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #ef4444;
    font-size: 9px;
    font-weight: 800;
}

.portal-header-icon { border: 1px solid #dfe5e8; cursor: pointer; }
.portal-header-icon::after { display: none; }
.portal-notification-dropdown { width: 355px; margin-top: 11px !important; padding: 0; overflow: hidden; border: 1px solid #e8edf0; border-radius: 14px; box-shadow: 0 18px 45px rgba(15,23,42,.15); }
.portal-notification-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #edf0f3; }
.portal-notification-head strong { color: #111827; font-size: 14px; font-weight: 800; }
.portal-notification-head small { padding: 4px 8px; border-radius: 999px; color: #0f766e; background: #e9faf8; font-size: 9px; font-weight: 750; }
.portal-notification-preview { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 14px 18px; border-bottom: 1px solid #f0f2f4; background: #fff; }
.portal-notification-preview:hover { background: #f8fbfc; }
.portal-notification-preview > i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 9px; color: #2563eb; background: #eff6ff; }
.portal-notification-preview span { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding-right: 10px; }
.portal-notification-preview strong {overflow: hidden;color: #334155;font-size: 13px;font-weight: 750;line-height: 17px;text-overflow: ellipsis;white-space: nowrap;}
.portal-notification-preview small {color: #94a3b8;font-size: 10px;}
.portal-notification-preview.is-unread::after { position: absolute; top: 20px; right: 15px; width: 7px; height: 7px; border-radius: 50%; content: ""; background: #2563eb; }
.portal-notification-all {display: flex;align-items: center;justify-content: center;gap: 7px;padding: 13px;color: #0f766e;background: #fbfdfd;font-size: 12px;font-weight: 800;}
.portal-notification-all:hover { color: #0b5d5b; background: #effbf9; }

.portal-user-button {
    display: flex;
    height: 42px;
    align-items: center;
    gap: 9px;
    padding: 0 10px 0 5px;
    border: 1px solid #dfe5e8;
    border-radius: 10px;
    color: #334155;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}

.portal-user-button img {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    object-fit: cover;
}

.portal-user-menu {
    width: 225px;
    padding: 8px;
    border: 1px solid #eef1f3;
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(15,23,42,.12);
}

.portal-user-menu .dropdown-item {
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
}

.portal-user-menu i {
    width: 22px;
    margin-right: 4px;
}

.portal-hero {
    padding: 56px 0 45px;
    color: #fff;
    background: linear-gradient(135deg,#178f88,#0d5e5b);
}

.portal-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.portal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #c9fff9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-hero h1 {
    margin: 0 0 12px;
    font-size: 38px;
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: -.8px;
}

.portal-hero p {
    max-width: 720px;
    margin: 0;
    color: #dffcf8;
    font-size: 15px;
    line-height: 24px;
}

.portal-hero-actions {
    display: flex;
    gap: 10px;
}

.portal-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 19px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 750;
    transition: .2s;
}

.portal-button-primary {
    color: #fff;
    background: #2563eb;
    box-shadow: 0 8px 20px rgba(37,99,235,.2);
}

.portal-button-primary:hover {
    color: #fff;
    background: #1d4ed8;
    transform: translateY(-1px);
}

.portal-button-teal {
    color: #fff;
    background: var(--teal);
}

.portal-button-teal:hover {
    color: #fff;
    background: var(--teal-dark);
}

.portal-button-light {
    color: #0f766e;
    background: #fff;
}

.portal-button-light:hover {
    color: #0f766e;
    background: #effffc;
}

.portal-button-outline {
    color: #334155;
    border-color: #dbe3e8;
    background: #fff;
}

.portal-button-outline:hover {
    border-color: #a7d8d4;
    color: #0f766e;
    background: #f4fffd;
}

.portal-content {
    padding: 48px 0 72px;
}

.portal-card {
    border: 1px solid #edf0f3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,.035);
}

.portal-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid #eef1f3;
}

.portal-card-header h2,.portal-card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.portal-card-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
}

.portal-card-body {
    padding: 20px;
}

.portal-muted {
    color: #64748b;
}

.portal-empty {
    padding: 55px 25px;
    text-align: center;
}

.portal-empty i {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    margin: 0 auto 15px;
    border-radius: 16px;
    color: var(--teal);
    background: #e8fbf8;
    font-size: 25px;
}

/* Auth */
.auth-main {
    min-height: 940px;
    /* Blazor MainLayout dùng sticky header (nằm trong luồng) — không cần chừa ~79px
       như mockup fixed-top; chỉ chừa khoảng thở nhẹ dưới header. */
    padding: 40px 0 48px;
    background: radial-gradient(circle at 12% 15%,rgba(30,166,158,.12),transparent 34%),#f7fafb;
}

.auth-shell {
    display: grid;
    min-height: 745px;
    overflow: hidden;
    grid-template-columns: 43% 57%;
    border: 1px solid #e7edef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 65px rgba(15,23,42,.11);
}

.auth-brand {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 62px 52px;
    color: #fff;
    background: linear-gradient(150deg,#1ea69e 0%,#0b5d5b 100%);
}

.auth-brand::before,.auth-brand::after {
    position: absolute;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    content: "";
}

.auth-brand::before {
    top: -110px;
    right: -120px;
    width: 350px;
    height: 350px;
}

.auth-brand::after {
    right: 60px;
    bottom: -175px;
    width: 420px;
    height: 420px;
}

.auth-brand-content,.auth-benefits {
    position: relative;
    z-index: 1;
}

.auth-brand-logo {
    width: 142px;
    margin-bottom: 66px;
}

.auth-brand h1 {
    margin: 0 0 18px;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -1px;
}

.auth-brand p {
    margin: 0;
    color: #d9fffb;
    font-size: 15px;
    line-height: 25px;
}

.auth-benefits {
    display: grid;
    gap: 15px;
}

.auth-benefits span {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #effffd;
    font-size: 13px;
    font-weight: 600;
}

.auth-benefits i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.13);
}

.auth-panel {
    padding: 43px 58px 50px;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 31px;
    padding: 5px;
    border-radius: 11px;
    background: #f1f5f7;
}

.auth-tab {
    height: 42px;
    border: 0;
    border-radius: 8px;
    color: #64748b;
    background: transparent;
    font-size: 14px;
    font-weight: 750;
}

.auth-tab.active {
    color: #0f766e;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15,23,42,.08);
}

.auth-pane {
    display: none;
}

.auth-pane.active {
    display: block;
}

.auth-heading {
    margin-bottom: 25px;
}

.auth-heading h2 {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 850;
}

.auth-heading p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 21px;
}

.portal-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.portal-field {
    margin-bottom: 17px;
}

.portal-field label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.portal-input-wrap {
    position: relative;
}

.portal-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #94a3b8;
    transform: translateY(-50%);
}

.portal-input,.portal-select,.portal-textarea {
    width: 100%;
    border: 1px solid #dfe5e8;
    border-radius: 9px;
    outline: 0;
    color: #1e293b;
    background: #fff;
    font-size: 13px;
    transition: .2s;
}

.portal-input {
    height: 45px;
    padding: 0 14px;
}

.portal-input-wrap .portal-input {
    padding-left: 41px;
}

.portal-input:focus,.portal-select:focus,.portal-textarea:focus {
    border-color: #69c9c2;
    box-shadow: 0 0 0 3px rgba(30,166,158,.1);
}

.portal-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    border: 0;
    color: #94a3b8;
    background: transparent;
    transform: translateY(-50%);
}

.portal-check-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 2px 0 20px;
    color: #64748b;
    font-size: 12px;
}

.portal-check-row a {
    color: #2563eb;
    font-weight: 700;
}

.auth-submit {
    width: 100%;
    min-height: 47px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--teal);
    font-size: 14px;
    font-weight: 800;
}

.auth-submit:hover {
    background: var(--teal-dark);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 23px 0;
    color: #94a3b8;
    font-size: 11px;
}

.auth-divider::before,.auth-divider::after {
    height: 1px;
    flex: 1;
    content: "";
    background: #e8ecef;
}

.social-login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.social-login button {
    height: 43px;
    border: 1px solid #dfe5e8;
    border-radius: 9px;
    color: #475569;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

.role-options {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
}

.role-option input {
    position: absolute;
    opacity: 0;
}

.role-option span {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
    border: 1px solid #dfe5e8;
    border-radius: 10px;
    color: #64748b;
    text-align: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.role-option i {
    font-size: 20px;
}

.role-option input:checked + span {
    border-color: var(--teal);
    color: #0f766e;
    background: #effcfb;
    box-shadow: 0 0 0 2px rgba(30,166,158,.08);
}

.interest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.interest-chip input {
    position: absolute;
    opacity: 0;
}

.interest-chip span {
    display: block;
    padding: 6px 10px;
    border: 1px solid #dfe5e8;
    border-radius: 999px;
    color: #64748b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
}

.interest-chip input:checked + span {
    border-color: #8dd7d2;
    color: #0f766e;
    background: #eafbf9;
}

.auth-secondary-link {
    margin-top: 17px;
    color: #64748b;
    text-align: center;
    font-size: 12px;
}

.auth-secondary-link button {
    border: 0;
    color: #2563eb;
    background: transparent;
    font-weight: 750;
}

.otp-boxes {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 10px;
    margin: 26px 0;
}

.otp-boxes input {
    width: 100%;
    height: 52px;
    border: 1px solid #dfe5e8;
    border-radius: 9px;
    outline: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
}

/* Dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 28px;
    margin-top: 28px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.metric-card {
    position: relative;
    min-height: 135px;
    overflow: hidden;
    padding: 22px;
}

.metric-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 11px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 19px;
}

.metric-card:nth-child(2) .metric-icon {
    color: #16a34a;
    background: #f0fdf4
}

.metric-card:nth-child(3) .metric-icon {
    color: #f97316;
    background: #fff7ed
}

.metric-card:nth-child(4) .metric-icon {
    color: #9333ea;
    background: #faf5ff
}

.metric-card strong {
    display: block;
    margin-bottom: 3px;
    font-size: 24px;
    font-weight: 850;
}

.metric-card span {
    color: #64748b;
    font-size: 12px;
}

.dashboard-stack {
    display: grid;
    gap: 24px;
}

.course-progress-item {
    display: grid;
    grid-template-columns: 92px minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid #f0f2f4;
}

.course-progress-item:last-child {
    border-bottom: 0;
}

.course-progress-item img {
    width: 92px;
    height: 64px;
    border-radius: 9px;
    object-fit: cover;
}

.course-progress-item h3 {
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: 800;
}

.course-progress-item p {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 11px;
}

.portal-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: #e9eef2;
}

.portal-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--teal);
}

.progress-number {
    min-width: 38px;
    color: #0f766e;
    text-align: right;
    font-size: 12px;
    font-weight: 800;
}

.simple-list {
    display: grid;
    gap: 2px;
}

.simple-list-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #f0f2f4;
}

/* Biến thể 1 dòng (chỉ <h4>, không có <p> phụ đề bên dưới) — vd khối "Tài khoản & Chức năng" ở
   MemberDashboard.razor. align-items:flex-start mặc định đúng khi có 2 dòng (icon căn theo dòng đầu),
   nhưng với 1 dòng duy nhất sẽ đẩy chữ lên cao hơn tâm icon — cần center riêng cho trường hợp này. */
.simple-list-item--single-line {
    align-items: center;
}

.simple-list-item:last-child {
    border-bottom: 0;
}

.simple-list-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 10px;
    color: #2563eb;
    background: #eff6ff;
}

.simple-list-item h4 {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 750;
    line-height: 19px;
}

.simple-list-item p {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 18px;
}

.dashboard-chart {
    display: flex;
    height: 120px;
    align-items: flex-end;
    gap: 12px;
    padding-top: 18px;
}

.dashboard-chart span {
    position: relative;
    flex: 1;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg,#5ac5bd,#b9ebe7);
}

.dashboard-chart span::after {
    position: absolute;
    right: 0;
    bottom: -24px;
    left: 0;
    color: #94a3b8;
    content: attr(data-label);
    text-align: center;
    font-size: 9px;
}

/* Profile */
.portal-page.profile-page .portal-main {
    padding-top: 0;
}

.profile-cover {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: 0 0 28px 28px;
    background: linear-gradient(125deg,#bdece8,#1ea69e 52%,#0b5d5b);
    background-size: cover;
    background-position: center;
}

.profile-cover::after {
    position: absolute;
    inset: 0;
    opacity: .18;
    content: "";
    background-image: radial-gradient(circle,#fff 1px,transparent 1px);
    background-size: 24px 24px;
}

.profile-header-inner {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    align-items: flex-end;
    gap: 22px;
    padding-bottom: 27px;
    color: #fff;
}

.profile-avatar {
    width: 118px;
    height: 118px;
    flex: 0 0 118px;
    border: 5px solid rgba(255,255,255,.94);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 26px rgba(15,23,42,.2);
}

.profile-name {
    flex: 1;
    padding-bottom: 5px;
}

.profile-name h1 {
    margin: 0 0 7px;
    font-size: 30px;
    font-weight: 850;
}

.profile-name p {
    margin: 0;
    color: #ddfffb;
    font-size: 13px;
}

.profile-badge {
    display: inline-flex;
    margin-left: 9px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #0f766e;
    background: #fff;
    font-size: 10px;
    vertical-align: middle;
}

.profile-tabs,.legal-tabs {
    display: flex;
    gap: 4px;
    padding: 10px;
    border-bottom: 1px solid #edf0f3;
    background: #fff;
}

.profile-tab,.legal-tab {
    padding: 11px 17px;
    border: 0;
    border-radius: 8px;
    color: #64748b;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
}

.profile-tab.active,.legal-tab.active {
    color: #0f766e;
    background: #eafaf8;
}

.profile-pane,.legal-pane {
    display: none;
}

.profile-pane.active,.legal-pane.active {
    display: block;
}

.profile-layout {
    display: grid;
    grid-template-columns: 330px minmax(0,1fr);
    gap: 25px;
}

.profile-stat-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin: 19px 0;
}

.profile-stat-row div {
    padding: 13px 6px;
    border-radius: 9px;
    background: #f7fafb;
    text-align: center;
}

.profile-stat-row strong,.profile-stat-row span {
    display: block;
}

.profile-stat-row strong {
    font-size: 17px
}

.profile-stat-row span {
    margin-top: 3px;
    color: #64748b;
    font-size: 9px
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag-list span {
    padding: 6px 10px;
    border-radius: 999px;
    color: #0f766e;
    background: #e9faf8;
    font-size: 10px;
    font-weight: 650;
}

.certificate-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}

.certificate-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border: 1px solid #edf0f3;
    border-radius: 12px;
}

.certificate-card i {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    place-items: center;
    border-radius: 11px;
    color: #f59e0b;
    background: #fff7e6;
    font-size: 20px;
}

.certificate-card h4 {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 800;
}

.certificate-card p {
    margin: 0;
    color: #64748b;
    font-size: 10px
}

.settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 21px;
}

.settings-nav button {
    padding: 8px 12px;
    border: 1px solid #dfe5e8;
    border-radius: 8px;
    color: #64748b;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
}

.settings-nav button.active {
    border-color: var(--teal);
    color: #0f766e;
    background: #ecfbf9;
}

.settings-section {
    display: none;
}

.settings-section.active {
    display: block
}

.portal-select {
    height: 45px;
    line-height: 45px;
    padding: 0 40px 0 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5 8 11.5 14.5 5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

.portal-select-wrap {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.portal-select-wrap[style*="width: auto"],
.portal-select-wrap[style*="width:auto"] {
    width: auto;
    display: inline-block;
}

.portal-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: none !important;
}

.portal-select-trigger {
    display: flex;
    width: 100%;
    height: 45px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border: 1px solid #dfe5e8;
    border-radius: 9px;
    color: #1e293b;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.portal-select-trigger .portal-select-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-select-trigger .bi {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: 14px;
    transition: transform .2s;
}

.portal-select-wrap.is-open .portal-select-trigger {
    border-color: #69c9c2;
    box-shadow: 0 0 0 3px rgba(30,166,158,.1);
}

.portal-select-wrap.is-open .portal-select-trigger .bi {
    transform: rotate(180deg);
}

.portal-select-wrap.is-disabled .portal-select-trigger,
.portal-select-trigger:disabled {
    color: #94a3b8;
    background: #f8fafc;
    cursor: not-allowed;
    opacity: .85;
}

.portal-select-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15,23,42,.12);
}

.portal-select-menu[hidden] {
    display: none !important;
}

.portal-select-option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.portal-select-option:hover,
.portal-select-option.active {
    color: #0f766e;
    background: #ecfbf9;
}

.portal-select-option.is-disabled,
.portal-select-option:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    opacity: .6;
}

/* Compact — toolbar / catalog / workspace */
.portal-select-wrap.is-compact .portal-select-trigger,
.course-filter-grid .portal-select-trigger,
.course-sort .portal-select-trigger,
.cp-toolbar .portal-select-trigger,
.ws-toolbar .portal-select-trigger,
.ebook-management-tools .portal-select-trigger {
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.course-sort .portal-select-wrap {
    width: 190px;
    margin-top: 6px;
}

.course-filter-grid .portal-select-option,
.course-sort .portal-select-option {
    padding: 8px 10px;
    font-size: 12px;
}

.portal-textarea {
    min-height: 112px;
    padding: 12px 14px;
    resize: vertical;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f2f4;
}

.toggle-row:last-child {
    border-bottom: 0
}

.toggle-row h4 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 750
}

.toggle-row p {
    margin: 0;
    color: #64748b;
    font-size: 11px
}

.portal-switch {
    position: relative;
    width: 43px;
    height: 24px;
    flex: 0 0 43px;
}

.portal-switch input {
    opacity: 0;
}

.portal-switch span {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    background: #cbd5e1;
    cursor: pointer;
    transition: .2s
}

.portal-switch span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    content: "";
    background: #fff;
    transition: .2s
}

.portal-switch input:checked+span {
    background: var(--teal)
}

.portal-switch input:checked+span::after {
    transform: translateX(19px)
}

/* Notifications */
.notification-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 25px;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.filter-tab {
    padding: 8px 12px;
    border: 1px solid #e3e8eb;
    border-radius: 8px;
    color: #64748b;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
}

.filter-tab.active {
    border-color: var(--teal);
    color: #0f766e;
    background: #edfbf9;
}

.notification-list {
    padding: 4px 24px;
}

.notification-item {
    position: relative;
    display: flex;
    gap: 15px;
    padding: 20px 4px;
    border-bottom: 1px solid #f0f2f4;
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item.unread::after {
    position: absolute;
    top: 28px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    content: "";
    background: #2563eb;
}

.notification-icon {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    place-items: center;
    border-radius: 12px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 18px;
}

.notification-item[data-type="event"] .notification-icon {
    color: #f97316;
    background: #fff7ed
}

.notification-item[data-type="document"] .notification-icon {
    color: #9333ea;
    background: #faf5ff
}

.notification-item[data-type="community"] .notification-icon {
    color: #16a34a;
    background: #f0fdf4
}

.notification-item[data-type="system"] .notification-icon {
    color: #475569;
    background: #f1f5f9
}

.notification-copy {
    min-width: 0;
    flex: 1;
}

.notification-copy h3 {
    margin: 0 22px 6px 0;
    font-size: 13px;
    font-weight: 750
}

.notification-item.unread h3 {
    font-weight: 850
}

.notification-copy p {
    margin: 0 0 7px;
    color: #64748b;
    font-size: 12px;
    line-height: 19px
}

.notification-copy time {
    color: #94a3b8;
    font-size: 10px
}

.notification-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}

.notification-actions button {
    padding: 6px 9px;
    border: 1px solid #dfe5e8;
    border-radius: 7px;
    color: #64748b;
    background: #fff;
    font-size: 10px;
    font-weight: 650
}

/* Search */
.search-hero-form {
    display: flex;
    width: min(700px,100%);
    height: 52px;
    margin-top: 24px;
    padding: 5px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(15,23,42,.12);
}

.search-hero-form i {
    align-self: center;
    margin: 0 10px 0 12px;
    color: #94a3b8;
}

.search-hero-form input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 13px;
}

.search-hero-form button {
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #2563eb;
    font-size: 12px;
    font-weight: 750;
}

.search-layout {
    display: grid;
    grid-template-columns: 285px minmax(0,1fr);
    gap: 25px;
}

.search-filter { position: sticky; top: 102px; align-self: start; padding: 20px; }
.search-filter-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.search-filter-title > div { display: flex; flex-direction: column; gap: 4px; }
.search-filter-title span { color: #111827; font-size: 15px; font-weight: 850; }
.search-filter-title small {color: #94a3b8;font-size: 11px;}
.search-filter-title button {padding: 4px 7px;border: 0;color: #2563eb;background: transparent;font-size: 11px;font-weight: 750;}
.search-filter-group + .search-filter-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid #edf0f3; }
.search-filter h3 {
    margin: 0 0 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.modern-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #475569;
    background: #f8fafb;
    cursor: pointer;
    font-size: 12px;
    transition: .18s;
}
.modern-filter-option:hover { border-color: #dce7e9; background: #fff; transform: translateX(2px); }
.modern-filter-option:has(input:checked) { border-color: #bce5e1; background: #f1fcfa; }
.modern-filter-option input,.modern-topic-option input { position: absolute; opacity: 0; pointer-events: none; }
.modern-filter-check { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 8px; color: #64748b; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.06); font-size: 14px; }
.modern-filter-option[data-tone="blue"] input:checked + .modern-filter-check{color:#2563eb;background:#eaf2ff}.modern-filter-option[data-tone="purple"] input:checked + .modern-filter-check{color:#9333ea;background:#f6edff}.modern-filter-option[data-tone="orange"] input:checked + .modern-filter-check{color:#f97316;background:#fff2e8}.modern-filter-option[data-tone="green"] input:checked + .modern-filter-check{color:#16a34a;background:#eaf9ef}
.modern-filter-label {min-width: 0;flex: 1;color: #334155 !important;font-size: 12px !important;font-weight: 700;}
.modern-filter-count {display: grid;min-width: 26px;height: 21px;place-items: center;border-radius: 999px;color: #64748b !important;background: #fff;font-size: 10px !important;font-weight: 750;}
.modern-topic-option {display: flex;align-items: center;gap: 9px;padding: 8px 3px;color: #475569;cursor: pointer;font-size: 12px;}
.modern-topic-option span {position: relative;min-width: 0;flex: 1;padding-left: 25px;color: #475569 !important;font-size: 12px !important;font-weight: 650;}
.modern-topic-option span::before { position: absolute; top: 50%; left: 0; display: grid; width: 16px; height: 16px; place-items: center; border: 1.5px solid #cbd5e1; border-radius: 5px; content: ""; transform: translateY(-50%); }
.modern-topic-option input:checked + span::before { border-color: var(--teal); color: #fff; background: var(--teal); content: "✓"; font-size: 10px; font-weight: 900; }
.modern-topic-option b {color: #94a3b8;font-size: 11px;font-weight: 700;}

.list-load-more { display: flex; justify-content: center; padding: 7px 24px 25px; }
.list-load-more button { display: inline-flex; min-height: 41px; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid #cfe1e3; border-radius: 9px; color: #0f766e; background: #fff; font-size: 11px; font-weight: 800; transition: .2s; }
.list-load-more button:hover { border-color: #8fd1cc; background: #effbf9; transform: translateY(-1px); }

.search-result {
    display: grid;
    grid-template-columns: 155px minmax(0,1fr);
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid #edf0f3;
}

.search-result:first-child {
    padding-top: 0;
}

.search-result:last-child {
    border-bottom: 0
}

.search-result img {
    width: 155px;
    height: 102px;
    border-radius: 11px;
    object-fit: cover;
}

.search-result-type {
    display: inline-flex;
    margin-bottom: 7px;
    padding: 4px 8px;
    border-radius: 99px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.search-result h3 {
    margin: 0 0 7px;
    font-size: 16px;
    font-weight: 800;
    line-height: 23px;
}

.search-result p {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 12px;
    line-height: 19px;
}

.search-result small {
    color: #94a3b8;
    font-size: 12px;
}

/* Contact and legal */
.contact-grid {
    display: grid;
    grid-template-columns: 420px minmax(0,1fr);
    gap: 30px;
}

.contact-methods {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
    border: 1px solid #edf0f3;
    border-radius: 12px;
    background: #fff;
}

.contact-method i {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border-radius: 10px;
    color: #0f766e;
    background: #e9faf8;
}

.contact-method h3 {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 800;
}

.contact-method p {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 18px
}

.map-placeholder {
    display: grid;
    min-height: 260px;
    place-items: center;
    margin-top: 26px;
    border-radius: 16px;
    color: #0f766e;
    background: linear-gradient(135deg,#dff7f4,#b9e9e5);
    text-align: center;
}

.map-placeholder i {
    display: block;
    margin-bottom: 9px;
    font-size: 35px;
}

.legal-shell {
    display: grid;
    grid-template-columns: 250px minmax(0,1fr);
    gap: 25px;
}

.legal-tabs {
    position: sticky;
    top: 102px;
    align-self: start;
    flex-direction: column;
    border: 1px solid #edf0f3;
    border-radius: 14px;
}

.legal-tab {
    width: 100%;
    text-align: left;
}

.legal-document {
    padding: 34px;
}

.legal-document h2 {
    margin: 0 0 12px;
    font-size: 27px;
    font-weight: 850
}

.legal-document .updated {
    margin-bottom: 28px;
    color: #94a3b8;
    font-size: 11px
}

.legal-document h3 {
    margin: 28px 0 10px;
    font-size: 16px;
    font-weight: 800
}

.legal-document p,.legal-document li {
    color: #475569;
    font-size: 13px;
    line-height: 22px
}

.legal-document ul {
    padding-left: 20px
}

.portal-toast {
    position: fixed;
    z-index: 1100;
    right: 24px;
    bottom: 24px;
    max-width: 360px;
    padding: 14px 17px;
    border-radius: 10px;
    opacity: 0;
    color: #fff;
    background: #0f766e;
    box-shadow: 0 15px 35px rgba(15,23,42,.2);
    pointer-events: none;
    transform: translateY(15px);
    transition: .25s;
    font-size: 12px;
}

.portal-toast.show {
    opacity: 1;
    transform: none;
}

.role-option { position: relative; }

/* Auth shell helpers (Blazor: tabs là link, social OAuth chưa làm) */
a.auth-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
a.auth-tab:hover { color: #0f766e; }
.auth-secondary-link a {
    border: 0;
    color: #2563eb;
    background: transparent;
    font-weight: 750;
    text-decoration: none;
}
.auth-secondary-link a:hover { text-decoration: underline; }
.social-login button:disabled { opacity: .55; cursor: not-allowed; }
.auth-alert {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
}
.auth-alert-error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.auth-alert-success { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }
.validation-message { color: #dc2626; font-size: 12px; margin-top: 4px; display: block; }

.auth-login-message {
    min-height: 20px;
    margin: -4px 0 4px;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
}
.portal-check-row .auth-forgot-link {
    border: 0;
    padding: 0;
    color: #2563eb;
    background: transparent;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
}
.portal-check-row .auth-forgot-link:hover { text-decoration: underline; }
.portal-muted { color: #64748b; font-size: 13px; }

/* OTP: 1 ô nhập nhưng nhìn gọn kiểu mockup */
.auth-otp-input {
    letter-spacing: .35em;
    text-align: center;
    font-size: 20px !important;
    font-weight: 800;
}

@media (max-width: 1199.98px) {
    .auth-shell {
        grid-template-columns:38% 62%
    }

    .auth-brand {
        padding: 48px 34px
    }

    .auth-panel {
        padding: 40px
    }

    .dashboard-grid,.notification-layout {
        grid-template-columns: minmax(0,1fr) 310px
    }

    .metric-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .contact-grid {
        grid-template-columns: 350px minmax(0,1fr)
    }
}

@media (max-width: 991.98px) {
    .portal-main {
        padding-top:72px
    }

    .auth-main {
        padding-top: 32px
    }

    .auth-shell {
        grid-template-columns: 1fr
    }

    .auth-brand {
        min-height: 340px
    }

    .auth-brand-logo {
        margin-bottom: 38px
    }

    .auth-benefits {
        grid-template-columns: repeat(3,1fr)
    }

    .dashboard-grid,.notification-layout,.profile-layout,.contact-grid,.legal-shell {
        grid-template-columns: 1fr
    }

    .portal-hero-row {
        align-items: flex-start;
        flex-direction: column
    }

    .portal-hero-actions {
        align-self: stretch
    }

    .portal-hero-actions .portal-button {
        flex: 1
    }

    .legal-tabs {
        position: static;
        flex-direction: row
    }

    .search-layout {
        grid-template-columns: 1fr
    }

    .search-filter {
        display: none
    }

    .site-footer {
        height: auto
    }

    .certificate-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 767.98px) {
    .portal-hero {
        padding:43px 0 38px
    }

    .portal-hero h1 {
        font-size: 29px
    }

    .portal-content {
        padding: 32px 0 52px
    }

    .auth-main {
        padding: 88px 12px 30px
    }

    .auth-shell {
        border-radius: 17px
    }

    .auth-brand {
        display: none
    }

    .auth-panel {
        padding: 26px 20px 32px
    }

    .portal-form-row {
        grid-template-columns: 1fr;
        gap: 0
    }

    .role-options {
        grid-template-columns: 1fr
    }

    .role-option span {
        min-height: 52px;
        flex-direction: row
    }

    .social-login {
        grid-template-columns: 1fr
    }

    .metric-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .metric-card {
        min-height: 120px;
        padding: 17px
    }

    .course-progress-item {
        grid-template-columns: 72px minmax(0,1fr)
    }

    .course-progress-item img {
        width: 72px;
        height: 54px
    }

    .progress-number {
        grid-column: 2
    }

    .profile-cover {
        height: 310px
    }

    .profile-header-inner {
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        text-align: center
    }

    .profile-avatar {
        width: 100px;
        height: 100px;
        flex-basis: 100px
    }

    .profile-name {
        flex: 0
    }

    .profile-tabs {
        overflow-x: auto
    }

    .profile-tab {
        white-space: nowrap
    }

    .certificate-grid {
        grid-template-columns: 1fr
    }

    .notification-list {
        padding: 4px 16px
    }

    .search-result {
        grid-template-columns: 1fr
    }

    .search-result img {
        width: 100%;
        height: 180px
    }

    .contact-grid {
        gap: 22px
    }

    .legal-tabs {
        overflow-x: auto
    }

    .legal-tab {
        width: auto;
        white-space: nowrap
    }

    .legal-document {
        padding: 22px
    }

    .otp-boxes {
        gap: 6px
    }

    .otp-boxes input {
        height: 45px
    }

    .portal-card-header {
        align-items: flex-start;
        flex-direction: column
    }

    .footer-main {
        display: block
    }
}

@media (max-width: 479.98px) {
    .metric-grid {
        grid-template-columns:1fr
    }

    .portal-hero-actions {
        flex-direction: column
    }

    .portal-hero-actions .portal-button {
        width: 100%
    }

    .search-hero-form button {
        padding: 0 13px
    }

    .auth-tabs {
        margin-bottom: 23px
    }
}