/* Minification failed. Returning unminified contents.
(36,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(37,33): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(64,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-group-heatmap'
(65,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(68,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(96,39): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(113,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(114,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(135,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(139,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(140,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(143,36): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-y'
(144,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(145,36): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(172,39): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(189,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-group-heatmap'
(197,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(198,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-group-heatmap'
(207,39): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(243,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(254,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(255,32): run-time error CSS1039: Token not allowed after unary operator: '-bs-form-select-bg-img'
(255,62): run-time error CSS1039: Token not allowed after unary operator: '-bs-form-select-bg-icon'
(259,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(307,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(308,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(337,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(340,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(344,36): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(352,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(357,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(362,39): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(363,21): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(367,21): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(369,39): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(388,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(404,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(409,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(415,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(416,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(420,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(427,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(428,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(436,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(494,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(518,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(544,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-menu'
(545,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(595,32): run-time error CSS1039: Token not allowed after unary operator: '-bd-color'
(599,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-chart-plus--detail'
(608,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(609,36): run-time error CSS1039: Token not allowed after unary operator: '-bg-menu'
(642,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(645,36): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(681,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(687,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(689,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(699,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(705,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(707,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(744,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(763,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(768,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(769,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-tertiary'
(773,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(774,21): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(792,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(793,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(794,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(798,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(799,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-tertiary'
(800,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(808,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(818,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(826,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(835,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(837,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(844,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(845,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(848,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(851,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(852,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-tertiary'
(853,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(917,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(918,21): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(921,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(924,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(925,21): run-time error CSS1039: Token not allowed after unary operator: '-color-text-tertiary'
(926,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(936,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(951,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(974,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary'
(978,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-vst-active'
(979,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-active'
 */
/*.page-container {
    display: flex;
}*/

.container.expand {
    width: 98%;
}
.page-container .fullcontent {
    width: calc(100% - 50px);
    flex: 1;
    overflow: hidden;
}
.page-container .menu-rightbar {
    width: 50px;
    transition: width 0.35s ease;
}
.page-container .menu-rightbar.expand {
    width: 510px;
}
.icon-star path {
    fill: #666666;
    transition: fill 0.2s ease;
}
.icon-menu-wishlist.active .icon-star path {
    fill: #0280EA;
}
.icon-menu-wishlist:hover .icon-star path {
    fill: #0280EA;
}

/*rightbar*/
.right__bar-group {
    position: fixed;
    right: 0px;
    padding: 10px;
    background-color: var(--bg-primary);
    border-left: solid 1px var(--border-color-primary);
    top: 0px;
    width: 50px;
    z-index: 999;
    padding-top: 0px;
    height: 100%;
    /*display: none;*/
}

    .right__bar-group li.right__bar-li {
        padding: 20px 0px;
    }

        .right__bar-group li.right__bar-li img {
            width: 25px;
            height: 25px;
        }

            .right__bar-group li.right__bar-li img:hover {
                filter: brightness(2);
            }

        .right__bar-group li.right__bar-li a {
            cursor: pointer;
        }

.dropdown-menu--tutorial-item:hover {
    background-color: var(--bg-group-heatmap) !important;
    color: var(--color-text-muted) !important;
}
.dropdown-menu--tutorial {
    border: 1px solid var(--border-color-primary);
}
/* Panel bên phải */
#watchlistPanel {
    width: 457px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -460px;
    /*background: var(--bg-primary);*/
    background-color: #fff;
    border-left: 1px solid #ddd;
    transition: all 0.35s ease;
    z-index: 99;
    /*overflow-y: auto;*/
    /*border: 1px solid var(--border-color-primary);*/
    border: 1px solid #ddd;
    /*color: var(--color-text-primary);*/
    color: #282828;
    display: flex;
    flex-direction: column;
}
#watchlistPanel.open {
    right: 50px;
}

