/*
 * TuiHocTA — Sprint 3.1C Mobile Closeout Patch
 * File: deployment/sprint3-1c-6n-patch.css
 *
 * Nạp SAU:
 * 1) /css/tuihocta.css
 * 2) /deployment/phase2-7c-css-patch.css
 *
 * Không sửa file canonical trong giai đoạn QA.
 */

/* =========================================================
   1. SAFETY: NGĂN MARKET DASHBOARD TRÀN NGANG
========================================================= */

.tuihocta-market-dashboard,
.tuihocta-market-dashboard * {
    box-sizing: border-box;
}

.tuihocta-market-dashboard {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

[data-dashboard-breadth].tuihocta-breadth-chart-grid,
.tuihocta-dashboard-internal-grid,
.tuihocta-breadth-chart-card,
.tuihocta-dashboard-internal-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.tuihocta-dashboard-popover-panel {
    cursor: default;
}


/* =========================================================
   2. MOBILE — BREADTH + INTERNALS
========================================================= */

@media (max-width: 767px) {

    [data-dashboard-breadth].tuihocta-breadth-chart-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .tuihocta-breadth-chart-card,
    .tuihocta-breadth-chart-card.is-weekly {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .tuihocta-breadth-chart-header h3,
    .tuihocta-internal-chart-header h3 {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .tuihocta-breadth-chart-metric > strong {
        font-size: 34px !important;
        letter-spacing: -0.035em;
    }

    .tuihocta-echart,
    .tuihocta-internal-echart {
        width: 100% !important;
        height: 235px !important;
        min-height: 235px !important;
    }

    .tuihocta-dashboard-internal-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .tuihocta-dashboard-internal-card.is-chart-card {
        grid-column: 1 / -1 !important;
        min-height: 0 !important;
        padding: 16px !important;
    }

    .tuihocta-dashboard-internal-card:not(.is-chart-card) {
        min-height: 150px;
        padding: 16px !important;
    }

    .tuihocta-internal-chart-header h3 {
        font-size: 25px !important;
        line-height: 1.2 !important;
    }

    .tuihocta-internal-chart-metric {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
    }

    .tuihocta-internal-chart-metric > strong {
        font-size: 28px !important;
    }


    /* =====================================================
       3. MOBILE — RANGE BUTTONS + FULLSCREEN
    ===================================================== */

    .tuihocta-chart-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        align-items: end !important;
        gap: 8px !important;
    }

    .tuihocta-chart-range-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .tuihocta-chart-range-buttons button {
        min-height: 38px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
    }

    .tuihocta-chart-fullscreen-button {
        align-self: end !important;
        width: 40px !important;
        height: 38px !important;
        min-width: 40px !important;
        min-height: 38px !important;
    }


    /* =====================================================
       4. MOBILE — POPOVER DẤU ?
    ===================================================== */

    .tuihocta-dashboard-popover-panel,
    .tuihocta-dashboard-popover.is-regime-help .tuihocta-dashboard-popover-panel,
    .tuihocta-dashboard-popover.is-usage-only .tuihocta-dashboard-popover-panel,
    .tuihocta-dashboard-popover.is-breadth-help .tuihocta-dashboard-popover-panel {
        position: fixed !important;
        top: 50% !important;
        right: 16px !important;
        bottom: auto !important;
        left: 16px !important;
        z-index: 2147482000 !important;
        width: auto !important;
        max-width: 440px !important;
        max-height: min(70vh, 520px) !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        transform: translateY(-50%) !important;
        border-radius: 16px !important;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .28) !important;
    }


    /* =====================================================
       5. MOBILE — MODAL CHART MỞ RỘNG
    ===================================================== */

    #tuihocta-chart-fullscreen-modal {
        padding: 8px !important;
    }

    #tuihocta-chart-fullscreen-modal [data-fullscreen-panel] {
        width: 100% !important;
        height: 94dvh !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    #tuihocta-chart-fullscreen-modal [data-fullscreen-title] {
        max-width: calc(100% - 52px);
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .tuihocta-fullscreen-chart-toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        margin: 0 0 10px !important;
    }

    #tuihocta-chart-fullscreen-modal [data-fullscreen-canvas] {
        height: calc(100% - 150px) !important;
        min-height: 300px !important;
    }
}


/* =========================================================
   6. MOBILE RẤT HẸP
========================================================= */

@media (max-width: 389px) {
    .tuihocta-dashboard-internal-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tuihocta-dashboard-internal-card:not(.is-chart-card) {
        min-height: 0;
    }
}

/* =========================================================
   9. SPRINT 3.1C — BREADTH CARD FINAL ALIGNMENT
========================================================= */

/* Desktop: giữ label, title, value, count, change và chart cùng trục giữa */
.tuihocta-breadth-chart-card {
    text-align: center;
}

.tuihocta-breadth-chart-header {
    position: relative;
    display: block !important;
    padding-right: 38px !important;
}

.tuihocta-breadth-chart-header > div {
    width: 100%;
    text-align: center;
}

.tuihocta-breadth-chart-header > div > span,
.tuihocta-breadth-chart-header h3,
.tuihocta-breadth-chart-metric,
.tuihocta-breadth-chart-metric > strong,
.tuihocta-breadth-chart-metric > span,
.tuihocta-breadth-chart-metric > small {
    text-align: center !important;
}

.tuihocta-breadth-chart-header
.tuihocta-dashboard-popover {
    position: absolute;
    top: 0;
    right: 0;
}

.tuihocta-breadth-chart-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tuihocta-echart {
    margin-right: auto !important;
    margin-left: auto !important;
}


/* =========================================================
   10. MOBILE — CONTROLS 3 CỘT, FULLSCREEN DƯỚI 6M
========================================================= */

