/* Trang ho so thanh vien. Mot he le duy nhat: --cq-gutter cua page-width.
   Khong khoi nao tu dat le ngang rieng. */

.mb {
    --mb-ava: 326px;
    --mb-cot: 340px;
    padding-bottom: var(--cq-6, 32px);
}

/* ---------- Dau trang: banner + anh dai dien + ten ---------- */

.mb-dau {
    position: relative;
    margin-bottom: var(--cq-5, 24px);
}

.mb-banner {
    margin-left: calc(-1 * var(--cq-gutter));
    margin-right: calc(-1 * var(--cq-gutter));
    aspect-ratio: 8 / 1;
    background: linear-gradient(120deg, #0d5a7c 0%, var(--cq-green) 55%, #4bb06a 100%);
    background-size: cover;
    background-position: center;
}

.mb-ava {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--mb-ava);
    height: var(--mb-ava);
    object-fit: cover;
    overflow: hidden;
    background: var(--cq-surface, #fff);
}

/* Trang /tai-khoan boc anh trong the div — anh con phai lap kin khung. */
.mb-ava > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mb-canh {
    position: absolute;
    left: calc(var(--mb-cot) + var(--cq-5, 24px));
    right: var(--cq-5, 24px);
    bottom: 18px;
    z-index: 3;
    color: #fff;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

/* Nhan trang thai: dai mo phu day anh dai dien, nam GON trong khung anh.
   Khong icon, chi #noi dung. Vien anh an mau trang thai. */
.mb-dau .cq-tt-mount {
    position: absolute;
    left: 0;
    top: calc(var(--mb-ava) - 34px);
    width: var(--mb-ava);
    height: 34px;
    z-index: 4;
    overflow: hidden;
    border-radius: 0 0 var(--mb-ava-bo, 0px) var(--mb-ava-bo, 0px);
    pointer-events: none;
}

.mb-dau .cq-tt-mount .cq-tt {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: none;
}

.mb-dau .cq-tt-mount .cq-tt i { display: none; }

.mb-ten { color: inherit; }

.mb-ten__chinh {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 30px;
    font-weight: 800;
}

.mb-ten__phu {
    margin-top: 3px;
    font-size: 15px;
    font-weight: 500;
}

.mb-tick {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}

/* ---------- Hang so + nut theo doi ---------- */

.mb-act {
    position: absolute;
    right: 0;
    bottom: 18px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--cq-2, 8px);
}

.mb-so {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: var(--cq-fs-1, 14px);
    text-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

.mb-so__o {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mb-so__o .cq-ic { width: 16px; height: 16px; opacity: .85; }
.mb-so b { font-weight: 800; }

/* Vong tron do: dau hieu cua bo danh dau (mau #EF2F3C dang go cung
   trong Content/module-bookmark/module-bookmark.css). */
.mb-vong {
    display: inline-block;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2.5px solid #EF2F3C;
    border-radius: 50%;
}

/* Nut theo doi: icon tran, cung kieu voi hai chi so ben canh. */
.mb-theo-doi {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.mb-theo-doi .cq-ic { width: 16px; height: 16px; opacity: .85; }
.mb-theo-doi:hover .cq-ic { opacity: 1; color: var(--cq-green); }

/* Dang theo doi: composer them class "true" — icon giu nguyen, chuyen xanh.
   Bam lan nua la bo theo doi. */
.mb-theo-doi.true .cq-ic,
.mb-theo-doi.True .cq-ic { color: var(--cq-green); opacity: 1; }

/* ---------- Bo cuc hai cot ---------- */

.mb-luoi {
    display: grid;
    grid-template-columns: var(--mb-cot) minmax(0, 1fr);
    gap: var(--cq-5, 24px);
    align-items: start;
}

/* ---------- Cot trai: thong tin ---------- */

.mb-tt { min-width: 0; }

.mb-muc {
    padding: 13px 0;
    border-top: 1px solid var(--cq-hairline, #edf3f8);
}

.mb-muc:first-child { border-top: 0; padding-top: 0; }

.mb-nhan {
    display: block;
    margin-bottom: 8px;
    color: var(--cq-muted, #5b6e83);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mb-gt-tri {
    color: var(--cq-text, #173e63);
    font-size: 16px;
    line-height: 1.65;
}

.mb-lien-he {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mb-lien-he a,
.mb-lien-he div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cq-navy, #12385b);
    text-decoration: none;
    font-size: 15px;
    word-break: break-word;
}

.mb-lien-he a:hover { color: var(--cq-green); }
.mb-lien-he .cq-ic { width: 18px; height: 18px; flex: 0 0 auto; }

.mb-tc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    color: var(--cq-navy, #12385b);
    text-decoration: none;
}

.mb-tc:hover .mb-tc__ten { text-decoration: underline; }

.mb-tc__logo {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 7px;
    object-fit: cover;
    background: var(--cq-light, #eef3f7);
}

.mb-tc__ten { font-size: 14px; font-weight: 600; }

/* Mot dong trong hoc van / bang cap / giai thuong. */
.mb-dong { padding: 7px 0; }
.mb-dong__ten { font-size: 15px; font-weight: 600; color: var(--cq-navy, #12385b); }
.mb-dong__ten a { color: inherit; text-decoration: none; }
.mb-dong__ten a:hover { color: var(--cq-green); text-decoration: underline; }

.mb-dong__phu {
    margin-top: 2px;
    color: var(--cq-muted, #5b6e83);
    font-size: 13.5px;
}

.mb-dong__nam::before { content: " · "; }

.mb-trong {
    color: var(--cq-muted, #5b6e83);
    font-style: italic;
}

/* ---------- Cot phai: thanh tab + noi dung ---------- */

.mb-noi { min-width: 0; }

/* Thanh tab la <ul>: bo padding va dau cham mac dinh cua trinh duyet. */
.mb-tab .menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mb-tab .menu > .item { list-style: none; }

.mb-tab .cq-tab-ic {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.mb-tab .cq-tab-ic .cq-ic { width: 18px; height: 18px; }
.mb-tab .cq-tab-so { font-weight: 600; opacity: .6; font-size: .92em; }

/* Tab danh dau: vong tron do, cung dau hieu voi chi so o tren.
   Chua trong o cao 18px cho thang hang voi cac icon SVG ben canh. */
.mb-tab .mb-vong {
    width: 15px;
    height: 15px;
    margin: 1.5px 0;
    border-width: 2.5px;
}

.mb-bang { padding-top: var(--cq-4, 16px); }

/* Hai luoi khac nhau vi hai loai the khac nhau:
   .mb-luoi-the  — the trang chu (nang luc, da danh dau): nhieu cot.
   .mb-luoi-bai  — the bai tap chi: mot cot, the rong ngang. */
.mb-luoi-the {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--cq-3, 12px);
}

.mb-luoi-bai {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cq-4, 16px);
}

.mb-luoi-bai > * {
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
    min-width: 0;
}

/* The do module khac dung (card trang chu, card tap chi) mang he luoi float cu
   — go float va width co dinh de o vao o cua grid. */
.mb-luoi-the > * {
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
    min-width: 0;
}

.mb-nl {
    display: block;
    text-decoration: none;
    color: var(--cq-navy, #12385b);
}

.mb-nl img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
    background: var(--cq-light, #f2f5f7);
}

.mb-nl .name {
    display: block;
    padding: 8px 2px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.mb-tai {
    grid-column: 1 / -1;
    padding: 30px 10px;
    text-align: center;
    color: var(--cq-muted, #8593a3);
    font-size: 15px;
}

/* ---------- Dien thoai ---------- */

@media (max-width: 767px) {
    .mb { --mb-ava: 150px; --mb-cot: 0px; }

    /* Banner, thong tin va thanh tab lien thanh mot dai tran vien. */
    .mb-dau,
    .mb-tt {
        background: var(--cq-surface, #fff);
        margin-left: calc(-1 * var(--cq-gutter));
        margin-right: calc(-1 * var(--cq-gutter));
        padding-left: var(--cq-gutter);
        padding-right: var(--cq-gutter);
    }

    .mb-dau { margin-bottom: 0; padding-bottom: var(--cq-3, 12px); }
    .mb-tt { padding-top: 0; padding-bottom: var(--cq-4, 16px); }
    .mb-banner { aspect-ratio: 3 / 2; }

    /* Anh dai dien: hai phan ba de len anh bia, mot phan ba nam duoi. */
    .mb { --mb-ava-bo: 20px; }

    .mb-ava {
        left: var(--cq-gutter);
        top: calc(66.67vw - var(--mb-ava) * 2 / 3);
        border-radius: var(--mb-ava-bo);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    }

    /* Ten nam tren anh bia, ben phai anh dai dien. */
    .mb-canh {
        left: calc(var(--cq-gutter) + var(--mb-ava) + var(--cq-3, 12px));
        right: var(--cq-gutter);
        bottom: calc(100% - 66.67vw + 16px);
    }

    .mb-ten__chinh { font-size: 22px; gap: 6px; }
    .mb-ten__phu { font-size: 14px; opacity: .95; }
    .mb-tick { width: 18px; height: 18px; }

    /* Dai mo bam day anh dai dien dang de len anh bia. */
    .mb-dau .cq-tt-mount {
        left: var(--cq-gutter);
        top: calc(66.67vw - var(--mb-ava) * 2 / 3 + var(--mb-ava) - 32px);
        height: 32px;
    }

    .mb-dau .cq-tt-mount .cq-tt { font-size: 11px; }

    /* Thanh cap do + so + nut nam DUOI anh bia, ne anh dai dien dang tran xuong. */
    .mb-duoi {
        margin-left: calc(var(--mb-ava) + var(--cq-3, 12px));
        padding-top: 6px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mb-duoi .mb-hero-lv { margin: 0; max-width: 100%; }

    /* Ba chi so trai deu tu mep phai anh dai dien toi le phai trang.
       display:contents de hai o trong .mb-so thanh con truc tiep cua .mb-act. */
    .mb-act {
        position: static;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    .mb-so { display: contents; }
    .mb-so__o { font-size: 13px; color: var(--cq-navy, #12385b); text-shadow: none; }

    /* Lien he liet ke thang, khong nhan. */
    .mb-tt .mb-muc--lien-he { border-top: 0; padding-top: 0; }
    .mb-tt .mb-muc--lien-he .mb-nhan { display: none; }

    .mb-luoi { grid-template-columns: minmax(0, 1fr); gap: 0; }

    /* Icon thay chu: chu an han, khong nuot bang co chu 0.
       Nam nut trai deu het be ngang, so dem nam TREN icon. */
    .mb-tab .menu { justify-content: space-between; }
    .mb-tab .menu > *:first-child { margin-left: 0; }
    .mb-tab .menu > *:last-child { margin-right: 0; }
    .mb-tab .menu > .item { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; }

    .mb-tab .cate-menu {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        flex-direction: column;
        gap: 2px;
        line-height: 1;
    }

    .mb-tab .cq-tab-ic { margin-right: 0; }
    .mb-tab .cq-tab-chu { display: none; }

    /* So do JS chen o cuoi nut — keo len dau bang order. */
    .mb-tab .cq-tab-so {
        order: -1;
        opacity: 1;
        font-size: 12px;
        font-weight: 700;
    }

    /* Luon hai cot tren dien thoai. */
    .mb-luoi-the { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Thanh tab dinh ngay duoi dau trang (cao 57px), khong de ho. */
    .mb-tab { top: 57px; }
}

/* Nut sua — chi trang /tai-khoan co (truyen vao qua template Nut).
   Dat o goc phai anh bia, khong chen vao hang chi so. */
.mb-sua {
    position: absolute;
    right: 0;
    top: var(--cq-3, 12px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mb-sua__nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--cq-hairline-strong, #d7e0e8);
    background: var(--cq-surface, #fff);
    color: var(--cq-navy, #12385b);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.mb-sua__nut:hover { border-color: var(--cq-green); color: var(--cq-green); }
.mb-sua__nut .cq-ic { width: 16px; height: 16px; }

/* Nang luc o trang chinh chu co them nut sua / xoa. */
.mb-nl-o { position: relative; }

.mb-nl-sua {
    position: absolute;
    right: 6px;
    top: 6px;
    display: flex;
    gap: 6px;
}

.mb-nl-sua .Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--cq-navy, #12385b);
    text-decoration: none;
    font-size: 12px;
}

.mb-nl-sua .Button:hover { background: #fff; color: var(--cq-green); }