:root {--bs-body-font-size: 12px;}

html, body {
  height: 100%;
  margin: 0;
  overflow-x: auto;
}
/* mặc định khóa thanh cuộn dọc nếu cần */
body.no-scroll-y {
  overflow-y: hidden;
}
/* mở scroll dọc thanh cuộn dọc cho trang cần */
body.allow-scroll-y {
  overflow-y: auto;
}

.dropdown-menu {font-size: 10px !important;}
.bg-warning {transition: background-color 0.5s ease-in-out;}
.bg-light-green {
  background-color: #90ed82 !important;
  transition: background-color 0.5s ease-in-out;
}
.bg-danger-dark {
  background-color: #fb3535 !important;
  transition: background-color 0.5s ease-in-out;
}
.fs-7 {font-size: 12px;}

.container-fluid {min-width: 1510px;width: 100%;}

#navbar {
  display: flex;
  align-items: center;
  width: 100%;
}
/* LEFT */
#navbar > .dropdown:first-child {
  flex: 0 0 auto;
}
/* CENTER (ticker) */
#navbar .navbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
/* ticker row */
#navbar .navbar-center .d-flex {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  min-width: 0;
}
/* RIGHT */
#navbar > .dropdown:last-child,
#navbar > .ms-auto {
  flex: 0 0 auto;
}
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.dot-green {
    background: #00c853;
    box-shadow: 0 0 5px #00c853;
}
.dot-red {
    background: red;
    box-shadow: 0 0 5px red;
}

#loadingIndicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.238);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(20px);
  visibility: hidden;
}
.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}


.fixed-height {min-height: 10px;}
.col-left {flex: 0 0 76%;max-width: 76%;}
.col-1-1 {flex: 0 0 10%;max-width: 10%;}
.col-1-2 {flex: 0 0 15%;max-width: 15%;}
.col-1-3 {flex: 0 0 18%;max-width: 18%;}
.col-1-4 {flex: 0 0 26%;max-width: 26%;}
.col-1-5 {flex: 0 0 50%;max-width: 50%;}
.col-1-6 {flex: 0 0 9.6%;max-width: 9.6%;}
.col-1-7 {flex: 0 0 11%;max-width: 11%;}
.table-container {
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.37) transparent;
}
table {
  border-collapse: collapse;
  margin: 0px;
  padding: 0;
  width: 10%;
}
th,
td {white-space: nowrap;padding: 0;}
th {border-radius: 5px;background-color: rgb(224, 222, 222);}
h3 {text-align: center;margin-top: 0px;}

