@font-face {
    font-family: 'PSBolden';
    src: url('/PS-Bolden.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ===== Promo bar (dark, top) ===== */
.cm-topbar-promo {
    background: #0b1020;
    color: #e5e7eb;
    text-align: center;
    font-size: 13.5px;
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Nút promo luôn nằm kế bên chữ, không xuống dòng (kể cả mobile) */
.cm-topbar-promo a { white-space: nowrap; flex-shrink: 0; margin: 0; }
@media (max-width: 600px) {
    .cm-topbar-promo { font-size: 12px; padding: 8px 10px; gap: 6px; }
    .cm-topbar-promo a { padding: 3px 10px; }
}
@media (max-width: 380px) {
    .cm-topbar-promo { font-size: 11px; }
    .cm-topbar-promo a { padding: 2px 8px; }
}
.cm-topbar-promo .cm-promo-ico { color: #60a5fa; }
.cm-topbar-promo a {
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.35);
    padding: 3px 12px;
    border-radius: 999px;
    font-weight: 600;
    transition: background .2s;
}
.cm-topbar-promo a:hover { background: rgba(255,255,255,.12); }

/* ===== Main header (white, NOT sticky) ===== */
.topbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border) !important;
    position: static;            /* không dính khi cuộn trang */
    z-index: 900;
}

.topbar-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 22px;
    padding: 12px 16px !important;
    max-width: 1350px;
    margin: 0 auto;
}

.logo {
    font-weight: 800;
    font-size: 1.15rem;
    color: #0f1729 !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.3px;
}
.logo .prompt { color: var(--accent); font-family: var(--font-mono); }