/*new*/
    #watchlistPanel .border-bottom {
        border-bottom: 1px solid var(--border-color-primary);
    }
    #watchlistPanel .align-items-center {
        align-items: center !important;
    }
    #watchlistPanel .d-flex {
        display: flex !important;
    }
    #watchlistPanel .px-3 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
    #watchlistPanel .py-2 {
        padding-top: .75rem !important;
        padding-bottom: .75rem !important;
    }
    #watchlistPanel .bg-white {
        --bs-bg-opacity: 1;
        background-color: var(--bg-primary) !important;
    }
    #watchlistPanel .gap-2 {
        gap: .5rem !important;
    }
    #watchlistPanel .ms-3 {
        margin-left: 1rem !important;
    }
    #watchlistPanel .ms-auto {
        margin-left: auto !important;
    }
    #watchlistPanel .mb-2 {
        margin-bottom: .5rem !important;
    }
    #watchlistPanel .fw-bold {
        font-weight: 700 !important;
    }
    #watchlistPanel .small, #watchlistPanel small {
        font-size: .875em;
    }
    #watchlistPanel .text-muted {
        --bs-text-opacity: 1;
        color: #666 !important;
    }
    #watchlistPanel .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(-1 * var(--bs-gutter-y));
        margin-right: calc(0 * var(--bs-gutter-x));
        margin-left: calc(0 * var(--bs-gutter-x));
    }
    #watchlistPanel .col-1 {
        flex: 0 0 auto;
        width: 8.333333333%;
    }
    #watchlistPanel .col-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    #watchlistPanel .col-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    #watchlistPanel .col-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    #watchlistPanel .col-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    #watchlistPanel .col-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    #watchlistPanel .itemStock {
        border-bottom: 1px solid var(--border-color-primary);
        width: 100%;
        padding-right:10px !important;
    }
        #watchlistPanel .itemStock:hover {
            background-color: #ffdead;
        }
    #watchlistPanel .itemStock:after {
        border-bottom: none;
    }
    #watchlistPanel .stock-logo {
        padding: 3px;
        width: 28px;
        height: 28px;
        line-height: 16px;
        text-align: center;
        border-radius: 50%;
        background-color: var(--bg-group-heatmap);
        overflow: hidden;
    }
    #watchlistPanel .stock-logo span {
        font-size:10px;
        font-weight:bold;
    }
    #watchlistPanel .bg-light {
        --bs-bg-opacity: 1;
        background-color: var(--bg-group-heatmap) !important
    }
    #watchlistPanel .text-right {
        text-align: right;
    }
    #watchlistPanel .text-center {
        text-align: center;
    }
    #watchlistPanel .news-item {
        border-bottom: 1px solid var(--border-color-primary);
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    #watchlistPanel .icon-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        cursor: pointer;
    }
        #watchlistPanel .icon-btn.active {
            fill: #0280EA;
        }
        #watchlistPanel .icon-btn svg path {
            fill: #999999;
        }
        #watchlistPanel .icon-btn.active svg path {
            fill: #0280EA;
        }
        #watchlistPanel .icon-btn:hover svg path {
            fill: #0280EA;
        }
        #watchlistPanel .icon-btn:hover svg {
            fill: #0280EA;
        }
    #watchlistPanel .form-select-sm {
        padding-top: .25rem;
        padding-bottom: .25rem;
        padding-left: .5rem;
        font-size: .875rem;
        border-radius: .25rem;
    }
    #watchlistPanel .form-select {
        --bs-form-select-bg-img: url('/content/images/icons/rightbar/down.svg');
        display: block;
        width: 100%;
        padding: .375rem 2.25rem .375rem .75rem;
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1.5;
        color: #666;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--bg-secondary);
        background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
        background-repeat: no-repeat;
        background-position: right .75rem center;
        background-size: 16px 12px;
        border: 1px solid var(--border-color-primary);
        border-radius: .375rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    #watchlistPanel .collapse-header {
        font-size: 14px;
        cursor:pointer;
    }
        #watchlistPanel .collapse-header:not(.collapsed) i.fa-angle-right {
            transform: rotate(90deg);
        }
        #watchlistPanel .collapse-header i.fa-trash-o {
            float: right;
            margin-right: -5px;
            opacity: 0;
        }
        #watchlistPanel .collapse-header:hover i.fa-trash-o {
            opacity: 1;
        }
    #watchlistPanel .itemStock i.fa-trash-o {
        opacity: 0;
        cursor: pointer;
        padding-left: 10px;
        color:#ccc;
    }
    #watchlistPanel .itemStock i.fa-trash-o:hover {
        color: #999;
    }
    #watchlistPanel .itemStock:hover i.fa-trash-o {
        opacity: 1;
    }