.truncate-text {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.input {
  text-transform: uppercase;
  ime-mode: disabled;
  background-color: rgb(223, 222, 222);
  color: rgb(15, 14, 14);
  border: none;
  font-size: 20px;
  font-weight: bold;
}
.inner-box {
  padding: 1px;
  margin-bottom: 5px;
  text-align: center;
  background-color: #f8f9fa;
  border-radius: 10px;
}
.outer-box {
  padding-right: 0px;
  padding-left: 0px;
}
.outer-box1 {
  padding-left: 0;
  padding-right: 0;
  border-width: 3px;
  border-style: solid;
  border-image: linear-gradient(to bottom, gold, rgba(255, 215, 0, 0)) 1;
}
.divider {
  border-top: 1px dashed rgba(4, 4, 4, 0.3);
  margin: 2px 0;
}
.bg-rounded {
  background-color: rgba(0, 0, 0, 0.17);
  border-radius: 10px;
}
.bg-rounded1 {
  background-color: rgba(253, 187, 5, 0.48);
  border-radius: 10px;
}
.bg-ptkt {background-color: #5f5e5e;}
.inactive-tab {opacity: 0.3;}
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.signal-bar-container {
  width: 100%;
  height: 15px;
  background-color: #fffdfd;
  position: relative;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1px;
}
.signal-bar-value {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  background-color: green;
  transition: width 0.3s ease;
}
.signal-bar-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: black;
  pointer-events: none;
  font-style: italic;
  z-index: 2;
}
.table-sm > :not(caption) > * > * {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 0px !important;  /* giữ trái phải */
    padding-right: 0px !important;
}

/* ----- Fix layout cho vùng đỏ ----- */
.charts-flex {
    display: flex;
    flex-wrap: nowrap;      /* giữ trên 1 dòng */
    width: 100%;
    gap: 5px;               /* khoảng cách giữa chart */
}
.chart-box {
    height: 290px;    /* thay đổi chiều cao của các chart trong vùng xanh đỏ */
    border: 1px solid #ccc;
    border-radius: 6px;
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
}
.chart-box.small  { flex-basis: 19%; min-width: 160px; }
.chart-box.medium { flex-basis: 33%; min-width: 240px; }
.chart-box.large  { flex-basis: 48%; min-width: 250px; margin-right: 5px; }
.chart-box canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
/* Đảm bảo cha ngoài có width thực sự */
.flex-grow-1.position-relative {
    min-width: 0; /* giúp flex con co giãn đúng */
}

/* ========================================= CSS lọc chọn cổ phiếu ================== */
#valuationTable {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 10px;
    table-layout: auto;
}
#valuationTable th,
#valuationTable td {
    /* border-right: 1px solid #ddd; */
    border-bottom: 1px solid #ddd;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
    background-color: #fff;
    /* background-clip: padding-box; */
    border-radius: 0;
    cursor: default !important;
}
#valuationTable th.sticky-col,
#valuationTable td.sticky-col {
    position: sticky;
    left: 0;
    z-index: 90;
}
.th-label {display: inline-block;}
.sort-icon {margin-left: 4px;font-size: 9px;}
.multi-select { 
  width: 98%; 
  box-sizing: border-box; 
  font-size: 10px;
  position: relative; 
}
.multi-select-btn {
  width: 100%;
  font-size: 10px;
  padding: 2px 17px 2px 2px;
  border: 1px solid #ccc;
  border-radius: 0;
  background: white;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  height: 17px;
  line-height: 11px;
  text-align: center;
}
.multi-select-btn::after {
  content: "\25BE";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: #666;
  pointer-events: none;
}
.multi-select-dropdown {
  display: none;
  position: absolute;
  max-height: 140px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  box-sizing: border-box;
  z-index: 1000;
  margin-top: 1px;
  font-size: 10px;
  width: auto;
  min-width: 8px;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.3) rgba(255,255,255,0.9);
}
.multi-select-dropdown::-webkit-scrollbar {width: 6px;}
.multi-select-dropdown::-webkit-scrollbar-track {background: rgba(255,255,255,0.9);}
.multi-select-dropdown::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);
  border-radius: 3px;
  border: none;
}
.multi-select-option {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 2px;
  cursor: pointer;
  font-size: 9px;
}
.multi-select-option input[type="checkbox"] {
  width: 8px; 
  height: 8px;
  margin: 0; 
  padding: 0;
}
.multi-select-dropdown label:hover { background: #f1f1f1; }
.multi-select-colorbox { 
  display: inline-block; 
  vertical-align: middle; 
  width: 19px; 
  height: 19px; 
}
/* ========================================= CSS phân tích kỹ thuật =================================== */
.loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.loading-spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 50px; height: 50px;
    animation: spin 1s linear infinite;
}
.container {
    display: flex;
    position: relative;
    width: 100%;
    gap: 10px;
    margin: 0;
}
.left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    gap: 10px;
    align-items: center;
}
.right-col {
    position: fixed;
    top: 60px;
    right: -50%;
    width: 50%;
    height: calc(100% - 40px);
    background: #fff;
    box-shadow: -2px 0 6px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    overflow-y: auto;
    padding: 20px;
    z-index: 1000;
    align-items: center;
}
.right-col.active { right: 0; }
.left-col.shrink { flex: 0 0 50%; }
#toggle-btn {
    position: fixed;
    top: 35px;
    background:rgb(0, 1, 2);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 1100;
    padding: 3px 5px;
    font-size: 12px;
    transition: all 0.1s ease;
}
#toggle-btn.outside {
    right: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-radius: 6px 0 0 6px;
    margin: 1px;
}
#toggle-btn.inside {
    left: 50%;
    transform: translateX(-100%);
    border-radius: 0 0 6px 0;
    writing-mode: horizontal-tb;
    margin-left: 25px;
}
.stock-box { 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    padding: 1px; 
    width: auto;
    min-width: 730px;
}
.group-1-1-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.group-1-1-2 .stock-box {
    flex: 1 1 calc(50% - 10px);
}
.left-col.shrink .group-1-1-2 {
  display: flex;
  flex-direction: column !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 10px;
}
.left-col.shrink .group-1-1-2 .stock-box {
  width: 90%;
}
.stock-box h3 { margin-top: 0; }
.stt-cell .action-icons { display: none; margin-left: 2px; }
.stt-cell:hover .action-icons { display: inline; }
.signal-bar-wrapper {
    position: relative;
    width: 130px;
    height: 15px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
    margin: auto;
}
.signal-bar-value {
    position: absolute;
    top: 0; bottom: 0;
    width: 0%;
    background-color: transparent;
    transition: width 0.25s ease;
}
.signal-bar-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #000;
    white-space: nowrap;
    pointer-events: none;
}
.icb-select {
    font-weight: bold;
    text-align: center;
    text-align-last: center;
    display: block;
    margin: 0 auto;
    background-color: #c8c8c8;
    border-radius: 6px; 
    border: none;
}

#group3-container {
    display: flex;
    justify-content: center;
    width: 100%;
}
#group3-grid {
    display: grid;
    gap: 10px;
    justify-content: center;
}
#group3-grid.layout-vertical {
    grid-template-columns: 1fr;
    justify-items: center;
}
#group3-grid.layout-horizontal {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
}

table.custom-table > :not(caption) > * > * {
    padding: 2px 5px !important;
}

/* Nút tab ==============================================================*/
.tab-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  overflow: visible;
  box-sizing: border-box;
}

/* --- CỘT TAB DỌC --- */
.tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #f5f5f5;
  padding: 5px 0;
  gap: 6px;
  width: max-content; /* ✅ Tự nở theo chữ */
  min-width: 20px;    /* Giới hạn nhỏ nhất */
  box-sizing: border-box;
}
/* Nút tab */
.tab-btn {
    writing-mode: vertical-rl;   /* chữ dọc từ trên xuống dưới */
    transform: rotate(180deg);
    text-align: center;
    padding: 8px 2px;            /* ✅ gọn hơn để vừa chiều ngang hẹp */
    cursor: pointer;

    color: #363636;
    background: #b1b1b1;
    border: 1px solid transparent;
    border-radius: 0 8px 8px 0;  /* bo nhẹ hơn cho cột nhỏ */
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1.1;
    width: 100%;
    white-space: nowrap;
}
/* Hover */
.tab-btn:hover {
    background: #ddd;
    font-weight: bold;
}
/* Tab đang active */
.tab-btn.active {
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000bc;
    border-left: none; /* dính liền nội dung */
    /* box-shadow: 2px 0 4px rgba(0, 0, 0, 0.588); */
    position: relative;
    z-index: 2;
    font-weight: bold;
}
/* Nội dung tab */
.tab-content {
    flex: 1;
    display: none;
    overflow-y: auto;
    box-sizing: border-box;
}
.tab-content.active {
    display: block;
    width: 100%;
    height: 100%;
}

/* =============== SUB TAB (tầng 2 trong tab market) =============== */
.subtab-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px 10px;
  
}