/* Search box in header */
.cm-header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px; /* Giảm độ bo tròn nhẹ cho hợp với khung thấp */
    padding: 1px 12px;  /* Giảm khoảng đệm trên/dưới giúp khung hẹp lại */
    flex: 1;
    max-width: 340px;
}
.cm-header-search:focus-within { border-color: var(--accent); background: #fff; }
.cm-header-search .cm-search-ico { color: #9aa2b1; font-size: .9rem; }
.cm-header-search input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: .9rem; color: var(--text);
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
    color: #4b5563;
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 600;
    transition: all 0.2s ease;
    padding: 8px 12px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav a:hover, .nav a.active { color: var(--accent); background: rgba(79, 70, 229, 0.07); }
.nav a .cm-flame { color: #f97316; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid var(--border);
}

/* Green CTA button ("Get experts dev" style) */
.cm-btn-green {
    background: #6b3eea !important;
    color: #ffffff !important;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, transform .2s;
}
.cm-btn-green:hover { background: #15803d !important; transform: translateY(-1px); }

/* ===== Category sub-nav bar ===== */
.cm-catbar { background: #ffffff; border-bottom: 1px solid var(--border); }
.cm-catbar-inner {
    display: flex; align-items: center; gap: 22px;
    padding: 11px 16px; font-size: 13.5px; font-weight: 500;
    max-width: 1350px; margin: 0 auto;
    overflow-x: auto; white-space: nowrap;
}
.cm-catbar-inner a { color: #4b5563; text-decoration: none; transition: color .15s; }
.cm-catbar-inner a:hover { color: var(--accent); }
.cm-catbar-bundle {
    margin-left: auto;
    background: #fef3c7; color: #92400e;
    border: 1px solid #fde68a; border-radius: 999px;
    padding: 5px 14px; font-weight: 700; font-size: 12.5px;
    flex-shrink: 0;
}

/* ===== Nút "Thêm" dropdown ===== */
.cm-more { position: relative; flex-shrink: 0; }
.cm-more-btn {
    background: none; border: none; cursor: pointer;
    font: inherit; color: #4b5563; font-weight: 500; padding: 0;
    display: inline-flex; align-items: center; gap: 3px;
}
.cm-more-btn:hover { color: var(--accent); }
.cm-more-menu {
    position: fixed;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14);
    padding: 6px;
    min-width: 190px;
    display: none;
    z-index: 3000;
}
.cm-more-menu.open { display: flex; flex-direction: column; }
.cm-more-menu a {
    padding: 9px 14px; border-radius: 7px;
    color: #4b5563 !important; font-weight: 500; white-space: nowrap;
    text-decoration: none;
}
.cm-more-menu a:hover { background: var(--surface-2); color: var(--accent) !important; }

.mobile-header-right { display: none; }
.mobile-only-username { display: none; }

@media (max-width: 992px) {
    .cm-header-search { display: none; }
    .cm-header-search.search-open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 12px; right: 12px;
        max-width: none;
        z-index: 1002;
        margin-top: 0;
        box-shadow: 0 20px 50px rgba(15, 23, 41, 0.15);
        background: #ffffff;
    }

    .mobile-header-right {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-left: auto;
    }
    .mobile-header-right .btn-sm {
        padding: 6px 12px; font-size: 0.8rem; white-space: nowrap;
        background: #f6f7f9; border: 1px solid var(--border);
        color: #0f1729; font-weight: 700; border-radius: 10px;
    }
    .mobile-menu-btn, .mobile-search-btn {
        background: #f6f7f9; border: 1px solid var(--border);
        color: #0f1729; padding: 6px 12px; border-radius: 10px;
        cursor: pointer; font-size: 1rem; line-height: 1;
        display: flex; align-items: center; justify-content: center;
    }
    .desktop-wallet-btn { display: inline-flex !important; }

    .nav-container {
        display: none;
        position: absolute;
        top: 100%;
        left: 12px; right: 12px;
        z-index: 1001;
        background: #ffffff !important;
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        gap: 10px;
        box-shadow: 0 20px 50px rgba(15, 23, 41, 0.15);
    }
    .nav-container.active { display: flex !important; }
    .nav { flex-direction: column; align-items: stretch; gap: 6px; }
    .nav a {
        padding: 11px 16px; background: #f6f7f9;
        border: 1px solid var(--border); border-radius: 12px;
        color: #0f1729; font-weight: 600;
    }
    .nav-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 4px; }
    .nav-actions .btn, .nav-actions .cm-btn-green {
        width: 100%; text-align: center; justify-content: center; border-radius: 12px;
    }
    .user-profile-link {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 10px; background: #f6f7f9;
        border: 1px solid var(--border); border-radius: 12px;
        text-decoration: none; color: #0f1729;
    }
    .mobile-only-username { display: inline-block; font-weight: 700; }
    .topbar-inner { position: relative; }
}

/* ===== Mobile: gom toàn bộ danh mục vào 1 nút "More" ===== */
.cm-more-menu { 
    max-height: 70vh; 
    overflow-y: auto; 
}

/* Mặc định trên PC: Ẩn nhóm danh mục phụ này đi trong dropdown */
.mobile-all-categories {
    display: none; 
}

@media (max-width: 992px) {
    .cm-catbar-inner { 
        gap: 12px; 
        overflow: visible; 
        padding: 9px 16px; 
    }
    
    /* Trên mobile: Ẩn các link nằm trải ngang bên ngoài */
    .cm-catbar-inner > a { 
        display: none; 
    }   
    
    /* Trên mobile: Hiện nhóm danh mục chính bên trong nút Thêm */
    .mobile-all-categories { 
        display: contents; 
    }

    .cm-more-btn {
        font-size: 14px; 
        font-weight: 600;
        background: #f6f7f9; 
        border: 1px solid var(--border);
        border-radius: 10px; 
        padding: 6px 14px; 
        color: #0f1729;
    }
}

/* ===== Banner nhắc xác thực email ===== */
.cm-verify-banner{
    background:#fff7ed;
    border-bottom:1px solid #fed7aa;
    color:#9a3412;
}
.cm-verify-banner .container{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap;
    padding:10px 16px; font-size:13.5px;
    max-width:1200px; margin:0 auto;
}
.cm-verify-banner b{ color:#7c2d12; }
.cm-verify-banner a{
    background:#ea580c; color:#fff !important; text-decoration:none;
    padding:6px 14px; border-radius:8px; font-weight:700; white-space:nowrap;
    transition:background .2s;
}
.cm-verify-banner a:hover{ background:#c2410c; }


/* ===== Nut yeu thich (trai tim) & bao cao ===== */
.cm-fav-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #e11d48;color:#e11d48;padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px;line-height:1;cursor:pointer;transition:.15s;text-decoration:none;}
.cm-fav-btn:hover{background:#fff1f2;}
.cm-fav-btn.active{background:#e11d48;color:#fff;}
.cm-report-box{border-top:1px solid var(--border,#e5e7eb);padding-top:14px;}
.cm-report-box summary{user-select:none;}
.cm-report-box summary:hover{color:#e11d48 !important;}