/* BienDong Stock Component Styles */

/* Container */
.bien-dong-container {
  width: 100%;
  height: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  background: white;
  border-radius: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

/* Header Section */
.bien-dong-header {
  align-self: stretch;
  padding-top: 4px;
  padding-bottom: 4px;
  background: var(--Background-White, white);
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
}

.bien-dong-title-wrapper {
  height: 20px;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: flex;
}

.bien-dong-title-indicator {
  width: 2px;
  height: 14px;
  background: var(--Primary-Brand, #2980B9);
}

.bien-dong-title {
  color: black;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 18px;
  word-wrap: break-word;
}

.bien-dong-search-wrapper {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
}

.bien-dong-search-inner {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.bien-dong-search-container {
  width: 292px;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  display: flex;
}

.bien-dong-search-box {
  flex: 1 1 0;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 6px;
  padding-bottom: 6px;
  background: var(--Background-Container, white);
  overflow: hidden;
  border-radius: 4px;
  outline: 1px var(--Border-Stroke-2, #D9D9D9) solid;
  outline-offset: -1px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
}

.bien-dong-search-input-wrapper {
  flex: 1 1 0;
  padding-right: 12px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
}

.bien-dong-search-placeholder {
  flex: 1 1 0;
  color: var(--Text-Text-Placeholder, #BFBFBF);
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  word-wrap: break-word;
}

.bien-dong-search-icon-wrapper {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

.bien-dong-search-icon {
  width: 16.08px;
  height: 16.08px;
  left: 1.96px;
  top: 1.96px;
  position: absolute;
  background: var(--Primary-Icon-Black, black);
}

/* Filter Section */
.bien-dong-filters {
  align-self: stretch;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  display: inline-flex;
}

.bien-dong-filter-item {
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  display: inline-flex;
}

.bien-dong-filter-label {
  align-self: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.bien-dong-filter-label-text {
  color: var(--Text-Text-Primary, black);
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
  word-wrap: break-word;
}

.bien-dong-filter-dropdown {
  align-self: stretch;
  height: 32px;
  padding-left: 8px;
  padding-right: 8px;
  background: var(--Background-Container, white);
  overflow: visible;
  border-radius: 4px;
  outline: 1px var(--Border-Border-2, #D9D9D9) solid;
  outline-offset: -1px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: inline-flex;
  position: relative;
  cursor: pointer;
}

.bien-dong-filter-value {
  flex: 1 1 0;
  height: 16px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: var(--Text-Text-88, rgba(0, 0, 0, 0.88));
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  word-wrap: break-word;
}

.bien-dong-filter-arrow {
  width: 16px;
  height: 16px;
  position: relative;
  overflow: hidden;
}

.bien-dong-filter-arrow-icon {
  width: 6.20px;
  height: 3.53px;
  left: 4.90px;
  top: 6.23px;
  position: absolute;
  background: var(--Primary-Icon-Black, black);
}

/* Dropdown Menu */
.bien-dong-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--Background-White, white);
  border: 1px var(--Border-Border-2, #D9D9D9) solid;
  border-radius: 4px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: none;
  overflow: hidden;
  min-width: 100%;
}

.bien-dong-dropdown-menu.show {
  display: block;
}

.bien-dong-dropdown-item {
  padding: 8px 12px;
  color: var(--Text-Text-Primary, black);
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  cursor: pointer;
  word-wrap: break-word;
  transition: background-color 0.2s;
}

.bien-dong-dropdown-item:hover {
  background-color: var(--Fill-colorFillQuaternary, rgba(0, 0, 0, 0.02));
}

.bien-dong-dropdown-item.selected {
  background-color: var(--Background-Blue, #E5EFF7);
  color: var(--Primary-Brand, #2980B9);
  font-weight: 500;
}

/* Tags Section */
.bien-dong-tags-container {
  align-self: stretch;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
}

.bien-dong-tags {
  align-self: stretch;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

.bien-dong-tag {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 4px;
  outline-offset: -1px;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: flex;
}

.bien-dong-tag-blue {
  background: var(--Background-Blue, #E5EFF7);
  outline: 1px var(--Primary-Border-Blue, #CADFEE) solid;
}

.bien-dong-tag-gray {
  background: var(--Fill-colorFillQuaternary, rgba(0, 0, 0, 0.02));
  outline: 1px var(--Border-Border-2, #D9D9D9) solid;
}

.bien-dong-tag-text-blue {
  color: var(--Primary-Brand, #2980B9);
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  word-wrap: break-word;
}

.bien-dong-tag-text-gray {
  color: var(--Text-Text-88, rgba(0, 0, 0, 0.88));
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  word-wrap: break-word;
}

/* Table Section - Old definitions removed, using new ones below */

/* Pagination Section */
.bien-dong-pagination {
  width: 100%;
  align-self: stretch;
  padding-top: 16px;
  padding-bottom: 16px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.bien-dong-pagination-container {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.bien-dong-pagination-buttons {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.bien-dong-pagination-button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.bien-dong-pagination-button-active {
  outline: 1px var(--Primary-Brand, #2980B9) solid;
  outline-offset: -1px;
}

.bien-dong-pagination-button-text {
  align-self: stretch;
  text-align: center;
  font-size: 14px;
  font-family: Inter;
  font-weight: 400;
  line-height: 22px;
  word-wrap: break-word;
}

.bien-dong-pagination-button-text-active {
  color: var(--Primary-Brand, #2980B9);
}

.bien-dong-pagination-button-text-default {
  color: var(--Text-Text-88, rgba(0, 0, 0, 0.88));
}

.bien-dong-pagination-arrow-icon-wrapper {
  width: 14px;
  height: 14px;
  position: relative;
  overflow: hidden;
}

.bien-dong-pagination-arrow-icon {
  width: 6.51px;
  height: 10.36px;
  top: 1.82px;
  position: absolute;
}

.bien-dong-pagination-arrow-icon-left {
  left: 3.39px;
  background: var(--Text-Text-Disabled, #BFBFBF);
}

.bien-dong-pagination-arrow-icon-right {
  left: 4.13px;
  background: var(--Text-Text-88, rgba(0, 0, 0, 0.88));
}

.bien-dong-pagination-select {
  align-self: stretch;
  padding-left: 12px;
  padding-right: 12px;
  background: var(--Background-Container, white);
  overflow: hidden;
  border-radius: 6px;
  outline: 1px var(--Border-Border-2, #D9D9D9) solid;
  outline-offset: -1px;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  display: flex;
}

.bien-dong-pagination-select-inner {
  height: 32px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
}

.bien-dong-pagination-select-text {
  color: var(--Text-Text-88, rgba(0, 0, 0, 0.88));
  font-size: 14px;
  font-family: Inter;
  font-weight: 400;
  line-height: 22px;
  word-wrap: break-word;
}

.bien-dong-pagination-select-icon-wrapper {
  width: 16px;
  height: 16px;
  position: relative;
  overflow: hidden;
}

.bien-dong-pagination-select-icon {
  width: 11.87px;
  height: 8px;
  left: 2.06px;
  top: 4px;
  position: absolute;
  background: var(--Text-Text-Placeholder, #BFBFBF);
}

/* Utility Classes */
.bien-dong-flex {
  display: flex;
}

.bien-dong-inline-flex {
  display: inline-flex;
}

.bien-dong-flex-column {
  flex-direction: column;
}

.bien-dong-align-stretch {
  align-self: stretch;
}

/* Container and Portlet Styles */
#second.bien-dong-wrapper {
  margin: 4px 2px !important;
  border-radius: 4px;
}

.portlet.box.blue.bien-dong-portlet {
  height: calc(100% - 0px);
  overflow: clip;
}

.portlet-body.bien-dong-portlet-body {
  flex: 1;
  overflow: hidden;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
}

/* Search Icon */
.bien-dong-search-icon-img {
  width: 20px;
  height: 20px;
}

/* Filter Dropdown Arrow Icon */
.bien-dong-filter-arrow-img {
  width: 16px;
  height: 16px;
}

/* Filter Dropdown Lock Icon (shown only for locked filters) */
.bien-dong-filter-lock-icon {
  display: none;
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  height: 11px;
  margin: auto 0;
  font-size: 11px;
  color: #bbb;
  z-index: 2;
  pointer-events: none;
}

.locked-filter-item .bien-dong-filter-lock-icon {
  display: block;
}

/* Tab Buttons Container */
.bien-dong-tabs-container {
  align-self: stretch;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
}

.bien-dong-tabs-inner {
  align-self: stretch;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

/* Tab Button */
.bien-dong-tab-button {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 4px;
  outline-offset: -1px;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: flex;
  cursor: pointer;
}

.bien-dong-tab-button-selected {
  background: var(--Background-Blue, #E5EFF7);
  outline: 1px var(--Primary-Border-Blue, #CADFEE) solid;
}

.bien-dong-tab-button-unselected {
  background: var(--Fill-colorFillQuaternary, rgba(0, 0, 0, 0.02));
  outline: 1px var(--Border-Border-2, #D9D9D9) solid;
}

.bien-dong-tab-text {
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  word-wrap: break-word;
}

.bien-dong-tab-text-selected {
  color: var(--Primary-Brand, #2980B9);
}

.bien-dong-tab-text-unselected {
  color: var(--Text-Text-88, rgba(0, 0, 0, 0.88));
}

/* Table Container */
.bien-dong-table-wrapper {
  align-self: stretch;
  overflow: auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}

.bien-dong-table {
  min-width: 100%;
  border-collapse: collapse;
}

/* Table Header */
.bien-dong-table-header-row {
  background: var(--Colors-Gray-4, #F0F0F0);
}

.bien-dong-table-header-cell {
  border-bottom: 1px var(--Border-Stroke-1, #F0F0F0) solid;
  padding: 12px 16px;
  text-align: center;
  min-width: 100px;
}

.bien-dong-table-header-cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bien-dong-table-header-text {
  color: var(--Text-Text-Primary, black);
  font-size: 12px;
  font-family: Roboto;
  font-weight: 500;
}

.bien-dong-table-sort-icon-img {
  width: 8px;
  height: 12px;
}

.bien-dong-table-bolt-icon-img {
  width: 12px;
  height: 12px;
}

/* Table Body */
.bien-dong-table-row {
  height: 40px;
}

.bien-dong-table-row-even {
  background: var(--Colors-Gray-3, #F5F5F5);
}

.bien-dong-table-row-odd {
  background: var(--Background-White, white);
}

.bien-dong-table-cell {
  padding: 12px 8px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  text-align: center;
}

.bien-dong-table-cell-text-neutral {
  color: var(--Text-Text-Primary, black);
}

.bien-dong-table-cell-text-down {
  color: var(--Colors-Color-Price-Price-Down, #F5222D);
}

.bien-dong-table-cell-text-up {
  color: var(--Colors-Color-Price-Price-Up, #1AA67C);
}

.bien-dong-table-cell-text-warning {
  color: var(--Warning-colorWarning, #FAAD14);
  font-weight: 500;
}

/* Table Cell Specific Styles */
.bien-dong-table-cell-order {
  padding: 8px 12px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  min-width: 50px;
  text-align: center;
}

.bien-dong-table-cell-ticker {
  padding: 8px 12px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  min-width: 80px;
  text-align: center;
}

.bien-dong-table-cell-default {
  padding: 12px 16px;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  min-width: 100px;
  text-align: center;
}

/* Numeric data cells - right aligned */
.bien-dong-col-pe,
.bien-dong-col-peg,
.bien-dong-col-ema7,
.bien-dong-col-ema21,
.bien-dong-col-adx14,
.bien-dong-col-rsi14,
.bien-dong-col-beta1y,
.bien-dong-col-gtgd-tb20 {
  text-align: right !important;
}

/* Text data cells - center aligned */
.bien-dong-col-name,
.bien-dong-col-ticker,
.bien-dong-col-order,
.bien-dong-col-suckhoe,
.bien-dong-col-gauge-daily,
.bien-dong-col-gauge-weekly,
.bien-dong-col-rrg,
.bien-dong-col-thanh-khoan,
.bien-dong-col-quy-mo-von-hoa,
.bien-dong-col-nganh-cap1,
.bien-dong-col-nganh-cap2,
.bien-dong-col-xu-huong-nganh {
  text-align: center !important;
}