.sub-tab-btn {
  padding: 6px 10px;
  background: #e0e0e0;
  color: #333;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sub-tab-btn:hover {
  background: #d0d0d0;
}

.sub-tab-btn.active {
  background: #000;
  color: #fff;
}

.sub-tab-content {
  display: none;
}

.sub-tab-content.active {
  display: block;
}

/* ===== TẦNG 2 ===== */
.sub2-tabs {
  display: flex;
  justify-content: left;
  gap: 28px;
  margin-bottom: 1px;
  border-bottom: 1px solid #e5e7eb;
}

.sub2-tab-btn {
  padding: 5px 15px;
  cursor: pointer;
  font-weight: 600;
  color: #6b7280a3;
  position: relative;
  transition: color 0.2s ease;
}

.sub2-tab-btn:hover {
  color: #111827;
}

.sub2-tab-btn.active {
  color: #111827;
  background: linear-gradient(
    to bottom,
    #f9fafb 0%,
    #c3d6fc 100%
  );
}

.sub2-tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: #0051ff;
  border-radius: 2px;
}
.sub2-content {
  display: none;
  padding-top: 10px;
}

.sub2-content.active {
  display: block;
}
/* ===== WRAPPER ===== */
.sub3-wrapper {
  display: flex;
  gap: 20px;
}

/* ===== TAB DỌC ===== */
.sub3-tabs {
  width: 155px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid #e5e7eb;
  padding-right: 12px;
}

/* ===== NÚT TAB ===== */
.sub3-tab-btn {
  padding: 3px 4px;
  cursor: pointer;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-align: center;
}

.sub3-tab-btn:hover {
  color: #0051ff;
}

.sub3-tab-btn.active {
  background: #111827;
  color: #ffffff;
  font-weight: 500;
}
.sub3-content {
  flex: 1;
  display: none;
}

.sub3-content.active {
  display: block;
}

.ls-on-wrapper {
  width: 100%;
}

.ls-on-chart {
  width: 100%;
  margin-bottom: 14px;
}

.ls-on-desc {
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
  color: #4b5563;
  background: #f9fafb;
  padding: 12px 14px;
  border-left: 4px solid #3b82f6;
  border-radius: 6px;
  margin-bottom: 16px;
}

.ls-on-desc p {
  margin: 6px 0;
}
.ls-on-title {
  font-size: 16px;
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e5e7eb;
}

.ls-on-table {
    width: 500px;      /* chiều ngang cố định */
    margin: 0 auto;    /* căn giữa ngang */
}
/* ====== CHART ====================== */
#chart_signal {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#chart {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: unset;
}
/* Ẩn hoàn toàn chart khi không ở tab CHART */
#chart_signal:not(.active),
#chart_signal:not(.active) * {
    display: none !important;
    visibility: hidden !important;
}

.ls-on-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Cột trái: diễn giải */
.ls-on-col-left {
  flex: 1.2;
}

/* Cột phải: bảng */
.ls-on-col-right {
  flex: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .ls-on-row {
    flex-direction: column;
  }
}

/* Trang Giới thiệu==================================================================================
/* ====== HERO ====== */
.hero-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    color: #111827;
    height: 95vh;
    overflow: hidden;
}
.hero-content {
    position: absolute;
    top: 10%;
    left: 13%;
    transform: translate(-5%, -10%);
    z-index: 2;
    max-width: 600px;
}
.hero-title {
    font-size: 48px;
    font-weight: 800;
    color: #2a2a2a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hero-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.2));
    position: relative;
    top: -15px;
    left: -10px;
}
.hero-logo:hover {
    transform: scale(1.25);
    filter: drop-shadow(0 0 10px rgba(251, 0, 255, 0.832));
}
.hero-subtitle {
    font-size: 18px;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 28px;
}
.hero-button {
    display: inline-block;
    background: #8383837a;
    color: #0a0f1c;
    padding: 14px 40px;
    font-weight: 700;
    border-radius: 40px;
    font-size: 17px;
    text-decoration: none;
    transition: background 0.3s, transform 0.3s;
}
.hero-button:hover {
    background: #5c5c5ccc;
    transform: translateY(-3px);
}
/* glow */
@keyframes glowMove {
    0%,100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-10px); }
}
.hero-bg::before {
    content: "";
    position: absolute;
    top: 13%;
    left: 67%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgb(0, 255, 17), transparent 100%);
    filter: blur(40px);
    animation: glowMove 3s ease-in-out infinite alternate;
}
/* ===== INTRO ===== */
.intro-section {
    background: #f9fafb;
    padding: 40px 20px 30px;
    text-align: center;
}
.intro-content {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 18px;
    color: #374151;
    line-height: 1.7;
}
.highlight {
    color: #13c300;
    font-weight: 600;
}
/* ===== ANIMATION ===== */
.fade-in {
    animation: fadeIn 1.2s ease forwards;
    opacity: 0;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== SLIDER ===== */
.slider-section {
    background: #ffffff;
    padding: 40px 20px 80px;
}

.slider-container {
    max-width: 1100px;
    margin: 0 auto;
}

.hero-slider {
    position: relative;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
    background: #f3f4f6;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateX(60px) scale(0.9);
    transition: transform 1s ease, opacity 1s ease;
    cursor: pointer;
    pointer-events: none;
}

.slide.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.slide.exit {
    opacity: 0;
    transform: translateX(-60px) scale(1.04);
}

.slide.active:hover {
    transform: translateX(0) scale(1.05);
}

/* dots */
.hero-dots {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.hero-dots span {
    width: 9px;
    height: 9px;
    background: #d1d5db;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dots span.active {
    background: #0ea5e9;
    transform: scale(1.4);
}

/* ===== LIGHTBOX ===== */
#lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#lightbox img {
    max-width: 92%;
    max-height: 88%;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 34px;
    color: white;
    cursor: pointer;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero-slider {
        height: 240px;
    }
}

/* ====== Trang Khuyến cáo ================================================================== */
.legal-container {
    max-width: 1000px;
    margin: 20px auto;
    line-height: 1.7;
    column-count: 1 !important;
    display: block !important;
}

/* ====== Phần Thống kê lãi lỗ trading ================================ */
/* Desktop-first chart workspace: use all available viewport space.  If the
   browser becomes smaller than the safe desktop canvas, the tab scrolls
   instead of compressing controls and the chart beyond usability. */
#chart_signal.active {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    height: calc(100vh - 25px);
    height: calc(100dvh - 25px);
    min-width: 0;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
}