#popup-add-stock .add-stock-input-container {
    margin-bottom: 15px;
}
.add-stock-input-container {
    display: flex;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    z-index: 3;
    height: 45px;
    /*background: var(--bg-secondary);
    border: solid 1px var(--border-color-primary);
    box-shadow: 0 2px 5px 1px rgba(64, 60, 67, 0.16);
    border-radius: 24px;
    margin-bottom: 15px;*/
    margin-top: 0px;
    border-top: solid 1px var(--border-color-primary);
    border-bottom: solid 1px var(--border-color-primary);
}
.add-stock-input {
    width: 100%;
    outline: none;
    border: none;
    background-color: transparent;
    font-size: 14px;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}

#add-stock-search-icon {
    margin-top: 11px;
    margin-left: 15px;
    font-size: 16px;
}
#add-stock-search-clear {
    cursor: pointer;
    margin-top: 8px;
    margin-right: 10px;
    color: #6a6666;
}
.tab-add-stock-button {
    margin-bottom: 15px;
}
    .tab-add-stock-button button {
        border-radius: 50px;
        border: 1px solid var(--border-color-primary);
        padding: 5px 10px;
        font-size: 12px;
        background-color: var(--bg-primary);
        /*color: #666;*/
    }
        .tab-button--selected, .tab-add-stock-button button:hover {
            background-color: var(--bg-tertiary) !important;
            color: #282828;
        }    

.modal-watchlistaddstock {
    z-index: 1050;
}
    .modal-watchlistaddstock .modal-body {
        background-color: var(--bg-primary);
        padding-top: 0px;
        border-radius: 0px 0px 10px 10px;
    }
    .modal-watchlistaddstock .modal-header {
        background-color: var(--bg-primary);
        border-bottom: none;
        border-radius: 10px 10px 0px 0px;
    }
    .modal-watchlistaddstock table > tbody > tr > td {
        border-bottom: 1px solid var(--border-color-primary);
        color: var(--color-text-muted);
    }
    .modal-watchlistaddstock table > thead > tr > th {
        /*background-color: var(--bg-group-heatmap);*/
        color: var(--color-text-primary);
        font-weight: 400;
        border-bottom: 1px solid var(--border-color-primary);
    }
    .modal-watchlistaddstock, .modal-addwatchlist {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: inherit;
        bottom: inherit;
    }
    .modal-watchlistaddstock .modal-dialog {
        width: auto;
    }
    .modal-watchlistaddstock .modal-content {
        width: 700px;
        z-index: 1051;
        border-radius:10px;
    }

#watchListNews .news-item-title {
    color: var(--color-text-muted);
    text-decoration: none;
}
#watchListNews a {
    text-decoration: none;
}


#watchlistPanel .panel {
    overflow: auto;
    margin-bottom: 5px;
    box-shadow:none;
}

#watchList {
    height: 60%;
    background-color: var(--bg-primary);
}

#newsPanel {
    height: 40%;
    background-color: var(--bg-primary);
    padding-top: 10px;
}
#divider {
    height: 4px;
    cursor: row-resize;
    background-color: var(--border-color-primary);
    border: 1px solid var(--border-color-primary);
    touch-action: none;
}
#divider:hover {
    background-color: var(--bg-tertiary);
    transform: scaleY(2);
}
#dividervertical {
    width: 3px;
    height: 100%;
    cursor: col-resize;
    background-color: var(--border-color-primary);
    border: 1px solid var(--border-color-primary);
    position: fixed;
    right: 0px;
    z-index: 99;
    transition: all 0.35s ease;
    touch-action: none;
}
#dividervertical:hover {
    background-color: var(--bg-tertiary);
    transform: scaleX(2);
}