@media (max-width: 767px) {

    .tuihocta-breadth-chart-card {
        text-align: center;
    }

    .tuihocta-breadth-chart-header {
        padding-right: 36px !important;
    }

    .tuihocta-breadth-chart-header > div {
        text-align: center !important;
    }

    .tuihocta-breadth-chart-header h3 {
        margin-top: 8px !important;
        font-size: 23px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .tuihocta-breadth-chart-metric {
        align-items: center !important;
        margin-top: 18px !important;
    }

    .tuihocta-breadth-chart-metric > strong {
        font-size: 34px !important;
        line-height: 1.05 !important;
    }

    .tuihocta-breadth-chart-metric > span {
        margin-top: 7px !important;
        font-size: 13px !important;
    }

    .tuihocta-breadth-chart-metric > small {
        min-height: 18px !important;
        margin-top: 5px !important;
        font-size: 12px !important;
    }

    .tuihocta-echart {
        width: calc(100% - 12px) !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .tuihocta-chart-controls {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        align-items: stretch !important;
    }

    .tuihocta-chart-range-buttons {
        display: contents !important;
    }

    .tuihocta-chart-range-buttons button,
    .tuihocta-chart-fullscreen-button {
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        border-radius: 9px !important;
    }

    /* Thứ tự mong muốn:
       Hàng 1: 1M | 3M | 6M
       Hàng 2: 1Y | Toàn bộ | Fullscreen
    */
    .tuihocta-chart-range-buttons button:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .tuihocta-chart-range-buttons button:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .tuihocta-chart-range-buttons button:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .tuihocta-chart-range-buttons button:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
    }

    .tuihocta-chart-range-buttons button:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
    }

    .tuihocta-chart-fullscreen-button {
        grid-column: 3 !important;
        grid-row: 2 !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: none !important;
    }

    .tuihocta-chart-fullscreen-button > span {
        display: block;
        line-height: 1;
        transform: none !important;
    }
}

/* =========================================================
   11. SPRINT 3.1C — HOMEPAGE BREADTH CARD STRUCTURE
========================================================= */

.tuihocta-breadth-chart-card {
    text-align: center !important;
}

.tuihocta-breadth-chart-header {
    position: relative;
    display: block !important;
    padding: 0 38px !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-header h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-header
.tuihocta-dashboard-popover {
    position: absolute !important;
    top: -3px !important;
    right: 0 !important;
}

.tuihocta-breadth-chart-metric {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 14px !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-metric > strong {
    display: block !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 36px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

.tuihocta-breadth-card-progress {
    display: block !important;
    position: relative !important;
    width: min(220px, calc(100% - 40px)) !important;
    height: 7px !important;
    margin: 14px auto 8px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .10) !important;
}

.tuihocta-breadth-card-progress > i {
    display: block !important;
    width: 0;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #ef4444, #fb7185) !important;
    transition: width 500ms ease !important;
}

.tuihocta-breadth-chart-card.is-neutral-weak
.tuihocta-breadth-card-progress > i,
.tuihocta-breadth-chart-card.is-neutral-positive
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, #d97706, #fbbf24) !important;
}

.tuihocta-breadth-chart-card.is-strong
.tuihocta-breadth-card-progress > i,
.tuihocta-breadth-chart-card.is-very-strong
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, #16a34a, #4ade80) !important;
}

.tuihocta-breadth-chart-metric > span {
    display: block !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

.tuihocta-breadth-card-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-top: 7px !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
}

.tuihocta-breadth-card-status > i {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
    border: 2px solid currentColor !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 2px #ffffff !important;
}

.tuihocta-breadth-card-status.is-very-weak,
.tuihocta-breadth-card-status.is-weak {
    color: #ef2020 !important;
}

.tuihocta-breadth-card-status.is-neutral-weak,
.tuihocta-breadth-card-status.is-neutral-positive {
    color: #d97706 !important;
}

.tuihocta-breadth-card-status.is-strong,
.tuihocta-breadth-card-status.is-very-strong {
    color: #15803d !important;
}

.tuihocta-breadth-card-status.is-neutral {
    color: #64748b !important;
}

/* Giữ dữ liệu thay đổi 1 phiên trong DOM để JS không bị phá,
   nhưng card hiển thị đúng cấu trúc ngoài trang chủ. */
.tuihocta-breadth-change-detail {
    display: block !important;
}

.tuihocta-echart {
    width: calc(100% - 18px) !important;
    max-width: 100% !important;
    margin: 18px auto 0 !important;
}


/* =========================================================
   12. MOBILE — GIỮ CÙNG FORMAT VÀ ĐÚNG VỊ TRÍ FULLSCREEN
========================================================= */