#chart-layout {
    display: flex;
    flex: 1 0 auto;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-width: 1120px;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}
/* ===== LEFT: CHART ===== */
#chart-left {
    display: flex;
    flex: 2 1 0;
    height: 100%;
    align-self: stretch;
    box-sizing: border-box;
    min-width: 620px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

#chart_tradingview,
#chart_wrapper {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

#chart {
    height: 100%;
}
/* ===== RIGHT: PANEL ===== */
#chart-stats {
    flex: 1 1 0;
    width: auto;
    height: 100%;
    align-self: stretch;
    box-sizing: border-box;
    min-width: 320px;
    max-width: none;
    min-height: 0;

    background: #fff;

    border-left: 1px solid #ddd;

    display: flex;
    flex-direction: column;

    /* Không cuộn cả panel: mỗi vùng dữ liệu tự quản lý thanh cuộn của nó. */
    overflow: hidden;
}
#chart-layout.tv-chart-layout-maximized #chart-stats {
    display: none !important;
}
#chart-layout.tv-chart-layout-maximized #chart-left {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
}
/* SCROLL riêng */
#chart-stats .box {
    flex: 0 0 auto;
    min-width: 0;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

/* Bảng Kết quả/Lịch sử luôn dùng hết chiều cao còn lại của panel. Điều này
   loại bỏ khoảng trống dưới bảng trên màn hình cao, nhưng vẫn giữ dữ liệu dài
   có thể cuộn trong chính bảng thay vì làm khối FOLLOW THE TREND bị cuộn. */
#chart-stats .chart-stats-table {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#chart-stats .chart-stats-table .sub-tabs {
    flex: 0 0 auto;
}

#chart-stats .chart-stats-table .sub-content {
    /* flex-basis = 0 giúp vùng bảng luôn nhận phần chiều cao còn lại, thay vì
       bị chiều cao nội dung đẩy xuống dưới khi người dùng thu nhỏ cửa sổ. */
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
}

#chart-stats .chart-stats-table .sub-content.active {
    display: block;
    height: 0;
}

/* sticky header */
.sub-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid #e0e3eb;
    padding-bottom: 4px;
}
.sub-tab {
    flex: 1;
    padding: 3px 2px;
    font-size: 12px;
    color: #888;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
}
/* hover */
.sub-tab:hover {
    color: #2962ff;
}
/* active underline animation */
.sub-tab.active {
    color: #2962ff;
    font-weight: 600;
}
.sub-tab.active::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 0;
    height: 2px;
    background: #2962ff;
    border-radius: 2px;
}
/* content scroll */
.sub-content {
    display: none;
    overflow-y: auto;
    max-height: 270px;
}

.sub-content.active {
    display: block;
}


table tr:hover {
    background: #f5f7fa;
    cursor: pointer;
}
table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}
.status-wrapper {
    display: flex;
    gap: 16px;
}
.status-box {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
}

.warning-box {
    border: 1px solid orange;
}

.current-box {
    border: 1px solid #444;
}
.warn-title {
    font-weight: 700;
    margin-bottom: 6px;
    color: #760000;
}
.box-header {
    margin-bottom: 10px;
}
.box-title {
    font-size: 15px;
    font-weight: 700;
    color: #0a7cff;
}
.box-subtitle {
    display: inline-block;
    font-size: 11px;
    color: #0a7cff;
    background: rgba(10,124,255,0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}
/* ===== Dấu * của đăng ký tài khoản ===== */
label.required::after {
    content: " *";
    color: red;
}


/* ===== phần hiện liên hệ admin: nâng cấp tk ===== */
.upgrade-inline {

    width: 100%;
    min-height: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(16px, 3vw, 32px);
    overflow: hidden;
}

.upgrade-inline-lock {
    font-size: clamp(40px, 6vw, 58px);
    line-height: 1;
}

.upgrade-inline-desc {
    margin-top: 8px;
    font-size: clamp(13px, 1.5vw, 16px);
    color: #666;
    max-width: 320px;
}

#valuationCTCKTable tbody tr:hover{
    outline: 1px solid #2f2f2f;
}

/* Chỉ áp dụng cho tab Lọc chọn */
#choncp.active{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
}

#choncp .table-container{
    flex:1;
    overflow:auto;
    max-width:100%;
}

#choncp #paginationBar{
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;

    background:#fff;
    border-top:1px solid #ddd;

    padding:4px 8px;
}

/* nút trang */

#choncp .page-btn,
#choncp .nav-btn{
    min-width:22px;
    height:22px;

    border:1px solid #d0d7de;
    background:#fff;

    border-radius:4px;

    cursor:pointer;

    font-size:11px;
    padding:0 4px;

    transition:all .15s ease;
}

#choncp .page-btn.active{
    background:#1677ff;
    color:#fff;
    border-color:#1677ff;
    font-weight:600;
}

#choncp .page-dots{
    padding:0 2px;
    font-size:11px;
    color:#666;
}

#choncp .page-info{
    margin-left:8px;
    color:#666;
    font-size:11px;
}

#choncp #paginationBar{
    gap:2px;
    padding:2px 6px;
}