/* Tooltip watchList */
.watchlist__tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.watchlist__tooltip_first::before {
    left: 110% !important;
}
    .watchlist__tooltip::before {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        background-color: #335295;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        padding: 6px 4px;
        border-radius: 4px;
        white-space: nowrap;
        transform: translateX(-50%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        pointer-events: none;
        z-index: 999;
    }

    .watchlist__tooltip::after {
        content: "";
        position: absolute;
        top: 88%;
        left: 50%;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #1f4fa3 transparent;
        transform: translateX(-50%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
    }

    .watchlist__tooltip:hover::before,
    .watchlist__tooltip:hover::after {
        opacity: 1;
        visibility: visible;
    }

/*select WatchList*/
.watchlist-trigger {
    cursor: pointer;
    user-select: none;
    padding: 4px;
    border: solid 1px var(--border-color-primary);
    border-radius:5px;
}
.watchlist-trigger i{
    opacity:0.5;
}

.watchlist-overlay {
    position: fixed;
    background: #ccc;
    display: none;
    z-index: 1;
    width: 460px;
    right: 49px;
    top: 0;
    height: 100%;
    opacity: 0.5;
}
.watchlist-panel {
    position: fixed;
    top: 60px;
    right: 80px;
    width: 400px;
    height: 80%;
    background: var(--bg-primary);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    transform: translateY(-10px);
    transition: all .2s ease;
    z-index: 999;
    display: none;
}
.panel-header {
    padding: 10px;
    position: relative;
}
.panel-body {
    padding: 10px;
    padding-top: 15px;
}
.close-panel {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    color:red;
}

.panel-footer {
    padding: 5px 10px;
    background-color: var(--bg-menu);
    border: 1px solid var(--border-color-primary);
    float: right;
    margin-right: 15px;
    cursor: pointer;
    border-radius:5px;
}

/*new*/
@media (max-width: 767px) {
    #dividervertical {
        display:none;
    }
    .modal-watchlistaddstock .modal-content {
        width: 100%;
    }
    .modal-watchlistaddstock, .modal-addwatchlist {
        top: 10%;
        left: 0;
        transform: inherit;
    }
    .watchlist-overlay {
        right: 0px;
        width: 100%;
    }
    .watchlist-panel {
        right:0px;
        width:100%;
    }
    .right__bar-group {
        bottom: 100px;
    }
    .page-container .fullcontent {
        width:100%;
    }
    #DescriptionPortfolioEdit input {
        width:100% !important;
    }
    .page-container .menu-rightbar {
        width:0px;
    }
}
@media (max-width: 767px) {/*1199*/
    #watchlistPanel.open {
        right: 0px;
        width: 100%;
    }

    .right__bar-group {
        bottom: 20px;
        position: fixed;
        border: solid 1px var(--bd-color);
        width: 35px;
        padding: 10px 0px;
        right: 20px;
        background: var(--bg-chart-plus--detail);
        height: 35px;
        border-radius: 25px;
        z-index: 999;
        top: auto !important;
    }

        .right__bar-group.active {
            height: 230px;
            border: 1px solid var(--border-color-primary);
            background-color: var(--bg-menu);
        }

    .right__bar-group li.fn-control {
        display: none;
    }

    .right__bar-group.active li.fn-control {
        display: block;
    }

    .right__bar-group li.right__bar-li {
        padding: 10px 5px;
        float: left;
    }

        .right__bar-group li.right__bar-li img {
            width: 25px;
        }

    .right__bar-group .right__bar-hidebar-li {
        color: #666666;
        /*margin: 0 5px;*/
    }

    .right__bar-group li.social-hide-bar {
        display: block;
    }

        .right__bar-group li.social-hide-bar {
            position: absolute;
            top: 0px;
            width: 40px;
            border: 1px solid var(--border-color-primary);
            height: 40px;
            border-radius: 20px;
            background-color: var(--bg-primary);
            padding:10px;
            opacity:0.5;
        }
        .right__bar-group li.social-hide-bar:hover {
            opacity:1;
        }

        .right__bar-group.active li.social-hide-bar {
            position: unset;
            top: unset;
            border: none;
            background-color: revert;
        }

    .right__bar-group li.bdt-only-mb {
        /*border-top: solid 1px #666666;*/
        width: 100%;
    }

        .right__bar-group span.close-bar-span:before {
            /*content: "∧";*/
            content: url('/content/images/menubar.svg');
        }

    .right__bar-group.active span.close-bar-span:before {
        content: "X";
        font-size: 18px;
    }
}



