:root{
        --bg:        #e4e7f0;
        --card:      #f3f4f9;
        --line:      #d3d7e3;
        --ink:       #23273a;
        --ink-soft:  #5c6272;
        --ink-mute:  #83899c;
        --green:     #17b26a;
        --green-bg:  #e0f5eb;
        --amber:     #f5a524;
        --amber-bg:  #fbedd6;
        --brand:     #4f6bff;
        --brand-bg:  #e7eaff;
        /* ---- Bộ màu Gradient (đổi được ở trang Admin > Giao diện > site_settings key "site_theme") ---- */
        --brand2:    #8b5cf6;   /* màu phụ để pha gradient cùng --brand */
        --accent2:   #ff7ab8;   /* điểm nhấn thứ 3, dùng cho glow/blob trang trí */
        --radius-lg: 24px;      /* độ bo góc của khối hero / thẻ lớn — đổi được từ admin */
        --radius-card: 16px;    /* độ bo góc của thẻ môn học/tài liệu/quick-tile — đổi được từ admin */
        --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
        --grad-hero:  linear-gradient(120deg, color-mix(in srgb, var(--brand) 16%, #eef1ff) 0%, color-mix(in srgb, var(--brand2) 14%, #f7f4ff) 55%, color-mix(in srgb, var(--green) 12%, #eefaf3) 100%);
        --shadow:    0 1px 2px rgba(20,22,40,.06), 0 8px 24px -12px rgba(20,22,40,.12);
        --shadow-hov:0 4px 10px rgba(20,22,40,.08), 0 20px 40px -16px rgba(20,22,40,.2);
        --shadow-glow: 0 10px 30px -10px color-mix(in srgb, var(--brand) 45%, transparent);
    }
    html[data-theme="dark"]{
        --bg:        #14151c;
        --card:      #1c1e28;
        --line:      #2c2f3c;
        --ink:       #f0f1f6;
        --ink-soft:  #a2a7ba;
        --ink-mute:  #6f7488;
        --green:     #2ed392;
        --green-bg:  #163a2c;
        --amber:     #ffbd4a;
        --amber-bg:  #3a2e12;
        --brand:     #7b93ff;
        --brand-bg:  #232a4d;
        --brand2:    #a78bfa;
        --accent2:   #ff8fc7;
        --grad-hero:  linear-gradient(120deg, color-mix(in srgb, var(--brand) 26%, #1d2140) 0%, color-mix(in srgb, var(--brand2) 22%, #201c38) 55%, color-mix(in srgb, var(--green) 20%, #142a22) 100%);
        --shadow:    0 1px 2px rgba(0,0,0,.2), 0 8px 24px -12px rgba(0,0,0,.5);
        --shadow-hov:0 4px 10px rgba(0,0,0,.25), 0 20px 40px -16px rgba(0,0,0,.6);
        --shadow-glow: 0 10px 34px -8px color-mix(in srgb, var(--brand) 55%, transparent);
    }
    html{ transition: background 0.38s ease; }
    body, .sidebar, .topbar, .card, .stat, .quick-tile, .empty-state, .hero-card{
        transition: background 0.38s ease, border-color 0.38s ease, color 0.38s ease, box-shadow 0.38s ease;
    }
    *{ margin:0; padding:0; box-sizing:border-box; }
    body{
        background: var(--bg);
        color: var(--ink);
        font-family:'Be Vietnam Pro', sans-serif;
        min-height:100vh;
    }
    @media (prefers-reduced-motion: reduce){
        *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
    }

    /* ---------------- layout shell ---------------- */
    .shell{ display:flex; min-height:100vh; }

    /* ---------------- sidebar ---------------- */
    .sidebar{
        width:230px; flex-shrink:0;
        background:var(--card); border-right:1px solid var(--line);
        display:flex; flex-direction:column;
        position:sticky; top:0; height:100vh;
        transition:width 0.31s ease;
    }
    .side-logo{ display:flex; align-items:center; gap:10px; padding:22px 20px 18px; }
    .side-logo .mark{
        width:34px; height:34px; border-radius:10px; flex-shrink:0;
        background:linear-gradient(135deg, var(--brand), var(--brand2));
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-weight:800; font-size:.95rem;
    }
    .side-logo .name{ font-weight:800; font-size:1rem; white-space:nowrap; }

    .side-nav{ flex:1; padding:6px 12px; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
    .side-link{
        display:flex; align-items:center; gap:12px;
        padding:11px 12px; border-radius:12px;
        color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.9rem;
        cursor:pointer; transition:background 0.28s ease, color 0.28s ease;
        white-space:nowrap;
    }
    .side-link i{ width:18px; text-align:center; font-size:.95rem; flex-shrink:0; }
    .side-link:hover{ background:#f2f3f8; color:var(--ink); }
    .side-link.active{
        background:var(--grad-brand); color:#fff;
        box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 55%, transparent);
    }
    html[data-theme="dark"] .side-link:hover{ background:rgba(255,255,255,.06); }

    /* ---- nút thu gọn / mở rộng sidebar ---- */
    .side-collapse-wrap{ padding:10px 12px 4px; margin-top:auto; }
    .side-collapse-btn{
        width:100%; display:flex; align-items:center; justify-content:center;
        padding:9px; border-radius:10px; border:none; background:transparent;
        color:var(--ink-mute); cursor:pointer; font-size:.95rem;
        transition:background 0.28s ease, color 0.28s ease;
    }
    .side-collapse-btn:hover{ background:#f2f3f8; color:var(--brand); }
    .side-collapse-btn i{ transition:transform 0.31s ease; }

    .side-foot{ padding:14px 12px 18px; border-top:1px solid var(--line); }
    .side-user{
        display:flex; align-items:center; gap:10px;
        padding:10px 10px; border-radius:12px; cursor:pointer;
        transition:background 0.28s ease;
        overflow:hidden;
    }
    .side-user:hover{ background:#f2f3f8; }
    .side-user .u-name, .side-user .u-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* ---- trạng thái sidebar đã thu gọn (chỉ còn icon) ---- */
    .sidebar.collapsed{ width:76px; }
    .sidebar.collapsed .side-logo{ justify-content:center; padding:22px 0 18px; }
    .sidebar.collapsed .side-logo .name{ display:none; }
    .sidebar.collapsed .side-link{ justify-content:center; padding:11px 0; gap:0; }
    .sidebar.collapsed .side-link .lbl{ display:none; }
    .sidebar.collapsed #sideProBtn{
        width:44px; height:44px; padding:0; margin:0 auto 12px;
        border-radius:50%; justify-content:center;
    }
    .sidebar.collapsed #sideProBtn .lbl{ display:none; }
    .sidebar.collapsed #sideEarnProBtn{
        width:44px; height:44px; padding:0; margin:0 auto 12px;
        border-radius:50%; justify-content:center;
    }
    .sidebar.collapsed #sideEarnProBtn .lbl{ display:none; }
    .sidebar.collapsed .side-user{ justify-content:center; padding:10px 0; }
    .sidebar.collapsed .side-user .u-info{ display:none; }
    .sidebar.collapsed .side-collapse-btn i{ transform:rotate(180deg); }
    .side-avatar{
        width:36px; height:36px; border-radius:50%;
        background:linear-gradient(135deg, var(--brand), var(--brand2));
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-weight:800; font-size:.85rem; flex-shrink:0;
        box-shadow:0 0 0 2px var(--card), 0 0 0 3px rgba(79,107,255,.35);
    }
    .side-avatar.is-guest, .avatar-btn.is-guest{
        background:linear-gradient(135deg, #9aa0b1, #6f7488);
        box-shadow:0 0 0 2px var(--card), 0 0 0 3px rgba(154,160,177,.3);
    }
    /* ----- avatar "nổi bật" khi tài khoản đang dùng gói Pro: chỉ thêm viền vàng, giữ nguyên màu nền avatar ----- */
    .side-avatar.is-pro, .avatar-btn.is-pro{
        box-shadow:0 0 0 3px var(--card), 0 0 0 6px #f5a524, 0 0 18px -2px rgba(245,165,36,.75);
    }
    .side-avatar .pro-badge, .avatar-btn .pro-badge, .acc-modal-avatar .pro-badge{
        display:none;
        position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; border-radius:50%;
        background:linear-gradient(135deg, #f6b93b, #ffd97a);
        border:2px solid var(--card);
        align-items:center; justify-content:center;
        color:#7a4a00; font-size:.5rem;
        box-shadow:0 2px 5px rgba(0,0,0,.25);
    }
    .side-avatar.is-pro .online-dot, .avatar-btn.is-pro .online-dot{ display:none; }
    .side-avatar.is-pro .pro-badge, .avatar-btn.is-pro .pro-badge, .acc-modal-avatar.is-pro .pro-badge{ display:flex; }
    .side-avatar .avt-content, .avatar-btn .avt-content{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
    .side-user .u-name{ font-size:.86rem; font-weight:700; line-height:1.3; }
    .side-user .u-sub{ font-size:.74rem; color:var(--ink-mute); }

    .main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }

    /* ---------------- topbar ---------------- */
    .topbar{
        display:flex; align-items:center; justify-content:space-between;
        padding:18px 32px; background:var(--card); border-bottom:1px solid var(--line);
        position:sticky; top:0; z-index:10;
    }
    .topbar-title{ font-weight:700; font-size:1.02rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .topbar-title span{ color:var(--ink-mute); font-weight:500; font-size:.82rem; display:block; margin-top:-2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .topbar-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
    .topbar .avatar-btn{
        width:38px; height:38px; border-radius:50%;
        background:linear-gradient(135deg, var(--brand), var(--brand2));
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-weight:800; font-size:.88rem; cursor:pointer; flex-shrink:0;
        border:2px solid var(--card); box-shadow:0 0 0 1px var(--line);
        position:relative; transition:transform 0.28s ease, box-shadow 0.28s ease;
    }
    .topbar .avatar-btn:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px var(--brand); }
    .topbar .avatar-btn.is-pro{
        box-shadow:0 0 0 2px var(--card), 0 0 0 3px #f5a524, 0 0 14px -2px rgba(245,165,36,.65);
    }
    .topbar .avatar-btn.is-pro:hover{ box-shadow:0 0 0 2px var(--card), 0 0 0 3px #f5a524, 0 0 18px -1px rgba(245,165,36,.8); }
    .avatar-btn .online-dot, .side-avatar .online-dot{
        position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%;
        background:var(--green); border:2px solid var(--card);
    }
    .side-avatar{ position:relative; }

    .theme-toggle{
        width:38px; height:38px; border-radius:50%;
        border:1px solid var(--line); background:var(--card); cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        color:var(--ink-soft); font-size:.92rem;
        transition:background 0.31s ease, color 0.31s ease, border-color 0.31s ease;
    }
    .theme-toggle:hover{ background:var(--brand-bg); color:var(--brand); }
    .theme-toggle .fa-sun{ display:none; }
    html[data-theme="dark"] .theme-toggle .fa-sun{ display:inline; }
    html[data-theme="dark"] .theme-toggle .fa-moon{ display:none; }
    .topbar .pill{
        display:flex; align-items:center; gap:8px;
        background:var(--green-bg); color:var(--green);
        font-weight:600; font-size:.82rem;
        padding:8px 14px; border-radius:999px;
        flex-shrink:0; white-space:nowrap;
    }

    /* ---------------- chuông thông báo riêng (user_notifications) ---------------- */
    .notify-bell{
        position:relative; width:38px; height:38px; border-radius:50%;
        border:1px solid var(--line); background:var(--card); cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        color:var(--ink-soft); font-size:.92rem;
        transition:background 0.31s ease, color 0.31s ease, border-color 0.31s ease;
    }
    .notify-bell:hover{ background:var(--brand-bg); color:var(--brand); }
    .notify-bell .notify-dot{
        position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 3px;
        border-radius:999px; background:#e5484d; color:#fff; font-size:.62rem; font-weight:800;
        display:flex; align-items:center; justify-content:center; border:2px solid var(--card);
    }
    .notify-bell .notify-dot.hidden{ display:none; }
    .notify-dropdown{
        position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:88vw;
        background:var(--card); border:1px solid var(--line); border-radius:14px;
        box-shadow:0 12px 32px -8px rgba(0,0,0,.22); z-index:60; overflow:hidden;
    }
    .notify-dropdown.hidden{ display:none; }
    .notify-dropdown-head{ padding:12px 16px; font-weight:700; border-bottom:1px solid var(--line); font-size:.9rem; }
    .notify-dropdown-list{ max-height:360px; overflow:auto; }
    .notify-item{ padding:12px 16px; border-bottom:1px solid var(--line); }
    .notify-item:last-child{ border-bottom:none; }
    .notify-item.unread{ background:var(--brand-bg); }
    .notify-item-title{ font-weight:700; font-size:.86rem; margin-bottom:2px; }
    .notify-item-msg{ font-size:.82rem; color:var(--ink-soft); white-space:pre-wrap; }
    .notify-item-time{ font-size:.72rem; color:var(--ink-mute); margin-top:6px; }
    .notify-dropdown-empty{ padding:26px 16px; text-align:center; color:var(--ink-mute); font-size:.86rem; }

    /* ---------------- account modal (thông tin / lịch sử / đăng xuất) ---------------- */
    .acc-overlay{
        position:fixed; inset:0; background:rgba(10,11,18,.5); backdrop-filter:blur(2px);
        display:none; align-items:center; justify-content:center; z-index:200; padding:16px;
    }
    .acc-overlay.show{ display:flex; }
    .acc-modal{
        width:100%; max-width:380px; background:var(--card); border:1px solid var(--line);
        border-radius:20px; box-shadow:var(--shadow-hov); overflow:hidden;
        animation:accPop .18s ease;
    }
    @keyframes accPop{ from{ opacity:0; transform:scale(.96) translateY(6px); } to{ opacity:1; transform:none; } }
    .acc-modal-head{
        display:flex; align-items:center; gap:12px; padding:20px 20px 16px;
        border-bottom:1px solid var(--line); position:relative;
    }
    .acc-modal-avatar{
        width:52px; height:52px; border-radius:50%; flex-shrink:0;
        background:linear-gradient(135deg, var(--brand), var(--brand2));
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-weight:800; font-size:1.2rem;
        position:relative;
    }
    .acc-modal-avatar .avt-content{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
    .acc-modal-avatar.is-pro{
        box-shadow:0 0 0 3px var(--card), 0 0 0 6px #f5a524, 0 0 18px -2px rgba(245,165,36,.75);
    }
    .acc-modal-avatar .pro-badge{ width:20px; height:20px; font-size:.62rem; }
    .acc-modal-name{ font-weight:800; font-size:1rem; line-height:1.3; word-break:break-word; }
    .acc-modal-sub{ font-size:.78rem; color:var(--ink-mute); margin-top:2px; }
    .acc-modal-close{
        position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%;
        border:none; background:transparent; color:var(--ink-mute); cursor:pointer;
        display:flex; align-items:center; justify-content:center; font-size:.85rem;
        transition:background 0.24s ease, color 0.24s ease;
    }
    .acc-modal-close:hover{ background:var(--brand-bg); color:var(--brand); }
    .acc-tabs{ display:flex; gap:4px; padding:12px 16px 0; }
    .acc-tab{
        flex:1; border:none; background:transparent; padding:9px 10px; border-radius:10px;
        font-family:inherit; font-weight:700; font-size:.82rem; color:var(--ink-mute); cursor:pointer;
        transition:background 0.24s ease, color 0.24s ease;
    }
    .acc-tab:hover{ color:var(--ink-soft); }
    .acc-tab.active{ background:var(--brand-bg); color:var(--brand); }
    .acc-body{ padding:16px 20px 4px; min-height:120px; max-height:320px; overflow-y:auto; }
    .acc-panel{ display:none; }
    .acc-panel.active{ display:block; }
    .acc-info-row{
        display:flex; align-items:center; justify-content:space-between; gap:10px;
        padding:11px 0; border-bottom:1px solid var(--line); font-size:.85rem;
    }
    .acc-info-row:last-child{ border-bottom:none; }
    .acc-info-row .label{ color:var(--ink-mute); font-weight:600; }
    .acc-info-row .value{ color:var(--ink); font-weight:700; text-align:right; word-break:break-word; }
    .acc-info-row .value #acctPageBalanceValue,
    .acc-info-row .value #accBalanceValue{ white-space:nowrap; word-break:normal; }
    .acc-history-item{
        display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);
    }
    .acc-history-item:last-child{ border-bottom:none; }
    a.acc-history-item{ text-decoration:none; color:inherit; cursor:pointer; border-radius:10px; transition:background 0.24s ease; }
    a.acc-history-item:hover{ background:var(--brand-bg); padding-left:8px; padding-right:8px; margin:0 -8px; }
    .acc-history-arrow{ margin-left:auto; color:var(--ink-mute); font-size:.8rem; flex-shrink:0; }
    .acc-history-icon{
        width:34px; height:34px; border-radius:10px; flex-shrink:0;
        background:var(--brand-bg); color:var(--brand);
        display:flex; align-items:center; justify-content:center; font-size:.85rem;
    }
    .acc-history-title{ font-size:.84rem; font-weight:700; }
    .acc-history-meta{ font-size:.74rem; color:var(--ink-mute); margin-top:1px; }
    .acc-history-score{ margin-left:auto; font-weight:800; font-size:.9rem; color:var(--brand); flex-shrink:0; }
    .acc-empty{
        display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
        padding:26px 10px 20px; color:var(--ink-mute);
    }
    .acc-empty i{ font-size:1.6rem; color:var(--ink-mute); opacity:.6; }
    .acc-empty p{ font-size:.82rem; line-height:1.5; }
    .acc-loading{ text-align:center; padding:26px 10px; color:var(--ink-mute); font-size:.85rem; }
    .acc-foot{ padding:14px 20px 20px; }
    .acc-logout-btn{
        width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
        background:#fdeeee; color:#e5484d; border:none; border-radius:12px;
        padding:12px; font-family:inherit; font-weight:700; font-size:.86rem; cursor:pointer;
        transition:background 0.24s ease;
    }
    html[data-theme="dark"] .acc-logout-btn{ background:#3a2020; color:#ff7875; }
    .acc-logout-btn:hover{ background:#fadadd; }
    html[data-theme="dark"] .acc-logout-btn:hover{ background:#472525; }

    /* ----- nút "Nâng cấp Pro" trong popup tài khoản nhanh ----- */
    .acc-upgrade-btn{
        width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
        margin-top:12px; border:none; border-radius:12px; padding:12px;
        background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff;
        font-family:inherit; font-weight:800; font-size:.86rem; cursor:pointer;
        box-shadow:0 6px 16px -6px rgba(108,92,246,.55);
        transition:transform 0.24s ease, box-shadow 0.24s ease;
    }
    .acc-upgrade-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(108,92,246,.65); }
    .acc-upgrade-btn i{ font-size:.9rem; }

    /* ----- gói sử dụng (Miễn phí / Premium) ----- */
    .acc-plan-badge{
        display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:999px;
        font-size:.74rem; font-weight:800; background:#eef0f8; color:var(--ink-soft);
    }
    html[data-theme="dark"] .acc-plan-badge{ background:#2c2f3c; color:var(--ink-soft); }
    .acc-plan-badge.premium{ background:linear-gradient(135deg,#f5a524,#ffbd4a); color:#5a3c05; }
    .acc-plan-badge.premium::before{ content:'👑'; }

    /* ----- nút "đi tới trang Tài khoản" trong popup nhanh ----- */
    .acc-changepw-btn{
        width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
        background:var(--brand-bg); color:var(--brand); border:none; border-radius:12px;
        padding:11px; font-family:inherit; font-weight:700; font-size:.84rem; cursor:pointer;
        margin-top:14px; transition:background 0.24s ease, color 0.24s ease;
    }
    .acc-changepw-btn:hover{ background:var(--brand); color:#fff; }

    /* ----- nút "Trang Quản trị" — chỉ hiện với tài khoản có quyền admin ----- */
    .acc-admin-btn{
        width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
        background:#fff4dd; color:#a3620a; border:none; border-radius:12px;
        padding:11px; font-family:inherit; font-weight:700; font-size:.84rem; cursor:pointer;
        margin-top:10px; transition:background 0.24s ease, color 0.24s ease;
    }
    .acc-admin-btn:hover{ background:#f5a524; color:#fff; }
    html[data-theme="dark"] .acc-admin-btn{ background:#3a2e12; color:#ffbd4a; }
    html[data-theme="dark"] .acc-admin-btn:hover{ background:#f5a524; color:#1c1e28; }

    /* ----- sub-tab "Tổng quan" / "Lịch sử giao dịch" trong trang Tài khoản ----- */
    .acct-subtabs{ display:inline-flex; gap:4px; padding:4px; background:var(--card); border:1px solid var(--line); border-radius:14px; margin-bottom:24px; }
    .acct-subtab{
        border:none; background:transparent; padding:9px 18px; border-radius:10px;
        font-family:inherit; font-weight:700; font-size:.86rem; color:var(--ink-mute); cursor:pointer;
        transition:background 0.24s ease, color 0.24s ease;
    }
    .acct-subtab:hover{ color:var(--ink-soft); }
    .acct-subtab.active{ background:var(--brand); color:#fff; }
    .acct-subpanel{ display:none; }
    .acct-subpanel.active{ display:block; animation:accPop .18s ease; }

    /* ----- khối "Đổi mật khẩu" thu gọn, bấm mới hiện ----- */
    .acctpw-toggle{
        cursor:pointer; user-select:none; display:flex; align-items:center; gap:12px;
        background:var(--card); border:1.5px solid var(--line); border-radius:16px;
        padding:16px 20px; margin-bottom:0; transition:border-color 0.24s ease, background 0.24s ease;
    }
    .acctpw-toggle:hover{ border-color:var(--brand); }
    .acctpw-toggle .acctpw-toggle-icon{
        width:36px; height:36px; border-radius:10px; flex-shrink:0;
        display:flex; align-items:center; justify-content:center; font-size:.95rem;
        background:var(--brand-bg); color:var(--brand);
    }
    .acctpw-toggle h2{ flex:1; }
    .acctpw-toggle-hint{ font-size:.78rem; font-weight:600; color:var(--ink-mute); margin-right:4px; }
    .acctpw-chevron{ color:var(--ink-mute); font-size:.9rem; transition:transform 0.31s ease; flex-shrink:0; }
    .acctpw-toggle.open{ border-color:var(--brand); border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0 !important; }
    .acctpw-toggle.open .acctpw-chevron{ transform:rotate(180deg); color:var(--brand); }
    .acctpw-card{ border-top-left-radius:0 !important; border-top-right-radius:0 !important; border-top:none !important; }
    @media (max-width: 480px){ .acctpw-toggle-hint{ display:none; } }

    /* ----- đổi mật khẩu (trang Tài khoản đầy đủ) ----- */
    .acctpw-card{
        background:var(--card); border:1px solid var(--line); border-radius:20px;
        padding:22px 24px; margin-bottom:28px; animation:accPop .18s ease;
    }
    .acctpw-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:14px; }
    .acctpw-field{ display:flex; flex-direction:column; gap:6px; }
    .acctpw-field label{ font-size:.78rem; font-weight:700; color:var(--ink-mute); }
    .acctpw-field input{
        width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line);
        background:var(--bg); color:var(--ink); font-family:inherit; font-size:.88rem;
    }
    .acctpw-field input:focus{ outline:none; border-color:var(--brand); }
    .acctpw-msg{ font-size:.82rem; font-weight:600; min-height:1.3em; margin-bottom:10px; }
    .acctpw-msg.err{ color:#e5484d; }
    .acctpw-msg.ok{ color:var(--green); }
    .acctpw-save-btn{
        display:inline-flex; align-items:center; gap:8px;
        padding:12px 22px; border-radius:12px; border:none;
        background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff;
        font-family:inherit; font-weight:700; font-size:.86rem; cursor:pointer;
        transition:filter 0.24s ease;
    }
    .acctpw-save-btn:hover{ filter:brightness(1.06); }
    .acctpw-save-btn:disabled{ opacity:.65; cursor:not-allowed; }
    @media (max-width: 780px){ .acctpw-grid{ grid-template-columns:1fr; } }

    /* ----- lịch sử giao dịch (trang Tài khoản đầy đủ) ----- */
    .acct-order-card{
        background:var(--card); border:1px solid var(--line); border-radius:20px;
        padding:6px 24px; margin-bottom:28px;
    }
    .acct-order-status{
        margin-left:auto; flex-shrink:0; font-size:.74rem; font-weight:800;
        padding:4px 11px; border-radius:999px; white-space:nowrap;
    }
    .acct-order-status.paid{ background:var(--green-bg); color:var(--green); }
    .acct-order-status.pending{ background:var(--amber-bg); color:var(--amber); }
    .acct-order-status.failed, .acct-order-status.cancelled{ background:#fdeeee; color:#e5484d; }
    html[data-theme="dark"] .acct-order-status.failed, html[data-theme="dark"] .acct-order-status.cancelled{ background:#3a2020; color:#ff7875; }

    /* ----- Lịch sử mua hàng (trang riêng, danh sách đầy đủ) ----- */
    .hist-stats{ display:flex; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
    .hist-stat{
        flex:1; min-width:180px; display:flex; align-items:center; gap:14px;
        background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px 18px;
    }
    .hist-stat-ico{
        width:42px; height:42px; border-radius:12px; flex-shrink:0; font-size:1rem;
        display:flex; align-items:center; justify-content:center; background:var(--brand-bg); color:var(--brand);
    }
    .hist-stat-ico.amount{ background:var(--green-bg); color:var(--green); }
    .hist-stat-label{ font-size:.76rem; color:var(--ink-mute); font-weight:600; }
    .hist-stat-value{ font-size:1.25rem; font-weight:800; color:var(--ink); margin-top:1px; }

    .hist-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
    .hist-filters{ display:flex; gap:8px; flex-wrap:wrap; }
    .hist-filter-chip{
        display:inline-flex; align-items:center; gap:6px;
        border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
        padding:8px 14px; border-radius:999px; font-family:inherit; font-weight:700; font-size:.8rem;
        cursor:pointer; transition:background 0.24s ease, color 0.24s ease, border-color 0.24s ease; white-space:nowrap;
    }
    .hist-filter-chip:hover{ border-color:var(--brand); color:var(--brand); }
    .hist-filter-chip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
    .hist-search{
        display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line);
        border-radius:12px; padding:9px 14px; min-width:220px; flex:0 0 auto;
    }
    .hist-search i{ color:var(--ink-mute); font-size:.82rem; }
    .hist-search input{
        border:none; outline:none; background:transparent; color:var(--ink); font-family:inherit;
        font-size:.84rem; width:100%;
    }
    .hist-search input::placeholder{ color:var(--ink-mute); }

    .hist-row{
        display:flex; align-items:center; gap:14px; padding:15px 6px; border-bottom:1px solid var(--line);
        transition:background 0.24s ease; border-radius:12px;
    }
    .hist-row:last-child{ border-bottom:none; }
    a.hist-row{ text-decoration:none; color:inherit; cursor:pointer; }
    a.hist-row:hover{ background:var(--brand-bg); padding-left:12px; padding-right:12px; margin:0 -6px; }
    .hist-icon{
        width:44px; height:44px; border-radius:13px; flex-shrink:0; font-size:1rem;
        display:flex; align-items:center; justify-content:center;
    }
    .hist-icon.type-subscription{ background:var(--amber-bg); color:var(--amber); }
    .hist-icon.type-document{ background:var(--brand-bg); color:var(--brand); }
    .hist-icon.type-product{ background:var(--amber-bg); color:var(--amber); }
    .hist-icon.type-course{ background:#f0e7ff; color:#8b5cf6; }
    html[data-theme="dark"] .hist-icon.type-course{ background:#2e2140; color:#b794ff; }
    .hist-icon.type-other{ background:var(--line); color:var(--ink-mute); }

    .hist-body{ flex:1; min-width:0; }
    .hist-title{ font-size:.92rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .hist-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px; font-size:.76rem; color:var(--ink-mute); }
    .hist-meta .hist-dot{ opacity:.5; }
    .hist-side{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; margin-left:10px; }
    .hist-amount{ font-size:.92rem; font-weight:800; color:var(--ink); white-space:nowrap; }
    .hist-arrow{ color:var(--ink-mute); font-size:.75rem; margin-left:4px; flex-shrink:0; }

    @media (max-width:640px){
        .hist-row{ flex-wrap:wrap; }
        .hist-icon{ width:38px; height:38px; font-size:.9rem; }
        .hist-side{ margin-left:0; width:100%; flex-direction:row-reverse; justify-content:space-between; align-items:center; order:3; padding-top:8px; }
        .hist-toolbar{ flex-direction:column; align-items:stretch; }
        .hist-search{ min-width:0; }
    }

    .wrap{ max-width:1180px; width:100%; margin:0 auto; padding:36px 28px 60px; flex:1; display:flex; flex-direction:column; }

    /* ---------------- hero row ---------------- */
    .hero{
        display:grid; grid-template-columns: 1fr; gap:20px;
        margin-bottom:34px;
    }
    .hero-card{
        background: var(--grad-hero);
        background-image: radial-gradient(circle at 1.6px 1.6px, color-mix(in srgb, #fff 10%, transparent) 1.6px, transparent 0), var(--grad-hero);
        background-size: 24px 24px, auto;
        border:1px solid color-mix(in srgb, var(--ink) 8%, var(--line));
        border-radius:28px; padding:42px 44px;
        display:flex; align-items:center; gap:32px;
        position:relative; overflow:hidden;
        box-shadow: var(--shadow-glow), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
    }
    .hero-card::before{
        content:''; position:absolute; top:-110px; right:-90px; width:320px; height:320px; border-radius:50%;
        background:radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent) 0%, transparent 70%);
        filter:blur(6px); pointer-events:none; animation:heroBlobDrift 9s ease-in-out infinite;
    }
    .hero-card::after{
        content:''; position:absolute; bottom:-120px; left:6%; width:280px; height:280px; border-radius:50%;
        background:radial-gradient(circle, color-mix(in srgb, var(--accent2) 50%, transparent) 0%, transparent 70%);
        filter:blur(6px); pointer-events:none; animation:heroBlobDrift 11s ease-in-out infinite reverse;
    }
    @keyframes heroBlobDrift{
        0%,100%{ transform:translate(0,0) scale(1); }
        50%{ transform:translate(-14px,10px) scale(1.06); }
    }
    @media (prefers-reduced-motion: reduce){ .hero-card::before, .hero-card::after{ animation:none; } }
    /* ---- kiểu khối hero, đổi được ở admin > Giao diện ---- */
    .hero-card[data-hero-style="minimal"]{ background:var(--card); box-shadow:var(--shadow); }
    .hero-card[data-hero-style="minimal"]::before,
    .hero-card[data-hero-style="minimal"]::after{ display:none; }
    .hero-card[data-hero-style="minimal"] .hero-eyebrow{ background:var(--brand-bg); color:var(--brand); box-shadow:none; border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
    .hero-card[data-hero-style="minimal"] .hero-eyebrow::before{ background:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
    .hero-card[data-hero-style="minimal"] h1{ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--ink); text-shadow:none; }
    .hero-card[data-hero-style="dots"]{
        background-image: var(--grad-hero), radial-gradient(color-mix(in srgb, var(--brand) 45%, transparent) 1.4px, transparent 1.4px);
        background-size: auto, 18px 18px;
        background-position: 0 0, 0 0;
    }
    .hero-card[data-hero-style="dots"]::before,
    .hero-card[data-hero-style="dots"]::after{ display:none; }
    body[data-show-illustration="0"] .hero-illustration{ display:none; }
    body[data-show-avatars="0"] .avatar-group{ display:none; }
    .hero-text{ flex:1; min-width:0; position:relative; z-index:1; }
    .hero-illustration{ flex-shrink:0; width:172px; height:172px; filter:drop-shadow(0 14px 22px rgba(30,25,60,.14)); position:relative; z-index:1; }
    /* Ảnh trường: tràn full khung banner, mờ dần vào nền để chữ vẫn đọc rõ.
       Cùng công tắc "showIllustration" ở admin > Giao diện. */
    .hero-card.has-photo{ min-height:260px; }
    .hero-card.has-photo .hero-text{ max-width:52%; }
    .hero-photo{
        position:absolute; top:0; right:0; bottom:0; width:60%; z-index:0; line-height:0; overflow:hidden;
        -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
                mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
    }
    .hero-photo img{ width:100%; height:100%; display:block; object-fit:cover; object-position:38% 55%; }
    .hero-photo::after{
        content:''; position:absolute; inset:0; pointer-events:none;
        background:linear-gradient(120deg, color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 55%);
    }
    body[data-show-illustration="0"] .hero-photo{ display:none; }
    body[data-show-illustration="0"] .hero-card.has-photo{ min-height:0; }
    body[data-show-illustration="0"] .hero-card.has-photo .hero-text{ max-width:none; }
    .hero-eyebrow{
        display:inline-flex; align-items:center; gap:8px;
        font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
        color:#fff; margin-bottom:16px;
        background:color-mix(in srgb, #fff 16%, transparent);
        backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
        border:1px solid color-mix(in srgb, #fff 26%, transparent);
        padding:7px 16px 7px 11px; border-radius:999px;
        box-shadow:0 6px 16px -8px rgba(0,0,0,.3);
    }
    .hero-eyebrow::before{
        content:''; width:7px; height:7px; border-radius:50%; background:#fff; flex-shrink:0;
        box-shadow:0 0 0 3px color-mix(in srgb, #fff 24%, transparent);
        animation:heroDotPulse 2.4s ease-in-out infinite;
    }
    @keyframes heroDotPulse{
        0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb, #fff 24%, transparent); }
        50%{ box-shadow:0 0 0 6px color-mix(in srgb, #fff 6%, transparent); }
    }
    @media (prefers-reduced-motion: reduce){ .hero-eyebrow::before{ animation:none; } }
    .hero-card h1{
        font-size:clamp(1.65rem, 1.25rem + 1.8vw, 2.3rem); font-weight:800; line-height:1.22; margin-bottom:12px; max-width:480px; letter-spacing:-.015em;
        background:linear-gradient(100deg, var(--ink) 25%, var(--brand) 78%, var(--accent2) 130%);
        -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    html[data-theme="dark"] .hero-card h1{ text-shadow:0 10px 32px color-mix(in srgb, var(--brand) 30%, transparent); }
    .hero-card p{ color:var(--ink-soft); font-size:.94rem; line-height:1.65; max-width:430px; margin-bottom:20px; }
    .hero-text{ transition: opacity 0.38s ease; }

    .avatar-group{
        display:inline-flex; align-items:center; gap:10px;
        background:var(--card); border:1px solid var(--line); border-radius:999px;
        padding:6px 16px 6px 6px; box-shadow:var(--shadow);
    }
    .avatar-stack{ display:flex; }
    .avatar-stack .mini-avt{
        width:28px; height:28px; border-radius:50%; border:2px solid var(--card);
        display:flex; align-items:center; justify-content:center; color:#fff; font-size:.68rem; font-weight:800;
        margin-left:-8px;
    }
    .avatar-stack .mini-avt:first-child{ margin-left:0; }
    .avatar-group .ag-text{ font-size:.78rem; color:var(--ink-soft); font-weight:500; }
    .avatar-group .ag-text b{ color:var(--ink); font-weight:700; }

    /* ---- hiệu ứng cho khối "đang ôn tập", đổi được ở admin > Giao diện ---- */
    @keyframes agPulse{ 0%,100%{ box-shadow:var(--shadow), 0 0 0 0 color-mix(in srgb, var(--brand) 35%, transparent); } 50%{ box-shadow:var(--shadow), 0 0 0 6px color-mix(in srgb, var(--brand) 0%, transparent); } }
    @keyframes agFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
    .avatar-group[data-effect="pulse"]{ animation:agPulse 2.2s ease-in-out infinite; }
    .avatar-group[data-effect="float"]{ animation:agFloat 2.6s ease-in-out infinite; }
    .avatar-group[data-effect="pulse"] .avatar-stack .mini-avt:first-child,
    .avatar-group[data-effect="float"] .avatar-stack .mini-avt:first-child{ transition:transform 0.31s ease; }

    /* ---- huy hiệu thay thế (kiểu "badge" đơn giản: icon + chữ), bật ở admin > Giao diện ---- */
    .hero-badge-alt{
        display:inline-flex; align-items:center; gap:10px;
        background:color-mix(in srgb, #fff 15%, transparent);
        backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
        color:#fff; border:1px solid color-mix(in srgb, #fff 22%, transparent);
        border-radius:999px; padding:6px 18px 6px 6px;
        box-shadow:0 12px 24px -12px rgba(0,0,0,.4);
        font-size:.82rem; font-weight:700;
    }
    .hero-badge-alt.icon-only{ padding:6px; gap:0; }
    .hero-badge-alt.hidden{ display:none; }
    .hero-badge-alt i{
        width:32px; height:32px; border-radius:50%; flex-shrink:0;
        display:flex; align-items:center; justify-content:center;
        background:var(--grad-brand); color:#fff; font-size:.86rem;
        box-shadow:0 4px 10px -2px color-mix(in srgb, var(--brand) 65%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
    }
    .hero-card[data-hero-style="minimal"] .hero-badge-alt{
        background:var(--card); border-color:var(--line); color:var(--ink); backdrop-filter:none; -webkit-backdrop-filter:none;
        box-shadow:var(--shadow);
    }
    .hero-badge-alt[data-effect="pulse"]{ animation:agPulse 2.2s ease-in-out infinite; }
    .hero-badge-alt[data-effect="float"]{ animation:agFloat 2.6s ease-in-out infinite; }

    .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .stat{
        background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
        padding:18px; display:flex; flex-direction:column; justify-content:center; align-items:center;
        box-shadow: var(--shadow);
    }
    .stat .num{ font-size:1.6rem; font-weight:800; }
    .stat .num.brand{ color:var(--brand); }
    .stat .num.green{ color:var(--green); }
    .stat .num.amber{ color:var(--amber); }
    .stat .lbl{ font-size:.78rem; color:var(--ink-mute); margin-top:2px; text-align:center; }

    /* ---------------- quick access tiles ---------------- */
    .quick-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; margin-bottom:34px; }
    /* Khi có ít hơn 5 thẻ, chia đều đúng số thẻ để lấp đầy hàng (không để trống lệch tỷ lệ như dư ra 1 cột rỗng).
       Chỉ áp dụng ở màn hình lớn — dưới 1020px đã có breakpoint riêng ép về 2 cột, xem media query bên dưới. */
    @media (min-width:1021px){
        .quick-grid[data-count="1"]{ grid-template-columns:repeat(1, 1fr); }
        .quick-grid[data-count="2"]{ grid-template-columns:repeat(2, 1fr); }
        .quick-grid[data-count="3"]{ grid-template-columns:repeat(3, 1fr); }
        .quick-grid[data-count="4"]{ grid-template-columns:repeat(4, 1fr); }
    }
    .quick-tile{
        background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
        padding:16px; display:flex; align-items:center; gap:12px;
        cursor:pointer; box-shadow:var(--shadow);
        transition:transform 0.31s ease, box-shadow 0.31s ease, border-color 0.31s ease;
        position:relative; overflow:hidden;
    }
    .quick-tile::before{
        content:''; position:absolute; inset:0 0 auto 0; height:3px;
        background:var(--grad-brand); opacity:0; transition:opacity 0.31s ease;
    }
    .quick-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-glow); border-color:transparent; }
    .quick-tile:hover::before{ opacity:1; }
    .q-icon{
        width:40px; height:40px; border-radius:11px; flex-shrink:0;
        display:flex; align-items:center; justify-content:center; font-size:1.05rem;
    }
    .q-title{ font-size:.88rem; font-weight:700; }
    .q-sub{ font-size:.74rem; color:var(--ink-mute); margin-top:1px; }
    .q-arrow{ margin-left:auto; color:var(--ink-mute); font-size:.8rem; }

    /* ---------------- empty state ---------------- */
    .empty-state{
        background:var(--card); border:1px dashed var(--line); border-radius:18px;
        padding:60px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
    }
    .empty-state.small{ padding:32px 20px; }
    .empty-icon{
        width:56px; height:56px; border-radius:16px;
        display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:8px;
    }
    .empty-state.small .empty-icon{ width:46px; height:46px; font-size:1.15rem; }
    .empty-title{ font-weight:700; font-size:1.05rem; }
    .empty-sub{ color:var(--ink-mute); font-size:.88rem; max-width:340px; }
    .empty-cta{
        margin-top:14px; border:none; cursor:pointer;
        background:var(--grad-brand); color:#fff; font-family:inherit; font-weight:600; font-size:.86rem;
        padding:11px 20px; border-radius:12px; display:inline-flex; align-items:center; gap:8px;
        transition:filter 0.31s ease, transform 0.31s ease; box-shadow:0 8px 18px -8px color-mix(in srgb, var(--brand) 60%, transparent);
    }
    .empty-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }

    /* ---------------- filter pills ---------------- */
    .pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
    .filter-pill{
        border:1.5px solid var(--line); background:var(--card); color:var(--ink-soft);
        font-family:inherit; font-weight:700; font-size:.86rem;
        padding:10px 20px; border-radius:999px; cursor:pointer;
        transition:background 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
    }
    .filter-pill:hover{ border-color:var(--brand); color:var(--brand); }
    .filter-pill.active{
        background:var(--grad-brand);
        border-color:transparent; color:#fff;
        box-shadow:0 6px 16px -8px color-mix(in srgb, var(--brand) 60%, transparent);
    }

    /* ---------------- document categories ---------------- */
    .doc-cat{ margin-bottom:22px; }
    .doc-cat-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
    .doc-cat-name{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:.94rem; }
    .doc-count{ font-size:.78rem; color:var(--ink-mute); }

    /* ---------------- document tab (thiết kế riêng, gọn & thực tế hơn) ---------------- */
    #panel-doc .doc-hero{
        display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
        background:linear-gradient(135deg, var(--brand-bg), transparent 70%);
        border:1px solid var(--line); border-radius:20px; padding:20px 24px; margin-bottom:18px;
    }
    #panel-doc .doc-hero h2{ font-size:1.15rem; font-weight:800; margin-bottom:4px; }
    #panel-doc .doc-hero-sub{ font-size:.84rem; color:var(--ink-mute); }
    #panel-doc .doc-hero-stat{
        display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
        border-radius:999px; padding:9px 16px; font-weight:700; font-size:.84rem; color:var(--brand); flex-shrink:0;
    }
    #panel-doc .doc-hero-stat i{ font-size:.9rem; }

    #panel-doc .doc-grid{
        display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:8px;
    }
    .doc-card{
        position:relative; display:flex; flex-direction:column; gap:12px;
        background:var(--card); border:1px solid var(--line); border-radius:18px;
        padding:18px; text-decoration:none; color:var(--ink);
        box-shadow:var(--shadow); cursor:pointer;
        transition:transform 0.31s ease, box-shadow 0.31s ease, border-color 0.31s ease;
    }
    .doc-card:hover, .doc-card:focus-visible{
        transform:translateY(-4px); box-shadow:var(--shadow-hov); border-color:#dfe2ee;
    }
    /* .doc-card-top là khung chứa ảnh bìa/icon; badge được ghim tuyệt đối lên góc trên-phải
       thay vì nằm chung hàng flex với ảnh — tránh lỗi ảnh (width:100%) chèn ép badge làm
       badge bị co lại chỉ còn icon hoặc tràn ra ngoài thẻ. */
    .doc-card-top{ position:relative; }
    .doc-thumb{ display:block; width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:12px; }
    .doc-icon{
        width:46px; height:46px; border-radius:12px; flex-shrink:0;
        display:flex; align-items:center; justify-content:center; font-size:1.15rem;
        background:var(--green-bg); color:var(--green);
    }
    .doc-card.is-paid .doc-icon{ background:var(--amber-bg); color:var(--amber); }
    .doc-card.is-owned .doc-icon{ background:var(--brand-bg); color:var(--brand); }
    .doc-tag{
        position:absolute; top:10px; right:10px; z-index:2;
        display:inline-flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap;
        font-size:.68rem; font-weight:800; padding:5px 10px; border-radius:999px; letter-spacing:.2px;
        box-shadow:0 2px 8px rgba(20,22,40,.18);
    }
    .doc-tag.free{ background:var(--green-bg); color:var(--green); }
    .doc-tag.paid{ background:var(--amber-bg); color:var(--amber); }
    .doc-tag.owned{ background:var(--brand-bg); color:var(--brand); }
    /* Không có ảnh bìa (chỉ icon 46px) -> badge quay lại nằm cùng hàng cạnh icon cho cân đối. */
    .doc-card-top.no-thumb{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
    .doc-card-top.no-thumb .doc-tag{ position:static; box-shadow:none; }
    .doc-title{
        font-size:.96rem; font-weight:700; line-height:1.35;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em;
    }
    .doc-meta{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-mute); }
    .doc-desc{
        font-size:.8rem; color:var(--ink-soft); line-height:1.45;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em;
    }
    .doc-cta{
        margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
        padding:10px 14px; border-radius:12px; font-weight:700; font-size:.84rem;
        background:var(--green-bg); color:var(--green); transition:filter 0.28s ease;
    }
    .doc-card.is-paid .doc-cta{ background:var(--amber-bg); color:var(--amber); }
    .doc-card.is-owned .doc-cta{ background:var(--brand-bg); color:var(--brand); }
    .doc-card.is-disabled{ cursor:default; opacity:.7; }
    .doc-card.is-disabled .doc-cta{ background:#f2f3f8; color:var(--ink-mute); }
    .doc-card:hover .doc-cta{ filter:brightness(.96); }
    .grid-hscroll .doc-card{ flex:0 0 220px; width:220px; scroll-snap-align:start; }
    @media (max-width:600px){ .grid-hscroll .doc-card{ flex:0 0 74vw; width:74vw; } }
    @media (max-width:1300px){ #panel-doc .doc-grid{ grid-template-columns:repeat(3, 1fr); } }
    @media (max-width:960px){ #panel-doc .doc-grid{ grid-template-columns:repeat(2, 1fr); } }
    @media (max-width:600px){ #panel-doc .doc-grid{ grid-template-columns:1fr; } }

    /* ---------------- product tab (thiết kế riêng) ---------------- */
    #panel-product .prod-hero{
        display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
        background:linear-gradient(135deg, var(--amber-bg), transparent 70%);
        border:1px solid var(--line); border-radius:20px; padding:20px 24px; margin-bottom:18px;
    }
    #panel-product .prod-hero h2{ font-size:1.15rem; font-weight:800; margin-bottom:4px; }
    #panel-product .prod-hero-sub{ font-size:.84rem; color:var(--ink-mute); }
    #panel-product .prod-hero-stat{
        display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
        border-radius:999px; padding:9px 16px; font-weight:700; font-size:.84rem; color:var(--amber); flex-shrink:0;
    }
    #panel-product .prod-grid{
        display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
    }
    .prod-card{
        position:relative; display:flex; flex-direction:column; gap:12px;
        background:var(--card); border:1px solid var(--line); border-radius:18px;
        padding:18px; text-decoration:none; color:var(--ink); cursor:pointer;
        box-shadow:var(--shadow); transition:transform 0.31s ease, box-shadow 0.31s ease, border-color 0.31s ease;
    }
    .prod-card:hover, .prod-card:focus-visible{
        transform:translateY(-4px); box-shadow:var(--shadow-hov); border-color:#dfe2ee;
    }
    .prod-thumb-wrap{
        position:relative; width:100%; aspect-ratio:2/1; background:var(--bg-soft, #f4f5f9);
        display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px;
    }
    .prod-thumb{ width:100%; height:100%; object-fit:cover; }
    .prod-icon{
        width:56px; height:56px; border-radius:14px; flex-shrink:0;
        display:flex; align-items:center; justify-content:center; font-size:1.4rem;
    }
    .prod-body{ display:flex; flex-direction:column; gap:8px; flex-grow:1; }
    .prod-title{
        font-size:.98rem; font-weight:700; line-height:1.35;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em;
    }
    .prod-desc{
        font-size:.82rem; color:var(--ink-soft); line-height:1.45; flex-grow:1;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em;
    }
    .prod-price{ font-size:.96rem; font-weight:800; color:var(--amber); }
    .prod-cta{
        display:flex; align-items:center; justify-content:space-between; gap:8px;
        padding:10px 14px; border-radius:12px; font-weight:700; font-size:.84rem;
        background:var(--amber-bg); color:var(--amber); transition:filter 0.28s ease;
    }
    .prod-card:hover .prod-cta{ filter:brightness(.96); }
    .prod-cta i{ font-size:.78rem; }
    .grid-hscroll .prod-card{ flex:0 0 220px; width:220px; scroll-snap-align:start; }
    @media (max-width:600px){ .grid-hscroll .prod-card{ flex:0 0 74vw; width:74vw; } }
    @media (max-width:1300px){ #panel-product .prod-grid{ grid-template-columns:repeat(3, 1fr); } }
    @media (max-width:960px){ #panel-product .prod-grid{ grid-template-columns:repeat(2, 1fr); } }
    @media (max-width:600px){ #panel-product .prod-grid{ grid-template-columns:1fr; } }

    /* ---------------- modal: chi tiết sản phẩm ---------------- */
    .prod-detail-overlay{
        position:fixed; inset:0; background:rgba(10,11,18,.6); z-index:2100;
        display:flex; align-items:center; justify-content:center; padding:20px;
    }
    .prod-detail-overlay.hidden{ display:none; }
    .prod-detail-modal{
        background:var(--card); border-radius:24px; max-width:860px; width:100%;
        max-height:88vh; overflow-y:auto; position:relative;
        box-shadow:0 24px 70px rgba(0,0,0,.4);
        display:grid; grid-template-columns:1fr 1fr;
    }
    @media (max-width:720px){ .prod-detail-modal{ grid-template-columns:1fr; } }
    .prod-detail-close{
        position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
        border:none; background:rgba(0,0,0,.45); color:#fff; z-index:2;
        cursor:pointer; font-size:.95rem; display:flex; align-items:center; justify-content:center;
    }
    .prod-detail-media{
        background:var(--bg-soft, #f4f5f9); display:flex; align-items:center; justify-content:center;
        min-height:260px; overflow:hidden;
    }
    .prod-detail-media img{ width:100%; height:100%; object-fit:cover; }
    .prod-detail-media .prod-detail-icon{
        width:96px; height:96px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:2.4rem;
    }
    .prod-detail-info{ padding:30px 28px; display:flex; flex-direction:column; gap:14px; }
    .prod-detail-info h3{ font-size:1.3rem; font-weight:800; line-height:1.3; }
    .prod-detail-price{ font-size:1.15rem; font-weight:800; color:var(--amber); }
    .prod-detail-desc{ font-size:.9rem; color:var(--ink-soft); line-height:1.65; white-space:pre-line; }
    .prod-detail-cta{
        margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
        padding:14px; border-radius:14px; font-weight:800; font-size:.92rem;
        text-decoration:none; transition:filter 0.28s ease;
    }
    .prod-detail-cta:hover{ filter:brightness(.96); }
    .prod-detail-cta.disabled{ background:#f2f3f8; color:var(--ink-mute); cursor:default; pointer-events:none; }

    /* ---------------- section heading ---------------- */
    .sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
    .sec-head h2{ font-size:1.15rem; font-weight:700; }
    .sec-head span{ font-size:.82rem; color:var(--ink-mute); }
    .sec-head-right{ display:flex; align-items:baseline; gap:14px; }
    .sec-view-all{
        display:inline-flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap;
        font-size:.82rem; font-weight:700; color:var(--brand); text-decoration:none; cursor:pointer;
        background:none; border:none; padding:0; font-family:inherit;
    }
    .sec-view-all i{ font-size:.72rem; transition:transform 0.24s ease; }
    .sec-view-all:hover{ text-decoration:underline; }
    .sec-view-all:hover i{ transform:translateX(2px); }

    /* ---------------- cards ---------------- */
    .grid{
        display:grid; grid-template-columns:repeat(5, 1fr); gap:16px;
        margin-bottom:36px;
    }
    /* Biến thể cuộn ngang 1 hàng — dùng cho các khối ở trang chủ (Học phần/Tài liệu/Công cụ/Sản phẩm nổi bật) */
    .grid-hscroll{
        display:flex; flex-wrap:nowrap; gap:12px;
        overflow-x:auto; overflow-y:hidden;
        margin-bottom:32px; padding-bottom:14px;
        scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    }
    .grid-hscroll::-webkit-scrollbar{ height:6px; }
    .grid-hscroll::-webkit-scrollbar-track{ background:var(--line); border-radius:99px; }
    .grid-hscroll::-webkit-scrollbar-thumb{ background:var(--ink-mute); border-radius:99px; }
    .grid-hscroll::-webkit-scrollbar-thumb:hover{ background:var(--ink); }
    .grid-hscroll .card{
        flex:0 0 220px; width:220px; scroll-snap-align:start;
    }
    .grid-hscroll .empty-state{ flex:1 1 auto; }
    @media (max-width:600px){
        .grid-hscroll .card{ flex:0 0 66vw; width:66vw; }
    }
    .card{
        background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
        padding:16px; text-decoration:none; color:var(--ink);
        display:flex; flex-direction:column; gap:11px;
        box-shadow: var(--shadow);
        transition: transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
        cursor:pointer; position:relative;
    }
    .card:hover, .card:focus-visible{ transform:translateY(-4px); box-shadow:var(--shadow-glow); border-color:color-mix(in srgb, var(--brand) 35%, var(--line)); }
    /* ---- kiểu hiệu ứng hover cho thẻ, đổi được ở admin > Giao diện ---- */
    body[data-hover-style="scale"] .card:hover, body[data-hover-style="scale"] .card:focus-visible{ transform:scale(1.035); }
    body[data-hover-style="scale"] .quick-tile:hover{ transform:scale(1.035); }
    body[data-hover-style="none"] .card:hover, body[data-hover-style="none"] .card:focus-visible{ transform:none; }
    body[data-hover-style="none"] .quick-tile:hover{ transform:none; }
    .card.locked{ opacity:.88; }
    .card.pro-highlight{ border-color:var(--amber); box-shadow:0 0 0 2px var(--amber-bg); }
    .pro-ribbon{
        position:absolute; top:14px; right:-30px; transform:rotate(35deg);
        background:linear-gradient(135deg,#f5a524,#ffbd4a); color:#5a3c05;
        font-size:.68rem; font-weight:800; padding:3px 34px;
    }
    .card.pinned{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg); }
    .pin-ribbon{
        position:absolute; top:14px; right:-30px; transform:rotate(35deg);
        background:linear-gradient(135deg,#6a5cff,#8b7dff); color:#fff;
        font-size:.68rem; font-weight:800; padding:3px 30px;
    }

    .card-top{ display:flex; align-items:flex-start; justify-content:space-between; }
    .icon-chip{
        width:38px; height:38px; border-radius:11px;
        display:flex; align-items:center; justify-content:center;
        font-size:1rem;
    }
    .num-tag{ font-size:.68rem; color:var(--ink-mute); font-weight:600; }

    .card-title{ font-size:.88rem; font-weight:700; line-height:1.3; min-height:2.2em; }

    .badge-row{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--ink-soft); }
    .badge-row i{ font-size:.68rem; }

    .status-bar{ height:5px; border-radius:999px; background:#eef0f5; overflow:hidden; }
    .status-bar i{ display:block; height:100%; border-radius:999px; }
    .status-text{ display:flex; align-items:center; justify-content:space-between; font-size:.72rem; font-weight:600; }

    .card-arrow{
        position:absolute; top:16px; right:16px; width:24px; height:24px; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        background:#f2f3f8; color:var(--ink-mute); font-size:.68rem;
        opacity:0; transform:translateX(-4px);
        transition:opacity 0.31s ease, transform 0.31s ease, background 0.31s ease, color 0.31s ease;
    }
    .card:hover .card-arrow{ opacity:1; transform:translateX(0); }

    /* subject accents */
    .c-pldc .icon-chip{ background:var(--brand-bg); color:var(--brand); }
    .c-th   .icon-chip{ background:#f1ecff; color:var(--brand2); }
    .c-ktct .icon-chip{ background:var(--green-bg); color:var(--green); }
    .c-cnxh .icon-chip{ background:#ffece8; color:#e4572e; }
    .c-lsd  .icon-chip{ background:var(--amber-bg); color:var(--amber); }
    .c-tthcm .icon-chip{ background:#fde8e8; color:#d92d20; }

    .card:hover .card-arrow{ background:var(--brand); color:#fff; }
    .c-th:hover .card-arrow{ background:var(--brand2); }
    .c-ktct:hover .card-arrow{ background:var(--green); }

    /* ---------------- gói pro (bảng giá trong tab Tài khoản) ---------------- */
    .pro-pkg-grid{
        display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
        margin-bottom:36px;
    }
    .pro-pkg-card{
        position:relative; background:var(--card); border:1.5px solid var(--line); border-radius:20px;
        padding:24px 22px; display:flex; flex-direction:column; gap:10px;
        cursor:pointer; box-shadow:var(--shadow); overflow:hidden;
        transition:transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
    }
    .pro-pkg-card:hover, .pro-pkg-card:focus-visible{ transform:translateY(-4px); box-shadow:var(--shadow-hov); border-color:var(--brand); outline:none; }
    .pro-pkg-card.popular{ border-color:var(--amber); box-shadow:0 0 0 2px var(--amber-bg); }
    .pro-pkg-ribbon{
        position:absolute; top:14px; right:-30px; transform:rotate(35deg);
        background:linear-gradient(135deg,#f5a524,#ffbd4a); color:#5a3c05;
        font-size:.68rem; font-weight:800; padding:3px 34px;
    }
    .pro-pkg-icon{
        width:46px; height:46px; border-radius:13px;
        display:flex; align-items:center; justify-content:center; font-size:1.2rem;
    }
    .pro-pkg-name{ font-size:1.02rem; font-weight:800; color:var(--ink); }
    .pro-pkg-desc{ font-size:.82rem; color:var(--ink-mute); line-height:1.5; min-height:2.3em; }
    .pro-pkg-price-row{ display:flex; align-items:baseline; gap:6px; margin-top:auto; }
    .pro-pkg-price{ font-size:1.5rem; font-weight:900; color:var(--ink); letter-spacing:-.02em; }
    .pro-pkg-duration{ font-size:.8rem; color:var(--ink-mute); font-weight:600; }
    .pro-pkg-cta{
        display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700;
        margin-top:6px; padding-top:12px; border-top:1px solid var(--line);
    }
    .pro-pkg-cta i{ font-size:.72rem; transition:transform 0.31s ease; }
    .pro-pkg-card:hover .pro-pkg-cta i{ transform:translateX(3px); }
    @media (max-width: 1020px){ .pro-pkg-grid{ grid-template-columns:repeat(2, 1fr); } }
    @media (max-width: 640px){ .pro-pkg-grid{ grid-template-columns:1fr; } }

    /* ---------------- footer ---------------- */
    footer{
        text-align:center; color:var(--ink-mute); font-size:.82rem;
        padding-top:20px; border-top:1px solid var(--line);
        margin-top:auto;
    }

    /* ---------------- toast ---------------- */
    .toast{
        position:fixed; left:50%; bottom:30px; transform:translate(-50%, 14px);
        background:#20222c; color:#fff; font-size:.88rem;
        padding:12px 20px; border-radius:12px;
        display:flex; align-items:center; gap:10px;
        box-shadow:0 16px 40px -14px rgba(0,0,0,.4);
        opacity:0; pointer-events:none; z-index:50;
        transition:opacity 0.38s ease, transform 0.38s ease;
    }
    .toast.show{ opacity:1; transform:translate(-50%, 0); }
    .toast i{ color:var(--amber); }
    .toast-btn{
        margin-left:6px; flex-shrink:0; background:rgba(255,255,255,.14); color:#fff;
        border:1px solid rgba(255,255,255,.28); border-radius:8px;
        font-size:.78rem; font-weight:600; padding:6px 12px; cursor:pointer;
        transition:background 0.24s ease;
    }
    .toast-btn:hover{ background:rgba(255,255,255,.24); }
    .toast-btn.done{ background:var(--green); border-color:var(--green); cursor:default; }

    /* ---------------- site toast (thông báo hệ thống: thanh toán / nâng cấp Pro) ---------------- */
    .site-toast{
        position:fixed; top:20px; right:20px; z-index:120; max-width:360px;
        background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px;
        padding:14px 16px; display:flex; align-items:flex-start; gap:12px;
        box-shadow:var(--shadow-hov);
        opacity:0; pointer-events:none; transform:translateY(-10px);
        transition:opacity 0.38s ease, transform 0.38s ease;
    }
    .site-toast.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
    .site-toast-icon{
        width:38px; height:38px; border-radius:50%; flex-shrink:0;
        display:flex; align-items:center; justify-content:center; font-size:1rem;
        background:var(--brand-bg); color:var(--brand);
    }
    .site-toast.success .site-toast-icon{ background:var(--green-bg); color:var(--green); }
    .site-toast.error .site-toast-icon{ background:#fdeeee; color:#e5484d; }
    html[data-theme="dark"] .site-toast.error .site-toast-icon{ background:#3a2020; color:#ff7875; }
    .site-toast.pro .site-toast-icon{ background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; }
    .site-toast-body{ min-width:0; }
    .site-toast-title{ font-weight:800; font-size:.9rem; margin-bottom:2px; }
    .site-toast-msg{ font-size:.82rem; color:var(--ink-mute); line-height:1.5; }
    .site-toast-close{
        margin-left:auto; flex-shrink:0; background:none; border:none; color:var(--ink-mute);
        cursor:pointer; font-size:.85rem; padding:4px; border-radius:8px;
    }
    .site-toast-close:hover{ background:var(--brand-bg); color:var(--brand); }
    @media (max-width:520px){
        .site-toast{ left:12px; right:12px; top:12px; max-width:none; }
    }

    /* ---------------- responsive ---------------- */
    .mobile-menu-btn{
        display:none; width:38px; height:38px; border-radius:12px;
        border:1px solid var(--line); background:var(--card); color:var(--ink);
        align-items:center; justify-content:center; font-size:1rem; cursor:pointer;
        flex-shrink:0;
    }
    .topbar-left{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; overflow:hidden; }
    .sidebar-backdrop{
        display:none; position:fixed; inset:0; background:rgba(10,11,18,.55);
        z-index:1400; opacity:0; pointer-events:none; transition:opacity 0.38s ease;
    }
    .sidebar-backdrop.show{ opacity:1; pointer-events:auto; }
    @media (max-width: 860px){
        .mobile-menu-btn{ display:flex; }
        .sidebar-backdrop{ display:block; }
        .sidebar{
            position:fixed; left:0; top:0; height:100vh; z-index:1500;
            width:264px !important;
            transform:translateX(-100%);
            transition:transform 0.38s ease;
            box-shadow:0 0 40px rgba(0,0,0,.35);
        }
        .sidebar.mobile-open{ transform:translateX(0); }
        /* Trên di động, menu luôn hiện đầy đủ chữ (không áp dụng chế độ thu gọn) */
        .sidebar.collapsed{ width:264px !important; }
        .sidebar.collapsed .side-logo{ justify-content:flex-start; padding:22px 20px 18px; }
        .sidebar.collapsed .side-logo .name{ display:block; }
        .sidebar.collapsed .side-link{ justify-content:flex-start; padding:11px 12px; gap:12px; }
        .sidebar.collapsed .side-link .lbl{ display:inline; }
        .sidebar.collapsed #sideProBtn{ width:100%; height:auto; padding:11px; margin:0 0 12px; border-radius:99px; justify-content:center; }
        .sidebar.collapsed #sideProBtn .lbl{ display:inline; }
        .sidebar.collapsed #sideEarnProBtn{ width:100%; height:auto; padding:9px; margin:0 0 12px; border-radius:99px; justify-content:center; }
        .sidebar.collapsed #sideEarnProBtn .lbl{ display:inline; }
        .sidebar.collapsed .side-user{ justify-content:flex-start; padding:10px 10px; }
        .sidebar.collapsed .side-user .u-info{ display:block; }
        .side-collapse-wrap{ display:none; }
        .main{ width:100%; }
    }
    @media (max-width: 1020px){
        .grid{ grid-template-columns:repeat(3, 1fr); }
        .hero{ grid-template-columns:1fr; }
        .stat-grid{ grid-template-columns:repeat(4, 1fr); }
        .quick-grid{ grid-template-columns:repeat(2, 1fr); }
    }
    @media (max-width: 640px){
        .grid{ grid-template-columns:repeat(2, 1fr); }
        .stat-grid{ grid-template-columns:repeat(2, 1fr); }
        .topbar{ padding:14px 18px; }
        .wrap{ padding:24px 16px 48px; }
        .hero-illustration{ display:none; }
        .hero-card{ padding:30px 24px; border-radius:22px; }
        .hero-card h1{ max-width:none; }
        .topbar .pill{ padding:8px 10px; }
        .topbar .pill .pill-label{ display:none; }

        /* Chuông thông báo: neo theo màn hình thay vì theo quả chuông, tránh tràn ra ngoài lề trái
           khi quả chuông không nằm sát mép phải màn hình. */
        .notify-dropdown{
            position:fixed; top:64px; left:12px; right:12px;
            width:auto; max-width:none;
        }

        .quick-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
        .quick-tile{
            flex-direction:column; align-items:flex-start; gap:10px;
            padding:14px; text-align:left;
        }
        .quick-tile .q-arrow{ display:none; }
        .q-icon{ width:38px; height:38px; }
        .q-title{ font-size:.84rem; line-height:1.25; }
        .q-sub{ font-size:.7rem; }
    }

    /* ---------------- faq ---------------- */
    .faq-item{
        background:var(--card); border:1px solid var(--line); border-radius:14px;
        padding:16px 18px;
    }
    .faq-item summary{
        cursor:pointer; font-weight:700; font-size:.92rem; list-style:none;
        display:flex; align-items:center; justify-content:space-between; gap:12px;
    }
    .faq-item summary::-webkit-details-marker{ display:none; }
    .faq-item summary::after{
        content:'+'; color:var(--ink-mute); font-size:1.2rem; font-weight:400; flex-shrink:0;
        transition:transform 0.31s ease;
    }
    .faq-item[open] summary::after{ content:'−'; }
    .faq-item p{ color:var(--ink-mute); font-size:.85rem; line-height:1.6; margin-top:10px; }

/* ============ POPUP: Thông báo nổi khi vào trang (quản lý ở Admin > Thông báo nổi) ============ */
.announce-popup-overlay{
    position:fixed; inset:0; background:rgba(12,14,24,.6); z-index:2400;
    display:flex; align-items:center; justify-content:center; padding:20px;
    backdrop-filter:blur(3px); animation:announceFade .22s ease;
}
.announce-popup-overlay.hidden{ display:none; }
@keyframes announceFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes announcePop{
    from{ opacity:0; transform:translateY(10px) scale(.94); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}
.announce-popup-modal{
    background:var(--card); border-radius:22px; max-width:420px; width:100%;
    max-height:86vh; overflow-y:auto; padding:30px 26px 24px; position:relative;
    box-shadow:0 30px 80px -20px rgba(20,22,45,.45), 0 0 0 1px rgba(20,22,45,.04);
    text-align:center; animation:announcePop .28s cubic-bezier(.2,.9,.3,1.2);
}
.announce-popup-modal::before{
    content:''; position:absolute; top:0; left:22px; right:22px; height:4px; border-radius:0 0 6px 6px;
    background:linear-gradient(90deg, var(--brand), #8b7cf6);
}
.announce-popup-close{
    position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
    border:1px solid var(--line); background:var(--bg); color:var(--ink-mute);
    cursor:pointer; font-size:.85rem; display:flex; align-items:center; justify-content:center;
    transition:all 0.24s ease;
}
.announce-popup-close:hover{ color:#fff; background:#dc2626; border-color:#dc2626; transform:rotate(90deg); }
.announce-popup-icon{
    width:60px; height:60px; border-radius:50%; margin:6px auto 16px;
    background:linear-gradient(135deg, var(--brand), #8b7cf6); color:#fff; font-size:1.4rem;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px -8px rgba(79,107,255,.55);
    animation:announceBell 1.8s ease-in-out .3s 1;
}
@keyframes announceBell{
    0%,100%{ transform:rotate(0deg); } 15%{ transform:rotate(-12deg); } 30%{ transform:rotate(10deg); }
    45%{ transform:rotate(-8deg); } 60%{ transform:rotate(5deg); } 75%{ transform:rotate(0deg); }
}
.announce-popup-title{ font-size:1.16rem; font-weight:800; color:var(--ink); margin-bottom:9px; letter-spacing:-.2px; }
.announce-popup-msg{
    color:var(--ink-soft); font-size:.9rem; line-height:1.65; white-space:pre-line; margin-bottom:22px;
}
.announce-popup-actions{ display:flex; flex-direction:column; gap:9px; }
.announce-popup-actions button{
    padding:13px 16px; border-radius:13px; font-weight:700; font-size:.87rem;
    cursor:pointer; border:1px solid transparent; transition:all 0.24s ease; font-family:inherit;
}
.announce-popup-close-btn{
    background:linear-gradient(135deg, var(--brand), #6c7fff); color:#fff; order:-1;
    box-shadow:0 10px 22px -8px rgba(79,107,255,.5);
}
.announce-popup-close-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.announce-popup-hide-btn{ background:transparent; color:var(--ink-mute); border-color:var(--line); }
.announce-popup-hide-btn:hover{ color:var(--ink); background:var(--bg); }

/* ---- Thông báo tri ân (farewell) ---- */
.announce-popup-modal.bye-modal{
    display:flex; flex-direction:column; padding:0; overflow:hidden; text-align:left;
    max-width:440px; max-height:calc(100dvh - 40px); border-radius:20px;
    background:var(--card); border:1px solid var(--line);
}
.announce-popup-modal.bye-modal::before{ display:none; }
.bye-top{ display:flex; align-items:center; gap:12px; padding:18px 18px 14px 20px; flex:0 0 auto; border-bottom:1px solid var(--line); }
.bye-heart{
    flex:0 0 42px; width:42px; height:42px; border-radius:12px; font-size:1.05rem;
    display:flex; align-items:center; justify-content:center; color:#e5484d;
    background:color-mix(in srgb, #e5484d 14%, var(--card));
}
.bye-top-text{ flex:1; min-width:0; }
.bye-title{ font-size:1.05rem; line-height:1.3; margin:0; }
.bye-date{ font-size:.78rem; color:var(--ink-mute); margin-top:2px; font-weight:600; }
.bye-modal .announce-popup-close{ position:static; flex:0 0 32px; }
.bye-body{
    flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 20px 6px;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.bye-body::-webkit-scrollbar{ width:6px; }
.bye-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
.bye-body p{ color:var(--ink-soft); font-size:.88rem; line-height:1.65; margin:0 0 10px; }
.bye-body b{ color:var(--ink); font-weight:700; }
.bye-note{
    display:flex; gap:10px; align-items:flex-start; margin:4px 0 12px; padding:12px 14px;
    background:color-mix(in srgb, var(--brand) 10%, var(--card)); border-radius:12px;
    color:var(--ink-soft); font-size:.86rem; line-height:1.6;
}
.bye-note > i{ color:var(--brand); margin-top:3px; }
.bye-body .bye-sign{ color:var(--ink); font-weight:700; margin-bottom:8px; }
.bye-actions{
    flex:0 0 auto; display:flex; gap:10px; padding:12px 20px 18px; border-top:1px solid var(--line); background:var(--card);
}
.bye-actions button{ flex:1; padding:11px 14px; border-radius:12px; font-size:.86rem; }
.bye-actions .announce-popup-close-btn{ order:0; flex:1.4; box-shadow:none; }
@media (max-width:480px){
    .bye-top{ padding:14px 14px 12px 16px; } .bye-body{ padding:14px 16px 4px; } .bye-actions{ padding:10px 16px 14px; }
}

/* ============ MODAL: Nâng cấp Pro (chọn gói kiểu thẻ + danh sách tính năng) ============ */
.pro-upg-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:2000;
    display:flex; align-items:center; justify-content:center; padding:20px;
}
.pro-upg-overlay.hidden{ display:none; }
.pro-upg-modal{
    background:var(--card); border-radius:22px; max-width:900px; width:100%;
    max-height:88vh; overflow-y:auto; padding:28px; position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.pro-upg-close{
    position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
    border:1px solid var(--line); background:var(--card); color:var(--ink-mute);
    cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center;
}
.pro-upg-close:hover{ color:var(--ink); }
.pro-upg-plans{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin:8px 0 22px;
}
.pro-upg-plan{
    border:2px solid var(--line); border-radius:16px; padding:18px; cursor:pointer;
    position:relative; text-align:left; transition:border-color 0.24s, box-shadow 0.24s;
}
.pro-upg-plan:hover{ border-color:var(--brand); }
.pro-upg-plan.active{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.pro-upg-plan .radio-dot{
    width:18px; height:18px; border-radius:50%; border:2px solid var(--line);
    display:inline-block; margin-bottom:10px; position:relative;
}
.pro-upg-plan.active .radio-dot{ border-color:var(--brand); }
.pro-upg-plan.active .radio-dot::after{
    content:''; position:absolute; inset:3px; border-radius:50%; background:var(--brand);
}
.pro-upg-plan .plan-name{ font-weight:800; font-size:1.02rem; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pro-upg-plan .plan-tag{
    font-size:.68rem; font-weight:800; padding:2px 9px; border-radius:99px;
    background:var(--brand-bg); color:var(--brand); text-transform:none;
}
.pro-upg-plan .plan-price{ font-weight:900; font-size:1.4rem; color:var(--ink); margin-top:10px; }
.pro-upg-plan .plan-days{ color:var(--ink-mute); font-size:.85rem; margin-top:2px; }
.pro-upg-features{ border-top:1px solid var(--line); }
.pro-upg-feat-row{
    display:flex; gap:14px; padding:16px 2px; border-bottom:1px solid var(--line); align-items:flex-start;
}
.pro-upg-feat-row .feat-check{
    width:26px; height:26px; border-radius:50%; background:var(--green-bg); color:var(--green);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; font-size:.8rem;
}
.pro-upg-feat-row .feat-title{ font-weight:800; color:var(--ink); font-size:.98rem; }
.pro-upg-feat-row .feat-desc{ color:var(--ink-mute); font-size:.85rem; margin-top:2px; line-height:1.5; }
.pro-upg-cta{
    width:100%; margin-top:22px; padding:16px; border:none; border-radius:14px;
    background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; font-weight:800;
    font-size:1.02rem; cursor:pointer;
}
.pro-upg-cta:hover{ filter:brightness(1.05); }
.pro-upg-cta:disabled{ opacity:.6; cursor:not-allowed; }
.pro-upg-note{ text-align:center; color:var(--ink-mute); font-size:.82rem; margin-top:12px; }

/* ============ MODAL: Xác nhận thanh toán (bước 2, sau khi chọn gói) ============ */
.pro-confirm-overlay{
    position:fixed; inset:0; background:rgba(10,11,18,.6); z-index:2100;
    display:flex; align-items:center; justify-content:center; padding:20px;
}
.pro-confirm-overlay.hidden{ display:none; }
.pro-confirm-modal{
    background:var(--card); border-radius:24px; max-width:420px; width:100%;
    max-height:88vh; display:flex; flex-direction:column; position:relative; overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.pro-confirm-close{
    position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
    border:none; background:rgba(255,255,255,.16); color:#fff; z-index:2;
    cursor:pointer; font-size:.9rem; display:flex; align-items:center; justify-content:center;
    transition:background 0.24s ease;
}
.pro-confirm-close:hover{ background:rgba(255,255,255,.3); }
.pro-confirm-head{
    text-align:center; padding:30px 26px 22px; flex-shrink:0;
    background:linear-gradient(155deg, var(--brand), var(--brand2));
}
.pro-confirm-head .icon{
    width:52px; height:52px; border-radius:50%; margin:0 auto 14px;
    background:rgba(255,255,255,.18); color:#fff; font-size:1.3rem;
    display:flex; align-items:center; justify-content:center;
}
.pro-confirm-head h3{ font-size:1.1rem; font-weight:800; color:#fff; }
.pro-confirm-head p{ font-size:.82rem; color:rgba(255,255,255,.88); margin-top:6px; line-height:1.5; }
.pro-confirm-body{ padding:20px 24px 6px; overflow-y:auto; }
.pro-confirm-summary{
    background:var(--brand-bg); border-radius:16px; padding:15px 18px; margin-bottom:4px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pro-confirm-summary .name{ font-weight:800; color:var(--ink); font-size:.96rem; }
.pro-confirm-summary .days{ color:var(--ink-mute); font-size:.78rem; margin-top:2px; }
.pro-confirm-summary .price{ font-weight:900; color:var(--brand); font-size:1.2rem; white-space:nowrap; }
.pro-confirm-features{ padding:6px 2px 12px; }
.pro-confirm-feat-row{ display:flex; gap:12px; padding:9px 0; align-items:flex-start; }
.pro-confirm-feat-row .feat-check{
    width:21px; height:21px; border-radius:50%; background:var(--green-bg); color:var(--green);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; font-size:.66rem;
}
.pro-confirm-feat-row .feat-title{ font-weight:700; color:var(--ink); font-size:.85rem; line-height:1.4; }
.pro-confirm-feat-row .feat-desc{ color:var(--ink-mute); font-size:.76rem; margin-top:2px; line-height:1.4; }
.pro-confirm-actions{
    display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--line); flex-shrink:0;
}
.pro-confirm-actions button{
    border:none; border-radius:14px; padding:14px; font-weight:800; font-size:.9rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.pro-confirm-cancel{ flex:0 0 96px; background:var(--bg); color:var(--ink); border:1px solid var(--line) !important; }
.pro-confirm-cancel:hover{ background:var(--line); }
.pro-confirm-ok{ flex:1; background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; }
.pro-confirm-ok:hover{ filter:brightness(1.05); }
.pro-confirm-ok:disabled{ opacity:.65; cursor:not-allowed; }

/* ============ MODAL: Nạp tiền vào ví — khối chọn số tiền nhanh + ô nhập tuỳ chỉnh ============ */
.naptien-amounts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 14px; }
.naptien-amt-btn{
    border:1.5px solid var(--line); background:var(--bg); color:var(--ink);
    border-radius:14px; padding:13px 8px; font-weight:800; font-size:.88rem; cursor:pointer;
    transition:border-color 0.24s ease, background 0.24s ease, color 0.24s ease, transform 0.17s ease;
    font-family:inherit;
}
.naptien-amt-btn:hover{ border-color:var(--brand); color:var(--brand); }
.naptien-amt-btn:active{ transform:scale(.97); }
.naptien-amt-btn.active{ border-color:var(--brand); background:var(--brand-bg); color:var(--brand); }
.naptien-input-wrap{ position:relative; margin-bottom:4px; }
.naptien-input-wrap .cur{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    color:var(--ink-mute); font-weight:700; font-size:.88rem; pointer-events:none;
}
.naptien-input{
    width:100%; box-sizing:border-box; padding:14px 44px 14px 16px; border-radius:14px;
    border:1.5px solid var(--line); background:var(--bg); color:var(--ink);
    font-size:.95rem; font-weight:700; font-family:inherit; outline:none;
    transition:border-color 0.24s ease, box-shadow 0.24s ease;
}
.naptien-input::placeholder{ color:var(--ink-mute); font-weight:500; }
.naptien-input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.naptien-input::-webkit-outer-spin-button, .naptien-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.naptien-input[type=number]{ -moz-appearance:textfield; }

/* ---------------- banner khuyến mãi Premium (đếm ngược + giới hạn suất) ---------------- */
.promo-banner{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:var(--card); border:1px solid var(--line); border-left:4px solid var(--amber);
    border-radius:16px; padding:14px 20px 14px 18px; margin-bottom:22px; cursor:pointer;
    box-shadow:var(--shadow); flex-wrap:wrap;
    transition:transform 0.28s ease, box-shadow 0.28s ease;
}
.promo-banner:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hov); }
.promo-banner.hidden{ display:none; }
.promo-banner-left{ display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 260px; }
.promo-crown{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--amber-bg); color:var(--amber);
    display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.promo-msg{ font-size:.86rem; font-weight:600; color:var(--ink); line-height:1.5; }
.promo-banner-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.promo-pill{ font-size:.76rem; font-weight:800; padding:6px 14px; border-radius:99px; white-space:nowrap; }
.promo-pill.hidden{ display:none; }
.promo-pill-slots{ background:var(--brand-bg); color:var(--brand); }
.promo-pill-timer{ background:var(--amber-bg); color:var(--amber); font-variant-numeric:tabular-nums; }
html[data-theme="dark"] .promo-pill-timer{ color:#ffbd4a; }
.promo-close{
    width:26px; height:26px; border-radius:50%; border:none; background:transparent;
    color:var(--ink-mute); cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:.85rem;
}
.promo-close:hover{ background:var(--line); color:var(--ink); }
@media (max-width:640px){
    .promo-banner{ padding:12px 16px 12px 14px; }
    .promo-msg{ font-size:.8rem; }
    .promo-banner-right{ width:100%; justify-content:flex-start; }
}

/* Ảnh hero trên điện thoại: ảnh nằm trên cùng, mờ dần xuống nền, chữ đè nhẹ lên phần mờ */
@media (max-width: 760px){
    .hero-card.has-photo{ flex-direction:column; align-items:stretch; gap:0; padding:0 0 24px; min-height:0; }
    .hero-card.has-photo .hero-text{ max-width:none; padding:0 22px; margin-top:-22px; }
    .hero-photo{
        position:relative; width:100%; height:245px; order:-1; flex-shrink:0;
        -webkit-mask-image:linear-gradient(to bottom, #000 66%, transparent 100%);
                mask-image:linear-gradient(to bottom, #000 66%, transparent 100%);
    }
    .hero-photo::after{ background:linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--brand) 18%, transparent) 100%); }
    .hero-photo img{ object-position:30% 50%; }
    body[data-show-illustration="0"] .hero-card.has-photo{ padding:28px 22px; }
    body[data-show-illustration="0"] .hero-card.has-photo .hero-text{ padding:0; margin-top:0; }
}