.customer-section-divider{
    margin:24px 0 16px;
    padding:8px 12px;
    background:#f5f7fa;
    border-left:4px solid #ff1616;
    border-radius:6px;

    font-size:13px;
    font-weight:700;
    color:#333;
}
.customer-header{
    display:flex;
    align-items:center;
    gap:8px;
    padding-left:10px;
}

.customer-name{
    font-weight:bold;
    cursor:pointer;
}

.customer-actions{
    display:flex;
    gap:4px;
    opacity:0;
    transform:translateX(-4px);
    transition:all .2s ease;
}

.customer-header:hover .customer-actions{
    opacity:1;
    transform:translateX(0);
}

.customer-action-btn{
    border:none;
    background:transparent;
    cursor:pointer;

    padding:2px 5px;
    border-radius:4px;

    font-size:11px;
}

.customer-action-btn:hover{
    background:#f3f4f6;
}

.customer-name{
    display:inline-flex;
    align-items:center;

    font-weight:700;
    color:#0f172a;

    padding:5px 12px;

    background:linear-gradient(
        90deg,
        rgba(37,99,235,.12),
        transparent
    );

    border-left:4px solid #2563eb;
    border-radius:4px;
}

.tv_tf{
    cursor:pointer;
    padding:4px 8px;
    border-radius:4px;
}

.tv_tf:hover{
    background:#f3f3f3;
}

.tv_tf.active{
    background:#2962ff;
    color:#fff;
}

.tv-tool{
    width:34px;
    height:34px;
    border:none;
    background:none;
    cursor:pointer;
    border-radius:6px;
}

.tv-tool:hover{
    background:#f3f3f3;
}

#tv_search{
    width:100px !important;
    min-width:100px !important;
    max-width:100px !important;
}

.indicator-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
}

.indicator-item{
    height:28px;
    padding:2px 4px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;
    border:1px solid #ddd;
    border-radius:4px;
    cursor:pointer;
    user-select:none;
    font-size:11px;
    background:#fafafa;
}

.indicator-item:hover{
    background:#f0f0f0;
}

.indicator-item.active{
    background:#2962FF;
    color:white;
    border-color:#2962FF;
}

.tv-tool.active{
    background:#2962FF;
    color:#fff;
    border-color:#2962FF;
}

.tv-floating-toolbar{
    position:absolute;
    z-index:99999;

    background:#fff;
    border:1px solid #d9d9d9;
    border-radius:10px;

    padding:6px;

    align-items:center;
    gap:6px;

    box-shadow:
        0 2px 10px rgba(0,0,0,.12);

    user-select:none;

    display:none;
}

.tv-toolbar-btn{
    min-width:32px;
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:6px;

    cursor:pointer;

    border:none;

    background:white;
}

.tv-toolbar-btn:hover{
    background:#f2f3f5;
}

.tv-toolbar-select{
    height:32px;

    border:1px solid #ddd;

    border-radius:6px;

    padding:0 8px;

    background:white;

    cursor:pointer;
}

#toolbar_drag{
    cursor:move;
    color:#888;
    font-size:16px;
}

#drawing_settings{
    flex-direction:row;
    white-space:nowrap;
}


/* ===========================
   TOP BAR
=========================== */
.tv-topbar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:44px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 10px;
    background:#fafafa;
    border-bottom:1px solid #e4e4e4;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    z-index:1000;
}

.tv-layout-maximize-button{
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:0;
    color:#434651;
    background:rgba(255,255,255,.94);
    border:1px solid #d1d4dc;
    border-radius:5px;
    box-shadow:0 1px 4px rgba(0,0,0,.12);
    cursor:pointer;
    transition:background .15s ease, color .15s ease, opacity .15s ease;
}

.tv-layout-maximize-button{
    position:absolute;
    top:6px;
    right:8px;
    width:32px;
    height:32px;
    z-index:1101;
}

.tv-layout-maximize-button:hover,
.tv-layout-maximize-button:focus-visible,
.tv-layout-maximize-button.active{
    color:#2962ff;
    background:#f0f3ff;
    opacity:1;
    outline:none;
}

.tv-layout-maximize-button svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
}

#tv_topbar{
    padding-right:50px;
}


/* ===========================
   GROUP
=========================== */
.tv-group{
    display:flex;
    align-items:center;
    gap:4px;
}

/* ===========================
   SYMBOL
=========================== */
.tv-symbol{
    padding:5px 12px;
    border:1px solid #dcdcdc;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
    background:white;
}


/* ===========================
   BUTTONS
=========================== */
.tv-btn,
.tv_tf,
.tv-tool{
    height:32px;
    min-width:32px;
    padding:0 10px;
    border:none;
    border-radius:6px;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.18s;
}

.tv-btn:hover,
.tv_tf:hover,
.tv-tool:hover{
    background:#ececec;
}

.tv_tf.active{
    background:#2962ff;
    color:white;
}

/* ===========================
   ICON
=========================== */
.tv-tool svg{
    width:18px;
    height:18px;
}

/* ===========================
   POPUP
=========================== */
.tv-popup{
    display:none;
    position:absolute;
    top:45px;
    background:white;
    border:1px solid #ddd;
    border-radius:8px;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
    padding:6px;
    z-index:99999;
}

.tv-fib-option{
    width:100%;
    padding:8px 14px;
    border:none;
    background:white;
    text-align:left;
    cursor:pointer;
    border-radius:5px;
}

.tv-fib-option:hover{
    background:#f3f3f3;
}
/* ===========================================================
   MOBILE
=========================================================== */

@media (max-width: 768px) {

    #chart-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        min-width: 0;
        min-height: 0;
        overflow: visible;
    }

    #chart-left {
        width: 100%;
        min-width: 100%;
        height: 70vh;
    }

    #chart-stats {
        width: 100%;
        height: auto;
        min-width: 100%;
        max-width: none;
        border-left: none;
        border-top: 1px solid #ddd;
        overflow: visible;
    }

    #tv_topbar::-webkit-scrollbar{
        display:none;
    }

}