/*AddWatchListModal*/
.watchlist-container {
    padding: 15px;
    background-color: var(--bg-primary);
}

#popup-add-stock .row {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid var(--border-color-primary);
    align-items: center;
    color: var(--color-text-muted);
}

#popup-add-stock .modal-header .close {
    color: red;
    opacity:1;
}

#popup-add-stock .modal-content {
    /*border-bottom: 1px solid var(--border-color-primary);*/
    background-color: var(--bg-primary);
}

#watchListContent .item {
    display: flex;
    padding: 5px 5px;
    border-bottom: 1px solid var(--border-color-primary);
    align-items: center;
    color: var(--color-text-muted);
    cursor:pointer;
    position:relative;
}
    #watchListContent .item:hover {
        background-color: #ffdead;
    }
    #watchListContent .item:hover .col-actions {
        opacity: 1;
    }
.item .col-name {
    flex: 1;
    display: flex;
    gap: 5px;
}
.item.editing .col-name {
    display: none;
}
.item .col-name-edit {
    flex: 1;
    display: none;
    gap: 5px;
}
.item.editing .col-name-edit {
    display: flex;
}

.item .col-actions {
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: all 0.2s ease;
}
.item.editing .col-actions {
    display: none;
}
.col-actions .icon-btn {
    border: solid 1px var(--border-color-primary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    background-color: #fff;
}

.action-btn {
    cursor: pointer;
    padding-right: 5px;
}

.add-row {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--bg-surface);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    border: solid 1px var(--border-color-primary);
    color: var(--color-text-tertiary);
}

    .add-row:hover {
        background-color: var(--bg-tertiary);
        color: var(--color-text-primary);
    }

.add-box {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

    .add-box input {
        padding: 6px;
        width: 100%;
    }

#watchlistPanel .btn {
    cursor: pointer;
    padding: 6px 10px;
    background-color: var(--bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
}
#watchlistPanel .btn-cancel {
    background-color: var(--bg-surface) !important;
    color: var(--color-text-tertiary);
    border: 1px solid var(--border-color-primary);
}

    .btn:hover {
        opacity: 0.8;
    }

.wl-input {
    background-color: var(--bg-secondary);
    border-radius:5px !important;
}
/*AddWatchListModal*/

/*Các hàm trong danh mục đầu tư*/
#watchlist-panelPortfolio {
    position: absolute;
    width: 400px;
    height: 60%;
    background: var(--bg-primary);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    transform: translateY(-10px);
    transition: all .2s ease;
    z-index: 999;
    display: none;
    margin-top: 10px;
    border: 1px solid var(--border-color-primary);
}
#watchListContentPortfolio {
    /*height: 325px;
    overflow-y:auto;*/
}
#watchListContentPortfolio .item {
    display: flex;
    padding: 5px 0px;
    border-bottom: 1px solid var(--border-color-primary);
    align-items: center;
    color: var(--color-text-muted);
    cursor: pointer;
    position:relative;
}
#watchlist-panelPortfolio .btn {
    cursor: pointer;
    padding: 6px 10px;
    background-color: var(--bg-tertiary);
    color: var(--color-text-primary);
    border: none;
    border-radius: 4px;
    border: 1px solid var(--border-color-primary);
}
#watchlist-panelPortfolio .btn-cancel {
    background-color: var(--bg-surface);
    color: var(--color-text-tertiary);
    border: 1px solid var(--border-color-primary);
}
#watchListContentPortfolio .item:hover .col-actions {
    opacity: 1;
}
.add-stock-inputPortfolio {
    width: 100%;
    outline: none;
    border: none;
    background-color: transparent;
    font-size: 14px;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}
