/* Minification failed. Returning unminified contents. (1617,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary' (3436,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (3439,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-menu' (3440,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary' (3485,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (3489,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (3492,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary' (3748,17): run-time error CSS1038: Expected hex color, found '#0000' (3957,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (3980,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (3981,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (3982,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface' (4010,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4036,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (4041,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (4061,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary' (4064,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary' (4065,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4081,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-surface' (4086,24): run-time error CSS1039: Token not allowed after unary operator: '-border-color-muted' (4094,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (4098,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (4103,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (4111,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4119,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (4169,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary' (4175,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-tertiary' (4192,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface' (4200,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-tertiary' (4206,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-row-active-secondary' (4207,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4211,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-row-active-secondary' (4212,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4216,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4225,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4226,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary' (4237,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4238,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary' (4276,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary' (4290,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface' (4298,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-tertiary' (4303,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary' (4304,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4380,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-tertiary' (4386,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4394,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4506,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4515,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface' (4534,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4547,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4569,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4697,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4709,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4719,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary' (4720,24): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary' (4721,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (4735,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (4741,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4749,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4758,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (4767,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (4782,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-row-active-primary' (4788,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (4891,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (4901,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (4904,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-tertiary' (4916,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary' (4987,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-flash-green' (4997,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-flash-red' (5007,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-flash-orange' (5071,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-tertiary' (5085,28): run-time error CSS1039: Token not allowed after unary operator: '-color-point' (5089,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5093,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5097,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5105,28): run-time error CSS1039: Token not allowed after unary operator: '-color-point' (5111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5124,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (5216,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (5230,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5236,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted' (5292,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-secondary' (5298,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (5334,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5335,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5336,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5337,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5338,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5339,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5341,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5342,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5343,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5344,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5345,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5346,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5347,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5348,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5349,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5350,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5351,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5352,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5353,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5354,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5355,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5356,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5357,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5358,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5359,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5360,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5361,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5362,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5363,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5364,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5365,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5372,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5373,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5374,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5376,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5377,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5378,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5379,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5380,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5381,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5382,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5383,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5384,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5385,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5386,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5387,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5388,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5389,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5390,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5391,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5392,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5393,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5394,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5395,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5396,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5397,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5398,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5399,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5400,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5401,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5402,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5403,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5408,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5409,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (5632,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-group-heatmap' (5633,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5637,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5649,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary' (5657,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary' (5675,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5680,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5681,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (5688,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5689,33): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5694,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5698,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5699,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-group-heatmap' (5703,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5707,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (5712,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5716,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-header' (5719,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5723,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-header' (5727,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5731,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-vst-active' (5732,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-active' (5736,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-vst-active' (5737,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-active' (5741,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-menu' (5742,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-menu' (5746,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-vst' (5750,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5756,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5762,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5769,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (5771,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5775,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5776,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5779,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5780,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5783,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary' (5788,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5791,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary' (5794,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' (5795,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted' (5799,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-menu' (5800,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color-primary' */ /*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');*/ @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); font-weight: 100; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); font-weight: 300; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); font-weight: 400; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); font-weight: 500; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); font-weight: 700; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); font-weight: 900; } /* Customing CSS for tooltip from tippy library js*/ .tippy-box[data-theme~='background-blue'] { background-color: #335295; color: #fff; padding: 3px 6px; font-size: 13.5px; } .tippy-box[data-theme~='background-blue'][data-placement^='top'] > .tippy-arrow::before { border-top-color: #335295; } .tippy-box[data-theme~='background-blue'][data-placement^='bottom'] > .tippy-arrow::before { border-top-color: #335295; } .tippy-box[data-theme~='background-blue'][data-placement^='left'] > .tippy-arrow::before { border-top-color: #335295; } .tippy-box[data-theme~='background-blue'][data-placement^='right'] > .tippy-arrow::before { border-top-color: #335295; } .tippy-box[data-theme~='background-error'] { background-color: #c70707 !important; color: #fff; padding: 3px 6px; font-size: 13.5px; } .tippy-box[data-theme~='background-error'][data-placement^='top'] > .tippy-arrow::before { border-top-color: #c70707; } .tippy-box[data-theme~='background-error'][data-placement^='bottom'] > .tippy-arrow::before { border-top-color: #c70707; } .tippy-box[data-theme~='background-error'][data-placement^='left'] > .tippy-arrow::before { border-top-color: #c70707; } .tippy-box[data-theme~='background-error'][data-placement^='right'] > .tippy-arrow::before { border-top-color: #c70707; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; /*scroll-behavior: smooth; scroll-padding-top: 80px;*/ } body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: Helvetica,Arial,sans-serif; } a:focus, button:focus { outline: none !important; outline-offset: unset !important; text-decoration: none !important; } ul, ol { padding: 0; margin: 0; list-style: none; } h1, .h1, h2, .h2, h3, .h3 { margin-top: 10px; margin-bottom: 10px; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th { vertical-align: middle; color: #015096; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 6px; } p.p5 { margin: 0 0 5px; } p.p8 { margin: 0 0 8px; color: #5a6d80; } p.p8 > b:not(.txt-red):not(.txt-orange):not(.txt-green):not(.txt-blue):not(.txt-purple) { color: rgba(0,0,0, .81); } input.form-control, select.form-control, .input-group-addon, .btn, .nav-tabs > li > a, .dropdown-menu { border-radius: 0; } .w100 { width: 100% !important; } .w60 { width: 60% !important; } .w65 { width: 65% !important; } .pointer, a.btn-link, span.btn-link, .text-link, a.title-link { cursor: pointer; } span.disabled { opacity: 0.3; } .popover.inside { left: 0 !important; } span.btn-link.active { font-weight: 700; text-decoration: none; cursor: default; } .padder { padding: 10px; } .padder-v { padding-left: 10px; padding-right: 10px; } .padder-h { padding-top: 10px; padding-bottom: 10px; } .padder-xs { padding: 5px; } .padder-v-xs { padding-left: 5px; padding-right: 5px; } .padder-h-xs { padding-top: 5px; padding-bottom: 5px; } .p-t-xs { padding-top: 5px; } .p-b-xs { padding-bottom: 5px; } .p-l-xs { padding-left: 5px; } .p-r-xs { padding-right: 5px; } .p-t { padding-top: 10px; } .p-b { padding-bottom: 10px; } .p-b2x { padding-bottom: 20px; } .p-l { padding-left: 10px; } .p-r { padding-right: 10px; } .p-l15 { padding-left: 15px; } .p-r15 { padding-right: 15px; } .no-p-t { padding-top: 0 !important; } .no-p-b { padding-bottom: 0 !important; } .no-p-l { padding-left: 0 !important; } .no-p-r { padding-right: 0 !important; } .no-padder { padding: 0 !important; } .no-padder-v { padding-left: 0; padding-right: 0; } .no-padder-h { padding-top: 0; padding-bottom: 0; } .wrapper { margin: 10px; } .wrapper-v { margin-left: 10px; margin-right: 10px; } .wrapper-h { margin-top: 10px; margin-bottom: 10px; } .wrapper-xs { margin: 5px; } .wrapper-v-xs { margin-left: 5px; margin-right: 5px; } .wrapper-h-xs { margin-top: 5px; margin-bottom: 5px; } .scroll-showtop { overflow-x: scroll; overflow-y: hidden; } .scroll-showtop { height: 20px; } .scroll-in { height: 20px; } .m-t { margin-top: 10px; } .m-b { margin-bottom: 10px; } .m-l { margin-left: 10px; } .m-r { margin-right: 10px; } .m-t2 { margin-top: 20px; } .m-b2 { margin-bottom: 20px; } .m-l2 { margin-left: 20px; } .m-r2 { margin-right: 20px; } .m-t-xs { margin-top: 5px; } .m-b-xs { margin-bottom: 5px; } .m-l-xs { margin-left: 5px; } .m-r-xs { margin-right: 5px; } .m-t-m { margin-top: -5px; } .no-wrapper { margin: 0 !important; } .no-wrapper-v { margin-left: 0; margin-right: 0; } .fa-1x { font: normal normal normal 20px/1 FontAwesome; margin-top: 7px; vertical-align: top; } .b-all { border: 1px solid #ddd; } .b-t { border-top: 1px solid #ddd; } .b-r { border-right: 1px solid #ddd; } .b-b { border-bottom: 1px solid #ddd; } .b-l { border-left: 1px solid #ddd; } .b-b-dotted { border-bottom: 1px dotted #ddd; } .no-m-t { margin-top: 0 !important; } .no-m-b { margin-bottom: 0 !important; } .no-m-l { margin-left: 0 !important; } .no-m-r { margin-right: 0 !important; } .no-radius { border-radius: 0; } .no-border { border: 0 !important; } .no-b-t { border-top: 0 !important; } .vst-portal { margin: 0; font-size: 16px; line-height: 1.1; } h1.h1-top { font-size: 16px; } h1.h1-title { font-size: 24px; } h2.h2-title, .f18 { font-size: 18px; } h2.h2-link { font-size: 14px; } .f12, h3.h3-link { font-size: 12px; } .no-wrapper-h, h1.h1-top, h1.h1-title, h2.h2-title, h2.h2-link { margin-bottom: 0; margin-top: 0; } .btn-fb { vertical-align: top; margin-right: 3px; display: inline-block !important; } .btn-social { vertical-align: top; border: 1px solid #ddd; padding: 0 6px; font-size: 13px; cursor: pointer; margin-left: 3px; border-radius: 2px; height: 20px; line-height: 19px; } .btn-social:hover { border-color: #ddd; } .btn-social-comment { background-color: #076db6; color: #fff; display: none !important; } .btn-social-shopcart { background-color: #076db6; color: #fff; display: none !important; } .modal-body form sub { bottom: auto; margin-left: 5px; } .navbar-top { margin-bottom: 0; min-height: 36px; border-bottom: 0; margin-top: -1px } .navbar-top .navbar-header .navbar-brand { font-size: inherit; height: auto; padding: 8px 10px; } .navbar-top .navbar-collapse .navbar-form { margin-bottom: 0; margin-top: 1px; line-height: 10px; } .header-logo .img-logo, .footer-logo { background: url(https://image.vietstock.vn/common/logoVSTF.svg) no-repeat; background-position-y: bottom; width: 182px; } .header-logo .img-logo, .footer-logo { height: 90px; width: 215px; } .navbar-header .top-logo { height: 38px; } .nav-pills > li > a:hover { background: inherit; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus, .nav-pills > li > a.nav-label, .nav-pills > li > a.nav-label:hover, .nav-pills > li > a.nav-label:focus { background: inherit; color: #23527c; font-weight: 700; } .filter-label { display: inline-block; } .filter-container > span.twitter-typeahead { float: left; } .fb-page { width: 375px; height: 70px; } .pos-relative, .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: 0; margin-left: 0; -webkit-border-radius: 0 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px; } .dropdown-submenu > a:after { display: block; content: " "; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; top: 11px; right: 12px; } .dropdown-submenu:hover > a:after { /*border-left-color: #555;*/ border-left-color: #01579b; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } .text-capitalize { text-transform: capitalize; } .dn, .txt-red, b.txt-red, .text-red, b.text-red { color: red; } .up, .txt-green, b.txt-green, .text-green, b.text-green { color: green; } .text-yellow { color: yellow; } .txt-white, .cl-white { color: white; } .txt-black { color: black; } .st, .txt-st, b.txt-st, .txt-stand, .txt-orange, b.txt-orange { color: #FFA60C; } .txt-ceil, .txt-purple { color: #C900CA; } .txt-floor, .txt-blue { color: #1E90FF; } .txt-up { color: #008306; } .txt-down, .txt-dn { color: #F00; } .page-header { margin: 0 auto; padding-bottom: 0; border-bottom: 0; } .page-content { min-height: 300px; } .page-footer .footer-info { padding-bottom: 30px; background-color: #fff;/*#E1F5FE;*/ } .page-bottom { position: fixed; bottom: 0; width: 100%; } .clear-fix, .footer-row { clear: both; } .footer-row > h4 { margin-top: 0; padding-top: 6px; } .footer-info .adv-service a[itemprop=email] { color: #fff; } .footer-info .adv-service a[itemprop=email]:hover { color: red; } .footer-row > ul > li:after { content: ""; padding-right: 7px; margin-right: 4px; border-right: 1px dotted #9a9a9a; } .footer-row > ul > li:last-child:after { border-right: 0; } .footer-row > ul > li > a { color: rgba(255,255,255,.8); line-height: 26px; } .footer-info .adv-service { padding-top: 20px; } .footer-info .adv-service:before { display: block; content: "liên hệ quảng cáo & dịch vụ"; position: absolute; font-size: 14px; text-transform: uppercase; font-weight: 700; top: -15px; left: 20px; padding: 5px 10px; border-radius: 2px; } [lang=en-US] .footer-info .adv-service:before { content: "advertising contacts & services"; } .page-footer .title-adwords { text-transform: uppercase; } .page-footer .title a { font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.87); display: block; } .heading-group { position: relative; border-color: #f44336 !important; margin-bottom: 10px; background-color: #fff !important; } .heading-group:before { top: 50%; border-top-style: solid; } .heading-group:before, .heading-group:after { content: ""; position: absolute; left: auto; right: 0; width: 100%; height: 0; border-top-width: 3px; border-color: inherit; } .heading-group > .heading-title { position: relative; display: inline-block; margin-bottom: 0; padding-right: 1.07143rem; background-color: inherit; z-index: 2; margin-top: 0; } .nav-pills .nav-item { position: relative; } .nav-pills .nav-item::after { content: ""; position: absolute; top: 50%; right: 0; display: block; width: 0; height: 35%; border-right: 1px solid #ddd; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .nav-pills .nav-item > a, .nav-pills .nav-item > .nav-link { transition-property: color, background-color, border-color; transition-duration: .2s; transition-timing-function: ease-in; padding: 8px 10px 6px 7px; } .nav-pills .nav-item:first-child > a { padding-left: 0; } .i-block { border: 1px solid #eee; border-bottom: 2px solid #ddd; } .i-box { box-shadow: 0 2px 5px rgba(0,0,0,.30); } .i-t { border-top: 1px solid #ddd; } .i-t2 { border-top: 2px solid #ddd; } .i-t3 { border-top: 3px solid #ddd; } .i-b { border-bottom: 1px solid #ddd; } .i-b2 { border-bottom: 2px solid #ddd; } .i-b3 { border-bottom: 3px solid #ddd; } .i-b4 { border-bottom: 4px solid #ddd; } .i-b-d { border-bottom: 1px dotted #ddd; } .i-img { border: 1px solid #eee; border-bottom-width: 2px; padding: 1px; } .bg, .bg2 { background-color: #eee; } .bg-white { background-color: #fff; } .online-market li { display: inline; padding: 10px; } .banner-news { border-bottom: solid 1px #ccc; } .banner-news > li > a { padding: 0 10px 0 0; } .dropdown-year { width: 100px; display: inline-block; height: 28px; margin-left: 10px; border-color: #ddd; padding: 3px 4px; } .overlay-panel { position: absolute; width: 100%; height: 100%; z-index: 999; top: 0; left: 0; background-color: rgba(50, 50, 50, 0.1); } .overlay-panel .overlay-body { position: absolute; top: 50%; left: 50%; width: 100px; margin-top: -40px; margin-left: -50px; padding: 20px; text-align: center; } .nav-tabs > li > a { padding: 6px 8px; } .nav-tabs.blue, .nav-pills.blue { border-bottom: solid 2px #337ab7; } .nav-tabs.blue > li > a { border: none; } .nav-tabs.blue > .active > a, .nav-tabs.blue > .active > a:hover, .nav-tabs.blue > .active > a:focus, .nav-tabs.blue > li > a:hover { background-color: #337ab7; color: #fff; border: none; } .headline { display: block; margin: 10px 0 5px; border-bottom: 1px solid #ddd; } .headline h2, .headline h3, .headline h4 { margin: 0 0 -2px; padding-bottom: 8px; display: inline-block; } .headline > a.title-link { margin-top: -3px; } .loading { position: absolute; width: 100%; height: 100%; top: 0; opacity: 0.7; background-color: #fff; z-index: 20; } .navbar-nav.nav-top > li > a:hover, .navbar-nav.nav-top > li > a:focus { background: inherit; outline: none !important; } .breadcrumbs { /*overflow: hidden;*/ font-size: 14px; } .breadcrumbs:after { content: ""; display: block; clear: both; } .breadcrumbs > .breadcrumb { margin-bottom: 0; /*padding: 8px 10px 0 0;*/ padding: 0px; background: transparent; border: 0 solid #e8e8e8; } .breadcrumbs > .breadcrumb li, .breadcrumbs > .breadcrumb a.title-link { color: #8a8f94 !important; } .breadcrumbs > .breadcrumb a.title-link:hover { color: #1562a1 !important; } .breadcrumbs > .breadcrumb > li + li:before { content: "\003E" !important; padding: 0 5px; color: #8a8f94 !important; } .breadcrumbs > .head-bread { padding: 0px 0 0; } .popover-content blockquote { font-size: inherit; } .v-table { width: 100%; display: table; } .v-cell { display: table-cell; } .noscroll { overflow: hidden !important; } .scrollbar { overflow-x: hidden; overflow-y: auto; } .scrollbar::-webkit-scrollbar-track { background-color: #eee; } .scrollbar::-webkit-scrollbar { width: 3px; background-color: #eee; } .scrollbar::-webkit-scrollbar-track:hover { background-color: transparent; } .scrollbar::-webkit-scrollbar-thumb { background-color: #ccc; } .-scrollbar::-webkit-scrollbar-thumb:hover { background-color: transparent; } .tab-content { position: relative; } .tab-content > .tab-pane > .popover { left: 0 !important; } .inline-block { display: inline-block; } .table-hover > tbody > tr:hover, .table-hover > tbody > tr:hover > td { background-color: #ffdead !important; } .table-middle > thead > tr > th, .table-middle > tbody > tr > th, .table-middle > tfoot > tr > th, .table-middle > thead > tr > td, .table-middle > tbody > tr > td, .table-middle > tfoot > tr > td { vertical-align: middle; } table.table.responsive tr.group { background-color: #f5f5f5; } .tr-odd > td { background-color: #f9f9f9; } ul.square > li { padding: 5px 0; } ul.square > li:before, ul > li > .square:before { content: "∎"; padding-right: 8px; font-size: 10px; } ul > li > .square:before { padding-right: 0; } .table.no-border > tbody > tr > td, .table.no-border-t > tbody > tr:first-child > td { border-top: 0; } .select2-results .select-group { font-weight: 700; padding-left: 6px !important; background-color: #fafafa; } a, .pos-relative .btn-group .btn-default, .view-tab.nav-tabs > li > a, .index-tab.nav-tabs > li > a { color: #015096; } .index-tab.nav-tabs > li > a { font-size: 12px; padding: 6px 8px 2px; font-weight: 700; } .index-tab.nav-tabs > li > a:hover, .index-tab.nav-tabs > li.active > a { border-width: 0; border-bottom-width: 1px; } .index-row { padding: 4px 0; border-bottom: 1px solid #f3f3f3; } .index-row > .code { color: rgba(0,0,0,.6); font-weight: 700; } .index-row span.price { font-weight: 700; padding-right: 10px; color: rgba(0,0,0,.7); } .index-row span.change { width: 100px; display: inline-block; } .index-content { min-height: 90px; } .index-content > div:first-child { min-height: 58px; } .index-content > .pos-relative { width: 80%; } .select2-container--bootstrap .select2-selection { border-radius: 0 !important; } .view-tab-menu { width: 100%; text-align: left; position: relative; } .view-tab-menu > span { position: absolute; right: 10px; top: 12px; } .btn-header, .headline .btn.link-detail { margin-top: -5px; } .text-link, a.text-link { color: #333; } h1.title { font-size: 24px; } .txt-bold, .text-bold, h2.h2-link, h3.h3-link, h1.title, h2.title, h3.title, h3 .title-link, h4.title, h4 .title-link, .title.active, a.title-link.active, .text-link.active { font-weight: 700; } h2.title-2 { font-size: 18px; margin-bottom: 5px; margin-top: 5px; } h3.title-x { margin: 0; font-size: 14px; display: inline-block; } a.title-link:hover, a.title-link:focus, .text-link:hover, .text-link:focus { color: red; text-decoration: none; } h4.title.title-active { margin: 0; padding: 10px 5px; border-left: 5px solid #F44336; color: #fff; font-weight: 400; } .col-date, .table > thead > tr > th.col-date { width: 85px; } .col-20, .table > thead > tr > th.col-20 { width: 20px; } .col-30, .table > thead > tr > th.col-seq { width: 30px; } .col-40, .table > thead > tr > th.col-40 { width: 40px; } .col-50, .table > thead > tr > th.col-50 { width: 50px; } .col-60, .table > thead > tr > th.col-60 { width: 60px; } .col-70, .table > thead > tr > th.col-70 { width: 70px; } .col-80, .table > thead > tr > th.col-80 { width: 80px; } .col-90, .table > thead > tr > th.col-90 { width: 90px; } .col-100, .table > thead > tr > th.col-100 { width: 100px; } .col-110, .table > thead > tr > th.col-110 { width: 110px; } .col-120, .table > thead > tr > th.col-120 { width: 120px; } .col-130, .table > thead > tr > th.col-130 { width: 130px; } .col-150, .table > thead > tr > th.col-150 { width: 150px; } .col-160, .table > thead > tr > th.col-160 { width: 160px; } .col-180, .table > thead > tr > th.col-180 { width: 180px; } .col-200, .table > thead > tr > th.col-200 { width: 200px; } .col-250, .table > thead > tr > th.col-250 { width: 250px; } .icon-rss, .icon-en, .icon-vi { vertical-align: top; } .icon-rss > img { height: 18px; width: 20px; margin-top: 2px; } .icon-vi > img { height: 22px; margin-top: 0; } .statistic-trans > p { margin-bottom: 0; padding: 5px 8px; border-bottom: 1px solid #ddd; } .loading-container { margin: 100px auto; text-align: center; } .loading-container > img { width: 35px; height: 35px; } .w-auto { width: auto; } .hl-changing { background-color: #e88a2b !important; } /*-------------------------------------------------- [twitter.typeahead] ----------------------------------------------------*/ .tt-menu { width: 470px; margin: 2px 0; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-dataset > div { padding: 8px 10px; line-height: normal; } .statistic-trans > p:nth-child(even), .tt-dataset > div:nth-child(even) { background-color: #f7f7f7; } .tt-dataset > div.tt-suggestion { cursor: pointer; display: table; width: 100%; padding: 6px 10px; } .tt-dataset > div.tt-suggestion > span { display: table-cell; } .tt-dataset > div.tt-suggestion > span:last-child { width: 70px; text-align: right; } .tt-dataset > div.tt-suggestion p { margin: 0; } /*-------------------------------------------------- [loader] ----------------------------------------------------*/ .cs-loader { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .cs-loader-inner { transform: translateY(-50%); top: 50%; position: absolute; width: calc(100% - 200px); color: #337ab7; padding: 0 100px; text-align: center; } .cs-loader-inner label { font-size: 15px; opacity: 0; padding: 5px; display: inline-block; } @keyframes lol { 0% { opacity: 0; transform: translateX(-300px); } 33% { opacity: 1; transform: translateX(0px); } 66% { opacity: 1; transform: translateX(0px); } 100% { opacity: 0; transform: translateX(300px); } } @-webkit-keyframes lol { 0% { opacity: 0; -webkit-transform: translateX(-300px); } 33% { opacity: 1; -webkit-transform: translateX(0px); } 66% { opacity: 1; -webkit-transform: translateX(0px); } 100% { opacity: 0; -webkit-transform: translateX(300px); } } .cs-loader-inner label:nth-child(6) { -webkit-animation: lol 3s infinite ease-in-out; animation: lol 3s infinite ease-in-out; } .cs-loader-inner label:nth-child(5) { -webkit-animation: lol 3s 100ms infinite ease-in-out; animation: lol 3s 100ms infinite ease-in-out; } .cs-loader-inner label:nth-child(4) { -webkit-animation: lol 3s 200ms infinite ease-in-out; animation: lol 3s 200ms infinite ease-in-out; } .cs-loader-inner label:nth-child(3) { -webkit-animation: lol 3s 300ms infinite ease-in-out; animation: lol 3s 300ms infinite ease-in-out; } .cs-loader-inner label:nth-child(2) { -webkit-animation: lol 3s 400ms infinite ease-in-out; animation: lol 3s 400ms infinite ease-in-out; } .cs-loader-inner label:nth-child(1) { -webkit-animation: lol 3s 500ms infinite ease-in-out; animation: lol 3s 500ms infinite ease-in-out; } @-webkit-keyframes n-carousel { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -webkit-transform: translate3d(-3500px,0,0); transform: translate3d(-3500px,0,0); } } @keyframes n-carousel { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { /*-webkit-transform: translate3d(-6000px,0,0); transform: translate3d(-6000px,0,0);*/ -webkit-transform: translate3d(-2500px,0,0); transform: translate3d(-2500px,0,0); } } .news-wrapper-stock, .news-wrapper-home { /*position: relative; padding-bottom: 38px;*/ } .news-wrapper-mobile { position: relative; margin-right: 105px; } .news-wrapper { -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 60px; /*position: absolute;*/ top: 0; width: 100%; } .news-wrapper-home > .news-wrapper { padding: 0; padding-right: 10px; } .news-wrapper-stock > .news-wrapper, .news-wrapper-mobile > .news-wrapper { padding: 0; } .news-wrapper .inner { -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; padding: 8px 0 26px 100%; position: relative; width: 100%; } .news-wrapper .inner ul { -webkit-animation: n-carousel 72s linear infinite; animation: n-carousel 72s linear infinite; margin: 0; list-style: none; padding: 0; position: absolute; white-space: nowrap; } .news-wrapper .inner ul:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } .news-wrapper .inner ul li { display: inline-block; padding-right: 40px; } .news-wrapper .inner ul li a { margin: 0 5px; color: #545b66; } .news-wrapper .inner ul li a:hover { color: #015096; } .news-wrapper .inner ul li span.iconGift01 { background-color: #e6f4ea; border-radius: 100%; padding: 5px 3px 7px 5px; } .news-wrapper .inner ul li span.iconGift02 { background-color: #fce8e6; border-radius: 100%; padding: 5px 3px 7px 7px; } .news-wrapper .inner ul li span.iconGift03 { background-color: #fdf3e7; border-radius: 100%; padding: 5px 3px 7px 7px; } .news-wrapper .inner ul li span.iconGift04 { background-color: #e3effd; border-radius: 100%; padding: 5px 3px 7px 7px; } .view-content { margin-top: 15px; min-height: 300px; } .input-group-btn > label, input.form-control, select.form-control { padding: 6px 8px; } textarea { background-color: var(--bg-secondary) !important; } .f20 { font-size: 20px; } span.i-r { font-size: 20px; vertical-align: middle; color: orange; margin-right: 5px; line-height: 14px; } .al-top, .al-top .twitter-typeahead { vertical-align: top !important; } .al-middle { vertical-align: middle !important; } .page-scroll { position: fixed; bottom: 0px; right: 0px; z-index: 1000; } #textVietstockMate { display: none; position: fixed; bottom: 165px; right: 0px; background-color: #fff; border: 1px solid #00000026; padding: 10px; border-radius: 10px; max-width: 230px; z-index: 1000; } /* Tam giác tạo ĐƯỜNG VIỀN (Nằm bên dưới) */ #textVietstockMate::before { content: " "; position: fixed; /* Đẩy xuống thấp hơn 1.5px so với thẻ after để lộ viền ra ngoài */ bottom: 144.5px; right: 27px; border-width: 11px; border-style: solid; border-color: #d9d9d9 transparent transparent transparent; } /* Tam giác tạo NỀN (Nằm đè lên trên) */ #textVietstockMate::after { content: " "; position: fixed; bottom: 147px; right: 28px; border-width: 10px; border-style: solid; border-color: #ffffff transparent transparent transparent; } #textVietstockMate div { display: none; opacity: 0; } .show-msg { display: block !important; animation: fadeIn 0.5s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #iconVietstockMate { position: fixed; bottom: 50px; right: 2px; z-index: 1000; /*opacity: 0.5;*/ } #iconVietstockMate img { width: 65px; } #iconVietstockMate img[ico-name="hello-1"] { width: 65px; } #iconVietstockMate img[ico-name="hello-2"] { width: 75px; } #iconVietstockMate img[ico-name="sad-1"] { width: 75px; } #iconVietstockMate img[ico-name="sad-2"] { width: 65px; } #iconVietstockMate img[ico-name="smile-1"] { width: 65px; } #iconVietstockMate img[ico-name="smile-2"] { width: 65px; } .btn-close-icon-vietstockmate { position: absolute; z-index: 1; top: -14px; right: -2px; background-color: #ffffffaa; width: 22px; height: 22px; justify-content: center; align-items: center; border-radius: 50%; cursor: pointer; display: none; } #iconVietstockMate:hover .btn-close-icon-vietstockmate { display: flex; } @media screen and (max-width: 1199px) { /*#iconVietstockMate { opacity: 0.7; }*/ .btn-close-icon-vietstockmate { display: flex; } } @media screen and (max-width: 767px) { /*#iconVietstockMate { opacity: 0.5; }*/ } .scroll-top, .control-button-grid, .control-button-exit, .control-button-fullscreen, .control-button-notfullscreen { transition: all .5s ease-in-out; color: #fff; width: 40px; height: 40px; font-size: 20px; background-color: #1E88E5; text-align: center; cursor: pointer; border-radius: 50%; padding-top: 6px; margin: 10px; } .control-button-grid { bottom: 55px; } .scroll-top { display: none; opacity:0.5; } .control-button-exit { display: none; } .control-button-fullscreen, .control-button-notfullscreen { display: none; } .scroll-top:hover, .control-button-grid:hover, .control-button-exit:hover, .control-button-fullscreen:hover { opacity: 1; } .home-filter-text { width: 300px; } .mobile-search > .v-table { height: 38px; } .mobile-search .twitter-typeahead, .mobile-search .twitter-typeahead > .tt-input, .mobile-search .twitter-typeahead > .tt-hint, .mobile-search .twitter-typeahead > .tt-menu, .form-group.group-filter > .twitter-typeahead, .form-group.group-filter > .twitter-typeahead > .tt-input, .form-group.group-filter > .twitter-typeahead > .tt-hint, .form-group.group-filter > .twitter-typeahead > .tt-menu { width: 100% !important; } .modal-overlay { background-color: #000; position: fixed; width: 100%; height: 100%; top: 0; display: none; } .modal-overlay.search { display: block; opacity: 0.1; } .content-grid, .content-kq, .table-kq { min-height: 300px; } .footer-row > ul > li { display: inline-block; } .pagination, .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0; } .modal.article-modal { text-align: center; padding: 0 !important; display: block; background-color: rgba(0,0,0,0.4); z-index: 999991; } .modal.article-modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; } .note-icon { width: 2rem; height: 2rem; display: inline-block; border-radius: 50%; margin-right: 5px; } .article-modal .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } .article-modal .modal-body { padding: 0; margin-bottom: 15px; } .article-modal .modal-content { min-height: 450px; max-height: 95%; } .article-modal .modal-body .title.padder { padding-right: 30px; } .article-modal .modal-body > div p { margin-bottom: 1.28em; line-height: 1.5; } .no-display, .modal.article-modal.overview-modal, .nav-pills.single .nav-item::after, .nav-pills .nav-item:last-child::after, .article-modal .modal-body p.pHead, .article-modal .modal-body p.pTitle, .article-modal .modal-body p.pInterTitle { display: none; } .article-modal .modal-body > div p.pBody { font-size: 16px; } .article-modal .modal-body > div p.pQuestion { font-size: 16px; font-style: italic; font-weight: bold; } .article-modal .modal-dialog button.close { padding: 5px 10px; opacity: 0.6; color: red; z-index: 99; position: absolute; right: 0; } .article-modal .modal-body p.pSource { font-size: 10pt; float: right; color: #696969; text-transform: uppercase; font-style: italic; margin-bottom: 0; clear: both; } .article-modal .modal-body > div table { margin-bottom: 10px; } .article-modal .modal-body p.pAuthor { font-size: 11pt; float: right; font-weight: 700; color: #696969; margin-bottom: 0; clear: both; } .article-modal .modal-content .scrollbar { padding-bottom: 30px; } .article-modal .modal-content table tr > td { padding: 5px; } .article-modal .modal-content .width_medium p img { margin-right: 8px; } a.link-attach, .article-modal .modal-content table a, .article-modal .modal-content a.attachment { white-space: pre-wrap; word-wrap: break-word; word-break: break-all; white-space: normal; } .table-fixed thead { width: 100%; } .table-fixed tbody { height: 230px; overflow-y: auto; width: 100%; background-color: white; } .block, .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { display: block; } .table-fixed tbody td, .table-fixed thead > tr > th { float: left; border-bottom-width: 1px; } .table-fixed.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: #f9f9f9; } .social-groups .fa { padding: 5px 10px; font-size: 18px; text-align: center; text-decoration: none; margin: 5px 2px; color: white; } .social-groups .fa:hover { opacity: 0.7; } .social-groups .fa-facebook { background: #3B5998; } .social-groups .fa-twitter { background: #55ACEE; } .social-groups .fa-google { background: #dd4b39; } .social-groups .fa-linkedin { background: #007bb5; } /*VST header zone*/ .unzone-header { background-color: #01579b; text-align: center; } .unzone-header > h1 { margin-top: 10px !important; margin-bottom: 0; padding-top: 5px; padding-bottom: 5px; font-size: 26px; } .twitter-typeahead .form-control.typeahead.top-filter.tt-input { /*text-transform: uppercase;*/ } .highcharts-container { background: url(https://image.vietstock.vn/common/vietstock_60.png) no-repeat center center; } /*-------------------------------------------------- [MEDIA]: BEGIN ALL SIZE ----------------------------------------------------*/ @media screen and (max-width: 370px) { .trade-exchange-content .h4 { font-size: 16px; font-weight: 700; } .content-kq .headline > .title { font-size: 16px; } } @media screen and (max-width: 767px) { /*.navbar-top .navbar-header{ background: url(../content/images/vietstockbg2.jpg); background-position: top; }*/ .table-responsive { border: 0; } .article-modal .modal-dialog { margin: 0; position: fixed; top: 0; left: 0; right: 0; } .article-modal .modal-content { min-height: unset; max-height: 90%; } .article-modal .modal-dialog .modal-body { padding: 0; } .article-modal .modal-dialog .modal-body table { width: auto !important; } .article-modal .modal-dialog .modal-body img, .article-modal .modal-dialog .modal-body table img { width: 100% !important; height: auto !important; } .article-modal .modal-dialog .modal-body .pCaption { font-style: italic; font-weight: 100; } .article-modal .modal-content .scrollbar { max-height: 400px; } .navbar-top .navbar-collapse.in { overflow: hidden; } .navbar-top .navbar-collapse > .nav-top > li > a { padding: 5px 20px; } h1.title { font-size: 18px; } h2.title-2 { font-size: 14px; } .page-footer .footer-info { color: rgba(255,255,255,.87); background: #122b50; } .footer-row { margin-bottom: 10px; } .footer-row > h4 { text-align: left; padding-top: 10px; padding-bottom: 10px; border-bottom-width: 3px; border-bottom-style: solid; } .footer-row > ul { border: 0; padding-bottom: 0; } .footer-row > ul > li { line-height: 25px; } .footer-company-action .collapse-up, .footer-company-action.collapsed .expand-down { display: inline-block; } .footer-company-action.collapsed .collapse-up, .footer-company-action .expand-down { display: none; } .page-footer .footer-info { padding-bottom: 20px; } .page-footer .footer-info p { font-size: 12px; margin-bottom: 5px; } .page-footer .footer-info .copyright-container { color: rgba(255,255,255,.87); } .page-footer .footer-info .adv-service { padding-left: 0; padding-right: 0; border-top: 1px solid #0277bd; background-color: inherit; } .page-footer .footer-info .copyright-container a { color: #fff; } .breadcrumbs > .head-bread, .head-right { padding: 0; } .breadcrumbs > .head-bread { z-index: 1; /*position: absolute; right: 9px; margin-top: -20px;*/ margin-top: 10px; } .icon-rss, .icon-en, .icon-vi, .breadcrumbs > .head-bread > .icon-vst { margin-top: -3px; } .breadcrumbs > .head-bread > .icon-rss { display: none !important; } .nav-pills > li > a { padding: 10px 5px; } .home-filter-text { width: 100%; margin-bottom: 0; } .view-tab.kqkd-tab, .view-tab.collapse.in { display: block; } .view-tab > li { float: none; border: 1px solid #DDD; } .view-tab.knowledge-tab > li { display: inline-block; border: 0; } .view-tab > li.active { border: 0; } .view-tab > li > a { margin-right: 0; border-radius: 0; } .view-tab.kqkd-tab > li { float: left; border: 0; } .view-content { margin-top: 10px; min-height: 900px; } .view-content form > .form-group, .view-content .form > .form-group, .view-content .form-inline > .form-group { display: table; width: 100%; margin-bottom: 10px; } .view-content form > .form-group > label, .view-content .form > .form-group > label { width: 80px !important; } .view-content .finance-content form > .form-group > label, .view-content .finance-content .form > .form-group > label { width: 90px !important; } .view-content .finance-content .btn-group button.btn.dropdown-toggle { padding: 3px 8px; } .view-content .relation-content .form-inline > .form-group > label { width: 100px !important; } .content-kq form > .form-group > select, .content-kq .form > .form-group > select, .view-content form > .form-group > select { display: inline-block; width: calc(100% - 145px); } .business-result .result-filter.form-inline > .form-group input.tt-input { width: 200px; } .business-result .result-filter.form-inline > .form-group > select { width: calc(100% - 200px) !important; min-width: auto !important; display: inline-block; } .content-kq .table-responsive > table.fixed-column tr > th { height: 95px; } .content-kq.business-result .table-responsive > table.fixed-column tr > th { height: 87px; } .view-content .relation-content .form-inline > .form-group > select { display: inline-block; width: 50% !important; margin-right: 0; } .view-content .relation-content .form-inline > .form-group > input { margin-right: 0; vertical-align: top; } .view-content .relation-content .form-inline > .form-group > select[name=exchange] { display: inline-block; width: calc(100% - 110px) !important; } .content-kq form > button, .content-kq .form > button, .view-content form > button, .view-content .form > button { float: right; margin-top: -44px; } .view-content form > .form-group > button[data-toggle=collapse], .view-content .form > .form-group > button[data-toggle=collapse] { float: left; padding-left: 10px; padding-right: 10px; } .view-content form > .form-group > button[data-toggle=collapse] .caret, .view-content .form > .form-group > button[data-toggle=collapse] .caret { margin-left: 10px; } .content-kq form > .form-group > button .view-content form > .form-group > button, .content-kq .form > .form-group > button .view-content .form > .form-group > button { float: right; } .view-content form > .form-group .filter-label, .view-content .form > .form-group .filter-label, .view-content form > .form-group .filter-container, .view-content .form > .form-group .filter-container, .view-content .form-inline > .form-group .input-group, .view-content form > .form-group .input-group, .view-content .form > .form-group .input-group, .content-kq form > .form-group .input-group, .content-kq .form > .form-group .input-group { display: table-cell; float: none; vertical-align: middle; } .view-content .form-inline > .form-group .input-group > input.form-control { width: calc(100% - 36px) !important; min-width: auto !important; } .view-content .form-inline.trans-filter-form > .form-group .input-group > input.form-control { width: calc(100% - 115px) !important; } .view-content form > .form-group .input-group > input.form-control, .view-content .form > .form-group .input-group > input.form-control { width: auto; min-width: auto !important; } .view-content form > .form-group .input-group > span.input-group-addon, .view-content .form-inline > .form-group .input-group > span.input-group-addon { padding: 9px 8px 8px; width: 36px; } .view-content form > .form-group .filter-container > select, .view-content form > .form-group .filter-container > input { min-width: 100% !important; } .statistic-trans > .headline { margin-bottom: 0; } .statistic-trans > p > a.title-link { padding-top: 3px; } .view-content form > .form-group .filter-container > span.twitter-typeahead .tt-menu, .view-content .form > .form-group .filter-container > span.twitter-typeahead .tt-menu { width: 300px; left: auto !important; right: 0; max-height: 350px; overflow: auto; } .view-content form > .form-group .filter-container > span.twitter-typeahead input, .view-content .form > .form-group .filter-container > span.twitter-typeahead input { min-width: 100% !important; } .view-content .form-inline.trans-filter-form { position: relative; } .view-content .form-inline.trans-filter-form .btn-trans-filter { position: absolute; bottom: 0; width: auto; right: 0; } .document-content .pagination { float: none !important; } label.btn { padding: 6px 7px; } .btn-social > i { padding-left: 5px; padding-right: 5px; } select.form-control.ddlRows { padding: 6px 1px; width: 50px !important; } .view-tab.swipe-tabs.fixed { position: fixed; top: 46px; height: 40px; z-index: 9; margin-left: -10px; width: 100%; } .view-tab.swipe-tabs > button { border: 0; background-color: inherit; position: absolute; top: 0; z-index: 9; width: 24px; height: 40px; outline: 0; } .view-tab.swipe-tabs > button.slick-next { right: 0; } .view-tab.swipe-tabs > button.slick-disabled { opacity: 0.25; } .view-tab.swipe-tabs > button.slick-next.slick-disabled { display: none !important; } .view-tab.swipe-tabs > button > i { font-size: 24px; } .view-tab.swipe-tabs > .slick-list { margin-left: 24px; } .view-tab.swipe-tabs > .slick-list > .slick-track { height: 36px; } .view-tab.swipe-tabs .swipe-tab { outline: 0; padding: 0 5px; } .view-tab.swipe-tabs .swipe-tab > a { margin: 10px auto; display: block; outline: 0; text-decoration: none; float: left; } .view-tab.swipe-tabs .swipe-tab.active > a:after { width: 100%; height: 3px; background-color: #f44336; content: ""; display: inline-block; margin-top: 3px; float: left; } .table-responsive > table.fixed-column { position: absolute; display: inline-block; width: auto; border-right: 1px solid #ddd; background-color: #fff; z-index: 2; } .table-responsive > .table.table-space > thead > tr > th, .table-responsive > .table.table-space > tbody > tr > td { white-space: normal; } .modal-buydata, .modal-comment { padding-left: 0 !important; } .modal-buydata > .modal-dialog, .modal-comment > .modal-dialog { margin: 0 !important; } span.text.fs12 { font-size: 12px; } .company-relate-tab > .relate-total { display: block; float: none !important; text-align: right; } .unzone-header > h1 { margin-top: 10px; font-size: 20px; } } @media screen and (min-width: 768px) { /*.header-vst{ background: url(../content/images/vietstockbg2.jpg); }*/ .col-sm-offset-right-12 { margin-right: 100%; } .icon-en { margin-top: -1px; } .home-filter { float: right; } .footer-row > h4 { width: 225px; float: left; text-align: right; padding-right: 20px; } .footer-row > ul { margin-left: 225px; margin-top: 15px; padding-bottom: 15px; } .footer-page, .footer-company-info.collapse { display: block; } .page-footer .footer-info p { margin-bottom: 5px; } .page-footer .footer-info > .container > .row { margin-top: 10px; padding-top: 10px; } .navbar-brand { padding: 9px 10px; } .navbar-nav > li > a { padding: 8px 10px 7px; } .view-tab { display: block !important; min-height: 45px; } .view-tab > li { margin-bottom: 0; margin-left: 4px; } .view-tab > li:first-child { margin-left: 10px; } .view-tab.nav-tabs > li > a { padding: 10px 9px; border-width: 1px; border-bottom-width: 0; text-align: center; } .view-tab.kqkd-tab { min-height: 35px; display: block !important; } .view-tab.kqkd-tab > li { margin-left: 0; margin-right: 0; float: left; } .view-tab.nav-tabs.kqkd-tab > li > a { padding: 5px 12px; border-width: 1px; border-bottom-width: 0; } .navbar-top .navbar-form .tt-menu { right: -28px; left: auto !important; } .filter-company-container .tt-menu { right: -160px; left: auto !important; } .fg-2 { margin-left: 10px; } .event-calendar .form-inline .form-group { vertical-align: top; } .view-tab.swipe-tabs.fixed { position: fixed; top: 38px; height: 40px; z-index: 80; margin-left: -10px; width: 100%; } .view-tab.swipe-tabs > button { border: 0; background-color: inherit; position: absolute; top: 0; z-index: 10; width: 30px; height: 40px; outline: 0; } .view-tab.swipe-tabs > button.slick-next { right: 0; } .view-tab.swipe-tabs > button.slick-disabled { opacity: 0.25; } .view-tab.swipe-tabs > button > i { font-size: 24px; } .view-tab.swipe-tabs > .slick-list > .slick-track { height: 36px; } .view-tab.swipe-tabs .swipe-tab { outline: 0; padding: 0 10px; } .view-tab.swipe-tabs .swipe-tab > a { margin: 10px auto; display: block; outline: 0; text-decoration: none; float: left; } .view-tab.swipe-tabs .swipe-tab.active > a:after { width: 100%; height: 3px; background-color: #f44336; content: ""; display: inline-block; margin-top: 3px; float: left; } .page-content form > .form-group > label, .page-content .form > .form-group > label { padding-top: 8px; } } @media screen and (min-width: 768px) and (max-width: 992px) { input.typeahead.top-filter { width: 90px !important; } input.typeahead.top-filter:focus { width: 250px !important; margin-left: -250px; background-color: #fff !important; } .stock-row-right { display: inline-block; vertical-align: top; } .stock-row-right.row-1 { width: 60%; } .stock-row-right.row-2 { width: 39%; } .article-modal .modal-content .scrollbar { max-height: 600px; } .view-tab { min-height: 40px; } .view-tab.swipe-tabs > .slick-list > .slick-track { margin-left: 20px; } .view-tab.swipe-tabs .slick-track .slick-slide > a { margin: 10px auto; padding: 0 10px; display: block; outline: 0; text-decoration: none; float: left; } .view-tab.swipe-tabs .active.slick-slide > a:after { width: 100%; height: 3px; background-color: #f44336; content: ""; display: inline-block; margin-top: 3px; float: left; } } @media screen and (min-width: 992px) { .col-date, .table > thead > tr > th.col-date { min-width: 85px; } .col-30, .table > thead > tr > th.col-seq { min-width: 30px; } .col-40, .table > thead > tr > th.col-40 { min-width: 40px; } .col-50, .table > thead > tr > th.col-50 { min-width: 50px; } .col-60, .table > thead > tr > th.col-60 { min-width: 60px; } .col-70, .table > thead > tr > th.col-70 { min-width: 70px; } .col-80, .table > thead > tr > th.col-80 { min-width: 80px; } .col-90, .table > thead > tr > th.col-90 { min-width: 90px; } .col-100, .table > thead > tr > th.col-100 { min-width: 100px; } .col-110, .table > thead > tr > th.col-110 { min-width: 110px; } .col-120, .table > thead > tr > th.col-120 { min-width: 120px; } .col-130, .table > thead > tr > th.col-130 { min-width: 130px; } .col-150, .table > thead > tr > th.col-150 { min-width: 150px; } .col-160, .table > thead > tr > th.col-160 { min-width: 160px; } .col-180, .table > thead > tr > th.col-180 { min-width: 180px; } .col-200, .table > thead > tr > th.col-200 { min-width: 200px; } .col-250, .table > thead > tr > th.col-250 { min-width: 250px; } .stock-viewed { margin-left: -120px; text-align: right; min-height: 26px; padding-right: 10px; } .stock-followed { margin-left: -330px; text-align: right; padding-bottom: 10px; padding-right: 10px; } .row.stock-row, .row.table-row { display: table; float: none; width: 100%; overflow: hidden; } .row.stock-row > .stock-cell, .row.table-row > .table-cell { display: table-cell; float: none; } .filter-company-container .tt-menu { right: auto; } .stock-row-right { display: table; width: 100%; height: 100%; float: left; position: absolute; } .stock-row-right.row-1 { top: 0; } .stock-row-right.row-2 { bottom: -5px; } .fixed-column { display: none; } [lang=en-US] .stock-viewed { min-height: 24px; } [lang=en-US] .stock-followed { margin-left: -210px; line-height: 15px; padding-bottom: 0; } [lang=en-US] .row.stock-row { /*min-height: 290px;*/ } .row.stock-row.stock-row-empty { min-height: auto; } [lang=en-US] .stock-cell > div.text-bold { margin-right: 70px; } [lang=en-US] .stock-row-right.row-2 { bottom: -20px; top: 50px; } [lang=en-US] .bt3 p > small { font-size: 80%; vertical-align: top; } [lang=en-US] .bt3 p > b { font-size: 13px; padding-top: 2px; } [lang=en-US] .bt3 .col-c, [lang=en-US] .bt3 .col-c-last .col-ce { padding-left: 1px; padding-right: 1px; } } @media screen and (min-width: 1200px) { .view-tab > li { margin-right: 2px; } .view-tab.nav-tabs > li > a { padding: 10px 10px; } [lang=vi-VN] .stock-row-right.row-2 { top: 50px; } .article-modal .modal-dialog { width: 700px; } .article-modal .modal-content { min-height: 600px; max-height: 800px; } .article-modal .modal-content .scrollbar { max-height: 600px; } } @media screen and (width: 768px) { .home-filter-text { width: 280px; } .navbar-top .navbar-form .tt-menu { right: -37px; left: auto !important; } .filter-company-container .tt-menu { left: 0 !important; } .view-tab-menu, .view-tab.collapse.in { display: block !important; } .view-tab > li { float: none; margin-bottom: 0; margin-left: 0; } .view-tab > li:first-child { margin-left: 0; } .view-tab > li.active { border: 0; } .view-tab > li > a { margin-right: 0; border-radius: 0; } } @media screen and (width: 1024px) { h1.h1-title.title { font-size: 22px; } .stock-followed { margin-left: -90px; } .stock-viewed > a { padding-left: 0 !important; } .stock-cell > div.text-bold { margin-right: 80px; } .stock-cell > div.text-bold > span { display: inline-block; margin: 0; } .stock-row-right.row-2 > div { font-size: 13px; } ul.nav.nav-pills.nav-profile > li > a { padding-left: 4px !important; padding-right: 0 !important; } [lang=vi-VN] .stock-followed { margin-left: -255px; } [lang=en-US] .stock-cell > h4 { margin-right: 180px; } [lang=en-US] .sector-level { margin-right: 70px; } } .div-title-link { padding: 8px 10px 7px; } #ul-top-menu .title-link { font-size: 12px; color: #545b66; } #ul-top-menu .title-link:hover { color: #015096; } #header-news .title-link, .navbar-login .title-link { color: #545b66; } #header-news .title-link:hover, .navbar-login .title-link:hover{ color: #015096; } #request-upgrade-account-popup { z-index: 1052; } #request-upgrade-account-popup .modal-content { background: #E6EEF7; } #img-warning-request-upgrade-account { width: 25px; height: 22px; } .title-header-popup { background: #1C579B; color: white; padding: 5px; } #popup-messenge .content-data { word-break: break-word; padding: 10px; } .part-center { margin: 0 auto; } a.notification { position: relative; display: inline-block; /*height: 25px; width: 25px; background: url('/content/images/bell.png');*/ height: 20px; width: 20px; background: url('/content/images/thong-bao.svg'); background-size: contain; background-repeat: no-repeat; text-decoration: none; } .num { border-radius: 6px; background-color: red; position: absolute; right: 0; top: 5px; color: #fff; width: 13px; height: 13px; text-align: center; font-size: 10px; display: none; } .navbar-login { display: flex; align-items: center; /*padding-top: 6px;*/ position: relative } .navbar-login .notification { margin-right: 3px; } .divAccountInfo { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; margin-left: 8px; } #notification-popup { border: 1px solid #a8bdd9; width: 400px; height: 65vh; position: absolute; background-color: #fff; /*padding: 5px;*/ z-index: 101; left: -360px; top: 30px; display: none; font-size: 14px; border-radius: 4px; box-shadow: 0 1px 10px #999; } #notification-detail .modal-dialog { width: 768px; } .tab-notification li { margin-bottom: 5px; cursor: pointer; } .tab-notification a { width: 100%; } .tab-notification a:hover { color: red; border-color: #fff !important; background-color: #fff !important; } .notification-active { font-weight: 700; } #notification-popup .content { padding: 0; overflow: auto; height: 58vh; display: none; } .notification-row { height: auto; cursor: pointer; } .notification-row .image { width: 50px; height: 50px; } .notification-row img { width: 50px; height: auto; max-height: 50px; margin-top: 4px; } .notification-row .detail { width: 100%; padding-left: 5px; } .notification-row .time { width: 100%; text-align: right; padding-right: 5px; font-style: italic; } /* quay ngang support min */ @media only screen and (max-height: 320px) { #notification-popup { height: 80vh; } #notification-popup .content { height: 85%; } } .content-middle { text-overflow: ellipsis; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .noidung { cursor: pointer; } #notification-popup .nav-tabs { border: none; } .dotted-gradient-notify { background-image: linear-gradient(to right, #ccc 100%, rgba(255, 255, 255, 0) 10%); background-position: top; background-size: 5px 1px; background-repeat: repeat-x; padding: 6px 0 4px 0; } #notification-detail .content-popup, #notification-detail .modal-content { background-color: #bdd7ee; } .not-seen { font-weight: 700; } .seen-row { opacity: 0.5; } #notification-detail #content { overflow: auto; max-height: 568px } #notification-detail #content #detail { width: 95%; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; } .event-summary { font-size: 15px; font-weight: 700; color: #005294; } .event-detail, .event-document { margin-top: 15px } .notification-loading { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: none; color: #286090; } @media only screen and (max-width: 736px) { #notification-popup { width: 100%; left: 0; top: 73px; } #notification-detail .modal-dialog { width: 100% } #notification-detail #content { max-height: 90vh; } } /* quay ngang */ @media only screen and (max-height: 540px) { #notification-popup { height: 75vh; } #notification-detail #content { max-height: 80vh; } } @media only screen and (min-width: 812px) { .common-extensions { display: none; } } /* ipad nhỏ */ @media only screen and (min-width: 1024px) and (max-width: 1024px) { .navbar-login { padding: 3px 3px 3px 0; } #login-info-popup { left: -10px !important; } } .navbar-top .fa-shopping-cart { font-size: 18px; } #notification-popup ::-webkit-scrollbar { width: 4px; } /* Track */ #notification-popup ::-webkit-scrollbar-track { display: none; } /* Handle */ #notification-popup ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; /* background: rgba(255,0,0,0.8); */ -webkit-box-shadow: inset 0 0 10px #ccc; } .text-multiline-blur-permission { padding-top: 4px; word-wrap: break-word; color: #666664; letter-spacing: 3px; vertical-align: middle; } .text-blur-permission { /*display: table-cell;*/ padding-top: 4px; word-wrap: break-word; color: #666664; letter-spacing: 3px; vertical-align: middle; /*text-shadow: 0 0 5px rgba(0,0,0,0.5);*/ } .hide-data-eye-icon { color: #666664; text-decoration: none; cursor: pointer; } @media only screen and (max-width: 320px) { .navbar-header .top-logo { width: 120px; } } @-moz-document url-prefix() { .custom-menu-scrollbar { scrollbar-width: thin; scrollbar-color: #b6b7b766 #efefef; } } .custom-menu-scrollbar::-webkit-scrollbar { width: 7px; } .custom-menu-scrollbar::-webkit-scrollbar-track { border-radius: 10px; background-color: #efefef; } .custom-menu-scrollbar::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #b6b7b766; } .custom-menu-scrollbar::-webkit-scrollbar-thumb:hover { background: #b6b7b7; } .dropdown-menu-scroll{ max-height: 400px; overflow: auto; } .group--tutorial{ position: relative; } .dropdown-menu--tutorial { display: none; flex-direction: column; width: max-content; position: absolute; text-align: left; z-index: 10; right: 0; background-color: #fff; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } .dropdown-menu--tutorial-item { cursor: pointer; padding: 0px 15px; border-bottom: solid 1px var(--border-color-primary); padding-top: 10px; padding-bottom: 8px; color: var(--color-text-menu); background-color: var(--bg-secondary); } .dropdown-menu--tutorial-item:hover { background-color: #f8f9fa !important; color: #3699ff !important; } .group--tutorial:hover .dropdown-menu--tutorial { display: flex; } .font-13 { font-size: 13px; } .news-stock-container { background-color: #f7f8fa; } #popup-menu-mobile .option-theme-mode { position: absolute; top: 0; right: 30px; padding: 5px; display: none; } #popup-menu-mobile .option-theme-mode[data-mode="light"] > img { content: url("/content/images/icons/icon-light-mode.svg"); filter: brightness(0.3); } #popup-menu-mobile .option-theme-mode[data-mode="dark"] > img { content: url("/content/images/icons/icon-dark-mode.svg"); } #modal-comment .modal-body, #modal-comment-right .modal-body, #modal-comment-right .modal-footer, #modal-comment .modal-footer, #modal-buydata .modal-body, #modal-buydata-right .modal-body, #modal-buydata .modal-footer, #modal-buydata-right .modal-footer { background-color: var(--bg-primary); } .modal-footer { border-top: 1px solid var(--border-color-primary); } #post-comment input, #post-buy input{ background-color: var(--bg-secondary); } /* Chỉ đổi thành 16px nếu là iOS */ .is-ios input, .is-ios select, .is-ios textarea { font-size: 16px !important; } @media (max-width: 575px) { .ats-overlay-bottom-wrapper-rendered { bottom: 53px !important; } } html { scroll-behavior: smooth; scroll-padding-top: 80px; } .chart-content .nav.nav-pills, .branch-content .nav.nav-pills { margin-bottom: 10px; } .chart-content .nav.nav-pills > li > a, .branch-content .nav.nav-pills > li > a { padding-bottom: 5px; } .highchart-container { min-height: 400px; display: flex; } .expand-all { max-height: none !important; } .img-block { display: inline-block; margin-right: 20px; margin-bottom: 15px; } .index-block { width: 220px; display: inline-block; margin-right: 15px; margin-bottom: 15px; text-align: center; padding: 15px 0; } .index-block > div { margin-top: 0; margin-bottom: 10px; height: 100px; } .index-block h2, .index-block h3 { margin: 0; padding-top: 10px; padding-bottom: 10px; text-transform: uppercase; } .index-block h3 { height: 50px; overflow: hidden; font-size: 16px; font-weight: 700; } .sector-content .bg-up { background-color: #008000; } /* .sector-content .bg-up:hover { background-color: #43A047; }*/ .bg-up a, .bg-down a { color: #fff; } .sector-content .bg-down { background-color: #FF0000; } /* .sector-content .bg-down:hover { background-color: red; }*/ .sector-content .bg-stand { background-color: #FFA60C; } .nav-pills > li > a { padding-left: 0; } .i-rate { min-height: 77px; } .i-rate > h5 { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ccc; } .i-rate > img { float: left; } .i-rate > div { text-align: right; margin: auto; } .heatmap-action .ceiling { background-color: #860D98; } .heatmap-action .increase { background-color: #009112; } .heatmap-action .unchange { background-color: #FFA60C; } .heatmap-action .decrease { background-color: #D50100; } .heatmap-action .floor { background-color: #0A8AE3; } .slick-up, .slick-down, .slick-next, .slick-prev { width: 30px; background: #fff; border: 1px solid #ddd; z-index: 1; } .slick-prev { right: 60px; } .slick-next { right: 30px; } .slick-up, .slick-down { position: absolute; bottom: -5px; right: 0 } .sector-content.un-slick .index-block, .sector-content .index-block { /*width: 215px;*/ } div#request-login { display: none; background-color: #deebf7; position: fixed; top: 20%; left: 50%; z-index: 999; border-radius: 20px; border: 1px solid #70ad47; height: 170px; width: 330px; transform: translate(-50%, -20%); } div#request-login > div.btnclose { background-color: #646464; color: #fff; width: 15px; height: 15px; float: right; margin-top: 6px; margin-right: 5px; cursor: pointer; } /* ----------------- */ /* DIALOG FULLSCREEN */ .dialog-fullscreen { background-color: #afafaf; width: 100%; height: 100%; position: fixed; z-index: 145; top: 0px; left: 0px; opacity: 0.2; display: none; } /*----------*/ /* Top navigation header */ .nav-header-container { display: flex; align-items: center; height: 40px; width: 100%; overflow-x: auto; position: fixed; top: 0; left: 0; transform: translateY(-60px); border-bottom: 1px solid #e0e3eb; background-color: #fff; z-index: 98; transition: transform .3s ease-in-out; font-family: Roboto, sans-serif; font-size: 14px; font-weight: 400; } .nav-header-container::-webkit-scrollbar { width: 0; height: 0; } .nav-header-container--show { top: 38px; transform: translateY(0px); } @media screen and (max-width: 991px) { .nav-header-container--show { top: 48px; z-index: 25; } } .nav-header-home { display: flex; align-items: center; } .nav-item { display: inline-block; color: #262627; padding: 5px 12px; text-align: center; white-space: nowrap; cursor: default; transition: color .3s; } .nav-item:hover { color: #262627; background: #ededed; border: #0000; border-radius: 50px; } .nav-item--active { color: #0280ea !important; font-weight: 500; } .nav-item--active:hover { color: #0280ea; } .trade-exchange-content .img-ethbtc { width: 34px; } #currency-content .i-rate > a, #commedity-content .i-rate > a { float: left; } /* ----- */ /* MEDIA SCREEN */ @media screen and (max-width: 319px) { .sector-content .index-block { width: 100%; } .currency-title { float: left; } } @media screen and (min-width: 370px) and (max-width: 400px) { .nav-label.text-uppercase { font-size: 13px; padding-right: 0; margin-bottom: -1px; padding-top: 13px; } .sector-content.un-slick .index-block, .sector-content .index-block { /*width: 103px;*/ } .sector-content .index-block h3 { font-size:13px; line-height:20px; } .sector-content .index-block h2 { font-size: 24px; } } @media screen and (min-width: 401px) and (max-width: 766px) { .sector-content.un-slick .index-block, .sector-content .index-block { /*width: 116px;*/ } .sector-content .index-block h3 { font-size: 13px; line-height: 20px; } .sector-content .index-block h2 { font-size: 24px; } } @media screen and (max-width: 767px) { .owner-content > div { display: block !important; } .i-rate > div { padding-left: 60px; } .i-rate > img { margin-left: 10px; } .heatmap-action ul.list-inline li { width: 28px; text-align: center; padding-left: 0; padding-right: 0; margin-right: 3px; } .heatmap-action input[type=text] { height: 30px; } .slick-next, .slick-prev { position: absolute; top: 0; margin-top: -40px; } .home-filter > .form > .form-group > .radio{ margin-left: 0; } } @media screen and (min-width: 768px) { .i-rate > div { padding-left: 60px; } .index-block, .index-block { margin-bottom: 25px; } .chart-block .slick-next, .chart-block .slick-prev { position: absolute; bottom: -15px; } .sector-content .slick-next, .sector-content .slick-prev { position: absolute; bottom: -5px; } } @media screen and (width: 768px) { .i-rate > div { padding-left: 40px; } } @media screen and (max-width: 912px){ .nav-header-container { /*display: none;*/ } } @media screen and (min-width: 1200px) { .i-rate > div { padding-left: 60px; } } .index-block h3 span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding-left: 5px; padding-right: 5px; height: fit-content; } /*=== Style for container ===*/ /* .container { width: 90%; } @media screen and (max-width: 1440px) { .container { width: 95%; } } @media screen and (max-width: 1366px) { .container:not(.page-header-content > .container) { width: 100%; } } */ /* Default: Mobile-first approach */ .container { padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; width: 100%; } /* Từ 768px trở lên: padding 2 bên 20px */ @media (min-width: 768px) { .container { padding-left: 20px; padding-right: 20px; } } /* Từ 1440px trở lên: cố định chiều rộng 1350px, bỏ padding */ @media (min-width: 1440px) { .container { width: 1350px; padding-left: 0; padding-right: 0; } } /* Từ 1920px trở lên: cố định chiều rộng 1710px */ @media (min-width: 1920px) { .container { width: 1710px; } } /*=== End style for container ===*/ .top-stock-header { display: flex; align-items: center; justify-content: space-between; } .box-main-title { color: var(--color-text-primary); font-family: Helvetica; font-weight: 700; font-size: 26px; line-height: 100%; display: flex; align-items: center; gap: 8px; width: fit-content; } .box-main-title > i { font-size: 30px; } .box-main-btn { display: flex; gap: 5px; justify-content: center; align-items: center; height: 30px; padding: 0 20px; border-radius: 15px; border: 1px solid var(--border-color-secondary); color: var(--color-text-primary); background-color: var(--bg-surface); font-weight: 400; cursor: pointer; } .box-main-btn:hover { color: #fff; background-color: #0280EA; border-color: #0280EA; } .box-main-btn__img--active { display: none; } .box-main-btn:hover .box-main-btn__img--active { display: block; } .box-main-btn:hover .box-main-btn__img { display: none; } .box-sub-title { font-family: Helvetica; font-weight: 400; font-size: 18px; line-height: 100%; color: var(--color-text-primary); } .box-btn-group { display: flex; height: 30px; align-items: center; overflow: hidden; } .box-btn-group::-webkit-scrollbar { width: 0; height: 0; } @media (hover: none) { .box-btn-group { overflow: auto; } .box-btn-group::-webkit-scrollbar { height: 0; } } .box-btn { background-color: var(--bg-primary); flex: 1; display: flex !important; justify-content: center; align-items: center; color: var(--color-text-muted); border: none; box-shadow: none !important; position: relative; height: 100%; font-family: Helvetica; font-weight: 400; font-size: 13px; line-height: 100%; padding: 0 10px; margin: 0px 2px; border-radius: 5px; gap: 3px; } .box-btn:hover { background-color: #f3f3f3; } .box-btn.active { background-color: var(--bg-tertiary) !important; box-shadow: none !important; font-weight: 400; border-color: var(--bg-tertiary) !important; color: var(--color-text-primary); } .box-btn-separate { width: 1px; height: 15px; background-color: #00000026; } .box-btn_tooltip { width: 12px; height: 12px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid var(--border-color-surface); font-size: 9px; } .box-btn.active .box-btn_tooltip { border-color: var(--border-color-muted); } .table-top-stock { font-family: Helvetica; font-weight: 400; font-size: 13px; line-height: 100%; color: var(--color-text-muted); } .table-top-stock thead tr { background-color: var(--bg-primary); height: 40px; } .table-top-stock thead tr th { color: var(--color-text-muted); font-size: 13px; line-height: 100%; font-weight: 400; } .table-top-stock tr td { border-top: none !important; border-bottom: 1px solid var(--border-color-secondary); } .table-top-stock tr > td:nth-child(2) { font-weight: 700; } .table-top-stock a.title-link { color: var(--color-text-muted); } .table-top-stock a.title-link:hover { color: #0280EA; } .top-stock-note { font-size: 12px; font-weight: 400; line-height: 15px; color: #666; } .table-top-stock--unit { font-size: 12px; font-weight: 500; font-style: italic; margin-top: 3px; } .foreign-chart-opt { display: flex; gap: 10px; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; } .select-box-group { display: flex; flex-direction: column; gap: 8px; } .select-box-label { font-family: Helvetica; font-size: 13px; font-weight: 400; color: #666; } .select-box { position: relative; } .select-box--active { width: 250px; height: 30px; border-radius: 5px; background-color: var(--bg-secondary); border: 1px solid #00000026; display: flex; align-items: center; padding: 0 12px; justify-content: space-between; color: var(--color-text-tertiary); font-size: 13px; line-height: 100%; cursor: pointer; } .select-box--active > i { font-size: 18px; } .select-box__dropdown { display: none; position: absolute; z-index: 10; min-width: 220px; width: 100%; border: 1px solid #00000026; background-color: var(--bg-surface); border-radius: 0 0 10px 10px; margin-top: 3px; } .select-box__dropdown-item { font-size: 13px; font-weight: 400; color: var(--color-text-tertiary); padding: 0 15px; cursor: default; } .select-box__dropdown-item:hover { background-color: var(--bg-row-active-secondary); color: var(--color-text-primary); } .select-box__dropdown-item--active { background-color: var(--bg-row-active-secondary); color: var(--color-text-primary); } .select-box__dropdown-item__content { border-bottom: 1px dotted var(--border-color-secondary); padding: 10px 0; } .select-box__dropdown .select-box__dropdown-item:last-child .select-box__dropdown-item__content { border-bottom: none; } .select-box:hover .select-box--active { color: var(--color-text-primary); background-color: var(--bg-tertiary); } .trading-search-box-group { } .trading-search-box { position: relative; /*width: 250px;*/ height: 30px; border-radius: 5px; border: 1px solid var(--border-color-secondary); background-color: var(--bg-secondary); display: flex; align-items: center; gap: 5px; padding: 0 10px; } .trading-search-box:focus-within { border-color: #66afe9; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } /*.trading-search-dropdown { display: none; margin-top: 3px; position: absolute; min-width: 250px; width: fit-content; height: fit-content; background-color: #fff; box-shadow: 0px 2px 5px #0c0b0b59; z-index: 10; } .trading-search-box:focus-within + .trading-search-dropdown, .trading-search-dropdown:hover { display: block; }*/ .trading-search-box > i { color: #666; } .trading-search-box > input { outline: none; height: 100%; width: 100%; border: none; background-color: var(--bg-secondary); } .trading-opt-btn-group { display: flex; gap: 10px; align-items: center; } .trading-opt-btn { height: 30px; width: fit-content; border-radius: 5px; padding: 0 12px; background-color: var(--bg-surface); border: 1px solid #00000026; display: flex; justify-content: center; align-items: center; font-size: 13px; line-height: 100%; font-weight: 400; color: var(--color-text-tertiary); cursor: pointer; } .trading-opt-btn--active { background-color: var(--bg-tertiary); color: var(--color-text-primary); cursor: default; } .sector-content, .sector-content .slick-track { display: flex; gap: 25px; flex-wrap: nowrap; } .un-slick.sector-content { flex-wrap: wrap; } .sector-map-item { min-width: 150px; width: calc(calc(100% - 125px) / 6); max-width: 280px; height: 130px; border-radius: 15px; border: 1px solid #00000026; display: inline-block; margin-right: 0; margin-bottom: 0; text-align: center; padding: 20px; flex-grow: 1; } .sector-map-item__content { height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: #ddd !important; } .sector-map-item__content--name { font-size: 16px; font-weight: 700; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .sector-map-item__content--value { font-family: Helvetica; font-weight: 400; font-size: 30px; line-height: 100%; } .sector-map-item a:hover { opacity: 0.8; color: #fff !important; } .sector-map-item--default { border: none; } .home__nav-bar-group { display: flex; gap: 15px; align-items: center; } .home__nav-bar-tab { font-family: Helvetica; font-size: 18px; font-weight: 400; line-height: 100%; text-align: left; color: var(--color-text-tertiary); height: fit-content; cursor: pointer; } .home__nav-bar-tab--active { color: var(--color-text-primary); cursor: default; font-weight: 700; } .home__nav-bar-separate { width: 2px; height: 15px; background-color: var(--border-color-secondary); } .sector-line-group { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .sector-opt-group { display: flex; gap: 6px; margin-left: auto; } @media screen and (max-width: 1919px) { .sector-map-item { height: 105px; padding: 15px; } .sector-map-item__content--name { font-size: 15px; } .sector-map-item__content--value { font-size: 26px; } .sector-content, .sector-content .slick-track { gap: 15px; } } @media screen and (max-width: 1199px) { .sector-content, .sector-content .slick-track { /*gap: 18px;*/ } .sector-map-item { width: calc(calc(100% - 75px) / 6); } } @media screen and (max-width: 799px) { .sector-content, .sector-content .slick-track { gap: 10px; } .sector-map-item { min-width: 110px; width: calc(calc(100% - 20px) / 3); height: 85px; padding: 10px; } .sector-map-item__content--name { font-size: 13px; } .sector-map-item__content--value { font-size: 24px; } } .asset-box { display: flex; gap: 20px; flex-wrap: wrap; } .asset-item-group { display: flex; flex-direction: column; gap: 20px; } .asset-box .owl-dots { text-align: center; margin-top: 10px; } .asset-box .owl-dot { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border: 1px solid #000000; border-radius: 50%; transition: background 0.3s ease; } .asset-box .owl-dots .owl-dot:only-child { display: none; } .asset-box .owl-dot:hover { background-color: #D9D9D9; } .asset-box .owl-dot.active { background-color: #D9D9D9; border-color: #D9D9D9; } .asset-item { height: 100px; /*width: 260px;*/ min-width: 220px; max-width: 260px; border: 1px solid var(--border-color-secondary); border-radius: 15px; display: flex; padding: 10px 15px; justify-content: space-between; align-items: center; gap: 15px; font-family: Helvetica; font-size: 13px; background-color: var(--bg-surface); } .asset-item__info { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; max-width: 60px; } .asset-item__info-symbol { /*width: 49px; height: 49px;*/ } .asset-item__info-label { text-align: center; color: var(--color-text-primary); font-size: 13px; } .asset-item__data { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-grow: 1; } .asset-item__data-chart { border-bottom: 1px dashed var(--border-color-secondary); padding-bottom: 2px; width: 100%; max-width: 200px; } .asset-item__data-chart > img { width: 100%; height: 45px; } .theme-dark .asset-item__data-chart > img { /*filter: invert(0.82) hue-rotate(180deg);*/ } .asset-item__data-info { display: flex; gap: 3px 10px; } .asset-item__data-index { font-weight: 400; color: var(--color-text-primary); display: flex; align-items: center; gap: 5px; width: 100%; justify-content: flex-end; } .asset-item__data-index .fa-caret-up { color: #009112; font-size: 16px; } .asset-item__data-index .fa-caret-down { color: #FF0000; font-size: 16px; } .asset-item__data-change { font-weight: 400; color: #FFA60C; } .asset-item__data-change--up { color: #009112; } .asset-item__data-change--down { color: #FF0000; } @media screen and (max-width: 1199px) { .asset-box { gap: 10px; } .asset-item { gap: 10px; padding: 5px 10px; /*width: 100%;*/ } .asset-item__info-symbol { width: 35px; } } @media screen and (max-width: 767px) { .asset-item { width: 240px; gap: 8px; padding: 5px 8px; } .asset-item__data-info { flex-wrap: wrap; justify-content: flex-end; padding-right: 8px; } .asset-item__data-chart > img { height: 38px; } .select-box--active { width: 100%; min-width: 70px; max-width: 120px; } .m-t2--sm { margin-top: 20px; } } @media screen and (max-width: 480px) { .select-box-group, .trading-search-box-group { flex-grow: 1; flex-basis: 0; } .select-box--active { max-width: 100%; } .trading-opt-btn { border: none; background-color: transparent; } .trading-search-box-group .select-box__dropdown { right: 0; } } .data-timestamp-box { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 120px; } .data-timestamp-box > img { height: 15px; width: 15px !important; opacity: 0.5; } .theme-dark .data-timestamp-box > img { content: url("/content/images/Vietstock_logo_darkmode_80x80.svg"); } .note-data-timestamp { font-family: Helvetica; font-weight: 400; font-size: 12px; line-height: 100%; text-align: right; color: #666666; } .trading-btn-box { display: flex; justify-content: center; align-items: center; padding-bottom: 10px; gap: 10px; border-bottom: 1px dashed var(--border-color-secondary); font-family: Helvetica; font-weight: 400; font-size: 13px; line-height: 100%; text-align: center; color: #666; } .trading-btn-item { width: 70px; height: 25px; border: 1px solid var(--border-color-secondary); border-radius: 15px; /*background-color: #fff;*/ display: flex; justify-content: center; align-items: center; cursor: pointer; } .trading-btn-item--active { background-color: var(--bg-tertiary); border-color: var(--bg-tertiary); color: var(--color-text-primary); cursor: default; } .branch-content { /*margin-top: 100px;*/ } .custom-stock-trading-table { border-collapse: separate; width: 100%; font-family: Helvetica; font-weight: 400; font-size: 13px; color: var(--color-text-muted); } .custom-stock-trading-table th { text-align: right; padding: 8px 5px; border-bottom: 1px solid var(--border-color-secondary); font-weight: 400; min-width: 70px; } .custom-stock-trading-table td { text-align: right; padding: 6px 5px; border-bottom: 1px solid var(--border-color-secondary); } .custom-stock-trading-table .stock-code { text-align: left; padding-left: 10px; font-weight: 700; position: sticky; left: 0; background-color: var(--bg-primary); } .custom-stock-trading-table th.stock-code { font-weight: 400; min-width: 55px; } .custom-stock-trading-table .stock-code a { color: var(--color-text-muted); } .custom-stock-trading-table .stock-code a:hover { color: #0280EA; } .custom-stock-trading-table .column-opt-box { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .custom-stock-trading-table tr:hover td { background-color: var(--bg-row-active-primary); } .custom-trading-tbl__header--sticky thead { position: sticky; top: 0; background-color: var(--bg-primary); z-index: 1; } /* BEGIN CSS custom tooltip */ .custom-tooltip__tips { font-family: Helvetica; padding: 10px; margin: 0; border: 1px solid #efefef !important; background-color: #335295; opacity: 1; box-shadow: none; border-radius: 5px; color: #fff; font-weight: 400; font-size: 14px; max-width: 800px; } .custom-tooltip__tips:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; } .custom-tooltip__tips.tooltip-top:after { bottom: -6px; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0 6px; border-color: #335295 transparent transparent transparent; } .custom-tooltip__tips.tooltip-bottom:after { top: -6px; left: 50%; transform: translateX(-50%); border-width: 0 6px 6px 6px; border-color: transparent transparent #335295 transparent; } .custom-tooltip__tips.tooltip-left:after { top: 50%; right: -6px; transform: translateY(-50%); border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #335295; } .custom-tooltip__tips.tooltip-right:after { top: 50%; left: -6px; transform: translateY(-50%); border-width: 6px 6px 6px 0; border-color: transparent #335295 transparent transparent; } .custom-tooltip__tips.tooltip-top-left:after { bottom: -6px; right: 12px; transform: none; border-width: 6px 6px 0 6px; border-color: #335295 transparent transparent transparent; } .custom-tooltip__tips.tooltip-top-right:after { bottom: -6px; left: 12px; transform: none; border-width: 6px 6px 0 6px; border-color: #335295 transparent transparent transparent; } .custom-tooltip__tips.tooltip-bottom-left:after { top: -6px; right: 12px; transform: none; border-width: 0 6px 6px 6px; border-color: transparent transparent #335295 transparent; } .custom-tooltip__tips.tooltip-bottom-right:after { top: -6px; left: 12px; transform: none; border-width: 0 6px 6px 6px; border-color: transparent transparent #335295 transparent; } /* END CSS custom tooltip */ .chart-box-surround { border-radius: 10px; border: 1px solid transparent; margin-top: 30px; padding: 3px; } .chart-box-surround:hover { border: 1px solid var(--border-color-secondary); } .box-spacing { margin-top: 100px; } .switch-button { width: 40px; height: 20px; background-color: var(--bg-primary); border-radius: 15px; cursor: pointer; border: 1px solid var(--border-color-tertiary); position: relative; display: none; } .switch-button::after { content: ""; height: 20px; width: 20px; border-radius: 50%; transition: all 0.3s linear; position: absolute; background-color: var(--bg-tertiary); border: 1px solid #00000026; top: -1px; } .switch-button[status-toggle=left]::after { left: -1px; } .switch-button[status-toggle=right]::after { left: 20px; } .box-title__gap, .content-title__gap { margin-top: 30px; } @media screen and (max-width: 1919px) { .box-spacing { margin-top: 70px; } .box-title__gap, .content-title__gap { margin-top: 25px; } } @media screen and (max-width: 767px) { .box-spacing { margin-top: 50px; } .box-main-title { font-size: 24px; } .box-sub-title { font-size: 16px; } .box-title__gap, .content-title__gap { margin-top: 20px; } } @media screen and (max-width: 480px) { .switch-button { display: block; } } .top-stock-box { white-space: nowrap; } .top-stock-box::-webkit-scrollbar { width: 5px; height: 5px; } .top-stock-box::-webkit-scrollbar-track { border-radius: 10px; background-color: #D9D9D9; } .top-stock-box::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #A4A4A4; } .flash-green { background-color: var(--bg-flash-green) !important; /*color: #fff;*/ } .flash-green .up, .flash-green .txt-green, .flash-green b.txt-green, .flash-green .text-green, .flash-green b.text-green, .flash-green .dn, .flash-green .txt-red, .flash-green b.txt-red, .flash-green .text-red, .flash-green b.text-red { /*color: #fff;*/ } .flash-red { background-color: var(--bg-flash-red) !important; /*color: #fff;*/ } .flash-red .up, .flash-red .txt-green, .flash-red b.txt-green, .flash-red .text-green, .flash-red b.text-green, .flash-red .dn, .flash-red .txt-red, .flash-red b.txt-red, .flash-red .text-red, .flash-red b.text-red { /*color: #fff;*/ } .flash-orange { background-color: var(--bg-flash-orange) !important; /*color: #fff;*/ } .flash-orange .up, .flash-orange .txt-green, .flash-orange b.txt-green, .flash-orange .text-green, .flash-orange b.text-green, .flash-orange .dn, .flash-orange .txt-red, .flash-orange b.txt-red, .flash-orange .text-red, .flash-orange b.text-red { /*color: #fff;*/ } .theme-dark .flash-green, .theme-dark .flash-green .up, .theme-dark .flash-green .txt-green, .theme-dark .flash-green b.txt-green, .theme-dark .flash-green .text-green, .theme-dark .flash-green b.text-green, .theme-dark .flash-green .dn, .theme-dark .flash-green .txt-red, .theme-dark .flash-green b.txt-red, .theme-dark .flash-green .text-red, .theme-dark .flash-green b.text-red { color: #fff !important; } .theme-dark .flash-red, .theme-dark .flash-red .up, .theme-dark .flash-red .txt-green, .theme-dark .flash-red b.txt-green, .theme-dark .flash-red .text-green, .theme-dark .flash-red b.text-green, .theme-dark .flash-red .dn, .theme-dark .flash-red .txt-red, .theme-dark .flash-red b.txt-red, .theme-dark .flash-red .text-red, .theme-dark .flash-red b.text-red { color: #fff !important; } .theme-dark .flash-orange, .theme-dark .flash-orange .up, .theme-dark .flash-orange .txt-green, .theme-dark .flash-orange b.txt-green, .theme-dark .flash-orange .text-green, .theme-dark .flash-orange b.text-green, .theme-dark .flash-orange .dn, .theme-dark .flash-orange .txt-red, .theme-dark .flash-orange b.txt-red, .theme-dark .flash-orange .text-red, .theme-dark .flash-orange b.text-red { color: #fff !important; } .info-chart-trading { height: 50px; display: flex; justify-content: space-between; align-items: center; padding-left: 50px; } .chart-trading-info__bottom { display: flex; justify-content: space-between; align-items: center; white-space: nowrap; gap: 30px; padding: 0 10px; height: 50px; } .legend-chart-trading-box { display: flex; align-items: center; gap: 30px; } @media screen and (max-width: 767px) { .info-chart-trading { padding-left: 15px; } .legend-chart-trading-box { gap: 20px; } } .legend-chart-trading__item { font-family: Helvetica; font-weight: 400; font-size: 12px; line-height: 100%; text-align: center; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .legend-chart-trading__item::before { content: ""; display: inline-block; height: 10px; width: 10px; border-radius: 50%; background-color: var(--color-point); } .legend-chart-trading__item--sell { --color-point: #D45A5A; } .legend-chart-trading__item--buy { --color-point: #4CAF50; } .legend-chart-trading__item--value { --color-point: #F19D22; position: relative; } .legend-chart-trading__item--value::after { content: ""; width: 18px; height: 2px; background-color: var(--color-point); position: absolute; transform: translateX(-4px); } .legend-chart-trading__item--blur { --color-point: #999; opacity: 0.5; } .sub-title-link { display: flex; gap: 5px; align-items: center; height: 18px; } .sub-title-link__icon { font-size: 24px; color: var(--color-text-primary); } .sub-title-link:hover .box-sub-title, .sub-title-link:hover .sub-title-link__icon { color: #1e70bf; } .hidden-scrollbar { scrollbar-width: none; } .hidden-scrollbar::-webkit-scrollbar { width: 0; height: 0; } .financialchart-content .chart-detail-view--legend { display: flex; flex-flow: row-reverse wrap; margin-top: 0.75rem; width: 100%; height: 36px; overflow-y: auto; direction: rtl; -webkit-box-align: end; align-items: end; } .financialchart-content .legend-item { width: 47%; margin-left: 1.5%; margin-right: 1.5%; } .financialchart-content .chart-legend-item--group { display: flex; flex-direction: row; -webkit-box-pack: center; justify-content: center; -webkit-box-align: inherit; align-items: inherit; cursor: pointer; direction: ltr; } .financialchart-content .chart-legend-item--icon { line-height: 1.5; font-size: 1rem; font-weight: 400; min-width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-top: 3px !important; } .financialchart-content .chart-legend-item--icon.chart-legend-typeChart--line { border-radius: unset; height: 2px; width: 20px; margin-top: 7px !important; } .financialchart-content .chart-legend-item--icon.chart-legend-typeChart--spline { border-radius: unset; height: 2px; width: 20px; margin-top: 7px !important; } .financialchart-content .chart-legend-item--name { margin-left: 0.5rem; display: flex; -webkit-box-align: center; align-items: center; text-align: left; min-width: calc(100% - 20px); max-width: calc(100% - 20px); padding-right: 0rem; color: rgb(33, 35, 46); } .financialchart-content .chart-legend-item--name span { margin: 0px; line-height: 1.5; font-size: 12px; font-weight: 400; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--color-text-primary); } .financialchart-box__list { display: flex; gap: 15px; flex-wrap: wrap; } .financialchart-box__item { min-width: 300px; flex-basis: 300px; /*padding: 10px;*/ padding: 10px 10px 15px 10px; border: 1px solid var(--border-color-primary); border-radius: 7px; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2); /*height: 390px;*/ height: fit-content; flex-grow: 1; background-color: var(--bg-muted); } .latest-news__options { display: flex; align-items: center; } .latest-news__options__item { font-family: Helvetica; font-weight: 400; font-size: 18px; line-height: 100%; color: #666; padding: 5px 20px; position: relative; display: flex; align-items: center; cursor: pointer; } .latest-news__options__item::after { content: ""; position: absolute; right: 0; height: 15px; width: 1px; background-color: #00000026; } .latest-news__options__item:last-child::after { content: none; } .latest-news__options__item:first-child { padding-left: 0; } .latest-news__options__item--active { color: #282828; cursor: default; } .latest-news__list { display: flex; gap: 30px; flex-wrap: wrap; } .latest-news__item { width: calc(calc(100% - 60px) / 3); display: flex; flex-direction: column; gap: 10px; justify-content: space-between; padding: 0 0 20px 0; border-bottom: 1px solid var(--border-color-secondary); } .latest-news__item__title { font-family: Helvetica; font-size: 16px; color: var(--color-text-muted); } .latest-news__item__time { font-family: Helvetica; font-weight: 400; font-size: 13px; color: #999; } @media screen and (max-width: 767px) { .latest-news__list { gap: 15px; } .latest-news__item { padding-bottom: 15px; width: 100%; } } .chart-trading-loading { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .latest-news__view-more-container { display: flex; margin-top: 15px; align-items: center; justify-content: center; } .theme-light { --color-text-primary: #282828; --color-text-secondary: #545b66; --color-text-tertiary: #666; --color-text-surface: #666; --color-text-muted: #282828; --color-text-gentle: #555; --color-text-soft: #282828; --color-text-active: #01579a; --color-text-menu: rgba(0, 0, 0, .87); --color-label-heatmap: #000; --border-color-header: #ecedee; --border-color-primary: #ddd; --border-color-secondary: #00000026; --border-color-tertiary: #00000026; --border-color-surface: #666; --border-color-muted: #666; --bg-vst: #01579B; --bg-vst-active: #fbfbfb; --bg-menu: #fff; --bg-menu-secondary: #fff; --bg-group-heatmap: #f0f0f0; --bg-primary: #fff; --bg-secondary: #F8F9FA; --bg-tertiary: #E1F5FE; --bg-surface: #fff; --bg-muted: #fff; --bg-row-active-primary: #ffe5bf; --bg-row-active-secondary: #ffe5bf; --bg-flash-green: #c4ffc4; --bg-flash-red: #ffcdcd; --bg-flash-orange: #ffeac5; --color-box-shadow-surface: #0c0b0b59; } .theme-dark { color-scheme: dark; } .theme-dark { --color-text-primary: #fff; --color-text-secondary: #999; --color-text-tertiary: #999; --color-text-surface: #fff; --color-text-muted: #999; --color-text-gentle: #999; --color-text-soft: #666; --color-text-active: #CCC; --color-text-menu: #fff; --color-label-heatmap: #fff; --border-color-header: #FFFFFF26; --border-color-primary: #FFFFFF26; --border-color-secondary: #FFFFFF26; --border-color-tertiary: #999; --border-color-surface: #999; --border-color-muted: #fff; --bg-vst: #062246; --bg-vst-active: #556C8B; --bg-menu: #2E2E2E; --bg-menu-secondary: #556C8B; --bg-group-heatmap: #2E2E2E; --bg-primary: #060606; --bg-secondary: #2E2E2E; --bg-tertiary: #999; --bg-surface: #2E2E2E; --bg-muted: #171717; --bg-row-active-primary: #2E2E2E; --bg-row-active-secondary: #999; --bg-flash-green: #4CAF50; --bg-flash-red: #D45A5A; --bg-flash-orange: #d69b41; --color-box-shadow-surface: #999999aa; } /*Darkmode*/ .theme-dark body { background-color: var(--bg-primary); color: var(--color-text-primary); } .theme-dark #ul-top-menu li:after { background-color: #fff; } .theme-dark .package-policy-icon-header { background-color: #2e2e2e; } .theme-dark .package-policy-icon-header img { content: url(/content/images/nang-cap-tai-khoan--dark-mode.svg); } .theme-dark .navbar-login .notification img, .theme-dark .mobile-notify .notificationMobile img { content: url(/content/images/thong-bao--dark-mode.svg); } .theme-dark .news-wrapper .inner ul li a { color: #fff; } .theme-dark .news-wrapper .inner ul li a:hover { color: #0280ea; } .theme-dark .tab-add-stock-button button { background-color: transparent; color: #666; } .theme-dark .tab-button--selected { background-color: #e1f5fe !important; } .theme-dark .tab-add-stock-button button:hover { background-color: #999 !important; color: #fff !important; } .theme-dark .theme-4 .footer { background-color: #2e2e2e; border-top-color: #ffffff26; color: #999; } .theme-dark .theme-4 .footer .single_contact3 { background-color: #060606; border-color: #ffffff26; } .theme-dark .theme-4 .widget-title { color: #fff; } .theme-dark .theme-4 .footer .single_fcontact a { color: #999; } .theme-dark .theme-4 .footer .single_contact3 h6 b { color: #fff; } .theme-dark .theme-4 .footer .single_contact3 p { color: #999; } .theme-dark .theme-4 .footer .single_footer_nav ul li a { color: #999; } .theme-dark .theme-4 .footer .single_more_news a { color: #999; } .theme-dark .theme-4 .footer .single_more_news p { color: #999; } .theme-dark .theme-4 .footer .more_newss { border-color: #666; } .theme-dark .news_letter { background-color: #060606; } .theme-dark ul.footer-info-company li { background-color: #060606; color: #999; border-color: #ffffff26; } .theme-dark .border_black { border-bottom-color: #666; } .theme-dark .theme-4 .footer .copyright { background-color: #060606; } .theme-dark .theme-4 .footer .copyright ul li a { color: #999; } .theme-dark hr.horizontal-dottb { border-color: #666; } .theme-dark .theme-4 a { color: #999; text-decoration:none; } .theme-dark .option-tab--active { color: #fff; } .theme-dark .option-tab { border-right-color: #ffffff50; } .theme-dark .table-custom thead tr th { background-color: #060606; color: #999; } .theme-dark th.col-hover:hover { background-color: #2e2e2e !important; } .theme-dark .table > thead > tr > th { border-bottom: 2px solid #FFFFFF26; } .theme-dark .option-tab:not(.option-tab--active):hover { color: #999; } .theme-dark .table-row--sticky { background-color: #060606; } .theme-dark .table-custom tbody tr td { background-color: #060606; color: #999; border-color: #ffffff26; } .theme-dark .table-hover > tbody > tr:hover, .theme-dark .table-hover > tbody > tr:hover > td { background-color: #2E2E2E !important; } .theme-dark .stock-col-container > a { color: #bfbfbf; } .theme-dark .stock-relation__button-see-more { color: #999; border-color: #ffffff26; background-color: #2e2e2e; } .theme-dark .stock-relation__button-see-more:hover { background-color: #d9d9d9; color: #282828; border: none; } .theme-dark .menu-dropdown__header { background-color: #1e1e1e; border-bottom-color: #ffffff50; } .theme-dark .menu-dropdown { background-color: #2e2e2e; } .theme-dark .menu-dropdown__item { color: #999; } .theme-dark .menu-dropdown__item:hover { background-color: #4e4e4e; text-decoration: none; color: #aaa; } .theme-dark .menu-dropdown__header-text { color: #fff; } .theme-dark .custom-scrollbar-horz::-webkit-scrollbar-thumb { background-color: #4e4e4e; } .theme-dark .custom-scrollbar-horz::-webkit-scrollbar-track { background-color: #2c2c2c; } .theme-dark .main_menu { background-color: #060606; } .theme-dark #popup-menu-mobile { background-color: #060606; } .theme-dark #popup-menu-mobile .menu-group a { color: #fff; } .theme-dark #popup-menu-mobile img.imgUser { filter: brightness(5); } .theme-dark #popup-menu-close { content: url(/content/images/close--w.svg); } .theme-dark #breadcrumbMobileMenu { background-color: #2e2e2e; border-color: #ffffff26; } .theme-dark #breadcrumbMobileMenu .divhome .imgHome { border-color: #ffffff26; background-color: #666; } .theme-dark .right__bar-group span.close-bar-span:before { filter: brightness(5); } .theme-dark .wl-dropdown-menu { background-color: var(--bg-group-heatmap); border: 1px solid var(--border-color-primary); } .theme-dark .wl-menu-item:hover { background-color: var(--bg-primary); } .theme-dark #watchlistPanel .itemStock:hover { background-color: #2E2E2E; } .theme-dark #main-dropdownMenu img, .theme-dark .wl-dropdown-menu img { filter: invert(1); } .theme-dark #DescriptionPortfolioEdit input { background-color: var(--bg-secondary); } .theme-dark #watchListContent .item:hover { background-color: #2E2E2E; } .theme-dark .col-actions .icon-btn { background-color: var(--bg-tertiary); } .theme-dark th .col-option-name--active { color: #999; } .theme-dark .wl-input { color: #fff; } /*Darkmode*/ #watchlistPanel { width: 457px; height: 100vh; position: fixed; top: 0; right: -460px; background: var(--bg-primary) !important; border-left: 1px solid #ddd; transition: all 0.35s ease; z-index: 99; /*overflow-y: auto;*/ border: 1px solid var(--border-color-primary) !important; color: var(--color-text-primary) !important; color: #282828; display: flex; flex-direction: column; } .right__bar-group { background-color: var(--bg-primary) !important; border-left: solid 1px var(--border-color-primary) !important; /*display: none;*/ } #watchlistPanel .border-bottom { border-bottom: 1px solid var(--border-color-primary) !important; } #watchlistPanel .bg-light { --bs-bg-opacity: 1; background-color: var(--bg-group-heatmap) !important; } #watchlistPanel .itemStock { border-bottom: 1px solid var(--border-color-primary); } #watchList .stock-code, #watchListNews .stock-code { color: var(--color-text-primary); text-decoration: none; } #watchlistPanel .news-item { border-bottom: 1px solid var(--border-color-primary); } .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); } #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); } .nav-tabs.bg.view-tab.swipe-tabs, .bg { background-color: var(--bg-vst); } .modal-watchlistaddstock .modal-body { background-color: var(--bg-primary) !important; padding-top: 0px; border-radius: 0px 0px 10px 10px; } .modal-watchlistaddstock .modal-header { background-color: var(--bg-primary) !important; border-bottom: none; border-radius: 10px 10px 0px 0px; } .modal-watchlistaddstock table > tbody > tr > td { border-bottom: 1px solid var(--border-color-primary) !important; border-top: none; /*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) !important; } .add-stock-input-container { border-top: solid 1px var(--border-color-primary); border-bottom: solid 1px var(--border-color-primary); } .tab-add-stock-button button { border: 1px solid var(--border-color-primary); background-color: var(--bg-primary); } .tab-button--selected, .tab-add-stock-button button:hover { background-color: var(--bg-tertiary) !important; } /*select WatchList*/ .watchlist-trigger { border: solid 1px var(--border-color-primary) !important; } .watchlist-panel { background: var(--bg-primary) !important; } #watchListContent .item { border-bottom: 1px solid var(--border-color-primary) !important; color: var(--color-text-muted) !important; } .panel-footer { background-color: var(--bg-menu) !important; border: 1px solid var(--border-color-primary) !important; } .theme-dark .flash-green { background-color: #4CAF50 !important; } .theme-dark .flash-red { background-color: #D45A5A !important; } .theme-dark .flash-orange { background-color: #d69b41 !important; } .theme-dark #watchlistPanel .itemStock { border-bottom: 1px solid #FFFFFF26; } .theme-dark #divider { background-color: #FFFFFF26; border: 1px solid #FFFFFF26; } .theme-dark #divider:hover { background-color: #999; } .theme-dark #dividervertical { background-color: #FFFFFF26; border: 1px solid #FFFFFF26; } .theme-dark #dividervertical:hover { background-color: #999; } .theme-dark #watchList .stock-code, .theme-dark #watchListNews .stock-code { color: #fff; } .theme-dark #popup-add-stock .modal-content { background-color: #2e2e2e; } .theme-dark .add-stock-input-container { border-top: solid 1px #999; border-bottom: solid 1px #999; } .theme-dark .tab-add-stock-button button { border: 1px solid #999; } .theme-dark .modal-watchlistaddstock .note_enter { color: #fff; opacity:0.3; } .theme-dark #textVietstockMate { background-color: #2e2e2e; border-color: #ffffff26; color: #999; } .theme-dark #textVietstockMate::before { border-color: #ffffff26 transparent transparent transparent; } .theme-dark #textVietstockMate::after { border-color: #2e2e2e transparent transparent transparent; }