/* ========================================================================
   FUNDAMENTAL ANALYSIS — proportional desktop layout based on v5
   ======================================================================== */
#bctc {
  min-width: 0;
  min-height: 0;
}

/* Keep the complete Fundamental Analysis workspace centred inside its tab.
   It uses the available desktop viewport in both directions; a local scroll
   takes over below the safe minimum instead of allowing the document layout
   to break. */
#bctc.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: clamp(4px, 0.45vw, 8px);
}

#bctc .bctc-workspace {
  --bctc-gap: clamp(4px, 0.45vw, 8px);
  width: 100%;
  height: 100%;
  min-width: 1120px;
  min-height: 660px;
  max-width: none;
  margin: auto !important;
  padding: 0;
  box-sizing: border-box;
}

/* Main v5 split: primary analysis is 76%, the industry/chart sidebar is 24%. */
#bctc .bctc-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 76fr) minmax(260px, 24fr);
  gap: var(--bctc-gap);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  --bs-gutter-x: 0;
}

#bctc .bctc-primary,
#bctc .bctc-sidebar {
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
}

/* Header / financial row / Tab A-Tab B region retain their v5 visual
   proportion while consuming the available vertical workspace. */
#bctc .bctc-primary {
  display: grid;
  grid-template-rows: minmax(64px, 12fr) minmax(0, 41fr) minmax(0, 47fr);
  gap: var(--bctc-gap);
  height: 100%;
}

/* Header ratios copied from v5: 15 / 18 / 15 / 10 / 26 / 16. */
#bctc .bctc-header {
  display: grid !important;
  grid-template-columns:
    minmax(0, 15fr)
    minmax(0, 18fr)
    minmax(0, 15fr)
    minmax(72px, 10fr)
    minmax(0, 26fr)
    minmax(92px, 16fr);
  gap: var(--bctc-gap);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: var(--bctc-gap);
  --bs-gutter-x: 0;
}

#bctc .bctc-header > * {
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

#bctc .bctc-header .row {
  width: 100% !important;
}

#bctc .bctc-header #stockInput {
  min-width: 0;
  font-size: clamp(14px, 1.2vw, 20px);
}

/* Financial row ratios copied from v5: Quarter 50%, information 11%,
   Year 29.4%, valuation 9.6%. Only table contents scroll locally when their
   own columns cannot fit. */
#bctc .bctc-financial {
  display: grid !important;
  grid-template-columns:
    minmax(0, 50fr)
    minmax(108px, 11fr)
    minmax(0, 29.4fr)
    minmax(92px, 9.6fr);
  gap: var(--bctc-gap);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  overflow: hidden;
  --bs-gutter-x: 0;
}

#bctc .bctc-financial > * {
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}

#bctc .bctc-table-panel,
#bctc .bctc-table-panel > div,
#bctc .bctc-table-panel table {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

#bctc .bctc-table-panel {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

#bctc .bctc-table-panel table {
  width: max-content !important;
  min-width: 100%;
  table-layout: auto;
}

#bctc .bctc-table-panel th,
#bctc .bctc-table-panel td {
  padding: 0 clamp(2px, 0.2vw, 4px) !important;
  vertical-align: middle;
}

/* A generated table contains one heading and 17 financial rows. Its rows
   share the height of the financial panel rather than leaving empty space. */
#bctc #quarterTable tr,
#bctc #yearTable tr {
  height: calc(100% / 18);
}

/* The three middle information cards and five valuation cards scale with the
   same financial row, maintaining the visual structure of v5. */
#bctc .bctc-summary,
#bctc .bctc-valuation {
  display: grid;
  height: 100%;
  gap: var(--bctc-gap);
}

#bctc .bctc-summary {
  grid-template-rows: minmax(82px, 1fr) minmax(68px, 0.8fr) minmax(104px, 1.2fr);
}

#bctc .bctc-valuation {
  grid-template-rows: minmax(42px, 0.9fr) repeat(4, minmax(48px, 1fr));
}

#bctc .bctc-summary > .inner-box,
#bctc .bctc-valuation > .inner-box {
  height: auto;
  min-height: 0;
  margin: 0 !important;
}

/* Tab A / Tab B area follows the third proportional row. Inline fixed pixel
   heights from v5 are deliberately overridden only inside this BCTC region. */
#bctc .bctc-lower {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  gap: var(--bctc-gap);
  margin: 0 !important;
  overflow: hidden;
}

#bctc .bctc-lower > :first-child {
  flex: 0 0 20px;
  width: 20px !important;
  height: 100%;
  margin: 0 !important;
}

#bctc .bctc-lower > .flex-grow-1,
#bctc .bctc-lower .charts-flex,
#bctc .bctc-lower .chart-box {
  min-width: 0;
  min-height: 0;
  height: 100% !important;
}

#bctc .bctc-lower .charts-flex {
  display: flex;
}

#bctc .bctc-lower .chart-box {
  min-width: 0;
}

#bctc .bctc-lower #greenTabs {
  flex: 0 0 auto;
  overflow-x: auto;
  scrollbar-width: thin;
}

#bctc .bctc-lower .tab-content-box {
  display: flex;
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
}

#bctc .bctc-lower .tab-content-box > * {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

#bctc .bctc-lower #contentExtra1,
#bctc .bctc-lower #contentExtra2,
#bctc .bctc-lower #contentTable,
#bctc .bctc-lower #contentTable > div,
#bctc .bctc-lower #extra-tablekh,
#bctc .bctc-lower #ndtnnTableWrapper,
#bctc .bctc-lower #tudoanhLatestTableWrapper,
#bctc .bctc-lower #tudoanhTableWrapper {
  min-width: 0;
  min-height: 0;
  height: 100% !important;
}