.wl-btn-more {
    background: none;
    border: none;
    cursor: pointer;
    position:relative;
}
.wl-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    background: white;
    min-width: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 5px 0;
    z-index: 1000;
}
.wl-menu-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size:14px;
}
.wl-menu-item:hover {
    background: #f2f2f2;
}

#watchlistTriggerPortfolio {
    border:none;
    font-size:20px;
    font-weight:bold;
}
#DescriptionPortfolioEdit {
    display:flex;
}
    #DescriptionPortfolioEdit input {
        width: 40%;
        border: none;
        box-shadow: none;
        background-color: #fff;
        border-radius: 5px;
        /*border: 1px solid rgb(0 0 0 / 15%);*/
    }
#DescriptionPortfolioEdit img{
    margin-left:10px;
    cursor:pointer;
}
    #DescriptionPortfolioEdit .btn {
        display: none;
        background-color: var(--bg-tertiary);
        color: var(--color-text-primary);
        margin-left: 10px;
        border-radius: 5px;
        border: 1px solid var(--border-color-primary);
    }
    #DescriptionPortfolioEdit .btn-cancel {
        background-color: var(--bg-surface);
        color: var(--color-text-tertiary);
        border: 1px solid var(--border-color-primary);
    }
.btn_watchlistpin {
    display:none !important;
}
.modal-open {
    padding-right: 0px !important;
}

#watchList .stock-code, #watchListNews .stock-code {
    color: var(--color-text-primary);
    text-decoration: none;
}
#list-stock-add-stock i {
    padding: 7px 9px;
}
#list-stock-add-stock i:hover {
    background-color:#fff;
    border-radius:5px;
}

.page-menu .menu-all .option-theme-mode {
     display: flex; 
}
#ul-top-menu .title-link {
    color: var(--color-text-secondary);
}

.top-header {
    /*border-bottom: 1px solid var(--border-color-header) !important;*/
}
.news-lasted > ul > li:nth-child(odd), .header-market :nth-child(odd).row {
    /*background-color: var(--bg-primary);*/
}
#header-market .row {
    /*border-bottom: 1px solid var(--border-color-header);*/
}
.no-padder .header-breadcrumb {
    /*background-color: var(--bg-primary);*/
}
.nav-tabs.bg.view-tab.swipe-tabs, .bg {
    /*background-color: var(--bg-vst);*/
}
#btn-mobile-search {
    /*background-color: var(--bg-menu-secondary) !important;*/
}
#iframeListStockCode {
    width: 99.9%;
    border: solid 1px var(--border-color-primary);
    border-radius: 10px;
}
#page-menu-content .navbar-nav > li:hover > a, #page-menu-content .navbar-nav > li > a:hover, #page-menu-content .navbar-nav > li > a:focus, #page-menu-content .navbar-nav > li.active > a {
    background-color: var(--bg-vst-active) !important;
    color: var(--color-text-active) !important;
}
#page-menu-content li.active > a, #page-menu-content .dropdown-menu li > a:hover {
    /*background-color: var(--bg-vst-active) !important;
    color: var(--color-text-active) !important;*/
}
.page-menu .dropdown-menu li > a {
    /*background-color: var(--bg-menu);
    color: var(--color-text-menu);*/
}
#popup-menu-mobile .option-theme-mode {
    display: block;
}