@media (max-width: 767px) {
    .tuihocta-breadth-chart-header {
        padding: 0 36px !important;
    }

    .tuihocta-breadth-chart-header h3 {
        font-size: 23px !important;
    }

    .tuihocta-breadth-chart-metric > strong {
        font-size: 34px !important;
    }

    .tuihocta-breadth-card-progress {
        width: min(230px, calc(100% - 30px)) !important;
    }

    .tuihocta-breadth-card-status {
        font-size: 15px !important;
    }

    .tuihocta-echart {
        width: calc(100% - 8px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .tuihocta-chart-controls {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        align-items: stretch !important;
    }

    .tuihocta-chart-range-buttons {
        display: contents !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .tuihocta-chart-fullscreen-button {
        grid-column: 3 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-self: stretch !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tuihocta-breadth-card-progress > i {
        transition: none !important;
    }
}

/* =========================================================
   13. SPRINT 3.1C — VERIFIED BREADTH CARD FORMAT
   Giữ eyebrow và dòng so với phiên trước; thêm progress/status.
========================================================= */

.tuihocta-breadth-chart-card {
    text-align: center !important;
}

.tuihocta-breadth-chart-header {
    position: relative !important;
    display: block !important;
    padding: 0 38px !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-header > div {
    width: 100% !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-header > div > span {
    display: block !important;
    color: #2563eb !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: .10em !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-header h3 {
    margin: 7px 0 0 !important;
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-header
.tuihocta-dashboard-popover {
    position: absolute !important;
    top: -3px !important;
    right: 0 !important;
}

.tuihocta-breadth-chart-metric {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 14px !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-metric > strong {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
    font-variant-numeric: tabular-nums;
}

.tuihocta-breadth-card-progress {
    display: block !important;
    position: relative !important;
    width: min(220px, calc(100% - 36px)) !important;
    height: 7px !important;
    margin: 13px auto 8px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.10) !important;
}

.tuihocta-breadth-card-progress > i {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg,#ef4444,#fb7185) !important;
    transition: width 500ms ease !important;
}

.tuihocta-breadth-chart-card.is-neutral-weak
.tuihocta-breadth-card-progress > i,
.tuihocta-breadth-chart-card.is-neutral-positive
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg,#d97706,#fbbf24) !important;
}

.tuihocta-breadth-chart-card.is-strong
.tuihocta-breadth-card-progress > i,
.tuihocta-breadth-chart-card.is-very-strong
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg,#16a34a,#4ade80) !important;
}

.tuihocta-breadth-chart-metric > span {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.tuihocta-breadth-card-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-top: 6px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
}

.tuihocta-breadth-card-status > i {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
    border: 2px solid currentColor !important;
    border-radius: 999px !important;
    background: #fff !important;
}

.tuihocta-breadth-card-status.is-very-weak,
.tuihocta-breadth-card-status.is-weak {
    color: #ef2020 !important;
}

.tuihocta-breadth-card-status.is-neutral-weak,
.tuihocta-breadth-card-status.is-neutral-positive {
    color: #d97706 !important;
}

.tuihocta-breadth-card-status.is-strong,
.tuihocta-breadth-card-status.is-very-strong {
    color: #15803d !important;
}

.tuihocta-breadth-card-status.is-neutral {
    color: #64748b !important;
}

/* Dòng thay đổi phiên vẫn giữ lại theo yêu cầu. */
.tuihocta-breadth-change-detail {
    display: block !important;
    min-height: 18px !important;
    margin-top: 7px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

.tuihocta-echart {
    width: calc(100% - 18px) !important;
    margin: 15px auto 0 !important;
}

@media (max-width: 767px) {
    .tuihocta-breadth-chart-header {
        padding: 0 36px !important;
    }

    .tuihocta-breadth-chart-header h3 {
        font-size: 23px !important;
    }

    .tuihocta-breadth-chart-metric > strong {
        font-size: 34px !important;
    }

    .tuihocta-breadth-card-progress {
        width: min(230px, calc(100% - 30px)) !important;
    }

    .tuihocta-echart {
        width: calc(100% - 8px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .tuihocta-chart-controls {
        display: grid !important;
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 7px !important;
        align-items: stretch !important;
    }

    .tuihocta-chart-range-buttons {
        display: contents !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .tuihocta-chart-fullscreen-button {
        grid-column: 3 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-self: stretch !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tuihocta-breadth-card-progress > i {
        transition: none !important;
    }
}

/* =========================================================
   14. SPRINT 3.1C — BREADTH / INTERNAL TITLE PARITY
========================================================= */

.tuihocta-breadth-chart-card {
    text-align: center !important;
}

.tuihocta-breadth-chart-header {
    position: relative !important;
    display: block !important;
    padding: 0 38px !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-header > div {
    width: 100% !important;
    text-align: center !important;
}

/* Giống eyebrow của Internal: xám, không xanh */
.tuihocta-breadth-chart-header > div > span {
    display: block !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

/* Giống title của Internal */
.tuihocta-breadth-chart-header h3 {
    margin: 7px 0 3px !important;
    color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-header
.tuihocta-dashboard-popover {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.tuihocta-breadth-chart-metric {
    align-items: center !important;
    text-align: center !important;
}

.tuihocta-breadth-chart-metric > strong,
.tuihocta-breadth-chart-metric > span,
.tuihocta-breadth-chart-metric > small,
.tuihocta-breadth-card-status {
    text-align: center !important;
}

.tuihocta-echart {
    width: calc(100% - 18px) !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}


/* =========================================================
   15. MOBILE — FULLSCREEN DƯỚI 6M, BÊN PHẢI TOÀN BỘ
========================================================= */

@media (max-width: 767px) {
    .tuihocta-breadth-chart-header {
        padding: 0 36px !important;
    }

    .tuihocta-breadth-chart-header h3 {
        font-size: 26px !important;
    }

    .tuihocta-chart-controls {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        align-items: stretch !important;
    }

    .tuihocta-chart-range-buttons {
        display: contents !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .tuihocta-chart-range-buttons button:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .tuihocta-chart-fullscreen-button {
        grid-column: 3 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-self: stretch !important;
    }

    .tuihocta-echart {
        width: calc(100% - 8px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* =========================================================
   16. SPRINT 3.1C — CENTER MARKET INTERNALS CARDS
========================================================= */

.tuihocta-dashboard-internal-card.is-chart-card {
    align-items: center !important;
    text-align: center !important;
}

.tuihocta-internal-chart-header {
    width: 100% !important;
    text-align: center !important;
}

.tuihocta-internal-chart-header > span,
.tuihocta-internal-chart-header h3 {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.tuihocta-internal-chart-metric {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    text-align: center !important;
}

.tuihocta-internal-chart-metric > strong,
.tuihocta-internal-chart-metric > small {
    text-align: center !important;
}

.tuihocta-internal-echart {
    width: calc(100% - 18px) !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.tuihocta-internal-chart-controls {
    width: 100% !important;
}

@media (max-width: 767px) {
    .tuihocta-internal-echart {
        width: calc(100% - 8px) !important;
    }
}

/* =========================================================
   17. SPRINT 3.1C — RESPONSIVE RESET + ROTATION
========================================================= */

@media (min-width: 768px) {
    .tuihocta-chart-controls {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .tuihocta-chart-range-buttons {
        display: grid !important;
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .tuihocta-chart-range-buttons button {
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
    }

    .tuihocta-chart-fullscreen-button {
        grid-column: auto !important;
        grid-row: auto !important;
        place-self: auto !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 36px !important;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    #tuihocta-chart-fullscreen-modal {
        padding: 8px !important;
    }

    #tuihocta-chart-fullscreen-modal
    [data-fullscreen-panel] {
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
        max-width: none !important;
        max-height: none !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    #tuihocta-chart-fullscreen-modal
    [data-fullscreen-canvas] {
        height: calc(100% - 104px) !important;
        min-height: 220px !important;
    }

    #tuihocta-chart-fullscreen-modal
    [data-fullscreen-title] {
        font-size: 18px !important;
    }
}

/* =========================================================
   18. SPRINT 3.1C — BREADTH TOOLTIP FINAL ALIGNMENT
========================================================= */

.tuihocta-dashboard-popover.is-breadth-help
.tuihocta-dashboard-popover-panel {
    width: min(340px, calc(100vw - 32px)) !important;
    padding: 16px 18px !important;
    gap: 0 !important;
}

.tuihocta-dashboard-popover.is-breadth-help
.tuihocta-dashboard-popover-body {
    width: 100% !important;
    margin: 0 !important;
    color: #5f6b7a !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    text-align: justify !important;
    text-align-last: left !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
}

.tuihocta-dashboard-popover.is-breadth-help
.tuihocta-dashboard-popover-body p {
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    text-align: inherit !important;
}

@media (max-width: 767px) {
    .tuihocta-dashboard-popover.is-breadth-help
    .tuihocta-dashboard-popover-panel {
        right: 16px !important;
        left: 16px !important;
        width: auto !important;
        max-width: 440px !important;
        padding: 16px 18px !important;
    }

    .tuihocta-dashboard-popover.is-breadth-help
    .tuihocta-dashboard-popover-body {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
}

/* =========================================================
   30. STRONG STOCKS — V3.3.1 LIQUIDITY FILTER + 52W CARD
========================================================= */

@media (min-width: 1201px) {
    .strong-stocks-toolbar {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
}

.strong-stocks-detail-range-52w-values {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.strong-stocks-detail-range-52w-line {
    display: block;
    width: 100%;
}

.strong-stocks-detail-range-52w-line > strong {
    color: #0f172a;
    font-weight: 800;
}

.strong-stocks-detail-range-52w-line .is-positive {
    color: #15803d !important;
}

.strong-stocks-detail-range-52w-line .is-negative {
    color: #dc2626 !important;
}

.strong-stocks-detail-range-52w-line .is-neutral {
    color: #64748b !important;
}

@media (max-width: 767px) {
    .strong-stocks-detail-range-52w-values {
        font-size: 13px;
    }
}

/* =========================================================
   31. STRONG STOCKS — HOTFIX DATA NULL + 52W CARD BALANCE
========================================================= */

.strong-stocks-detail-range-52w {
    align-items: stretch !important;
    justify-content: center !important;
}

.strong-stocks-detail-range-52w-values {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 7px !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

.strong-stocks-detail-range-52w-line {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.strong-stocks-detail-range-52w-prefix {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    color: #475569 !important;
    white-space: nowrap !important;
}

.strong-stocks-detail-range-52w-value-group {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

.strong-stocks-detail-range-52w-value-group > strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

@media (max-width: 1100px) {
    .strong-stocks-detail-range-52w-line {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
}

@media (max-width: 689px) {
    .strong-stocks-detail-range-52w-line {
        align-items: baseline !important;
        flex-direction: row !important;
        gap: 6px !important;
    }
}

@media (max-width: 420px) {
    .strong-stocks-detail-range-52w-line {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
}


/* =========================================================
   32. STRONG STOCKS — 52W COMPACT VALUE CARD + DIRECTION COLOR
========================================================= */

.strong-stocks-detail-range-52w {
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}

.strong-stocks-detail-range-52w
.strong-stocks-detail-metric-label {
    width: 100% !important;
    margin-bottom: 16px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

.strong-stocks-detail-range-52w-values {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 17px !important;
    width: 100% !important;
    margin: 0 !important;
    color: inherit !important;
    text-align: left !important;
}

.strong-stocks-detail-range-52w-value-line {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    color: inherit !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

.strong-stocks-detail-range-52w-value-line > strong {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 800 !important;
}

.strong-stocks-detail-range-52w-value-line > span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}

.strong-stocks-detail-range-52w.is-positive
.strong-stocks-detail-range-52w-value-line,
.strong-stocks-detail-range-52w.is-positive
.strong-stocks-detail-metric-label {
    color: #15803d !important;
}

.strong-stocks-detail-range-52w.is-negative
.strong-stocks-detail-range-52w-value-line,
.strong-stocks-detail-range-52w.is-negative
.strong-stocks-detail-metric-label {
    color: #dc2626 !important;
}

.strong-stocks-detail-range-52w.is-neutral
.strong-stocks-detail-range-52w-value-line {
    color: #64748b !important;
}

@media (max-width: 767px) {
    .strong-stocks-detail-range-52w
    .strong-stocks-detail-metric-label {
        margin-bottom: 12px !important;
        font-size: 13px !important;
    }

    .strong-stocks-detail-range-52w-values {
        gap: 13px !important;
    }

    .strong-stocks-detail-range-52w-value-line {
        font-size: 16px !important;
    }
}


/* =========================================================
   STRONG STOCKS — ĐỈNH / ĐÁY 52 TUẦN v3.1.3.27
========================================================= */

.strong-stocks-detail-range-52w {
    justify-content: center;
}

.strong-stocks-detail-range-52w-values {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
}

.strong-stocks-detail-range-52w-value-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    width: 100%;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.strong-stocks-detail-range-52w-value-line > strong,
.strong-stocks-detail-range-52w-value-line > span {
    font-size: inherit !important;
    line-height: inherit !important;
}

.strong-stocks-detail-range-52w-value-line.is-high {
    color: #dc2626 !important;
}

.strong-stocks-detail-range-52w-value-line.is-low {
    color: #15803d !important;
}

.strong-stocks-detail-range-52w.is-break-high
.strong-stocks-detail-range-52w-value-line {
    color: #15803d !important;
}

.strong-stocks-detail-range-52w.is-break-low
.strong-stocks-detail-range-52w-value-line {
    color: #dc2626 !important;
}

.strong-stocks-detail-range-52w-breakout {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

@media (max-width: 767px) {
    .strong-stocks-detail-range-52w-values {
        gap: 8px;
    }

    .strong-stocks-detail-range-52w-value-line {
        font-size: 14px;
    }
}


/* =========================================================
   52W LINE COLOR OVERRIDE + CANONICAL LIQUID SCOPE v3.1.3.28
========================================================= */

/*
 * Các rule cũ tô toàn bộ text theo trạng thái card.
 * Hai selector dưới có độ ưu tiên cao hơn để:
 * - dòng đỉnh luôn đỏ;
 * - dòng đáy luôn xanh;
 * trong khi nền/viền card vẫn xanh hoặc đỏ theo trạng thái tổng hợp.
 */
.strong-stocks-detail-range-52w:not(.is-break-high):not(.is-break-low)
.strong-stocks-detail-range-52w-value-line.is-high,
.strong-stocks-detail-range-52w:not(.is-break-high):not(.is-break-low)
.strong-stocks-detail-range-52w-value-line.is-high > strong,
.strong-stocks-detail-range-52w:not(.is-break-high):not(.is-break-low)
.strong-stocks-detail-range-52w-value-line.is-high > span {
    color: #dc2626 !important;
}

.strong-stocks-detail-range-52w:not(.is-break-high):not(.is-break-low)
.strong-stocks-detail-range-52w-value-line.is-low,
.strong-stocks-detail-range-52w:not(.is-break-high):not(.is-break-low)
.strong-stocks-detail-range-52w-value-line.is-low > strong,
.strong-stocks-detail-range-52w:not(.is-break-high):not(.is-break-low)
.strong-stocks-detail-range-52w-value-line.is-low > span {
    color: #15803d !important;
}

/* Phá đỉnh: cả hai dòng xanh. */
.strong-stocks-detail-range-52w.is-break-high
.strong-stocks-detail-range-52w-value-line,
.strong-stocks-detail-range-52w.is-break-high
.strong-stocks-detail-range-52w-value-line > strong,
.strong-stocks-detail-range-52w.is-break-high
.strong-stocks-detail-range-52w-value-line > span {
    color: #15803d !important;
}

/* Phá đáy: cả hai dòng đỏ. */
.strong-stocks-detail-range-52w.is-break-low
.strong-stocks-detail-range-52w-value-line,
.strong-stocks-detail-range-52w.is-break-low
.strong-stocks-detail-range-52w-value-line > strong,
.strong-stocks-detail-range-52w.is-break-low
.strong-stocks-detail-range-52w-value-line > span {
    color: #dc2626 !important;
}


/* =========================================================
   STOCK DETAIL MODAL — 52W TYPOGRAPHY + CLASSIFICATION LINKS
   v3.1.3.34
========================================================= */

/*
 * Đồng bộ typography card Đỉnh / Đáy 52 tuần với các card MA:
 * label 14px, value 22px desktop; 13px / 20px mobile.
 */
.strong-stocks-detail-range-52w
.strong-stocks-detail-metric-label {
    margin-bottom: 10px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.strong-stocks-detail-range-52w-values {
    gap: 7px !important;
}

.strong-stocks-detail-range-52w-value-line,
.strong-stocks-detail-range-52w-value-line > strong,
.strong-stocks-detail-range-52w-value-line > span {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.strong-stocks-detail-range-52w-breakout {
    font-size: 16px !important;
    line-height: 1.3 !important;
}

/* Link Nhóm ngành / Ngành trong header và card thông tin bổ sung. */
.strong-stocks-detail-classification-link,
.strong-stocks-detail-metric-link {
    color: inherit !important;
    text-decoration: none !important;
    text-underline-offset: 3px;
    cursor: pointer;
    transition:
        color 0.16s ease,
        text-decoration-color 0.16s ease;
}

.strong-stocks-detail-classification-link.is-sector {
    font-weight: 800;
}

.strong-stocks-detail-classification-link.is-industry {
    font-weight: 600;
}

.strong-stocks-detail-metric-link {
    display: inline-block;
    font-weight: 800;
}

.strong-stocks-detail-classification-link:hover,
.strong-stocks-detail-classification-link:focus-visible,
.strong-stocks-detail-metric-link:hover,
.strong-stocks-detail-metric-link:focus-visible {
    color: #2563eb !important;
    text-decoration: underline !important;
}

.strong-stocks-detail-classification-link:focus-visible,
.strong-stocks-detail-metric-link:focus-visible {
    border-radius: 4px;
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .strong-stocks-detail-range-52w
    .strong-stocks-detail-metric-label {
        margin-bottom: 8px !important;
        font-size: 13px !important;
    }

    .strong-stocks-detail-range-52w-value-line,
    .strong-stocks-detail-range-52w-value-line > strong,
    .strong-stocks-detail-range-52w-value-line > span {
        font-size: 20px !important;
    }

    .strong-stocks-detail-range-52w-breakout {
        font-size: 15px !important;
    }
}


/* =========================================================
   STOCK DETAIL MODAL — 52W CARD COMPACT FORMAT
   v3.1.3.35
========================================================= */

/*
 * Mỗi dòng Đỉnh / Đáy phải giống một value của card MA:
 * - giá và phần trăm nằm cùng một hàng;
 * - không bị tách thành hai dòng;
 * - kích thước vừa với card 4 cột.
 */
.strong-stocks-detail-range-52w-values {
    gap: 10px !important;
}

.strong-stocks-detail-range-52w-value-line {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.strong-stocks-detail-range-52w-value-line > strong,
.strong-stocks-detail-range-52w-value-line > span {
    display: inline !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
}

.strong-stocks-detail-range-52w-breakout {
    display: inline !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

@media (max-width: 1100px) {
    .strong-stocks-detail-range-52w-value-line {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    .strong-stocks-detail-range-52w-value-line {
        font-size: 18px !important;
    }

    .strong-stocks-detail-range-52w-breakout {
        font-size: 14px !important;
    }
}


/* =========================================================
   STOCK DETAIL MODAL — 52W FONT MATCH
   v3.1.3.36
========================================================= */

/*
 * Đồng bộ chính xác cảm giác thị giác với value card MA.
 * Bản 3.1.3.35 đã giảm 22px -> 20px nhưng vẫn lớn do:
 * - hai giá trị đều font-weight 800;
 * - chuỗi dài gồm cả giá + phần trăm;
 * - card hẹp hơn nên cảm giác đậm/lớn hơn.
 */
.strong-stocks-detail-range-52w-value-line {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    gap: 5px !important;
}

.strong-stocks-detail-range-52w-value-line > strong {
    font-size: inherit !important;
    font-weight: 800 !important;
}

.strong-stocks-detail-range-52w-value-line > span {
    font-size: inherit !important;
    font-weight: 700 !important;
}

@media (max-width: 1100px) {
    .strong-stocks-detail-range-52w-value-line {
        font-size: 17px !important;
    }
}

@media (max-width: 767px) {
    .strong-stocks-detail-range-52w-value-line {
        font-size: 17px !important;
    }
}


/* =========================================================
   MA BREADTH STATUS BANDS — 2026-08-08
   Applied only to the five individual MA Breadth cards.
========================================================= */

.tuihocta-breadth-chart-card.is-breadth-oversold
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, #dc2626, #f87171) !important;
}

.tuihocta-breadth-chart-card.is-breadth-weak
.tuihocta-breadth-card-progress > i,
.tuihocta-breadth-chart-card.is-breadth-weakening
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, #ea580c, #fb923c) !important;
}

.tuihocta-breadth-chart-card.is-breadth-improving
.tuihocta-breadth-card-progress > i,
.tuihocta-breadth-chart-card.is-breadth-starting-weakening
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, #d97706, #fbbf24) !important;
}

.tuihocta-breadth-chart-card.is-breadth-balanced
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, #64748b, #94a3b8) !important;
}

.tuihocta-breadth-chart-card.is-breadth-positive
.tuihocta-breadth-card-progress > i,
.tuihocta-breadth-chart-card.is-breadth-strong
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, #15803d, #4ade80) !important;
}

.tuihocta-breadth-chart-card.is-breadth-overbought
.tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, #2563eb, #60a5fa) !important;
}

.tuihocta-breadth-card-status.is-oversold {
    color: #dc2626 !important;
}

.tuihocta-breadth-card-status.is-weak,
.tuihocta-breadth-card-status.is-weakening {
    color: #ea580c !important;
}

.tuihocta-breadth-card-status.is-improving,
.tuihocta-breadth-card-status.is-starting-weakening {
    color: #d97706 !important;
}

.tuihocta-breadth-card-status.is-balanced {
    color: #64748b !important;
}

.tuihocta-breadth-card-status.is-positive,
.tuihocta-breadth-card-status.is-strong {
    color: #15803d !important;
}

.tuihocta-breadth-card-status.is-overbought {
    color: #2563eb !important;
}


/* =========================================================
   STOCK DETAIL MODAL — 52W FONT MINUS 1PX
   v3.1.3.37
========================================================= */

.strong-stocks-detail-range-52w-value-line {
    font-size: 17px !important;
}

.tuihocta-breadth-card-status {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
}

.tuihocta-breadth-card-status > span {
    min-width: 0 !important;
    text-align: center !important;
}

.tuihocta-breadth-card-status {
    color: var(--breadth-status-color, currentColor) !important;
}

.tuihocta-breadth-card-status > i {
    background: var(--breadth-status-color, currentColor) !important;
}

.tuihocta-breadth-card-status > span {
    color: inherit !important;
}

:root {
    --tuihocta-breadth-oversold: #dc2626;
    --tuihocta-breadth-oversold-light: #f87171;
    --tuihocta-breadth-weak: #ea580c;
    --tuihocta-breadth-weak-light: #fb923c;
    --tuihocta-breadth-bearish: #d97706;
    --tuihocta-breadth-bearish-light: #fbbf24;
    --tuihocta-breadth-neutral: #64748b;
    --tuihocta-breadth-neutral-light: #cbd5e1;
    --tuihocta-breadth-bullish: #16a34a;
    --tuihocta-breadth-bullish-light: #4ade80;
    --tuihocta-breadth-strong: #15803d;
    --tuihocta-breadth-strong-light: #4ade80;
    --tuihocta-breadth-overbought: #2563eb;
    --tuihocta-breadth-overbought-light: #60a5fa;
    --tuihocta-breadth-momentum-up: #15803d;
    --tuihocta-breadth-momentum-pullback: #d97706;
    --tuihocta-breadth-momentum-rebound: #16a34a;
    --tuihocta-breadth-momentum-down: #dc2626;
}

.tuihocta-breadth-chart-card.is-breadth-oversold .tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, var(--tuihocta-breadth-oversold), var(--tuihocta-breadth-oversold-light)) !important;
}

.tuihocta-breadth-chart-card.is-breadth-weak .tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, var(--tuihocta-breadth-weak), var(--tuihocta-breadth-weak-light)) !important;
}

.tuihocta-breadth-chart-card.is-breadth-bearish .tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, var(--tuihocta-breadth-bearish), var(--tuihocta-breadth-bearish-light)) !important;
}

.tuihocta-breadth-chart-card.is-breadth-neutral .tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, var(--tuihocta-breadth-neutral), var(--tuihocta-breadth-neutral-light)) !important;
}

.tuihocta-breadth-chart-card.is-breadth-bullish .tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, var(--tuihocta-breadth-bullish), var(--tuihocta-breadth-bullish-light)) !important;
}

.tuihocta-breadth-chart-card.is-breadth-strong .tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, var(--tuihocta-breadth-strong), var(--tuihocta-breadth-strong-light)) !important;
}

.tuihocta-breadth-chart-card.is-breadth-overbought .tuihocta-breadth-card-progress > i {
    background: linear-gradient(90deg, var(--tuihocta-breadth-overbought), var(--tuihocta-breadth-overbought-light)) !important;
}

.tuihocta-breadth-card-status[class*="is-"] {
    color: var(--breadth-status-color, currentColor) !important;
}

.tuihocta-breadth-card-status[class*="is-"] > i {
    background: var(--breadth-status-color, currentColor) !important;
}

.tuihocta-breadth-card-status[class*="is-"] > span {
    color: inherit !important;
}

@media (max-width: 1100px) {
    .strong-stocks-detail-range-52w-value-line {
        font-size: 16px !important;
    }
}

@media (max-width: 767px) {
    .strong-stocks-detail-range-52w-value-line {
        font-size: 16px !important;
    }
}


/* =========================================================
   STOCK DETAIL MODAL — 52W FONT 17PX ALL DEVICES
   v3.1.3.38
========================================================= */

.strong-stocks-detail-range-52w-value-line {
    font-size: 17px !important;
}

@media (max-width: 1100px) {
    .strong-stocks-detail-range-52w-value-line {
        font-size: 17px !important;
    }
}

@media (max-width: 767px) {
    .strong-stocks-detail-range-52w-value-line {
        font-size: 17px !important;
    }
}

/* =========================================================
   MARKET DASHBOARD RESTRUCTURE — 2026-09-15
   UI-only: Health 2.1 trend + 3 ranking cards
========================================================= */
.tuihocta-dashboard-health21-card {
    min-width: 0;
    padding: 22px 20px;
    border: 1px solid var(--dashboard-border, #dbe3ee);
    border-radius: 18px;
    background: #fff;
}
.tuihocta-dashboard-health21-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.tuihocta-dashboard-health21-card > header p {
    margin: 0 0 5px;
    color: #2c66ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}
.tuihocta-dashboard-health21-card > header h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
}
.tuihocta-dashboard-health21-meta {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 16px;
}
.tuihocta-dashboard-health21-meta > strong {
    color: #2563eb;
    font-size: 30px;
    line-height: 1;
}
.tuihocta-dashboard-health21-meta > span,
.tuihocta-dashboard-health21-meta > small {
    color: #64748b;
}
.tuihocta-dashboard-health21-meta > small {
    margin-left: auto;
    font-size: 11px;
}
.tuihocta-dashboard-health21-chart {
    width: 100%;
    min-height: 190px;
    margin-top: 10px;
}
.tuihocta-dashboard-health21-chart svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 215px;
}
.tuihocta-dashboard-ranking-layout.is-three-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 1024px) {
    .tuihocta-dashboard-ranking-layout.is-three-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .tuihocta-dashboard-ranking-layout.is-three-cards > .tuihocta-dashboard-ranking-panel:last-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 767px) {
    .tuihocta-dashboard-ranking-layout.is-three-cards {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .tuihocta-dashboard-ranking-layout.is-three-cards > .tuihocta-dashboard-ranking-panel:last-child {
        grid-column: auto;
    }
    .tuihocta-dashboard-health21-meta {
        flex-wrap: wrap;
    }
    .tuihocta-dashboard-health21-meta > small {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
   MARKET DASHBOARD RESPONSIVE DENSITY — 2026-09-17
   Mục tiêu:
   - 100% zoom là trạng thái chuẩn, không cần người dùng zoom 67%
   - co giãn theo chiều rộng thực của dashboard/container
   - chart bớt dồn nhãn khi card hẹp
   - không thay đổi logic dữ liệu/chỉ báo
========================================================= */

.tuihocta-market-dashboard {
    container-type: inline-size;
    container-name: tuihocta-dashboard;
    gap: clamp(22px, 1.7vw, 30px) !important;
}

@media (min-width: 768px) {
    .tuihocta-dashboard-hero {
        gap: clamp(20px, 1.8vw, 28px) !important;
        padding: clamp(24px, 1.8vw, 30px) !important;
    }

    .tuihocta-dashboard-hero h1 {
        font-size: clamp(40px, 3.1vw, 48px) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.035em !important;
    }

    .tuihocta-dashboard-subtitle {
        margin-top: 13px !important;
        margin-bottom: 10px !important;
        font-size: 15px !important;
        line-height: 1.58 !important;
    }

    .tuihocta-dashboard-score-gauge {
        width: 190px !important;
        height: 190px !important;
    }

    .tuihocta-dashboard-score-gauge::before {
        inset: 15px !important;
    }

    .tuihocta-dashboard-score-gauge strong {
        font-size: 38px !important;
    }

    .tuihocta-dashboard-score-gauge b {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .tuihocta-dashboard-score-gauge span,
    .tuihocta-dashboard-score-gauge small {
        font-size: 13px !important;
    }

    [data-dashboard-breadth].tuihocta-breadth-chart-grid {
        gap: 18px !important;
    }

    .tuihocta-breadth-chart-card,
    .tuihocta-breadth-chart-card.is-weekly {
        min-width: 0 !important;
        padding: 18px !important;
    }

    .tuihocta-breadth-chart-header {
        padding: 0 34px !important;
    }

    .tuihocta-breadth-chart-header > div > span {
        font-size: 10px !important;
        letter-spacing: .075em !important;
    }

    .tuihocta-breadth-chart-header h3 {
        margin-top: 6px !important;
        font-size: 20px !important;
        line-height: 1.18 !important;
    }

    .tuihocta-breadth-chart-metric {
        margin-top: 12px !important;
    }

    .tuihocta-breadth-chart-metric > strong {
        font-size: 32px !important;
        line-height: 1 !important;
    }

    .tuihocta-breadth-card-progress {
        width: min(200px, calc(100% - 44px)) !important;
        height: 6px !important;
        margin: 11px auto 7px !important;
    }

    .tuihocta-breadth-chart-metric > span {
        font-size: 12px !important;
    }

    .tuihocta-breadth-card-status {
        gap: 6px !important;
        margin-top: 6px !important;
        font-size: 14px !important;
    }

    .tuihocta-breadth-card-status > i {
        width: 8px !important;
        height: 8px !important;
        flex-basis: 8px !important;
    }

    .tuihocta-breadth-change-detail {
        margin-top: 6px !important;
        font-size: 12px !important;
    }

    .tuihocta-echart,
    .tuihocta-internal-echart {
        margin-top: 10px !important;
    }

    .tuihocta-chart-range-buttons button {
        min-height: 34px !important;
        padding-inline: 6px !important;
        font-size: 11px !important;
    }

    .tuihocta-chart-fullscreen-button {
        width: 36px !important;
        height: 34px !important;
        min-width: 36px !important;
        min-height: 34px !important;
    }

    .tuihocta-dashboard-regime-panel {
        gap: 14px !important;
    }

    .tuihocta-dashboard-regime-summary,
    .tuihocta-dashboard-regime-metric-card,
    .tuihocta-dashboard-health21-card {
        padding: 18px !important;
    }

    .tuihocta-dashboard-regime-summary h2 {
        font-size: 24px !important;
    }

    .tuihocta-dashboard-regime-score-row strong {
        font-size: 32px !important;
    }

    .tuihocta-dashboard-regime-score-row small {
        font-size: 15px !important;
    }

    .tuihocta-dashboard-regime-metric-card h3,
    .tuihocta-dashboard-condition-item span {
        font-size: 13px !important;
    }

    .tuihocta-dashboard-regime-metric-card p,
    .tuihocta-dashboard-regime-metric-card small {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .tuihocta-dashboard-health21-card > header h3 {
        font-size: 15px !important;
    }

    .tuihocta-dashboard-health21-meta {
        margin-top: 13px !important;
    }

    .tuihocta-dashboard-health21-meta > strong {
        font-size: 27px !important;
    }

    .tuihocta-dashboard-health21-chart {
        min-height: 170px !important;
        margin-top: 8px !important;
    }

    .tuihocta-dashboard-health21-chart svg {
        max-height: 190px !important;
    }
}

/* Khi dashboard thực sự hẹp (bao gồm browser zoom cao), giảm mật độ
   trước khi phải rơi xuống layout tablet/mobile. */
@container tuihocta-dashboard (max-width: 1450px) {
    .tuihocta-dashboard-hero h1 {
        font-size: 40px !important;
    }

    .tuihocta-dashboard-subtitle {
        font-size: 14px !important;
    }

    .tuihocta-dashboard-score-gauge {
        width: 174px !important;
        height: 174px !important;
    }

    .tuihocta-dashboard-score-gauge strong {
        font-size: 34px !important;
    }

    .tuihocta-breadth-chart-header h3 {
        font-size: 18px !important;
    }

    .tuihocta-breadth-chart-metric > strong {
        font-size: 30px !important;
    }

    .tuihocta-breadth-card-status {
        font-size: 13px !important;
    }

    .tuihocta-dashboard-regime-score-row strong {
        font-size: 30px !important;
    }
}

/* Ở viewport CSS rất rộng (thường là màn hình rộng hoặc zoom out),
   tăng nhẹ kích thước CSS để sau browser scaling vẫn giữ cân đối. */
@container tuihocta-dashboard (min-width: 2100px) {
    .tuihocta-dashboard-hero h1 {
        font-size: 54px !important;
    }

    .tuihocta-dashboard-subtitle {
        font-size: 17px !important;
    }

    .tuihocta-dashboard-score-gauge {
        width: 220px !important;
        height: 220px !important;
    }

    .tuihocta-dashboard-score-gauge::before {
        inset: 18px !important;
    }

    .tuihocta-dashboard-score-gauge strong {
        font-size: 44px !important;
    }

    .tuihocta-breadth-chart-header h3 {
        font-size: 23px !important;
    }

    .tuihocta-breadth-chart-metric > strong {
        font-size: 36px !important;
    }

    .tuihocta-breadth-card-status {
        font-size: 15px !important;
    }

    .tuihocta-dashboard-regime-score-row strong {
        font-size: 36px !important;
    }
}

/* =========================================================
   MARKET DASHBOARD HERO V2 — ZOOM-STABLE LAYOUT — 2026-09-17
   Mục tiêu:
   - vòng Market Score luôn là hình tròn thật, không bị bóp/overflow chữ
   - 100%: 3 vùng cân đối (Intro / Commentary / Score)
   - zoom cao / container hẹp: chuyển 2 hàng có chủ đích, không để grid tự ép
   - không thay đổi logic/data, chỉ layout
========================================================= */

/* Giữ gauge luôn là hình vuông tuyệt đối và khóa text vào lõi vòng tròn. */
.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-hero-score {
    min-width: 0 !important;
}

.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge {
    width: clamp(190px, 14cqw, 214px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    margin: auto !important;
}

.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge::before {
    inset: clamp(15px, 1.15cqw, 18px) !important;
}

.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge > div {
    width: calc(100% - 48px) !important;
    max-width: 156px !important;
    min-width: 0 !important;
    margin: auto !important;
    place-items: center !important;
}

.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge span,
.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge small,
.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge b,
.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge strong {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: center !important;
}

.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge span {
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge strong {
    font-size: clamp(35px, 3.05cqw, 42px) !important;
    line-height: 1.02 !important;
    white-space: nowrap !important;
}

.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge b {
    display: block !important;
    margin-top: 5px !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
}

.tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge small {
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Desktop rộng: giữ bố cục 3 cột nhưng cấp đủ không gian cho Score. */
@container tuihocta-dashboard (min-width: 1380px) {
    .tuihocta-dashboard-hero.has-daily-commentary {
        grid-template-columns: minmax(300px, .96fr) minmax(470px, 1.35fr) minmax(238px, .52fr) !important;
        grid-template-rows: auto !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary > .tuihocta-dashboard-hero-intro,
    .tuihocta-dashboard-hero.has-daily-commentary > .tuihocta-dashboard-hero-score {
        padding: clamp(28px, 2.15cqw, 34px) !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-daily-commentary {
        grid-column: auto !important;
        grid-row: auto !important;
        padding: clamp(27px, 2cqw, 32px) !important;
        border-top: 0 !important;
        border-right: 1px solid rgba(44, 102, 255, .13) !important;
        border-left: 1px solid rgba(44, 102, 255, .13) !important;
    }
}

/* Desktop trung bình / zoom 110–150%: masthead 2 cột + commentary toàn hàng.
   Cách này tránh ép commentary và score vào cùng một hàng quá hẹp. */
@container tuihocta-dashboard (min-width: 760px) and (max-width: 1379px) {
    .tuihocta-dashboard-hero.has-daily-commentary {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 250px) !important;
        grid-template-rows: auto auto !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary > .tuihocta-dashboard-hero-intro {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-content: center !important;
        padding: clamp(24px, 2.4cqw, 32px) !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary > .tuihocta-dashboard-hero-score {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        padding: clamp(22px, 2.2cqw, 30px) !important;
        border-left: 1px solid rgba(44, 102, 255, .13) !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-daily-commentary {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        padding: clamp(22px, 2.4cqw, 30px) !important;
        border-top: 1px solid rgba(44, 102, 255, .13) !important;
        border-right: 0 !important;
        border-left: 0 !important;
        background: rgba(255, 255, 255, .46) !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge {
        width: clamp(180px, 19cqw, 205px) !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-hero h1,
    .tuihocta-dashboard-hero.has-daily-commentary h1 {
        font-size: clamp(34px, 4.2cqw, 42px) !important;
    }

    .tuihocta-dashboard-daily-commentary h2 {
        font-size: clamp(20px, 2.7cqw, 26px) !important;
    }
}

/* Tablet/mobile: xếp dọc rõ ràng, Score ở giữa và không bao giờ co méo. */
@container tuihocta-dashboard (max-width: 759px) {
    .tuihocta-dashboard-hero.has-daily-commentary {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        padding: 0 !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary > .tuihocta-dashboard-hero-intro {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding: 22px !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary > .tuihocta-dashboard-hero-score {
        grid-column: 1 !important;
        grid-row: 2 !important;
        padding: 18px 22px 24px !important;
        border-top: 1px solid rgba(44, 102, 255, .13) !important;
        border-left: 0 !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-daily-commentary {
        grid-column: 1 !important;
        grid-row: 3 !important;
        padding: 22px !important;
        border-top: 1px solid rgba(44, 102, 255, .13) !important;
        border-right: 0 !important;
        border-left: 0 !important;
    }

    .tuihocta-dashboard-hero.has-daily-commentary .tuihocta-dashboard-score-gauge {
        width: min(200px, 62vw) !important;
    }
}