#bctc .bctc-lower #extra-tablekh,
#bctc .bctc-lower #ndtnnTableWrapper,
#bctc .bctc-lower #tudoanhLatestTableWrapper,
#bctc .bctc-lower #tudoanhTableWrapper {
  overflow: auto;
}

/* v5 sidebar proportions: sector table 30%, each chart 35%. */
#bctc .bctc-sidebar {
  display: grid;
  grid-template-rows: minmax(0, 30fr) minmax(0, 35fr) minmax(0, 35fr);
  gap: var(--bctc-gap);
  height: 100%;
  overflow: hidden;
}

#bctc .bctc-sidebar-panel {
  width: auto;
  height: auto !important;
  min-height: 0;
  margin: 0 !important;
  overflow: hidden;
}

#bctc .bctc-sector-panel {
  display: flex;
  flex-direction: column;
}

#bctc .bctc-sector-panel > :first-child {
  flex: 0 0 auto;
}

#bctc #sectorTableBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#bctc .bctc-sidebar-chart {
  position: relative;
}

#bctc .bctc-sidebar-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Preserve desktop layout down to the minimum workspace. Below it scrolling
   stays inside the tab, leaving the rest of the page stable. */
@media (max-width: 1120px), (max-height: 700px) {
  #bctc.active {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* ========================================================================
   FUNDAMENTAL ANALYSIS — v12 refinements
   ======================================================================== */
/* The business-information header only keeps the height required by its
   content. The released space is shared by the financial and lower panels. */
#bctc .bctc-primary {
  grid-template-rows: minmax(64px, 9fr) minmax(0, 44fr) minmax(0, 47fr);
}

/* Move the fixed code-input cell right so its left edge follows the Lũy kế /
   A.I - Định giá / Hiện tại column beneath it, without changing its size. */
#bctc .bctc-company-header {
  grid-template-columns:
    minmax(0, 15fr)
    minmax(0, 18fr)
    minmax(0, 17fr)
    minmax(72px, 10fr)
    minmax(0, 24fr)
    minmax(92px, 16fr);
}

/* Each green sub-tab owns the complete available content rectangle. The top
   daily row has natural height; the chart and summary table then share all
   remaining height. This fixes the v11 Tab B clipping issue. */
#bctc .bctc-lower .bctc-green-pane,
#bctc .bctc-lower .bctc-history-pane {
  width: 100%;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#bctc .bctc-lower .bctc-green-pane-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

#bctc .bctc-lower .bctc-pane-latest {
  flex: 0 0 auto;
  width: 100%;
  height: auto !important;
  max-height: 32%;
  min-width: 0;
  overflow: auto;
}

/* Override the broad v11 100%-height rule only for the compact daily rows. */
#bctc .bctc-lower #stocktablendtnn.bctc-pane-latest,
#bctc .bctc-lower #tudoanhLatestTableWrapper.bctc-pane-latest {
  height: auto !important;
}

#bctc .bctc-lower .bctc-trading-split {
  display: flex !important;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin-top: var(--bctc-gap);
  overflow: hidden;
}

#bctc .bctc-lower .bctc-trading-chart {
  flex: 0 1 65% !important;
  width: auto;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

#bctc .bctc-lower .bctc-trading-stats {
  flex: 1 1 35% !important;
  width: auto;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  padding-top: 0 !important;
  overflow: auto;
}

#bctc .bctc-lower .bctc-trading-stats > table,
#bctc .bctc-lower .bctc-pane-latest > table {
  width: 100% !important;
}

/* History uses one vertical flow: title, scrolling table, explanatory note. */
#bctc .bctc-lower .bctc-history-body {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

#bctc .bctc-lower .bctc-history-table {
  flex: 1 1 0;
  width: 100%;
  height: auto !important;
  min-height: 0;
  overflow: auto;
}

#bctc .bctc-lower #extra-tablekh.bctc-history-table {
  height: auto !important;
}

#bctc .bctc-lower .bctc-history-data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

/* ========================================================================
   FUNDAMENTAL ANALYSIS - v13 refinements
   ======================================================================== */
/* Keep the code-input track intact. Space released from the compact Sharks
   card is given to the trend card immediately to its left. */
#bctc .bctc-company-header {
  grid-template-columns:
    minmax(0, 15fr)
    minmax(0, 18fr)
    minmax(0, 17fr)
    minmax(72px, 10fr)
    minmax(0, 29.4fr)
    minmax(72px, 10.6fr);
}

#bctc .bctc-company-header > :last-child {
  min-width: 0;
  overflow: hidden;
}

#bctc .bctc-company-header > :last-child .row {
  width: 100% !important;
  min-width: 0;
}

#bctc .bctc-company-header > :last-child strong {
  font-size: clamp(8px, 0.65vw, 10px) !important;
}

/* When a financial table needs more vertical room, JavaScript raises this
   minimum and the lower chart area gives up only the required space. */
#bctc .bctc-primary {
  grid-template-rows:
    minmax(64px, 9fr)
    minmax(var(--bctc-financial-min-height, 0px), 44fr)
    minmax(220px, 47fr);
}

/* On Windows, the quarterly table's horizontal scrollbar occupies height.
   Reserve the same track in the annual table so all rows stay aligned. */
#bctc .bctc-quarter-panel,
#bctc .bctc-year-panel {
  overflow-x: scroll;
}

/* Balance the three cards around their actual content: Lũy kế and A.I gain
   breathing room while Hiện tại keeps only the height it needs. */
#bctc .bctc-summary {
  grid-template-rows:
    minmax(104px, 1.1fr)
    minmax(86px, 0.9fr)
    minmax(128px, 1.05fr);
}

/* Keep every live value inside the Lũy kế / A.I / Hiện tại cards. Long
   labels or values wrap naturally; the existing fit routine then adds height
   only if the wrapped content needs it. */
#bctc .bctc-summary > .inner-box {
  min-width: 0;
  padding-inline: clamp(2px, 0.25vw, 5px);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

#bctc .bctc-summary > .inner-box > *,
#bctc .bctc-summary > .inner-box span,
#bctc .bctc-summary > .inner-box strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* The inline margin on the right-hand Tab B card left a visible strip beside
   the border. Let that card consume the entire remaining green-tab width. */
#bctc #chartsGreen {
  width: 100%;
  min-width: 0;
}

#bctc .bctc-green-detail {
  flex: 1 1 51% !important;
  margin-right: 0 !important;
}

/* ========================================================================
   FUNDAMENTAL ANALYSIS - v16 summary-card rhythm
   ======================================================================== */
/* Keep every title against the card's top edge, while its data remains
   vertically centered in the space beneath it. */
#bctc .bctc-summary > .inner-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(4px, 0.35vw, 6px);
  box-sizing: border-box;
}

#bctc .bctc-summary > .inner-box > .bg-rounded,
#bctc .bctc-summary > .inner-box > .bg-rounded1 {
  flex: 0 0 auto;
  margin: 0;
  line-height: 1.25;
}

#bctc .bctc-summary-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.16vw, 4px);
  min-height: 0;
  min-width: 0;
  text-align: center;
}

#bctc .bctc-summary-content > * {
  max-width: 100%;
  margin: 0;
}

#bctc .bctc-summary-content .divider {
  align-self: stretch;
  flex: 0 0 auto;
  margin-block: clamp(1px, 0.12vw, 2px);
}

/* ========================================================================
   FUNDAMENTAL ANALYSIS - v19 Tab A chart proportions
   ======================================================================== */
/* Tab A now uses the full lower-panel width, just like Tab B. Give the
   investment/finance chart the larger middle share without leaving a right
   margin beside the last chart. */
#bctc #chartsRed {
  width: 100%;
  min-width: 0;
  gap: var(--bctc-gap);
}

#bctc #chartsRed > .chart-box {
  min-width: 0;
}

#bctc #chartsRed > .chart-box.small {
  flex: 18 1 0 !important;
}

#bctc #chartsRed > .chart-box.medium {
  flex: 37 1 0 !important;
}

#bctc #chartsRed > .chart-box.large {
  flex: 45 1 0 !important;
  margin-right: 0 !important;
}

/* ========================================================================
   FUNDAMENTAL ANALYSIS - v20 Tab B full-width tables
   ======================================================================== */
/* The three green sub-tabs share the available line instead of becoming a
   horizontally scrollable strip. Text may wrap cleanly on narrow desktops. */
#bctc .bctc-lower #greenTabs {
  display: flex !important;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

#bctc .bctc-lower #greenTabs .tab-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 2px clamp(2px, 0.22vw, 4px) !important;
  font-size: clamp(9px, 0.6vw, 11px);
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Business-plan history: fixed, responsive columns prevent long headers from
   extending the table beyond its pane. Vertical scrolling remains available
   for rows, but horizontal scrolling is eliminated. */
#bctc .bctc-lower .bctc-history-table {
  overflow-x: hidden;
  overflow-y: auto;
}

#bctc .bctc-lower .bctc-history-data-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
  font-size: clamp(8px, 0.57vw, 10px);
}

#bctc .bctc-lower .bctc-history-data-table th,
#bctc .bctc-lower .bctc-history-data-table td {
  padding: 1px clamp(1px, 0.12vw, 3px) !important;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: middle;
}

#bctc .bctc-lower .bctc-history-data-table th {
  font-size: clamp(8px, 0.57vw, 10px) !important;
  font-weight: 700;
}

/* Apply the same compact, wrapping treatment to the NĐT nước ngoài daily
   table so every header remains visible inside the Tab B content width. */
#bctc .bctc-lower .bctc-pane-latest {
  overflow-x: hidden;
}

#bctc .bctc-lower .bctc-pane-latest > table {
  width: 100% !important;
  table-layout: fixed;
}

#bctc .bctc-lower .bctc-pane-latest th,
#bctc .bctc-lower .bctc-pane-latest td {
  padding: 1px clamp(1px, 0.12vw, 3px) !important;
  font-size: clamp(8px, 0.57vw, 10px) !important;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: middle;
}

/* ========================================================================
   FUNDAMENTAL ANALYSIS - v21 original type scale with weighted columns
   ======================================================================== */
/* Restore the 11px table typography. Column widths are assigned from the
   header lengths in JavaScript, so short labels do not steal room from long
   labels and no horizontal scrolling is required. */
#bctc .bctc-lower .bctc-history-data-table,
#bctc .bctc-lower .bctc-history-data-table th,
#bctc .bctc-lower .bctc-history-data-table td,
#bctc .bctc-lower .bctc-pane-latest th,
#bctc .bctc-lower .bctc-pane-latest td {
  font-size: 11px !important;
}

#bctc .bctc-lower .bctc-history-data-table th,
#bctc .bctc-lower .bctc-history-data-table td,
#bctc .bctc-lower .bctc-pane-latest th,
#bctc .bctc-lower .bctc-pane-latest td {
  padding: 1px 2px !important;
}

/* Restore the original tab-label scale, while assigning more space to the
   first and third labels that contain more words. */
#bctc .bctc-lower #greenTabs .tab-item {
  padding: 2px 3px !important;
  font-size: 12px;
}

#bctc .bctc-lower #tabExtra1 {
  flex: 34 1 0 !important;
}

#bctc .bctc-lower #tabExtra2 {
  flex: 27 1 0 !important;
}

#bctc .bctc-lower #tabTable {
  flex: 39 1 0 !important;
}