:root {
  --bs-body-font-size: 12px;
  /* Giá trị thực được dashboard.js đo lại sau khi navbar render xong. */
  --app-navbar-height: 25px;
  --app-page-top-gap: 4px;
}

html, body {
  height: 100%;
  margin: 0;
  overflow-x: auto;
}

/* Bắt đầu toàn bộ vùng tab sau navbar fixed và chừa thêm một nhịp 4px. Nhờ
   dùng chiều cao navbar thực tế, tab mẹ lẫn tab con không bị navbar che khi
   menu/tài khoản làm navbar cao hơn ở từng độ rộng màn hình. */
.app-page-content {
  padding-top: calc(var(--app-navbar-height) + var(--app-page-top-gap));
}

/* Popup hướng dẫn chuyển ID: navbar có z-index cao nên modal phải bắt đầu
   sau đáy navbar, tránh che header và nút đóng khi Bootstrap mở modal. */
#huongDanChuyenIDModal {
  top: calc(var(--app-navbar-height, 32px) + 8px);
  bottom: auto;
  height: calc(100dvh - var(--app-navbar-height, 32px) - 8px);
  overflow-y: auto;
  padding: 0 16px 10px;
}

#huongDanChuyenIDModal .register-guide-modal-dialog {
  min-height: 0;
  margin-top: 0;
}

/* Trên màn hình hẹp, toàn bộ khu dashboard bắt đầu dưới navbar fixed kèm
   cùng khoảng thở 4px. Dùng một quy tắc chung để chuyển tab không làm mép
   nội dung nhảy lên/xuống. */
@media (max-width: 900px) {
  body.no-scroll-y .app-page-content {
    padding-top: calc(var(--app-navbar-height, 32px) + var(--app-page-top-gap)) !important;
  }
}

/* Dashboard desktop là một khung viewport hoàn chỉnh: phần tab luôn nhận
   đúng toàn bộ chiều cao còn lại sau navbar, không còn khoảng đáy cố định.
   Chỉ áp dụng cho dashboard (body.no-scroll-y), nên không ảnh hưởng các trang
   nội dung dài khác dùng chung base.html. */
@media (min-width: 901px) {
  body.no-scroll-y .app-page-content {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
  }

  body.no-scroll-y .tab-wrapper {
    flex: 1 1 auto;
    min-height: 0;
  }

  body.no-scroll-y .tab-content {
    min-height: 0;
  }
}

/* Điện thoại để nội dung dài nở tự nhiên nhưng vẫn tối thiểu bằng một khung
   nhìn đầy đủ. Các breakpoint riêng của từng tab vẫn quyết định vùng cuộn. */
@media (max-width: 900px) {
  body.no-scroll-y .app-page-content {
    min-height: 100dvh;
    box-sizing: border-box;
  }
}
/* 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;}

/* Điều khiển Livestream chỉ được JavaScript thêm vào menu tài khoản khi
   backend đã cấp đúng quyền Broker. Lớp is-livestream-mode là điểm móc để
   bổ sung các quy tắc che thông tin ở các bước tiếp theo. */
#navbar .livestream-mode-divider {
  height: 0;
  margin: 5px 8px;
  overflow: hidden;
  border-top: 1px solid #dbe3ef;
  list-style: none;
}

#navbar .livestream-mode-control {
  padding: 4px 10px 6px;
  list-style: none;
}

#navbar .livestream-mode-control__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

#navbar .livestream-mode-switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 22px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: #94a3b8;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

#navbar .livestream-mode-switch:hover {
  background: #64748b;
}

#navbar .livestream-mode-switch:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

#navbar .livestream-mode-switch__state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 14px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

#navbar .livestream-mode-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
  transition: transform 0.18s ease;
  pointer-events: none;
}

#navbar .livestream-mode-switch.is-on {
  background: #2563eb;
}

#navbar .livestream-mode-switch.is-on:hover {
  background: #1d4ed8;
}

#navbar .livestream-mode-switch.is-on .livestream-mode-switch__state {
  padding-right: 14px;
  padding-left: 0;
}

#navbar .livestream-mode-switch.is-on .livestream-mode-switch__thumb {
  transform: translateX(26px);
}

/* BCTC: chỉ che phần giá trị của CẢNH BÁO trong cụm xu thế khi Livestream
   bật. Nhãn "CẢNH BÁO" và màu nền tín hiệu vẫn được giữ nguyên. */
.bctc-livestream-signal-warning__mask {
  display: none;
}

html.is-livestream-mode #bctc #ta_sigaction.bctc-livestream-signal-warning--has-data {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  min-height: 17px;
  vertical-align: middle;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
}

html.is-livestream-mode #bctc #ta_sigaction.bctc-livestream-signal-warning--has-data > .bctc-livestream-signal-warning__mask {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.14);
}

html.is-livestream-mode #bctc .bctc-livestream-signal-warning__mask svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.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%;}

/* Điều khiển Kỳ/Năm chỉ xuất hiện trong luồng giao diện điện thoại. */
.bctc-mobile-period-switch {
  display: none;
}

#navbar {
  display: flex;
  align-items: center;
  width: 100%;
  /* #navbar cũng mang lớp Bootstrap container-fluid ở layout gốc. Bỏ đệm
     mặc định của container để logo và tài khoản thật sự bám hai mép. */
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Chỉ ticker có overflow hidden. Navbar phải cho dropdown tràn xuống ngoài
     khung và đứng trên các bảng/sticky header bên dưới. */
  overflow: visible;
  /* Menu/tài khoản phải luôn thao tác được trên popup Danh sách phân tích
     và popup CHART (có z-index 100100 để phủ lớp TradingView). */
  z-index: 100300;
}
#navbar .dropdown-menu {
  z-index: 100301;
}
/* LEFT */
#navbar > .dropdown:first-child {
  flex: 0 0 auto;
  /* Template navbar có margin tiện ích ở dropdown MENU. Nó tạo một dải trống
     rõ rệt trước ticker; bỏ margin ngoài, chỉ để ticker nối gọn với nút. */
  margin-right: 0 !important;
}

/* Menu điều hướng chính: cùng ngôn ngữ thị giác với nút tài khoản nhưng dùng
   sắc xanh đậm để nhận biết đây là điểm bắt đầu điều hướng. */
#navbar .navbar-main-menu-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  margin: 1px 0;
  padding: 3px 9px 3px 8px !important;
  border: 1px solid #075985 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0f7dbb 0%, #075985 100%) !important;
  box-shadow: 0 1px 3px rgba(7, 89, 133, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font: 750 10px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.55px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#navbar .navbar-main-menu-toggle:hover,
#navbar .navbar-main-menu-toggle:focus-visible {
  background: linear-gradient(135deg, #0b6599 0%, #064568 100%) !important;
  box-shadow: 0 3px 8px rgba(7, 89, 133, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

#navbar .navbar-main-menu-toggle:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

#navbar .navbar-main-menu-toggle::after {
  margin: 0 0 0 1px;
  border-top-color: currentColor;
}

#navbar .navbar-main-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}

#navbar .navbar-main-menu-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

/* Popup MENU gọn theo độ dài mục lớn nhất, bề mặt sáng và các mục dễ quét.
   Dropdown vẫn dùng hành vi Bootstrap gốc. */
#navbar .navbar-main-menu-panel {
  width: max-content;
  min-width: 148px;
  max-width: calc(100vw - 12px);
  margin-top: 7px !important;
  padding: 5px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 12px 28px rgba(15, 58, 94, 0.2);
}

#navbar .navbar-main-menu-panel .dropdown-item,
#navbar .navbar-main-menu-panel > li > a,
#navbar .navbar-main-menu-panel > li > button,
#navbar .navbar-main-menu-panel > a,
#navbar .navbar-main-menu-panel > button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 1px 0;
  padding: 6px 9px;
  border-radius: 8px;
  color: #334155;
  font: 650 11px/1.25 "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  transition: color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

#navbar .navbar-main-menu-panel .dropdown-item:hover,
#navbar .navbar-main-menu-panel .dropdown-item:focus,
#navbar .navbar-main-menu-panel > li > a:hover,
#navbar .navbar-main-menu-panel > li > a:focus,
#navbar .navbar-main-menu-panel > li > button:hover,
#navbar .navbar-main-menu-panel > li > button:focus,
#navbar .navbar-main-menu-panel > a:hover,
#navbar .navbar-main-menu-panel > a:focus,
#navbar .navbar-main-menu-panel > button:hover,
#navbar .navbar-main-menu-panel > button:focus {
  color: #075985;
  background: #e7f4fb;
  transform: translateX(2px);
}

#navbar .navbar-main-menu-item-icon {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(14, 116, 171, 0.14);
  border-radius: 6px;
  color: #0369a1;
  background: #e0f2fe;
  transition: color 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

#navbar .navbar-main-menu-item-icon svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#navbar .navbar-main-menu-item-icon--dashboard {
  border-color: rgba(79, 70, 229, 0.16);
  color: #4338ca;
  background: #eef2ff;
}

#navbar .navbar-main-menu-item-icon--warning {
  border-color: rgba(217, 119, 6, 0.2);
  color: #b45309;
  background: #fff7ed;
}

#navbar .navbar-main-menu-panel .dropdown-item:hover .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel .dropdown-item:focus .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel > li > a:hover .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel > li > a:focus .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel > li > button:hover .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel > li > button:focus .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel > a:hover .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel > a:focus .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel > button:hover .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel > button:focus .navbar-main-menu-item-icon {
  border-color: rgba(14, 116, 171, 0.22);
  color: #075985;
  background: #ffffff;
}

#navbar .navbar-main-menu-panel .dropdown-item.active,
#navbar .navbar-main-menu-panel .dropdown-item:active {
  color: #ffffff;
  background: #087eb7;
}

#navbar .navbar-main-menu-panel .dropdown-item.active .navbar-main-menu-item-icon,
#navbar .navbar-main-menu-panel .dropdown-item:active .navbar-main-menu-item-icon {
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

#navbar .navbar-main-menu-panel .dropdown-divider {
  margin: 5px 3px;
  border-top-color: #e2e8f0;
}

#navbar .navbar-main-menu-panel .dropdown-header {
  padding: 6px 10px 4px;
  color: #64748b;
  font: 750 9px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Dấu nhận diện AIMAXSTOCK cạnh Menu dùng chính favicon đang hiển thị trên
   tab trình duyệt. Chỉ hiển thị ảnh gốc, không đặt trong khung/ô nền riêng. */
#navbar .navbar-brand-favicon {
  display: inline-grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  /* Chừa gần như đều hai bên ảnh: logo không dính lề, cũng không bị tách
     xa khỏi MENU. */
  margin: 0 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

#navbar .navbar-brand-favicon img {
  display: block;
  width: 28px;
  height: 28px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* Dropdown MENU từng có margin tiện ích từ template. Khi logo đứng trước,
   bỏ toàn bộ margin ngoài của dropdown để logo–MENU–ticker nối liền nhau. */
#navbar > .navbar-brand-favicon + .dropdown {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* CENTER: ticker chỉ số chạy liên tục. Khung luôn cắt nội dung, còn từng chỉ
   số giữ nguyên kích thước nên mobile không thu nhỏ chữ/số. */
#navbar .navbar-market-ticker {
  flex: 1;
  display: flex;
  min-width: 0;
  overflow: hidden;
}
.market-ticker-viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
.market-ticker-track {
  --market-ticker-distance: 0px;
  --market-ticker-duration: 38s;
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: none;
}
.market-ticker-track.market-ticker-track--ready {
  animation: market-ticker-scroll var(--market-ticker-duration) linear infinite;
}
.market-ticker-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  /* Khoảng cách cuối dải đúng bằng nhịp giữa hai chỉ báo. Khi nối bản sao,
     ticker vẫn liên tục mà không tạo một quãng trắng ở điểm lặp. */
  padding-right: 8px;
  box-sizing: border-box;
}
.market-ticker-group[data-market-ticker-mirror="true"] {
  pointer-events: none;
}
.market-ticker-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid rgba(25, 118, 210, 0.12);
  border-radius: 5px;
  background: #f8fbff;
  color: #17212b;
  font-size: 11px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.market-ticker-name {
  color: #17212b;
  font-weight: 700;
}
.market-ticker-separator {
  color: #9aa8b5;
}
.market-ticker-viewport:hover .market-ticker-track,
.market-ticker-viewport:focus-within .market-ticker-track {
  animation-play-state: paused;
}
@keyframes market-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(0px - var(--market-ticker-distance)), 0, 0); }
}
/* RIGHT */
#navbar > .dropdown:last-child,
#navbar > .ms-auto {
  flex: 0 0 auto;
  margin-right: 0 !important;
}
.navbar-account-greeting--compact {
  display: none;
}

/* Nút tài khoản desktop: tên rõ ràng, badge gói dịch vụ tách biệt và mũi tên
   nhẹ. Lớp được JavaScript gắn vào đúng dropdown chứa thông tin tài khoản. */
#navbar .navbar-account-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  /* Không chừa margin ngoài: cụm tài khoản bám sát mép phải của navbar. */
  margin: 1px 0;
  padding: 3px 8px 3px 10px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  color: #1e293b !important;
  background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 100%) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  font: 600 12px/1.15 "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

#navbar .navbar-account-toggle:hover {
  border-color: #7eb8da !important;
  background: linear-gradient(135deg, #ffffff 0%, #e8f4fb 100%) !important;
  box-shadow: 0 3px 8px rgba(14, 116, 171, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  color: #0c4a6e !important;
  transform: translateY(-1px);
}

#navbar .navbar-account-toggle:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

#navbar .navbar-account-toggle::after {
  margin: 0 0 0 1px;
  border-top-color: #64748b;
}

#navbar .navbar-account-greeting--full {
  display: inline-flex;
  align-items: center;
  color: #334155;
  font-weight: 600;
}

#navbar .navbar-account-greeting--full strong,
#navbar .navbar-account-greeting--full b {
  color: #0f172a;
  font-weight: 750;
}

#navbar .navbar-account-toggle .navbar-account-plan-badge,
#navbar .navbar-account-toggle .badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px;
  border: 1px solid rgba(5, 150, 105, 0.28);
  border-radius: 999px;
  color: #047857;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font: 750 9px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.18px;
  text-transform: uppercase;
}

/* Biểu tượng tài khoản ở navbar hẹp. SVG được tạo từ JavaScript để không
   cần tải thêm ảnh, vẫn sắc nét trên mọi mật độ điểm ảnh. */
.navbar-account-greeting--compact.navbar-account-greeting--icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin-right: 4px;
  vertical-align: middle;
  border: 1px solid rgba(7, 89, 133, 0.22);
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, #1685c3, #075985);
  box-shadow: 0 1px 3px rgba(7, 89, 133, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.navbar-account-greeting--icon svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

#navbar .dropdown:hover .navbar-account-greeting--icon,
#navbar .dropdown:focus-within .navbar-account-greeting--icon {
  background: linear-gradient(145deg, #0f6fa8, #064a70);
  box-shadow: 0 2px 5px rgba(7, 89, 133, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* Desktop hiển thị trực tiếp tên tài khoản (không có tiền tố “Xin chào”).
   Khi hẹp, nút chỉ giữ icon tài khoản để navbar gọn và rõ ràng. */
@media (max-width: 900px) {
  #navbar .navbar-main-menu-toggle {
    gap: 4px;
    min-height: 25px;
    padding: 2px 6px !important;
    letter-spacing: 0.35px;
  }
  #navbar .navbar-main-menu-panel {
    min-width: min(148px, calc(100vw - 12px));
    margin-top: 5px !important;
    border-radius: 10px;
  }
  .navbar-account-greeting--full {
    display: none;
  }
  /* Tên tài khoản có thể là text trực tiếp hoặc phần tử do backend tạo. Lớp
     này được base.html gắn vào mọi nội dung desktop để mobile chỉ còn icon. */
  #navbar .navbar-account-toggle .navbar-account-desktop-content {
    display: none !important;
  }
  #navbar .navbar-account-toggle .navbar-account-mobile-icon {
    display: inline-flex !important;
  }
  #navbar .navbar-account-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 31px;
    min-width: 31px;
    height: 31px;
    min-height: 31px;
    margin: 0;
    padding: 3px !important;
    gap: 0;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #navbar .navbar-account-toggle::after {
    display: none;
  }
  #navbar .navbar-account-toggle .navbar-account-plan-badge,
  #navbar .navbar-account-toggle .badge {
    display: none !important;
  }
  .navbar-account-greeting--compact {
    display: inline-flex;
  }
  .navbar-account-greeting--compact.navbar-account-greeting--icon {
    display: inline-flex;
    width: 25px;
    height: 25px;
    margin: 0;
  }
  /* Viền focus nằm trên chính icon, thay vì outline lớn bao quanh cả vùng bấm. */
  #navbar .navbar-account-toggle:focus-visible {
    outline: none;
  }
  #navbar .navbar-account-toggle:focus-visible .navbar-account-greeting--icon {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.88), 0 1px 3px rgba(7, 89, 133, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  #navbar .navbar-account-toggle:hover,
  #navbar .navbar-account-toggle:focus-visible {
    background: rgba(14, 116, 171, 0.08) !important;
    box-shadow: none !important;
    transform: none;
  }
}
@media (max-width: 768px) {
  #navbar {
    min-height: 32px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #navbar .navbar-brand-favicon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    margin: 0 2px 0 0;
    padding: 0;
  }
  #navbar .navbar-brand-favicon img {
    width: 28px;
    height: 28px;
    border-radius: 0;
  }
  #navbar > .navbar-brand-favicon + .dropdown {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #navbar > .dropdown:first-child {
    margin-left: 2px !important;
    margin-right: 4px !important;
  }
  #navbar > .dropdown:last-child {
    margin-right: 0 !important;
  }
  #navbar .navbar-market-ticker {
    justify-content: flex-start;
  }
  .market-ticker-track {
    animation-duration: 30s;
  }
  .market-ticker-group {
    gap: 6px;
    padding-right: 6px;
  }
  .market-ticker-item {
    gap: 3px;
    padding: 3px 5px;
    font-size: 10.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .market-ticker-track { animation: none; }
}
.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;
}

/* Nút phóng to riêng cho từng biểu đồ trong tab PHÂN TÍCH CƠ BẢN. */
.bctc-chart-box {
    position: relative;
}

.bctc-chart-expand {
    position: absolute;
    z-index: 5;
    top: 3px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 1px solid #bfdbfe;
    border-radius: 3px;
    color: #2563eb;
    background: rgba(239, 246, 255, 0.95);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
}

.bctc-chart-expand:hover {
    color: #ffffff;
    background: #2563eb;
}

.bctc-chart-modal {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.46);
}

.bctc-chart-modal-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(860px, 76vw);
    height: min(560px, 70vh);
    min-height: 0;
    overflow: hidden;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 22px 65px rgba(15, 23, 42, 0.3);
}

.bctc-chart-modal-header {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 7px 46px 7px 14px;
    border-bottom: 1px solid #dbeafe;
    color: #0f3b75;
    background: #eff6ff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.bctc-chart-modal-slot {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
}

.bctc-chart-box--expanded {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.bctc-chart-box--expanded .bctc-chart-expand {
    display: none;
}

.bctc-chart-box--expanded canvas {
    width: 100% !important;
    height: 100% !important;
}

.bctc-chart-modal-close {
    position: absolute;
    top: 7px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    background: #fff1f2;
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.bctc-chart-modal-close:hover {
    color: #ffffff;
    background: #dc2626;
}

@media (max-width: 768px) {
    .bctc-chart-modal {
        padding: 8px;
    }

    .bctc-chart-modal-dialog {
        width: 92vw;
        height: 76dvh;
    }
}
/* Đả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;
}
/* Khi chuyển mã trong TradingView, trạng thái chờ được giới hạn ở chính
   chart thay vì che toàn bộ dashboard. */
#ptkt .stock-analysis-trigger,
#ptkt .stock-analysis-trigger * {
    -webkit-user-select: none;
    user-select: none;
}
#tv_ticker_loading_overlay {
    gap: 10px;
}
#tv_ticker_loading_overlay .tv-ticker-loading-spinner {
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 3px solid #dbeafe;
    border-top-color: #087ec8;
    border-radius: 50%;
    animation: tv-ticker-loading-spin .72s linear infinite;
}
@keyframes tv-ticker-loading-spin {
    to { transform: rotate(360deg); }
}
.container {
    display: flex;
    position: relative;
    width: 100%;
    gap: 10px;
    margin: 0;
}

/* Không dùng max-width mặc định của Bootstrap trong tab theo dõi: vùng bảng
   luôn nhận toàn bộ chiều ngang còn lại của màn hình. */
#ptkt,
#ptkt > .container,
#ptkt .left-col {
    box-sizing: border-box;
    min-width: 0;
    max-width: none;
}
#ptkt > .container {
    width: 100%;
    padding: 0 14px;
    margin: 0 auto;
}
.left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    gap: 10px;
    align-items: center;
}
/* Khu theo dõi riêng là nội dung nội tuyến, mặc định được ẩn cho đến khi
   người dùng bật từ thanh tiêu đề thay vì là sidebar/popup cố định. */
#ptkt > .container .right-col {
    position: static;
    display: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    transition: none;
}
#right-col-origin-anchor {
    display: none;
}
/* Màn hình lớn: hai nửa ngang; phần bảng còn lại bên trái chuyển sang một
   cột dọc để đọc rõ trong nửa bề ngang của nó. */
#ptkt > .container.ptkt-private-watch-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}
#ptkt > .container.ptkt-private-watch-open > .left-col {
    grid-column: 1;
    width: 100%;
    align-items: stretch;
}
#ptkt > .container.ptkt-private-watch-open > .right-col {
    display: block;
    grid-column: 2;
    /* Căn đỉnh tiêu đề khu theo dõi riêng cùng hàng với bảng VNINDEX ở trái. */
    padding-top: 10px;
}
#ptkt > .container.ptkt-private-watch-open .left-col > .stock-box[data-box-id="1"] {
    width: 100%;
    align-self: stretch;
}
#ptkt > .container.ptkt-private-watch-open .left-col .group-1-1-2 {
    flex-flow: column nowrap;
    align-items: stretch;
}
#ptkt > .container.ptkt-private-watch-open .left-col .group-1-1-2 .stock-box {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}
#ptkt > .container.ptkt-private-watch-open .left-col #group3-grid.layout-horizontal {
    grid-template-columns: minmax(0, 1fr);
}
/* Khi mở khu theo dõi riêng trên desktop, hai nửa của tab có vùng cuộn dọc
   độc lập; thanh tiêu đề luôn giữ nguyên ở phía trên. */
@media (min-width: 901px) {
    #ptkt.tab-content.active.ptkt-split-scroll {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #ptkt.tab-content.active.ptkt-split-scroll > #ptkt-main-heading {
        flex: 0 0 auto;
    }
    #ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open {
        /* flex-basis 0 buộc vùng nội dung nhận đúng phần chiều cao còn lại
           dưới header, thay vì nở theo toàn bộ nội dung của hai cột. */
        flex: 1 1 0;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
    }
    #ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .left-col,
    #ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .right-col {
        height: 100%;
        max-height: 100%;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 transparent;
    }
    #ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .left-col::-webkit-scrollbar,
    #ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .right-col::-webkit-scrollbar {
        width: 7px;
    }
    #ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .left-col::-webkit-scrollbar-thumb,
    #ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .right-col::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #94a3b8;
    }
}
.stock-box { 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    padding: 1px; 
    width: auto;
    min-width: 730px;
}

/* Tab Cổ phiếu theo dõi có thể thêm cột realtime. Bảng luôn co theo khung
   đang chứa nó; nội dung dài xuống dòng thay vì nới chiều ngang của trang. */
#ptkt .stock-box {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
/* VNINDEX dùng bảng cùng thanh phân bổ ngang ở bên trái. Bề ngang bảng gốc
   vẫn được giữ gần như cũ, phần tăng thêm dành riêng cho thanh phân bổ. */
#ptkt .stock-box[data-box-id="1"] {
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    column-gap: 10px;
    width: min(calc(50% + 174px), 1098px);
    align-self: center;
    padding: 6px;
    border: 2px solid #249fdf;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(14, 116, 166, 0.16);
}
#ptkt .stock-box[data-box-id="1"] > .ptkt-vnindex-title {
    grid-column: 2;
    grid-row: 1;
}
#ptkt .stock-box[data-box-id="1"] > table {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
#ptkt .ptkt-vnindex-allocation {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #92cdec;
    border-radius: 9px;
    color: #334155;
    background: linear-gradient(145deg, #f7fcff 0%, #e7f6ff 100%);
    box-shadow: 0 3px 10px rgba(14, 116, 166, 0.16);
}
#ptkt .ptkt-vnindex-allocation__title {
    width: 100%;
    padding: 4px 3px;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(90deg, #097db9, #22a7e8);
    font: 700 10.2px/1.1 "Segoe UI", Arial, sans-serif;
    letter-spacing: 0.22px;
    text-align: center;
}
#ptkt .ptkt-vnindex-allocation__bar {
    --ptkt-stock-percent: 0;
    display: flex;
    width: 100%;
    height: 17px;
    overflow: hidden;
    border: 1px solid #d6e1e8;
    border-radius: 999px;
    background: #e8edf0;
    box-shadow: inset 0 1px 2px rgba(15, 78, 112, 0.16), 0 1px 2px rgba(15, 78, 112, 0.1);
}
#ptkt .ptkt-vnindex-allocation__bar-stock {
    flex: 0 0 calc(var(--ptkt-stock-percent) * 1%);
    min-width: 0;
    background: linear-gradient(90deg, #0a9d55, #38c879);
    transition: flex-basis 220ms ease;
}
#ptkt .ptkt-vnindex-allocation__bar-cash {
    flex: 1 1 auto;
    min-width: 0;
    background: linear-gradient(90deg, #f7cb55, #efa622);
    transition: background 220ms ease;
}
#ptkt .ptkt-vnindex-allocation__legend {
    display: grid;
    width: 100%;
    gap: 5px;
}
#ptkt .ptkt-vnindex-allocation__legend-item {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    color: #475569;
    font: 600 10px/1.15 "Segoe UI", Arial, sans-serif;
    white-space: nowrap;
}
#ptkt .ptkt-vnindex-allocation__legend-item i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
#ptkt .ptkt-vnindex-allocation__legend-item--stock i { background: #169b57; }
#ptkt .ptkt-vnindex-allocation__legend-item--cash i { background: #f0ae28; }
#ptkt .ptkt-vnindex-allocation__legend-item strong {
    color: #0f172a;
    font-size: 11px;
    font-weight: 800;
}
#ptkt .ptkt-vnindex-allocation.is-waiting .ptkt-vnindex-allocation__bar-stock {
    flex-basis: 0;
}
#ptkt .ptkt-vnindex-allocation.is-waiting .ptkt-vnindex-allocation__bar-cash {
    background: #d9e2e8;
}
/* VNINDEX không dùng số thứ hạng; ẩn cả tiêu đề và ô STT của bảng này. */
#ptkt .stock-box[data-box-id="1"] th:first-child,
#ptkt .stock-box[data-box-id="1"] td:first-child {
    display: none;
}
/* VNINDEX có thêm tổng NDTNN ngay sau Sharks, nên phân bổ lại chiều ngang
   riêng để tất cả cột vẫn nằm gọn trong nửa khung trên màn hình rộng. */
#ptkt .stock-box[data-box-id="1"] th:nth-child(2),
#ptkt .stock-box[data-box-id="1"] td:nth-child(2) { width: 10%; }
#ptkt .stock-box[data-box-id="1"] th:nth-child(3),
#ptkt .stock-box[data-box-id="1"] td:nth-child(3) { width: 14%; }
#ptkt .stock-box[data-box-id="1"] th:nth-child(4),
#ptkt .stock-box[data-box-id="1"] td:nth-child(4) { width: 11%; }
#ptkt .stock-box[data-box-id="1"] th:nth-child(5),
#ptkt .stock-box[data-box-id="1"] td:nth-child(5) { width: 12%; }
#ptkt .stock-box[data-box-id="1"] th:nth-child(6),
#ptkt .stock-box[data-box-id="1"] td:nth-child(6) { width: 18%; }
#ptkt .stock-box[data-box-id="1"] th:nth-child(7),
#ptkt .stock-box[data-box-id="1"] td:nth-child(7) { width: 17%; }
#ptkt .stock-box[data-box-id="1"] th:nth-child(8),
#ptkt .stock-box[data-box-id="1"] td:nth-child(8) { width: 9%; }
#ptkt .stock-box[data-box-id="1"] th:nth-child(9),
#ptkt .stock-box[data-box-id="1"] td:nth-child(9) {
    width: 9%;
    white-space: nowrap;
    overflow-wrap: normal;
}
.ptkt-vnindex-title,
.ptkt-vnindex-price-header--mobile {
    display: none;
}
#ptkt .stock-box table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    /* Tạo khe trắng thật giữa các hàng, kể cả khi ô có nền màu xu thế. */
    border-collapse: separate;
    border-spacing: 0 2px;
}

/* Phân tách từng mã rõ hơn như bảng LIST THEO DÕI ƯU TIÊN. Màu trạng thái
   được gán trực tiếp cho từng ô vẫn có độ ưu tiên cao hơn nền zebra này. */
#ptkt .stock-box table:not(#valuationCTCKTable) tbody tr:nth-child(even) > td {
    background-color: #f8fafc;
}
#ptkt .stock-box table:not(#valuationCTCKTable) tbody tr:hover {
    outline: 1px solid #2f2f2f;
    outline-offset: -1px;
}
#ptkt .stock-box table:not(#valuationCTCKTable) tbody tr:hover > td {
    background-color: #edf5ff;
}
#ptkt .stock-box th,
#ptkt .stock-box td {
    min-width: 0;
    padding: 3px clamp(1px, 0.18vw, 4px);
    font-size: clamp(8px, 0.72vw, 12px);
    line-height: 1.15;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* TOP/STT và Mã & F.A có phần bề ngang cố định để tiêu đề Mã & F.A
   luôn nằm trên một dòng. */
#ptkt .stock-box th:nth-child(1),
#ptkt .stock-box td:nth-child(1) {
    width: 3%;
    white-space: nowrap;
    overflow-wrap: normal;
}
#ptkt .stock-box th:nth-child(2),
#ptkt .stock-box td:nth-child(2) {
    width: 7%;
}
#ptkt .stock-box td:nth-child(2) {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Cột thứ 6 luôn là Biến động trong các bảng theo dõi. Giữ nguyên một dòng
   và rút gọn chữ theo bề ngang bảng để không làm lệch các cột còn lại. */
#ptkt .stock-box th:nth-child(6),
#ptkt .stock-box td:nth-child(6) {
    width: 13%;
    font-size: clamp(7px, 0.62vw, 11px);
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Price dùng một dòng sau khi bỏ cột SHARKS 6Days. */
#ptkt .stock-box th:nth-child(3),
#ptkt .stock-box td:nth-child(3) {
    width: 13%;
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Key (cột 4) không tự ngắt dòng. */
#ptkt .stock-box th:nth-child(4),
#ptkt .stock-box td:nth-child(4) {
    width: 6%;
    white-space: nowrap;
    overflow-wrap: normal;
}

/* XU THẾ (cột 5) luôn ở một dòng, kể cả TRUNG LẬP. */
#ptkt .stock-box th:nth-child(5),
#ptkt .stock-box td:nth-child(5) {
    width: 9%;
    white-space: nowrap;
    overflow-wrap: normal;
}
#ptkt .ptkt-trend-break {
    display: none;
}
.ptkt-trend-neutral-mobile {
    display: none;
}
.ptkt-qtrr-break {
    display: none;
}
.ptkt-ndtnn-mobile-break {
    display: none;
}
/* Thanh tiêu đề riêng của toàn tab Cổ phiếu theo dõi. */
#ptkt-main-heading.ptkt-dashboard-header {
    display: grid;
    grid-template-columns: minmax(158px, 0.55fr) minmax(0, 1.9fr) minmax(158px, 0.55fr);
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 200;
    box-sizing: border-box;
    width: calc(100% - 28px);
    min-height: 62px;
    /* Căn đỉnh cùng hệ với tab TẦM SOÁT THỊ TRƯỜNG: khung header bắt đầu
       ngay tại mép trên vùng tab, chỉ giữ khoảng cách phía dưới với bảng. */
    margin: 0 14px 9px;
    padding: 9px 15px;
    overflow: hidden;
    border: 1px solid #35a8ec;
    border-radius: 8px;
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.2), transparent 26%),
        linear-gradient(106deg, #087ec8 0%, #19a1e5 52%, #0b80ca 100%);
    box-shadow: 0 7px 17px rgba(14, 128, 204, 0.24);
    color: #fff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-kerning: normal;
    text-transform: uppercase;
}
#ptkt-main-heading.ptkt-dashboard-header::before {
    position: absolute;
    top: -38px;
    left: -118px;
    width: 260px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    content: "";
    pointer-events: none;
}
.ptkt-dashboard-header__start,
.ptkt-dashboard-header__title,
.ptkt-dashboard-header__private-action {
    position: relative;
    z-index: 1;
}
.ptkt-dashboard-header__start {
    justify-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-left: 10px;
    border-left: 3px solid #e0f5ff;
    text-align: left;
}
.ptkt-dashboard-header__start-label {
    color: #e7f7ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.55px;
    line-height: 1.15;
}
.ptkt-dashboard-header__start-time {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
}
.ptkt-dashboard-header__title {
    justify-self: center;
    max-width: 820px;
    color: #fff;
    font-size: clamp(12px, 1.23vw, 17px);
    font-weight: 700;
    letter-spacing: 0.25px;
    line-height: 1.28;
    text-align: center;
    text-shadow: 0 1px 1px rgba(6, 66, 111, 0.18);
}
.ptkt-dashboard-header__title > span {
    display: block;
}
.ptkt-dashboard-header__private-action {
    justify-self: end;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle {
    position: static;
    display: inline-grid;
    min-width: 132px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    background: rgba(5, 68, 116, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
    font: 700 10px/1.15 "Segoe UI", Arial, sans-serif;
    letter-spacing: 0.25px;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle span {
    display: block;
}
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle.is-active {
    border-color: #fff;
    background: #fff;
    box-shadow: 0 3px 8px rgba(6, 66, 111, 0.2);
    color: #087ec8;
}
#ptkt .ptkt-sharks-header-title,
#ptkt .ptkt-ndtnn-header-title {
    white-space: nowrap;
}

/* Cột Cảnh báo (thứ 7) giữ nguyên một dòng, kể cả Canh Mua/Bán Trading. */
#ptkt .stock-box th:nth-child(7),
#ptkt .stock-box td:nth-child(7) {
    width: 14%;
    font-size: clamp(7px, 0.62vw, 11px);
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Cột SHARKS ngày nhận thêm không gian sau khi bỏ SHARKS 6Days. */
#ptkt .stock-box th:nth-child(8),
#ptkt .stock-box td:nth-child(8) {
    width: 11%;
    font-size: clamp(7px, 0.62vw, 11px);
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Hai cột cuối: Tỷ trọng (10) và Hold (11) luôn hiển thị trên một dòng. */
#ptkt .stock-box th:nth-child(10),
#ptkt .stock-box td:nth-child(10),
#ptkt .stock-box th:nth-child(11),
#ptkt .stock-box td:nth-child(11) {
    font-size: clamp(7px, 0.62vw, 11px);
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Phân bổ ba cột cuối sau khi bỏ SHARKS 6Days. */
#ptkt .stock-box th:nth-child(9),
#ptkt .stock-box td:nth-child(9) { width: 7%; }
#ptkt .stock-box th:nth-child(10),
#ptkt .stock-box td:nth-child(10) { width: 10%; }
#ptkt .stock-box th:nth-child(11),
#ptkt .stock-box td:nth-child(11) { width: 7%; }

/* Chừa khoảng thở với mép phải cho cột Hold. */
#ptkt .stock-box th:nth-child(11),
#ptkt .stock-box td:nth-child(11) {
    padding-left: clamp(4px, 0.4vw, 7px);
    padding-right: clamp(4px, 0.4vw, 7px);
}

/* Căn giữa nội dung trong cột Hold (và Tỷ trọng). */
#ptkt .stock-box td:nth-child(10) > span,
#ptkt .stock-box td:nth-child(11) > span {
    display: inline-block;
    width: 100%;
    text-align: center;
}

/* Căn giữa các nhãn quản trị rủi ro và tỷ trọng. */
#ptkt .stock-box td:nth-child(10),
#ptkt .stock-box td:nth-child(11) {
    text-align: center !important;
}

/* Hold có thể ngắt theo điểm ngắt tùy chọn giữa số và %. Khi đủ bề ngang
   vẫn giữ đúng một dòng, còn khi hẹp thì % tự xuống dòng thay vì tràn ô. */
#ptkt .stock-box td:nth-child(11),
#ptkt .stock-box td:nth-child(11) .ptkt-hold-value,
#ptkt .ptkt-priority-popup__content #valuationCTCKTable td:nth-child(17) .ptkt-hold-value {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.1;
}
#ptkt .stock-box td:nth-child(11) .ptkt-hold-value {
    display: inline-block;
    width: auto;
    max-width: 100%;
}
#ptkt .stock-box td:nth-child(10) > .ptkt-safety-label,
#ptkt .stock-box td:nth-child(11) > .ptkt-safety-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}
#ptkt .ptkt-safety-label > span {
    display: block;
    width: 100%;
    text-align: center;
}
.group-1-1-2 {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.group-1-1-2 .stock-box {
    flex: 1 1 calc(50% - 10px);
}

/* BUY và SELL luôn là một cặp ngang cân đối: mỗi bảng chiếm nửa khung. */
#ptkt .group-1-1-2 {
    flex-flow: row nowrap;
    align-items: stretch;
}
#ptkt .group-1-1-2 .stock-box,
#ptkt .left-col.shrink .group-1-1-2 .stock-box {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: none;
}
#ptkt .left-col.shrink .group-1-1-2 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
}

/* Cột TOP chỉ vừa đủ cho số thứ hạng, nhường chiều ngang cho các cột dữ liệu. */
#ptkt .group-1-1-2 .stock-box th:first-child,
#ptkt .group-1-1-2 .stock-box td:first-child {
    width: 20px;
    padding-left: 1px;
    padding-right: 1px;
    white-space: nowrap;
    overflow-wrap: normal;
}
.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%;
}

/* BUY/SELL TOP: hai tab dùng chung đúng một bảng để toàn bộ cấu trúc cột,
   màu dữ liệu và luồng cập nhật realtime luôn nhất quán. */
#ptkt .ptkt-top-tabs {
  display: flex;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  margin: 0 0 2px;
}
#ptkt .ptkt-top-tab {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 22px;
  padding: 3px 6px;
  border: 1px solid #aebdca;
  border-radius: 3px;
  color: #334155;
  background: #f8fafc;
  cursor: pointer;
  font: 700 10.2px/1.1 Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
}
#ptkt .ptkt-top-tab:hover {
  border-color: #4aa5d7;
  background: #e8f6ff;
}
#ptkt .ptkt-top-tab:focus-visible {
  outline: 2px solid #38a4de;
  outline-offset: 1px;
}
#ptkt .ptkt-top-tabs--buy .ptkt-top-tab.is-active[data-ptkt-top-table-view="trading"] {
  border-color: #075ee8;
  color: #fff;
  background: #075ee8;
}
#ptkt .ptkt-top-tabs--buy .ptkt-top-tab.is-active[data-ptkt-top-table-view="ndtnn"] {
  border-color: #07843d;
  color: #fff;
  background: #07843d;
}
#ptkt .ptkt-top-tabs--sell .ptkt-top-tab.is-active {
  border-color: #e00000;
  color: #fff;
  background: #e00000;
}
.stock-box h3 { margin-top: 0; }
/* Bảng theo dõi riêng: cả ô STT là vùng bấm, mở popup thao tác cạnh ô. */
#ptkt .stt-cell--editable {
    cursor: pointer;
}
#ptkt .stt-cell--editable:hover,
#ptkt .stt-cell--editable:focus-visible {
    background-color: #eaf6ff;
    outline: 1px solid #86c7e8;
    outline-offset: -1px;
}
#ptkt .stt-action-trigger {
    display: block;
    width: 100%;
    color: inherit;
    pointer-events: none;
}
.ptkt-stt-action-popup {
    position: fixed;
    z-index: 7000;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #8fc7e6;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(15, 56, 83, 0.24);
}
.ptkt-stt-popup-button {
    min-height: 24px;
    margin: 0;
    padding: 3px 6px;
    border: 0;
    border-radius: 4px;
    font: 700 10px/1 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.ptkt-stt-popup-button--edit {
    color: #075985;
    background: #e0f2fe;
}
.ptkt-stt-popup-button--delete {
    color: #b91c1c;
    background: #fee2e2;
}
.ptkt-stt-popup-button:hover { filter: brightness(0.94); }

/* Form tạo nhóm theo dõi: nhập số tài khoản và tên trong cùng một popup. */
.ptkt-customer-form-dialog {
    width: min(360px, calc(100vw - 28px));
    max-width: none;
    margin: auto;
    padding: 0;
    border: 1px solid #8fc7e6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 56, 83, 0.3);
}
.ptkt-customer-form-dialog::backdrop {
    background: rgba(15, 56, 83, 0.38);
}
.ptkt-customer-form {
    display: grid;
    gap: 7px;
    padding: 14px;
}
.ptkt-customer-form__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}
.ptkt-customer-form__heading h2 {
    margin: 0;
    color: #076fac;
    font: 700 13px/1.2 "Segoe UI", Arial, sans-serif;
}
.ptkt-customer-form__close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #64748b;
    background: transparent;
    font: 400 22px/1 Arial, sans-serif;
    cursor: pointer;
}
.ptkt-customer-form__close:hover { background: #eaf6ff; color: #075985; }
.ptkt-customer-form label {
    color: #334155;
    font: 600 11px/1.2 "Segoe UI", Arial, sans-serif;
}
.ptkt-customer-form input {
    width: 100%;
    min-height: 31px;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #b7cad8;
    border-radius: 5px;
    color: #0f172a;
    background: #fff;
    font: 12px/1.2 "Segoe UI", Arial, sans-serif;
}
.ptkt-customer-form input:focus {
    border-color: #3b9dce;
    outline: 2px solid rgba(59, 157, 206, 0.2);
}
.ptkt-customer-form__error {
    min-height: 14px;
    margin: 0;
    color: #b91c1c;
    font: 600 10px/1.2 "Segoe UI", Arial, sans-serif;
}
.ptkt-customer-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 2px;
}
.ptkt-customer-form__actions button {
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 5px;
    font: 700 11px/1 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.ptkt-customer-form__cancel {
    border: 1px solid #b7cad8;
    color: #475569;
    background: #fff;
}
.ptkt-customer-form__submit {
    border: 1px solid #167faf;
    color: #fff;
    background: #168fc6;
}
.ptkt-customer-form__submit:hover { background: #087eb7; }
.signal-bar-wrapper {
    position: relative;
    width: 130px;
    max-width: 100%;
    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;
}

/* Hai cột SHARKs trong tab theo dõi dùng bề rộng 100px. */
#ptkt .signal-bar-wrapper {
    box-sizing: border-box;
    width: min(100px, 100%);
    max-width: 100%;
}
#ptkt .signal-bar-label {
    font-size: 8px;
}

/* Đồng nhất cỡ chữ toàn bộ bảng theo dõi. Các quy tắc riêng vẫn chỉ quyết
   định cách xuống dòng/độ rộng cột, không làm các cột to nhỏ khác nhau. */
#ptkt .stock-box th,
#ptkt .stock-box td,
#ptkt .stock-box .signal-bar-label {
    font-size: 10.2px !important;
}

/* Giá thay đổi theo phiên trong bảng Cổ phiếu theo dõi. */
.ptkt-price-change {
    font-weight: 700;
    white-space: nowrap;
}
.ptkt-price-change--positive { color: #15803d; }
.ptkt-price-change--neutral { color: #ca8a04; }
.ptkt-price-change--negative { color: #dc2626; }

/* Giá trị mua/bán ròng NDTNN. */
.ptkt-ndtnn--positive { color: #15803d; }
.ptkt-ndtnn--negative { color: #dc2626; }
.ptkt-vol-break-indicator { color: red; }

/* Livestream: thay dấu hiệu Vol Break bằng mã in đậm để giữ tín hiệu nhưng
   không hiển thị biểu tượng lửa. Áp dụng cả bảng phóng to được sao chép. */
html.is-livestream-mode #ptkt .ptkt-vol-break-indicator,
html.is-livestream-mode #ptkt-table-modal .ptkt-vol-break-indicator {
    display: none !important;
}

/* Mã Vol Break luôn in đậm; Livestream chỉ quyết định việc hiện/ẩn đốm lửa. */
#ptkt .ptkt-stock-code-cell--vol-break .ptkt-stock-code-label,
#ptkt-table-modal .ptkt-stock-code-cell--vol-break .ptkt-stock-code-label {
    font-weight: 800 !important;
    letter-spacing: 0.1px;
}

/* Gạch kép chỉ áp dụng riêng cho mã R5 mạnh, kể cả khi có biểu tượng đi kèm. */
#ptkt .stock-box .ptkt-stock-code-label--strong-r5 {
    text-decoration-line: underline !important;
    text-decoration-style: double !important;
}
#valuationCTCKTable .ptkt-stock-code-label--strong-r5 {
    text-decoration-line: underline !important;
    text-decoration-style: double !important;
}

/* Giá tham khảo xuất hiện khi rê chuột lên các tín hiệu Mua/Bán Trading được chọn. */
.ptkt-trading-action-cell {
    position: relative;
    cursor: help;
    overflow: visible !important;
}
.ptkt-trading-price-tooltip {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 6px);
    left: 50%;
    display: none;
    width: max-content;
    max-width: 180px;
    padding: 4px 7px;
    transform: translateX(-50%);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
.ptkt-trading-action-cell:hover .ptkt-trading-price-tooltip {
    display: block;
}
/* Tooltip mặc định nằm dưới ô Cảnh báo. Riêng dòng cuối đặt phía trên để
   luôn nhìn thấy trọn vẹn, không bị mép dưới bảng hoặc khung cuộn che mất. */
#ptkt .stock-box tbody > tr:last-child .ptkt-trading-price-tooltip {
    top: auto;
    bottom: calc(100% + 6px);
}
.ptkt-trading-action-cell--reliable {
    background: #d9f7be;
}
.ptkt-trading-price-tooltip--buy { color: #15803d; }
.ptkt-trading-price-tooltip--sell { color: #dc2626; }
.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;
}

/* Nút phóng to bảng và popup xem toàn màn hình. */
.ptkt-table-expand-toolbar,
.ptkt-table-expand-button {
    display: none;
}
.ptkt-table-modal {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 6px;
    background: rgba(15, 23, 42, 0.56);
}
.ptkt-table-modal__dialog {
    display: flex;
    flex: 0 1 100%;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    border: 1px solid #94a3b8;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}
.ptkt-table-modal__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 36px;
    padding: 5px 9px 5px 12px;
    border-bottom: 1px solid #cbd5e1;
    background: #f8fafc;
}
.ptkt-table-modal__header > strong {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    font: 700 13px/1.2 "Segoe UI", Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ptkt-table-modal__header-allocation {
    display: flex;
    flex: 1 1 190px;
    min-width: 152px;
    max-width: 300px;
    margin-left: 0;
}
.ptkt-table-modal__header-allocation[hidden] { display: none; }
.ptkt-table-modal__close {
    flex: 0 0 auto;
    margin-left: auto;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #dc2626;
    color: #fff;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}
.ptkt-table-modal__content {
    /* Bảng ngắn: popup chỉ cao đúng theo nội dung. Bảng dài: phần này co
       lại trong chiều cao màn hình và dùng thanh cuộn dọc. */
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 4px;
}
#ptkt .ptkt-table-modal .ptkt-modal-table-box {
    width: 100%;
    min-width: 0;
    max-width: none;
    border: 0;
}
#ptkt .ptkt-table-modal .ptkt-table-modal__header-allocation > .ptkt-customer-allocation {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
}
/* Trong popup, STT luôn đủ chỗ cho số thứ tự. Các nút sửa/xóa của bảng gốc
   không cần lặp lại trong bản xem phóng to, nên không thể tràn khỏi ô. */
#ptkt .ptkt-table-modal .ptkt-modal-table-box th:first-child,
#ptkt .ptkt-table-modal .ptkt-modal-table-box td:first-child {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    padding-right: 1px;
    padding-left: 1px;
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}
#ptkt .ptkt-table-modal .ptkt-modal-table-box .stt-cell .action-icons {
    display: none !important;
}
#ptkt .ptkt-table-modal .ptkt-modal-cost-table {
    /* Hai cột nhập liệu chỉ có trong popup desktop. Giữ một bề ngang tối
       thiểu để các cột gốc không bị ép nhỏ khi popup hẹp hơn bảng. */
    min-width: 1160px;
}
#ptkt .ptkt-table-modal .ptkt-modal-cost-header,
#ptkt .ptkt-table-modal .ptkt-modal-cost-cell {
    width: 92px;
    min-width: 92px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}
#ptkt .ptkt-table-modal .ptkt-modal-pnl-header,
#ptkt .ptkt-table-modal .ptkt-modal-pnl-cell {
    width: 104px;
    min-width: 104px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}
#ptkt .ptkt-table-modal .ptkt-modal-cost-input {
    box-sizing: border-box;
    width: 78px;
    height: 25px;
    min-height: 25px;
    padding: 2px 5px;
    border: 1px solid #94a3b8;
    border-radius: 4px;
    outline: none;
    background: #fff;
    color: #0f172a;
    font: inherit;
    line-height: 19px;
    text-align: center;
    vertical-align: middle;
}
#ptkt .ptkt-table-modal .ptkt-modal-cost-input::placeholder {
    color: #94a3b8;
    font-size: 10px;
}
#ptkt .ptkt-table-modal .ptkt-modal-cost-input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.18);
}
#ptkt .ptkt-table-modal .ptkt-modal-cost-input.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}
#ptkt .ptkt-table-modal .ptkt-modal-cost-input.is-saved:not(:focus) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
#ptkt .ptkt-table-modal .ptkt-modal-pnl--positive { color: #008b35; font-weight: 700; }
#ptkt .ptkt-table-modal .ptkt-modal-pnl--negative { color: #dc2626; font-weight: 700; }
#ptkt .ptkt-table-modal .ptkt-modal-pnl--neutral { color: #a16207; font-weight: 700; }

/* Popup desktop lấy bề ngang theo nội dung thực tế của bảng. Các cột không
   còn bị chia theo tỷ lệ của toàn màn hình; nếu bảng dài hơn màn hình, vùng
   nội dung của popup sẽ tự có thanh cuộn ngang thay vì kéo giãn popup. */
@media (min-width: 901px) {
    .ptkt-table-modal {
        padding: 18px;
    }
    .ptkt-table-modal__dialog {
        flex: 0 1 auto;
        width: fit-content;
        max-width: calc(100vw - 36px);
    }
    .ptkt-table-modal__content {
        width: fit-content;
        max-width: calc(100vw - 36px);
    }
    #ptkt .ptkt-table-modal .ptkt-modal-table-box {
        width: fit-content;
        min-width: 0;
    }
    #ptkt .ptkt-table-modal .ptkt-modal-table-box > table {
        width: max-content;
        max-width: none;
        table-layout: auto;
    }
    #ptkt .ptkt-table-modal .ptkt-modal-table-box th:not(.ptkt-modal-cost-header):not(.ptkt-modal-pnl-header),
    #ptkt .ptkt-table-modal .ptkt-modal-table-box td:not(.ptkt-modal-cost-cell):not(.ptkt-modal-pnl-cell) {
        width: auto !important;
        min-width: 0;
        max-width: none;
        overflow-wrap: normal;
        white-space: nowrap;
    }
    /* STT trong popup cần một khoảng thở rõ ràng, không co sát theo 1–2 chữ
       số như các cột dữ liệu tự tính kích thước. */
    #ptkt .ptkt-table-modal .ptkt-modal-table-box th:first-child,
    #ptkt .ptkt-table-modal .ptkt-modal-table-box td:first-child {
        width: 34px !important;
        min-width: 34px;
        max-width: 34px;
    }
    #ptkt .ptkt-table-modal .ptkt-modal-table-box .signal-bar-wrapper {
        width: 100px;
        max-width: none;
    }
    #ptkt .ptkt-table-modal .ptkt-modal-cost-table {
        min-width: 0;
    }

    /* Sổ tư vấn chỉ xuất hiện cho Broker trên desktop. Popup vẫn dùng nền và
       cách đóng nhất quán với các bảng khác, nhưng có không gian cho hai
       bảng nghiệp vụ cùng xem mà không ép hẹp các cột giá/ngày. */
    #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__dialog {
        width: min(1600px, calc(100vw - 36px));
        max-height: calc(100vh - 36px);
        border-color: #75a9cf;
        border-radius: 10px;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__header {
        min-height: 42px;
        padding: 7px 11px 7px 15px;
        border-bottom-color: #b9d4e8;
        background: linear-gradient(90deg, #eff8ff, #f8fbff);
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__header > strong {
        color: #075985;
        font-size: 14px;
        letter-spacing: .15px;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__content {
        display: block;
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        padding: 9px;
        overflow-x: hidden;
        background: #f6fbff;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-table-box {
        width: 100%;
        min-width: 0;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-table-box > table.ptkt-broker-watchlist-table {
        /* Popup Broker luôn dùng đúng bề ngang có sẵn. Không giữ min-width
           theo nội dung để cột Chốt Bán không bị đẩy ra thanh cuộn ngang. */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border: 1px solid #c9ddea;
        border-radius: 7px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    }
    /* Tỷ lệ cột của popup Broker được điều khiển bằng colgroup, thay vì để
       nội dung/ô input tự nới bảng. STT chỉ chiếm vừa đủ, phần tiết kiệm được
       ưu tiên cho Ngày KN để ngày nhập hiển thị trọn vẹn. */
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--stt { width: 2.5% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--code { width: 6% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--price { width: 7% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--key { width: 5% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--trend { width: 6% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--movement { width: 10% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--warning { width: 8% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--sharks { width: 7% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--ndtnn { width: 6% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--signal-weight { width: 5% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--hold { width: 3.5% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--recommendation-date { width: 9% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--cost { width: 5% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--pnl { width: 5.5% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--t { width: 3% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--recommendation-weight { width: 6.5% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--sale { width: 5% !important; }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table th {
        border-bottom-color: #b9d4e8;
        background: #eaf5fd;
        color: #0c4a6e;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-caption {
        caption-side: top;
        padding: 8px 10px 7px;
        border: 1px solid #c9ddea;
        border-bottom: 0;
        border-radius: 7px 7px 0 0;
        background: linear-gradient(90deg, #f0f9ff, #f8fcff);
        color: #075985;
        font: 800 14px/1 "Segoe UI", Arial, sans-serif;
        letter-spacing: .9px;
        text-align: center;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-signal-group-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-group-header {
        height: 29px;
        padding: 5px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, .44);
        color: #fff;
        font: 800 11px/1 "Segoe UI", Arial, sans-serif;
        letter-spacing: .35px;
        text-align: center;
        white-space: nowrap;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-signal-group-header {
        background: linear-gradient(90deg, #0369a1, #0284c7);
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-group-header {
        border-color: #9edac1;
        border-bottom-color: #76c69f;
        /* Cùng một màu nền chính xác với hàng cột con bên dưới. */
        background: linear-gradient(180deg, #edfcf3, #dff7e9) !important;
        color: #047857 !important;
        box-shadow: inset 0 2px 0 #b9ebd0;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-header {
        width: 2.5% !important;
        min-width: 0 !important;
        max-width: none !important;
        border-bottom-color: #b9d4e8;
        background: #dbeafe;
        color: #075985;
        font-weight: 800;
        text-align: center;
        vertical-align: middle;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th {
        background: #eaf5fd;
        color: #0c4a6e;
    }
    /* Toàn bộ tầng con của nhóm Khuyến nghị dùng palette xanh ngọc riêng,
       không lẫn với các cột tín hiệu hệ thống màu xanh dương ở bên trái. */
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-date-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-hold-period-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-modal-cost-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-modal-pnl-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-t-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-weight-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-sale-header {
        border-color: #9edac1;
        border-bottom-color: #76c69f;
        background: linear-gradient(180deg, #edfcf3, #dff7e9) !important;
        color: #047857 !important;
        box-shadow: inset 0 2px 0 #b9ebd0;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table th,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table td {
        box-sizing: border-box;
        min-width: 0 !important;
        max-width: none;
        padding: 3px 2px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table tbody td:not(.ptkt-broker-date-cell):not(.ptkt-modal-cost-cell):not(.ptkt-broker-t-cell):not(.ptkt-broker-weight-cell):not(.ptkt-broker-sale-cell) {
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.14;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-cell {
        width: auto !important;
        min-width: 0 !important;
        text-align: center;
        white-space: nowrap;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-cell {
        width: auto !important;
        min-width: 0 !important;
        text-align: center;
        white-space: nowrap;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-cell {
        width: auto !important;
        min-width: 0 !important;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-pnl-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-pnl-cell {
        width: auto !important;
        min-width: 0 !important;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-t-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-t-cell {
        width: auto !important;
        min-width: 0 !important;
        text-align: center;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-cell {
        width: auto !important;
        min-width: 0 !important;
        text-align: center;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-sale-header,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-sale-cell {
        width: auto !important;
        min-width: 0 !important;
        text-align: center;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input {
        width: 94px;
        height: 25px;
        padding: 1px 4px;
        border: 1px solid #9ec5df;
        border-radius: 4px;
        color: #12334a;
        font: 600 11px/1 "Segoe UI", Arial, sans-serif;
        text-align: center;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input:focus {
        outline: none;
        border-color: #0284c7;
        box-shadow: 0 0 0 2px rgba(14, 165, 233, .16);
    }
    /* Ô khuyến nghị chưa có dữ liệu phải thật sự trống. Với input date của
       Chromium, phần định dạng dd/mm/yyyy là giao diện native nên cần ẩn
       riêng khi ô chưa focus; vừa bấm vào sẽ hiện lại để Broker nhập ngày. */
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-empty:not(:focus) {
        color: transparent;
        caret-color: transparent;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-empty:not(:focus)::-webkit-datetime-edit,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-empty:not(:focus)::-webkit-datetime-edit-fields-wrapper,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-empty:not(:focus)::-webkit-datetime-edit-text,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-empty:not(:focus)::-webkit-datetime-edit-month-field,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-empty:not(:focus)::-webkit-datetime-edit-day-field,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-empty:not(:focus)::-webkit-datetime-edit-year-field {
        color: transparent;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input:not(:focus)::-webkit-calendar-picker-indicator {
        /* Không dùng display:none vì sẽ làm mất vùng click của date picker. */
        opacity: 0;
    }
    /* Giữ nguyên kích thước vùng bấm nhưng không vẽ khung đối với các ô
       chưa có dữ liệu. Khi focus, các style viền sẵn có tự hiện lại. */
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-empty:not(:focus),
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-input:placeholder-shown:not(:focus),
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input:placeholder-shown:not(:focus) {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }
    /* Khi đã có ngày, chỉ giữ chữ ngày ở trạng thái xem. Bấm vào chữ ngày
       mới hiện lại khung và icon lịch để sửa. */
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input:not(.is-empty):not(:focus) {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }
    /* Giá vốn và Tỷ trọng KN dùng cùng cách hiển thị với Ngày khuyến nghị:
       chỉ hiện khung lúc đang nhập, blur là trở về dạng chữ thuần. Ngoại lệ
       duy nhất là dữ liệu lỗi để Broker vẫn nhìn thấy viền cảnh báo màu đỏ. */
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-input:not(:focus):not(.is-invalid),
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input:not(:focus):not(.is-invalid) {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-invalid {
        border-color: #dc2626;
        background: #fef2f2;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input {
        box-sizing: border-box;
        width: 100%;
        max-width: 86px;
        height: 25px;
        padding: 1px 18px 1px 3px;
        border: 1px solid transparent;
        border-radius: 4px;
        outline: none;
        background: transparent;
        color: #0f766e;
        font: 700 10px/1 "Segoe UI", Arial, sans-serif;
        text-align: center;
        text-align-last: center;
        cursor: pointer;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input:focus,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input:hover {
        border-color: #5eead4;
        background: #f0fdfa;
        box-shadow: 0 0 0 2px rgba(20, 184, 166, .12);
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input.is-invalid {
        border-color: #dc2626;
        background: #fef2f2;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input {
        box-sizing: border-box;
        width: 64px;
        height: 25px;
        min-height: 25px;
        padding: 2px 5px;
        border: 1px solid #8bc9aa;
        border-radius: 4px;
        outline: none;
        background: #fff;
        color: #065f46;
        font: 700 11px/19px "Segoe UI", Arial, sans-serif;
        text-align: center;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input:focus {
        border-color: #059669;
        box-shadow: 0 0 0 2px rgba(5, 150, 105, .16);
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input.is-invalid {
        border-color: #dc2626;
        background: #fef2f2;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input.is-saved:not(:focus) {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-input {
        width: 64px;
        padding-right: 3px;
        padding-left: 3px;
        font-size: 10px;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-input:not(:focus)::placeholder,
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input:not(:focus)::placeholder {
        color: transparent;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-t-badge {
        display: inline-block;
        min-width: 31px;
        padding: 3px 6px;
        border-radius: 999px;
        background: #e0f2fe;
        color: #0369a1;
        font: 700 11px/1 "Segoe UI", Arial, sans-serif;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-sale-button {
        min-width: 54px;
        height: 26px;
        padding: 2px 10px;
        border: 1px solid #dc2626;
        border-radius: 5px;
        background: linear-gradient(180deg, #fb7185, #dc2626);
        color: #fff;
        font: 700 11px/1 "Segoe UI", Arial, sans-serif;
        cursor: pointer;
        transition: transform .14s ease, box-shadow .14s ease;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-sale-button:hover:not(:disabled) {
        box-shadow: 0 3px 7px rgba(220, 38, 38, .25);
        transform: translateY(-1px);
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-sale-button:disabled {
        border-color: #cbd5e1;
        background: #e2e8f0;
        color: #94a3b8;
        cursor: not-allowed;
    }
    #ptkt .ptkt-broker-advice-statistics {
        /* Cùng nhịp bề ngang với bảng DANH MỤC WATCHLIST phía trên, không
           tự nở theo nội dung từng cột khi tên/mã hoặc giá trị dài hơn. */
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-top: 12px;
        overflow: hidden;
        border: 1px solid #bfd7ea;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }
    #ptkt .ptkt-broker-advice-statistics__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
        padding: 6px 9px 6px 13px;
        border-bottom: 1px solid #c8deee;
        background: linear-gradient(90deg, #edf8ff, #f8fcff);
    }
    #ptkt .ptkt-broker-advice-statistics__title {
        display: flex;
        align-items: baseline;
        gap: 7px;
        color: #075985;
    }
    #ptkt .ptkt-broker-advice-statistics__title > span {
        color: #0284c7;
        font-size: 16px;
    }
    #ptkt .ptkt-broker-advice-statistics__title strong {
        font: 800 13px/1 "Segoe UI", Arial, sans-serif;
        letter-spacing: .2px;
    }
    #ptkt .ptkt-broker-advice-statistics__title small {
        color: #64748b;
        font: 500 10px/1 "Segoe UI", Arial, sans-serif;
    }
    #ptkt .ptkt-broker-advice-statistics__actions { display: flex; gap: 6px; }
    #ptkt .ptkt-broker-export-button,
    #ptkt .ptkt-broker-import-button {
        height: 27px;
        padding: 2px 9px;
        border-radius: 5px;
        font: 700 11px/1 "Segoe UI", Arial, sans-serif;
        cursor: pointer;
    }
    #ptkt .ptkt-broker-export-button {
        border: 1px solid #15803d;
        background: #f0fdf4;
        color: #166534;
    }
    #ptkt .ptkt-broker-import-button {
        border: 1px solid #0284c7;
        background: #f0f9ff;
        color: #075985;
    }
    #ptkt .ptkt-broker-advice-statistics__table {
        width: 100%;
        margin: 0;
        border-collapse: collapse;
        table-layout: fixed;
        background: #fff;
        font-family: "Segoe UI", Tahoma, Arial, sans-serif;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
    }
    #ptkt .ptkt-broker-advice-statistics__table th {
        padding: 6px 10px;
        border-right: 1px solid #d9e8f2;
        background: #f1f7fb;
        color: #164e63;
        font: 700 12px/1.2 "Segoe UI", Tahoma, Arial, sans-serif;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
    }
    #ptkt .ptkt-broker-advice-statistics__table td {
        padding: 6px 10px;
        border-top: 1px solid #e2edf4;
        color: #1e293b;
        font: 500 12px/1.25 "Segoe UI", Tahoma, Arial, sans-serif;
        text-align: center;
        white-space: nowrap;
    }
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(1),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(1) { width: 6%; }
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(2),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(2) { width: 8%; }
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(3),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(3),
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(5),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(5) { width: 10%; }
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(4),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(4),
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(6),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(6) { width: 11%; }
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(7),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(7) { width: 12%; }
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(8),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(8) { width: 7%; }
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(9),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(9) { width: 10%; }
    #ptkt .ptkt-broker-advice-statistics__table th:nth-child(10),
    #ptkt .ptkt-broker-advice-statistics__table td:nth-child(10) { width: 15%; }
    #ptkt .ptkt-broker-advice-statistics__table tbody tr:nth-child(even) { background: #f8fbfd; }
    #ptkt .ptkt-broker-advice-statistics__ticker { color: #075985 !important; font-weight: 800; }
    #ptkt .ptkt-broker-trade-actions {
        padding: 4px !important;
    }
    #ptkt .ptkt-broker-trade-actions > button {
        height: 24px;
        border-radius: 4px;
        font: 800 10px/1 "Segoe UI", Arial, sans-serif;
        cursor: pointer;
    }
    #ptkt .ptkt-broker-trade-action-trigger {
        min-width: 24px;
        border: 1px solid #7dd3fc;
        background: #f0f9ff;
        color: #0369a1;
    }
    #ptkt .ptkt-broker-trade-action-trigger:hover {
        border-color: #0284c7;
        background: #e0f2fe;
    }
    #ptkt .ptkt-broker-advice-statistics__empty {
        padding: 13px !important;
        color: #64748b !important;
        font-style: italic;
    }
    #ptkt .ptkt-broker-trade-result {
        display: inline-block;
        min-width: 58px;
        padding: 3px 6px;
        border-radius: 999px;
        font-weight: 800;
    }
    #ptkt .ptkt-broker-trade-result--profit { background: #dcfce7; color: #15803d; }
    #ptkt .ptkt-broker-trade-result--loss { background: #fee2e2; color: #dc2626; }
    #ptkt .ptkt-broker-trade-result--flat { background: #fef3c7; color: #a16207; }
    #ptkt .ptkt-broker-trade-weight {
        display: inline-block;
        min-width: 46px;
        padding: 3px 6px;
        border-radius: 999px;
        background: #dff7e9;
        color: #047857;
        font-weight: 800;
    }
    #ptkt .ptkt-broker-trade-day {
        display: inline-block;
        min-width: 32px;
        padding: 3px 6px;
        border-radius: 999px;
        background: #e0f2fe;
        color: #0369a1;
        font-weight: 800;
    }
}

.ptkt-broker-sale-dialog {
    position: fixed;
    z-index: 5200;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
}
.ptkt-broker-sale-dialog__card {
    width: min(370px, 100%);
    overflow: hidden;
    border: 1px solid #94b9d1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .34);
}
.ptkt-broker-sale-dialog__card > header,
.ptkt-broker-sale-dialog__card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}
.ptkt-broker-sale-dialog__card > header {
    border-bottom: 1px solid #d8e5ef;
    background: linear-gradient(90deg, #eff8ff, #f8fcff);
    color: #075985;
}
.ptkt-broker-sale-dialog__card > header > div { display: flex; align-items: center; gap: 8px; }
.ptkt-broker-sale-dialog__card > header > div > span {
    display: grid;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    place-items: center;
    background: #dc2626;
    color: #fff;
    font-size: 13px;
}
.ptkt-broker-sale-dialog__card > header strong { font: 800 14px/1 "Segoe UI", Arial, sans-serif; }
.ptkt-broker-sale-dialog__close {
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}
.ptkt-broker-sale-dialog__close:hover { background: #fee2e2; color: #dc2626; }
.ptkt-broker-sale-dialog__body { display: grid; gap: 11px; padding: 15px; }
.ptkt-broker-sale-dialog__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
}
.ptkt-broker-sale-dialog__summary strong { color: #0f172a; }
.ptkt-broker-sale-dialog__body label {
    display: grid;
    gap: 5px;
    color: #334155;
    font: 700 12px/1 "Segoe UI", Arial, sans-serif;
}
.ptkt-broker-sale-dialog__body input {
    height: 34px;
    padding: 5px 9px;
    border: 1px solid #9fc2da;
    border-radius: 5px;
    color: #0f172a;
    font: 600 13px/1 "Segoe UI", Arial, sans-serif;
}
.ptkt-broker-sale-dialog__body input:focus { outline: 2px solid rgba(14, 165, 233, .2); border-color: #0284c7; }
.ptkt-broker-sale-dialog__body input.is-invalid { border-color: #dc2626; background: #fef2f2; }
.ptkt-broker-sale-dialog__error { min-height: 15px; margin: -3px 0 0; color: #dc2626; font-size: 11px; }
.ptkt-broker-sale-dialog__card > footer { gap: 8px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.ptkt-broker-sale-dialog__card > footer button {
    height: 31px;
    padding: 4px 12px;
    border-radius: 5px;
    font: 700 12px/1 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.ptkt-broker-sale-dialog__cancel { margin-left: auto; border: 1px solid #cbd5e1; background: #fff; color: #475569; }
.ptkt-broker-sale-dialog__confirm { border: 1px solid #c91d33; background: #dc2626; color: #fff; }
.ptkt-broker-lot-selection-dialog__card { width: min(860px, 100%); }
.ptkt-broker-lot-selection-dialog__intro {
    margin: 0;
    color: #475569;
    font: 500 12px/1.4 "Segoe UI", Arial, sans-serif;
}
.ptkt-broker-lot-selection-dialog__table { overflow-x: auto; }
.ptkt-broker-lot-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font: 600 12px/1.2 "Segoe UI", Arial, sans-serif;
    text-align: center;
}
.ptkt-broker-lot-table th {
    padding: 7px 8px;
    border-bottom: 1px solid #9edac1;
    background: #eafaf0;
    color: #047857;
    font-weight: 800;
    white-space: nowrap;
}
.ptkt-broker-lot-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #e2edf4;
    color: #1e293b;
    white-space: nowrap;
}
.ptkt-broker-lot-pnl--profit { color: #008b35 !important; }
.ptkt-broker-lot-pnl--loss { color: #dc2626 !important; }
.ptkt-broker-lot-pnl--flat { color: #a16207 !important; }
.ptkt-broker-lot-close-button {
    min-width: 50px;
    height: 25px;
    border: 1px solid #dc2626;
    border-radius: 4px;
    background: linear-gradient(180deg, #fb7185, #dc2626);
    color: #fff;
    font: 800 11px/1 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.ptkt-broker-lot-close-button:disabled {
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}
.ptkt-broker-lot-manage-actions {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.ptkt-broker-lot-manage-actions button,
.ptkt-broker-open-positions-button {
    height: 27px;
    padding: 3px 8px;
    border-radius: 4px;
    font: 800 11px/1 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.ptkt-broker-lot-manage-actions button[data-ptkt-lot-edit],
.ptkt-broker-open-positions-button {
    border: 1px solid #7dd3fc;
    background: #f0f9ff;
    color: #0369a1;
}
.ptkt-broker-lot-manage-actions button[data-ptkt-lot-delete] {
    border: 1px solid #fca5a5;
    background: #fff1f2;
    color: #be123c;
}
.ptkt-broker-lot-manage-actions button[data-ptkt-lot-edit]:hover,
.ptkt-broker-open-positions-button:hover { background: #e0f2fe; }
.ptkt-broker-lot-manage-actions button[data-ptkt-lot-delete]:hover { background: #ffe4e6; }
.ptkt-broker-sale-tooltip {
    position: fixed;
    z-index: 5400;
    width: max-content;
    max-width: min(780px, calc(100vw - 16px));
    overflow-x: auto;
    padding: 8px;
    border: 1px solid #9edac1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
    pointer-events: none;
}
.ptkt-broker-sale-tooltip > strong {
    display: block;
    margin: 1px 2px 7px;
    color: #047857;
    font: 800 11px/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: .15px;
}
.ptkt-broker-sale-tooltip .ptkt-broker-lot-table { min-width: 530px; font-size: 11px; }
.ptkt-broker-sale-tooltip .ptkt-broker-lot-table th,
.ptkt-broker-sale-tooltip .ptkt-broker-lot-table td { padding: 5px 7px; }
@media (min-width: 901px) {
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-cell {
        /* Giữ display table-cell của bảng để cột STT thẳng hàng tuyệt đối
           với các ô cùng hàng; flex chỉ áp dụng cho lớp bọc bên trong. */
        display: table-cell !important;
        padding: 3px 4px !important;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-layout {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-cell .stt-action-trigger {
        flex: 0 0 auto;
        width: auto !important;
        margin-left: auto;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-add-recommendation-button {
        position: static;
        flex: 0 0 17px;
        display: grid;
        width: 17px;
        height: 17px;
        padding: 0;
        border: 1px solid #10b981;
        border-radius: 50%;
        place-items: center;
        background: #ecfdf5;
        color: #047857;
        font: 800 15px/1 "Segoe UI", Arial, sans-serif;
        cursor: pointer;
    }
    #ptkt .ptkt-broker-advisory-modal .ptkt-broker-add-recommendation-button:hover {
        border-color: #059669;
        background: #d1fae5;
        box-shadow: 0 2px 5px rgba(5, 150, 105, .22);
    }
}
.ptkt-broker-trade-delete-confirm {
    border: 1px solid #be123c;
    background: #be123c;
    color: #fff;
}
.ptkt-broker-trade-edit-confirm {
    border: 1px solid #0369a1;
    background: #0284c7;
    color: #fff;
}
.ptkt-broker-trade-actions-popover {
    position: fixed;
    z-index: 5300;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-width: 116px;
    padding: 5px;
    border: 1px solid #a9c6da;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .2);
}
.ptkt-broker-trade-actions-popover button {
    height: 27px;
    padding: 3px 8px;
    border-radius: 4px;
    font: 800 11px/1 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.ptkt-broker-trade-actions-popover__edit {
    border: 1px solid #7dd3fc;
    background: #f0f9ff;
    color: #0369a1;
}
.ptkt-broker-trade-actions-popover__delete {
    border: 1px solid #fca5a5;
    background: #fff1f2;
    color: #be123c;
}
.ptkt-broker-trade-actions-popover__edit:hover { background: #e0f2fe; }
.ptkt-broker-trade-actions-popover__delete:hover { background: #ffe4e6; }
.ptkt-broker-trade-dialog__warning {
    margin: 0;
    color: #7f1d1d;
    font-size: 12px;
    line-height: 1.45;
}
.ptkt-broker-trade-edit-form { gap: 12px; }
.ptkt-broker-trade-edit-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}
.ptkt-broker-trade-edit-form__weight { grid-column: 1 / -1; }
@media (max-width: 420px) {
    .ptkt-broker-trade-edit-form__grid { grid-template-columns: 1fr; }
}

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

/* Mỗi bảng ngành chiếm đúng một nửa khung; các bảng thứ 3, 4... sang hàng mới. */
#ptkt #group3-grid.layout-horizontal > .stock-box {
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Cột TOP của bảng ngành cũng chỉ vừa đủ cho số thứ hạng. */
#ptkt #group3-grid .stock-box th:first-child,
#ptkt #group3-grid .stock-box td:first-child {
    width: 20px;
    padding-left: 1px;
    padding-right: 1px;
    white-space: nowrap;
    overflow-wrap: normal;
}

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: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-right: 1px solid #dbe4ee;
  /* Vùng tab đã được app-page-content đặt cách navbar một khoảng cố định;
     không cộng thêm đệm ở đây để các tab mẹ/tab con luôn thẳng hàng. */
  padding: 0 0 5px;
  gap: 5px;
  width: 36px;
  min-width: 36px;
  box-sizing: border-box;
}
/* Tab lớn dạng dọc: icon nằm cạnh nhãn theo chiều ngang, nên không làm tăng
   chiều dài của ô tab. */
.tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    padding: 8px 3px;
    cursor: pointer;

    color: #475569;
    background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
    border: 1px solid #c5d0dc;
    border-left: 0;
    border-radius: 0 9px 9px 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
    line-height: 1.1;
    width: 100%;
    white-space: nowrap;
}

.main-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.main-tab-icon {
    display: inline-flex;
    flex: 0 0 13px;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    color: #475569;
}

.main-tab-icon svg {
    display: block;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.main-tab-icon--market { color: #0369a1; }
.main-tab-icon--watch { color: #0f766e; }
.main-tab-icon--technical { color: #4338ca; }
.main-tab-icon--fundamental { color: #b45309; }
.main-tab-icon--filter { color: #7e22ce; }

/* Hover */
.tab-btn:hover {
    color: #0f4c70;
    background: linear-gradient(180deg, #eff8ff, #dceffa);
    border-color: #93c5e6;
    box-shadow: 1px 2px 5px rgba(14, 116, 171, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translateX(1px);
    font-weight: bold;
}
/* Tab đang active */
.tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #93c5e6;
    border-left: 0;
    box-shadow: 2px 2px 7px rgba(15, 58, 94, 0.13), inset 3px 0 0 #0f8bc8;
    position: relative;
    z-index: 2;
    font-weight: bold;
}

.tab-btn.active .main-tab-icon {
    color: #087eb7;
}
/* 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%;
}
/* Tab Cổ phiếu theo dõi vẫn cuộn bình thường nhưng không hiển thị rãnh/thanh
   cuộn dọc, giúp bề ngang nội dung gọn hơn. */
#ptkt.tab-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#ptkt.tab-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* =============== 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;
}

/* Thanh tab cấp 2 của TỔNG QUAN THỊ TRƯỜNG luôn bám trên khi cuộn nội dung. */
#market.tab-content.active {
  overflow: hidden;
}

#market > .subtab-wrapper {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 0 6px;
  box-sizing: border-box;
}

#market > .subtab-wrapper > .sub-tabs {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 50;
  box-sizing: border-box;
  width: 100%;
  /* Dùng cùng nhịp 6px với cột tab dọc, tránh các tab con bị giãn quá xa
     nhau ở cả desktop lẫn giao diện hẹp. */
  gap: 6px;
  padding: 0 6px 4px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
}

/* Thanh điều hướng riêng của TẦM SOÁT THỊ TRƯỜNG: mỗi tab có biểu tượng
   chức năng, bề mặt nhẹ và trạng thái đang chọn dễ nhận ra nhưng không nặng. */
#market > .subtab-wrapper > .sub-tabs {
  gap: 6px;
  padding: 5px 8px 6px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.99), rgba(241, 245, 249, 0.97));
  border-bottom: 1px solid #dce6f0;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.08);
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #d7e1eb;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  border-color: #8fc9eb;
  color: #075985;
  box-shadow: 0 3px 8px rgba(14, 116, 144, 0.14);
  transform: translateY(-1px);
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-btn.active {
  border-color: #0879b1;
  background: linear-gradient(135deg, #0a83bd 0%, #075985 100%);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(3, 105, 161, 0.27);
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-icon {
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #e0f2fe;
  color: #0369a1;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-icon--signal {
  background: #ccfbf1;
  color: #0f766e;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-icon--valuation {
  background: #e0e7ff;
  color: #4338ca;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-icon--industry {
  background: #ffedd5;
  color: #b45309;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-icon--macro {
  background: #f3e8ff;
  color: #7e22ce;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-btn.active .market-subtab-icon {
  background: rgba(255, 255, 255, 0.17);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Khi chiều ngang không đủ, chỉ phần danh sách tab được cuộn; hai nút ở mép
   giữ nguyên vị trí để luôn có thể đi tới các tab nằm ngoài vùng nhìn thấy. */
#market > .subtab-wrapper > .sub-tabs.market-subtabs-shell {
  overflow: hidden;
}

#market > .subtab-wrapper > .sub-tabs .market-subtabs-scroll {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  position: relative;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-padding-inline: 2px;
}

#market > .subtab-wrapper > .sub-tabs .market-subtabs-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-nav {
  display: none;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 30px;
  padding: 0;
  border: 1px solid #bad0df;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff, #edf6fb);
  color: #075985;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

#market > .subtab-wrapper > .sub-tabs.market-subtabs-shell--overflowing .market-subtab-nav {
  display: inline-flex;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-nav:hover:not(:disabled) {
  border-color: #178cc5;
  background: #e0f2fe;
  color: #0369a1;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-nav:disabled {
  cursor: default;
  opacity: 0.38;
}

#market > .subtab-wrapper > .sub-tabs .market-subtab-nav svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Trong left-col đang căn giữa, nên khối THEO NGÀNH phải tự giãn để lưới
   hai bảng dùng hết bề ngang khả dụng của tab. */
#ptkt .subtab-wrapper,
#ptkt .sub-tab-content,
#ptkt #nganh_ptkt,
#ptkt #group3-container,
#ptkt #group3-grid {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
}
#ptkt .subtab-wrapper {
  align-self: stretch;
}
#ptkt #group3-grid.layout-horizontal {
  justify-content: stretch;
}

/* Khi khung nhìn hẹp, mỗi bảng dùng trọn một hàng để các cột vẫn dễ đọc.
   Áp dụng cho cả cặp BUY/SELL và các cặp bảng trong THEO NGÀNH. */
@media (max-width: 900px) {
  /* Thu hẹp đệm bao ngoài để bảng bám sát hơn hai cạnh của vùng nội dung. */
  #ptkt > .container {
    padding-right: 4px;
    padding-left: 4px;
    gap: 4px;
  }

  /* Ở tablet/khung hẹp, cụm VNINDEX dùng trọn hàng: bảng vẫn có đủ bề ngang
     và thanh phân bổ đứng gọn bên trái. */
  #ptkt .stock-box[data-box-id="1"] {
    grid-template-columns: 154px minmax(0, 1fr);
    width: 100%;
  }

  #ptkt .left-col {
    gap: 8px;
  }

  #ptkt .subtab-wrapper {
    padding-right: 0;
    padding-left: 0;
  }

  #ptkt .group-1-1-2,
  #ptkt .left-col.shrink .group-1-1-2 {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
  }

  #ptkt .group-1-1-2 .stock-box,
  #ptkt .left-col.shrink .group-1-1-2 .stock-box {
    flex: 0 0 auto;
    width: 100% !important;
    min-width: 0;
  }

  #ptkt #group3-grid.layout-horizontal {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ở khung hẹp, khu theo dõi riêng đã được JS đặt sau VNINDEX trong
     left-col: toàn bộ nội dung đi theo một cột dọc. */
  #ptkt > .container.ptkt-private-watch-open {
    display: block;
  }
  #ptkt > .container.ptkt-private-watch-open > .left-col {
    width: 100%;
    align-items: stretch;
  }
  #ptkt > .container.ptkt-private-watch-open .left-col > .right-col {
    display: block;
    order: 1;
    width: 100%;
    margin: 0;
    padding-top: 0;
  }
  #ptkt > .container.ptkt-private-watch-open .left-col > .stock-box[data-box-id="1"] {
    order: 0;
  }
  #ptkt > .container.ptkt-private-watch-open .left-col > .group-1-1-2 {
    order: 2;
  }
  #ptkt > .container.ptkt-private-watch-open .left-col > .subtab-wrapper {
    order: 3;
  }
}

/* Trên điện thoại/khung hẹp, ba cột chữ dài được phép dùng tối đa hai
   dòng. Price luôn giữ giá ở dòng một và phần trăm ở dòng hai. */
@media (max-width: 700px) {
  /* Giữ hai vùng của thanh tiêu đề nằm ngang cả trên điện thoại: thời điểm
     ở trái và tiêu đề chính ở phải. Chỉ chữ trong từng vùng được tự ngắt. */
  #ptkt-main-heading.ptkt-dashboard-header {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 7px;
    width: calc(100% - 8px);
    min-height: 62px;
    /* Trên điện thoại cũng không tạo dải trống trước header tab. */
    margin: 0 4px 8px;
    padding: 8px;
  }
  .ptkt-dashboard-header__title {
    order: 0;
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    font-size: clamp(10px, 3.25vw, 12px);
    letter-spacing: 0.2px;
    line-height: 1.2;
  }
  .ptkt-dashboard-header__start {
    order: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-left: 7px;
  }
  .ptkt-dashboard-header__start-label {
    font-size: 8.7px;
    letter-spacing: 0.2px;
  }
  .ptkt-dashboard-header__start-time {
    font-size: 12px;
  }
  .ptkt-dashboard-header__private-action {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
  }
  #ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle {
    min-width: 104px;
    padding: 4px 7px;
    font-size: 8.5px;
  }

  /* Chỉ khi khung hẹp, STT co sát theo số thứ tự để nhường chỗ cho Hold và
     các cột dữ liệu. Trên màn hình lớn vẫn giữ kích thước cũ. */
  #ptkt .stock-box th:nth-child(1),
  #ptkt .stock-box td:nth-child(1),
  #ptkt .group-1-1-2 .stock-box th:first-child,
  #ptkt .group-1-1-2 .stock-box td:first-child,
  #ptkt #group3-grid .stock-box th:first-child,
  #ptkt #group3-grid .stock-box td:first-child,
  #ptkt .ptkt-table-modal .ptkt-modal-table-box th:first-child,
  #ptkt .ptkt-table-modal .ptkt-modal-table-box td:first-child {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    padding-right: 1px;
    padding-left: 1px;
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
  }

  /* Trên điện thoại, VNINDEX cần trọn chiều ngang để các cột còn đọc được. */
  #ptkt .stock-box[data-box-id="1"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    width: 100%;
  }
  #ptkt .stock-box[data-box-id="1"] > .ptkt-vnindex-title {
    grid-column: 1;
    grid-row: 2;
  }
  #ptkt .stock-box[data-box-id="1"] > table {
    grid-column: 1;
    grid-row: 3;
  }
  #ptkt .ptkt-vnindex-allocation {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-bottom: 9px;
    padding: 8px 10px;
    border-top: 1px solid #dbe7ef;
    border-left: 1px solid #92cdec;
  }
  #ptkt .ptkt-vnindex-allocation__title {
    text-align: left;
  }
  #ptkt .ptkt-vnindex-allocation__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
  }
  #ptkt .ptkt-vnindex-allocation__legend-item--stock {
    justify-self: start;
  }
  #ptkt .ptkt-vnindex-allocation__legend-item--cash {
    grid-template-columns: 8px auto auto;
    justify-self: end;
  }

  #ptkt .ptkt-table-expand-toolbar {
    display: flex;
    justify-content: flex-end;
    min-height: 24px;
    margin-bottom: 2px;
  }
  #ptkt .ptkt-table-expand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: 1px solid #64748b;
    border-radius: 4px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  #ptkt .ptkt-table-expand-button:hover {
    background: #dbeafe;
  }
  /* Nút phóng to BUY/SELL nằm cùng dòng với nhãn bảng, không tạo thêm hàng. */
  #ptkt .group-1-1-2 .stock-box,
  #ptkt .stock-box[data-box-id="1"] {
    position: relative;
  }
  #ptkt .group-1-1-2 .stock-box .ptkt-table-expand-toolbar,
  #ptkt .stock-box[data-box-id="1"] .ptkt-table-expand-toolbar {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 3;
    min-height: 0;
    height: 22px;
    margin: 0;
  }
  /* Dành trọn chiều cao cho nhãn và nút 22px cùng hàng, để viền dưới của
     nút không bị header bảng kế tiếp che lên. */
  #ptkt .group-1-1-2 .stock-box > .ptkt-top-tabs,
  #ptkt .stock-box[data-box-id="1"] .ptkt-vnindex-title {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 25px;
  }
  #ptkt .group-1-1-2 .stock-box > .ptkt-top-tabs {
    width: 100%;
    padding-right: 28px;
  }
  #ptkt .group-1-1-2 .ptkt-top-tab {
    padding-right: 4px;
    padding-left: 4px;
    font-size: 9px;
  }
  #ptkt #group3-grid .icb-row .ptkt-table-expand-button {
    margin-left: 1px;
  }

  /* VNINDEX: bỏ cột mã chỉ số, thay Price bằng Điểm số và dùng nhãn riêng. */
  #ptkt .stock-box[data-box-id="1"] .ptkt-vnindex-title {
    display: inline-flex;
    margin: 0;
    padding: 3px 6px;
    background: #2aa7e8;
    color: #fff;
    font: 700 10.2px/1.1 Arial, sans-serif;
    text-align: center;
  }
  #ptkt .stock-box[data-box-id="1"] tbody tr {
    cursor: zoom-in;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
  #ptkt .stock-box[data-box-id="1"] .ptkt-vnindex-price-header--desktop {
    display: none;
  }
  #ptkt .stock-box[data-box-id="1"] .ptkt-vnindex-price-header--mobile {
    display: inline;
  }
  #ptkt .stock-box[data-box-id="1"] th:nth-child(2),
  #ptkt .stock-box[data-box-id="1"] td:nth-child(2) {
    display: none;
  }
  #ptkt .stock-box[data-box-id="1"] th:nth-child(3),
  #ptkt .stock-box[data-box-id="1"] td:nth-child(3) { width: 17%; }
  #ptkt .stock-box[data-box-id="1"] th:nth-child(4),
  #ptkt .stock-box[data-box-id="1"] td:nth-child(4) { width: 12%; }
  #ptkt .stock-box[data-box-id="1"] th:nth-child(5),
  #ptkt .stock-box[data-box-id="1"] td:nth-child(5) { width: 13%; }
  #ptkt .stock-box[data-box-id="1"] th:nth-child(6),
  #ptkt .stock-box[data-box-id="1"] td:nth-child(6) { width: 18%; }
  #ptkt .stock-box[data-box-id="1"] th:nth-child(7),
  #ptkt .stock-box[data-box-id="1"] td:nth-child(7) { width: 16%; }
  #ptkt .stock-box[data-box-id="1"] th:nth-child(8),
  #ptkt .stock-box[data-box-id="1"] td:nth-child(8) { width: 12%; }
  #ptkt .stock-box[data-box-id="1"] th:nth-child(9),
  #ptkt .stock-box[data-box-id="1"] td:nth-child(9) { width: 12%; }

  /* Chọn ngành bám lề trái; cụm Thêm/Xóa vẫn ở phía phải của hàng. */
  #ptkt #group3-grid .icb-select {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Tiêu đề chỉ dùng tối đa hai hàng: các tiêu đề sẵn có đều không quá hai
     cụm từ, còn các tiêu đề có <br> tiếp tục giữ đúng hai hàng đó. */
  #ptkt .stock-box th {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all;
    line-height: 1.1;
  }

  /* Các nhãn có xuống dòng cố định vẫn giữ nguyên đúng hai dòng. */
  #ptkt .ptkt-sharks-header-title,
  #ptkt .ptkt-ndtnn-header-title,
  #ptkt .stock-box th:nth-child(5),
  #ptkt .stock-box th:nth-child(11) {
    white-space: nowrap !important;
  }

  #ptkt .ptkt-ndtnn-header-title {
    font-size: 9px;
    letter-spacing: -0.2px;
  }

  #ptkt .stock-box th:nth-child(5) {
    font-size: 10.2px !important;
  }

  /* Nhường nhẹ bề ngang từ Price/Cảnh báo cho Key và NDTNN ở màn hình hẹp. */
  #ptkt .stock-box th:nth-child(3),
  #ptkt .stock-box td:nth-child(3) { width: 12%; }
  #ptkt .stock-box th:nth-child(4),
  #ptkt .stock-box td:nth-child(4) { width: 7%; }
  #ptkt .stock-box th:nth-child(7),
  #ptkt .stock-box td:nth-child(7) { width: 13%; }
  #ptkt .stock-box th:nth-child(9),
  #ptkt .stock-box td:nth-child(9) { width: 8%; }

  #ptkt .stock-box td:nth-child(3),
  #ptkt .stock-box td:nth-child(6),
  #ptkt .stock-box td:nth-child(7) {
    white-space: normal;
  }

  /* Riêng TRUNG LẬP tách thành TRUNG / LẬP khi bảng hẹp. */
  #ptkt .ptkt-trend-break {
    display: initial;
  }
  #ptkt .ptkt-trend-neutral-desktop {
    display: inline;
  }
  #ptkt .ptkt-trend-neutral-mobile {
    display: none;
  }
  #ptkt .stock-box td:nth-child(5).ptkt-trend--compact .ptkt-trend-neutral-desktop {
    display: none;
  }
  #ptkt .stock-box td:nth-child(5).ptkt-trend--compact .ptkt-trend-neutral-mobile {
    display: inline;
  }

  /* Key không đè sang cột kế bên nếu giá trị dài. */
  #ptkt .stock-box td:nth-child(4) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
    line-height: 1.1;
  }

  /* Giá trị mua/bán ròng NDTNN tự ngắt khi không đủ bề ngang. */
  #ptkt .stock-box td:nth-child(9) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
    line-height: 1.1;
  }

  /* Tỷ trọng chỉ ngắt khi chuỗi dài hơn bề ngang cột. */
  #ptkt .stock-box td:nth-child(10),
  #ptkt .stock-box td:nth-child(10) > span {
    white-space: normal !important;
    overflow-wrap: normal;
  }

  /* QTRR dùng hai dòng QT / RR khi bề ngang cột không còn đủ. */
  #ptkt .stock-box .ptkt-qtrr-label {
    display: inline-block;
    white-space: normal !important;
    line-height: 1.05;
  }
  #ptkt .ptkt-qtrr-break {
    display: initial;
  }

  /* NDTNN: NDT / NN (tỷ) trên màn hình hẹp. */
  #ptkt .ptkt-ndtnn-mobile-break {
    display: initial;
  }
  #ptkt .ptkt-ndtnn-desktop-break {
    display: none;
  }

  /* Vol Break đi theo mã cổ phiếu và tách sang dòng dưới ở màn hình hẹp. */
  #ptkt .stock-box td:nth-child(2) .ptkt-vol-break-indicator {
    display: block;
    margin-top: 1px;
    line-height: 1;
  }

  #ptkt .ptkt-price-value,
  #ptkt .ptkt-price-change-group {
    white-space: nowrap;
  }

  #ptkt .ptkt-price-change-group {
    display: block;
    margin-top: 1px;
  }

  #ptkt .stock-box td:nth-child(6) .ptkt-responsive-cell-text,
  #ptkt .stock-box td:nth-child(7) .ptkt-responsive-cell-text {
    display: -webkit-box;
    overflow: hidden;
    max-height: 2.3em;
    white-space: normal;
    line-height: 1.15;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
  }
}

#market > .subtab-wrapper > .sub-tab-content.active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#market > .subtab-wrapper > #thitruong_market.sub-tab-content.active {
  height: var(--market-overview-panel-height, 100%);
  overflow: hidden;
}

#market > .subtab-wrapper > .sub-tabs .sub-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* =============== TAB THỊ TRƯỜNG: TỔNG QUAN =============== */
#thitruong_market {
  height: var(--market-overview-panel-height, 100%);
  min-height: 0;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
}

.market-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 4px 12px;
  box-sizing: border-box;
  align-items: stretch;
}

.market-overview-left,
.market-overview-right {
  min-width: 0;
  min-height: 0;
}

.market-overview-left {
  display: block;
  height: auto;
  overflow-y: scroll;
  padding: 0 2px 8px 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
  overscroll-behavior: contain;
}

/* Các bảng/biểu đồ phải giữ nguyên chiều cao tự nhiên để cột trái cuộn,
   không co nội dung vào trong khung có chiều cao cố định. */
.market-overview-left > * {
  margin: 0 0 12px;
}

.market-overview-left > *:last-child {
  margin-bottom: 0;
}

.market-overview-left::-webkit-scrollbar {
  width: 9px;
}

.market-overview-left::-webkit-scrollbar-track {
  background: #eef2f7;
  border-radius: 999px;
}

.market-overview-left::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border: 2px solid #eef2f7;
  border-radius: 999px;
}

/* Phần bên phải được dành sẵn cho nội dung thị trường ở bước tiếp theo. */
.market-overview-right {
  height: 100%;
  overflow: hidden;
}

.market-overview-card {
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dde3ec;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.market-overview-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: linear-gradient(135deg, #e7f0ff, #cfe0fb);
  border-bottom: 1px solid #bcd3f4;
}

.market-overview-card-title h3 {
  margin: 0;
  color: #172554;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.market-overview-card-title p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 11px;
}

.market-period-label {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* Hai tiêu đề bảng luôn nằm chính giữa, không bị nhãn quý bên phải kéo lệch. */
.market-screening-card .market-overview-card-title,
.market-growth-summary-card .market-overview-card-title {
  justify-content: center;
  text-align: center;
}

.market-growth-summary-card .market-overview-card-title {
  position: relative;
}

.market-growth-summary-card .market-period-label {
  position: absolute;
  right: 11px;
}

.market-table-scroll {
  overflow-x: auto;
}

.market-overview-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-size: 11px;
}

.market-overview-table th,
.market-overview-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #eef2f7;
  text-align: right;
  white-space: nowrap;
}

.market-overview-table thead th {
  position: static;
  color: #334155;
  background: #eef5ff;
  font-weight: 700;
  text-align: center;
}

.market-overview-table tbody th {
  color: #334155;
  background: #ffffff;
  font-weight: 600;
  text-align: left;
}

.market-overview-table tbody tr:last-child th,
.market-overview-table tbody tr:last-child td {
  border-bottom: 0;
}

.market-overview-table tbody tr:hover {
  background: #f8fbff;
  cursor: default;
}

/* Bảng AIMAXSTOCK TẦM SOÁT căn giữa toàn bộ nhãn và số liệu. */
.market-screening-table tbody th,
.market-screening-table tbody td {
  text-align: center;
}

.market-screening-table .market-screening-capital-header {
  color: #0f172a;
  background: #eef5ff;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.market-screening-table .market-screening-capital-rate {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.market-monthly-movement-card {
  align-self: start;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  container-type: inline-size;
}

.market-monthly-title-row {
  position: relative;
  justify-content: center;
  text-align: center;
}

.market-monthly-title-row .market-chart-expand {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.market-monthly-year-filter {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.market-monthly-year-filter select {
  min-width: 72px;
  height: 25px;
  padding: 2px 5px;
  border: 1px solid #bdd2f4;
  border-radius: 6px;
  background: #ffffff;
  color: #12305f;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.market-monthly-movement-card .market-table-scroll {
  overflow-x: hidden;
}

.market-monthly-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px 6px;
  font-size: clamp(6px, 1cqw, 10px);
}

.market-monthly-table th:first-child,
.market-monthly-table tbody th {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  text-align: center;
}

/* Ô tiêu đề cột năm được giữ lại để căn bảng, nhưng không hiển thị nền. */
.market-monthly-table thead th:first-child {
  background: transparent;
  border-color: transparent;
}

.market-monthly-table th,
.market-monthly-table td {
  padding: 3px 1px;
  border: 0;
  text-align: center;
}

.market-monthly-table td {
  height: var(--market-monthly-row-height, 24px);
  min-width: 0;
  vertical-align: middle;
  white-space: normal;
  border-radius: 2px;
}

.market-monthly-cell.is-empty {
  background: #ffffff;
}

.market-monthly-cell.is-positive {
  background: #d9f5d1;
}

.market-monthly-cell.is-negative {
  background: #fee4d8;
}

.market-monthly-cell.is-neutral {
  background: #ffffff;
}

.market-monthly-cell:not(.is-empty) {
  cursor: pointer;
}

.market-monthly-cell.is-selected {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2px #2563eb;
}

.market-monthly-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 8px;
  font-size: clamp(5.5px, 1cqw, 10px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.market-monthly-vni.is-positive,
.market-monthly-avgln.is-positive {
  color: #078a2d;
}

.market-monthly-vni.is-negative,
.market-monthly-avgln.is-negative {
  color: #e11d2e;
}

.market-monthly-vni.is-neutral,
.market-monthly-avgln.is-neutral {
  color: #ca8a04;
}

/* Giá trị biến động VNIndex chính: giữ cỡ chữ gốc, chỉ in đậm để nổi bật. */
.market-monthly-vni {
  display: inline-block;
  font-weight: 800;
}

.market-monthly-vni-points {
  display: none;
  margin-left: 1px;
  color: inherit;
  font-size: 0.75em;
  font-weight: 400;
}

.market-monthly-vni-points.is-positive {
  color: #078a2d;
}

.market-monthly-vni-points.is-negative {
  color: #e11d2e;
}

.market-monthly-vni-points.is-neutral {
  color: #ca8a04;
}

.market-monthly-movement-card--expanded .market-monthly-vni-points,
.market-monthly-legend .market-monthly-vni-points {
  display: inline;
}

.market-monthly-separator {
  color: #64748b;
  font-weight: 500;
}

/* Ở trạng thái thường, nhóm chi tiết không tạo thêm phần tử bố cục: chỉ có
   VnIndex | trung vị. Khi phóng to trên điện thoại, nhóm này được giữ liền
   để số điểm và dấu | cùng chuyển dòng nếu cần. */
.market-monthly-vni-detail {
  display: contents;
}

.market-monthly-up-track {
  position: relative;
  height: 10px;
  margin: 1px 1px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.32);
}

.market-monthly-up-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #d1d5db;
}

.market-monthly-up-fill.is-from-right {
  inset: 0 0 0 auto;
}

.market-monthly-up-label {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: #111827;
  font-size: clamp(5.5px, 0.9cqw, 9px);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.market-monthly-legend {
  position: relative;
  margin: 6px 8px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid #dbe5f2;
  border-radius: 7px;
  background: #f8fbff;
}

.market-monthly-legend-title {
  position: absolute;
  top: 7px;
  left: 10px;
  margin: 0;
  color: #0f172a;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
}

.market-monthly-legend-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.market-monthly-legend-example {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: 5px;
  flex: 0 0 202px;
}

.market-monthly-legend-year {
  padding-bottom: 6px;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.market-monthly-legend-example-data {
  min-width: 0;
  text-align: center;
}

.market-monthly-legend-month {
  display: block;
  margin-bottom: 2px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

.market-monthly-legend-cell {
  padding: 5px 6px;
  background: #ffffff;
}

.market-monthly-legend-cell.is-positive {
  background: #d9f5d1;
}

.market-monthly-legend-cell.is-negative {
  background: #fee4d8;
}

.market-monthly-legend-cell.is-neutral {
  background: #ffffff;
}

.market-monthly-legend-cell .market-monthly-summary {
  min-height: 15px;
  font-size: 12px;
}

.market-monthly-legend-cell .market-monthly-up-track {
  height: 20px;
  margin-top: 4px;
  border-width: 2px;
}

.market-monthly-legend-cell .market-monthly-up-label {
  font-size: 11px;
}

.market-monthly-legend-notes {
  align-self: center;
  margin: 0;
  padding-left: 16px;
  color: #1e293b;
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
}

.market-monthly-legend-notes strong,
.market-monthly-legend-up-value {
  color: #111827;
  font-weight: 800;
}

.market-monthly-vni-point-explanation {
  color: #1e293b;
  font-weight: 400;
}

.market-monthly-legend-notes .market-monthly-vni.is-positive,
.market-monthly-legend-notes .market-monthly-avgln.is-positive,
.market-monthly-legend .market-monthly-vni-points.is-positive,
.market-monthly-legend .market-monthly-vni-point-explanation.is-positive,
.market-monthly-legend .market-monthly-legend-up-value.is-positive {
  color: #078a2d;
}

.market-monthly-legend-notes .market-monthly-vni.is-negative,
.market-monthly-legend-notes .market-monthly-avgln.is-negative,
.market-monthly-legend .market-monthly-vni-points.is-negative,
.market-monthly-legend .market-monthly-vni-point-explanation.is-negative,
.market-monthly-legend .market-monthly-legend-up-value.is-negative {
  color: #e11d2e;
}

.market-monthly-legend .market-monthly-vni.is-neutral,
.market-monthly-legend .market-monthly-avgln.is-neutral,
.market-monthly-legend .market-monthly-vni-points.is-neutral,
.market-monthly-legend .market-monthly-vni-point-explanation.is-neutral,
.market-monthly-legend .market-monthly-legend-up-value.is-neutral {
  color: #ca8a04;
}

.market-monthly-legend-empty {
  margin: 0;
  color: #64748b;
  font-size: 10px;
}

.market-monthly-movement-modal {
  position: fixed;
  z-index: 10001;
  /* Navbar luôn nằm trên popup. Neo popup dưới đúng đáy navbar thay vì để
     phần đầu dialog bị navbar che trên màn hình hẹp hoặc khi navbar đổi cao. */
  inset: var(--app-navbar-height, 32px) 0 0;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(15, 23, 42, 0.46);
}

.market-monthly-movement-modal-dialog {
  position: relative;
  width: min(1800px, 96vw);
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 22px 65px rgba(15, 23, 42, 0.3);
}

.market-monthly-movement-modal-slot {
  width: 100%;
  height: 100%;
}

.market-monthly-movement-card--expanded {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

.market-monthly-movement-card--expanded .market-monthly-title-row {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-right: 44px;
}

.market-monthly-movement-card--expanded .market-chart-expand {
  display: none;
}

.market-monthly-movement-modal-close {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #dc2626;
  background: #fff1f2;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.market-monthly-movement-modal-close:hover {
  color: #ffffff;
  background: #dc2626;
}

/* Popup phóng to toàn bộ khu vực BIỂU ĐỒ TĂNG TRƯỞNG. */
.market-growth-charts-modal {
  position: fixed;
  z-index: 10002;
  inset: var(--app-navbar-height, 32px) 0 0;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(15, 23, 42, 0.46);
}

.market-growth-charts-modal-dialog {
  position: relative;
  width: min(1800px, 96vw);
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 22px 65px rgba(15, 23, 42, 0.3);
}

.market-growth-charts-modal-slot {
  width: 100%;
  height: 100%;
}

.market-growth-charts-card--expanded {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

.market-growth-charts-card--expanded .market-growth-charts-title-row {
  flex: 0 0 auto;
  padding-right: 44px;
}

.market-growth-charts-card--expanded .market-growth-charts-expand,
.market-growth-charts-card--expanded .market-growth-chart-grid .market-chart-expand {
  display: none;
}

.market-growth-charts-card--expanded .market-growth-chart-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  align-content: stretch;
  grid-auto-rows: minmax(480px, 1fr);
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.market-growth-charts-card--expanded .market-growth-chart-panel {
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.market-growth-charts-card--expanded .market-growth-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

/* Trong popup: bộ chọn năm ở trái, tên phần giữa, nút thêm ở phải. */
.market-growth-charts-card--expanded .market-growth-charts-title-row .market-growth-chart-actions {
  position: static;
  display: contents;
  transform: none;
}

.market-growth-charts-card--expanded .market-growth-year-range {
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
}

.market-growth-charts-card--expanded .market-growth-charts-title-row .market-chart-action {
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
}

.market-growth-charts-modal-close {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #dc2626;
  background: #fff1f2;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.market-growth-charts-modal-close:hover {
  color: #ffffff;
  background: #dc2626;
}

.market-growth-summary-table {
  min-width: 440px;
}

.market-growth-summary-table th,
.market-growth-summary-table td {
  text-align: center;
}

.market-growth-value {
  font-size: 12px;
  font-weight: 700;
}

.market-growth-value.is-positive {
  color: #15803d;
}

.market-growth-value.is-negative {
  color: #dc2626;
}

.market-growth-charts-title-row {
  align-items: flex-start;
  justify-content: center;
  position: relative;
  text-align: center;
}

.market-growth-charts-title-row > div:first-child {
  text-align: center;
}

.market-growth-charts-title-row .market-growth-chart-actions {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Bộ chọn số năm đứng ở trái, không bị nhóm nút bên phải kéo theo. */
.market-growth-charts-card:not(.industry-growth-charts-card) .market-growth-title-year-range {
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
}

.market-growth-charts-title-row .market-chart-action {
  position: static;
  transform: none;
}

.market-growth-chart-actions .market-growth-charts-expand {
  margin-left: 0;
}

.market-growth-year-range {
  min-width: 68px;
  padding: 6px 7px;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  background: #ffffff;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.market-chart-action,
.market-chart-remove {
  border: 1px solid #2563eb;
  border-radius: 6px;
  color: #ffffff;
  background: #2563eb;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.market-chart-action {
  flex: 0 0 auto;
  padding: 6px 9px;
}

.market-chart-action:hover {
  background: #1d4ed8;
}

.market-growth-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}

.market-growth-chart-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.market-growth-chart-toolbar {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.market-growth-chart-toolbar label {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}

.market-growth-chart-toolbar select {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  color: #0f172a;
  background: #ffffff;
  font-size: 11px;
}

.industry-toplist-period-control,
.market-toplist-period-control {
  flex: 0 1 118px;
  min-width: 92px;
}

.industry-toplist-period-control[hidden],
.market-toplist-period-control[hidden] {
  display: none;
}

/* Chế độ TOP dùng chỉ tiêu của biểu đồ hiện tại, không cho đổi chỉ tiêu tại đây. */
.market-growth-chart-toolbar .industry-growth-metric-control[hidden],
.market-growth-chart-toolbar .market-growth-metric-control[hidden] {
  display: none;
}

.industry-toplist-period-select,
.market-toplist-period-select {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  color: #0f172a;
  background: #ffffff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.industry-toplist-toggle,
.market-toplist-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  height: 27px;
  padding: 0 8px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.industry-toplist-toggle:hover,
.industry-toplist-toggle.is-active,
.market-toplist-toggle:hover,
.market-toplist-toggle.is-active {
  color: #ffffff;
  background: #2563eb;
}

/* TOP, phóng to và xóa là một nhóm nút sát mép phải. */
.industry-toplist-toggle + .market-chart-expand,
.market-toplist-toggle + .market-chart-expand {
  margin-left: 0;
}

.industry-toplist-metric-title,
.market-toplist-metric-title {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  color: #172554;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 27px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.industry-toplist-metric-title[hidden],
.market-toplist-metric-title[hidden] {
  display: none;
}

.market-chart-remove {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  padding: 0;
  border-color: #fecaca;
  color: #dc2626;
  background: #fff1f2;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.market-chart-remove:hover {
  color: #ffffff;
  background: #dc2626;
}

.market-chart-expand {
  flex: 0 0 auto;
  margin-left: auto;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.market-chart-expand:hover {
  color: #ffffff;
  background: #2563eb;
}

.market-growth-canvas-wrap {
  position: relative;
  height: 285px;
  padding: 6px;
}

.market-growth-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.market-growth-chart-modal {
  position: fixed;
  z-index: 10000;
  inset: var(--app-navbar-height, 32px) 0 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.46);
}

.market-growth-chart-modal-dialog {
  position: relative;
  width: min(900px, 64vw);
  height: min(840px, 78vh);
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 22px 65px rgba(15, 23, 42, 0.3);
}

.market-growth-chart-modal-slot {
  width: 100%;
  height: 100%;
}

.market-growth-chart-panel--expanded {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.market-growth-chart-panel--expanded .market-growth-chart-toolbar {
  padding-right: 44px;
}

.market-growth-chart-panel--expanded .market-chart-expand,
.market-growth-chart-panel--expanded .market-chart-remove {
  display: none;
}

/* Trong popup TOP: kỳ ở trái, tên chỉ tiêu ở giữa, nút TOP ở phải. */
.market-growth-chart-panel--expanded[data-industry-chart-view="toplist"] .market-growth-chart-toolbar,
.market-growth-chart-panel--expanded[data-market-chart-view="toplist"] .market-growth-chart-toolbar {
  display: grid;
  grid-template-columns: minmax(92px, 118px) minmax(0, 1fr) auto;
  align-items: center;
}

.market-growth-chart-panel--expanded[data-industry-chart-view="toplist"] .industry-toplist-period-control,
.market-growth-chart-panel--expanded[data-market-chart-view="toplist"] .market-toplist-period-control {
  grid-column: 1;
}

.market-growth-chart-panel--expanded[data-industry-chart-view="toplist"] .industry-toplist-metric-title,
.market-growth-chart-panel--expanded[data-market-chart-view="toplist"] .market-toplist-metric-title {
  grid-column: 2;
}

.market-growth-chart-panel--expanded[data-industry-chart-view="toplist"] .industry-toplist-metric-title:not([hidden]),
.market-growth-chart-panel--expanded[data-market-chart-view="toplist"] .market-toplist-metric-title:not([hidden]) {
  display: flex;
}

.market-growth-chart-panel--expanded[data-industry-chart-view="toplist"] .industry-toplist-toggle,
.market-growth-chart-panel--expanded[data-market-chart-view="toplist"] .market-toplist-toggle {
  grid-column: 3;
  margin-left: 0;
}

.market-growth-chart-panel--expanded .market-growth-canvas-wrap {
  height: calc(100% - 56px);
}

.market-growth-chart-modal-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #dc2626;
  background: #fff1f2;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.market-growth-chart-modal-close:hover {
  color: #ffffff;
  background: #dc2626;
}

.market-overview-empty,
.market-overview-loading,
.market-overview-error {
  margin: 0;
  padding: 18px;
  color: #64748b;
  text-align: center;
  font-size: 12px;
}

.market-overview-error {
  color: #b91c1c;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 8px;
}

/* =============== TAB NGÀNH KINH DOANH =============== */
#nganh_market {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.industry-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 4px 12px;
  box-sizing: border-box;
}

.industry-dashboard-left,
.industry-dashboard-right {
  min-width: 0;
  min-height: 0;
}

.industry-dashboard-layout.is-expanded-left,
.industry-dashboard-layout.is-expanded-right {
  grid-template-columns: minmax(0, 1fr);
}

.industry-dashboard-layout.is-expanded-left .industry-dashboard-right,
.industry-dashboard-layout.is-expanded-right .industry-dashboard-left {
  display: none;
}

.industry-dashboard-left {
  height: 100%;
  overflow: hidden;
  padding: 0 0 8px 2px;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.industry-dashboard-right {
  height: 100%;
  overflow-y: auto;
  padding: 0 2px 8px 0;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.industry-selector-card,
.industry-growth-charts-card {
  margin-bottom: 12px;
}

.industry-valuation-card .market-overview-card-title,
.industry-selector-card .market-overview-card-title {
  position: relative;
  justify-content: center;
  text-align: center;
}

.industry-dashboard-expand {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.industry-dashboard-refresh {
  position: absolute;
  top: 50%;
  right: 44px;
  transform: translateY(-50%);
}

.industry-dashboard-refresh:disabled,
.industry-stock-list-modal-refresh:disabled {
  cursor: wait;
  opacity: 0.6;
}

.industry-valuation-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.industry-valuation-table-slot {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.industry-valuation-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: auto;
  position: relative;
  isolation: isolate;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.industry-valuation-table {
  --industry-valuation-header-row-height: 30px;
  min-width: 1420px;
  font-size: 10px;
}

/* Ở bố cục hai cột, để các cột số rộng theo nội dung thay vì bị dàn tới 1420px.
   Khi phóng to Phần A (.is-expanded-left), bảng vẫn giữ nguyên kích thước hiện có. */
.industry-dashboard-layout:not(.is-expanded-left) .industry-valuation-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.industry-dashboard-layout:not(.is-expanded-left) .industry-valuation-table th,
.industry-dashboard-layout:not(.is-expanded-left) .industry-valuation-table td {
  padding: 4px 5px;
}

.industry-dashboard-layout:not(.is-expanded-left) .industry-valuation-table .industry-valuation-fixed-header,
.industry-dashboard-layout:not(.is-expanded-left) .industry-valuation-table .industry-valuation-capital,
.industry-dashboard-layout:not(.is-expanded-left) .industry-valuation-table .industry-valuation-ratio,
.industry-dashboard-layout:not(.is-expanded-left) .industry-valuation-table .industry-valuation-value {
  min-width: 52px;
}

.industry-valuation-table th,
.industry-valuation-table td {
  padding: 6px 7px;
}

.industry-valuation-table tbody td {
  text-align: center;
}

.industry-valuation-table thead th {
  position: sticky;
  z-index: 4;
  background-clip: padding-box;
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.55);
}

.industry-valuation-table thead tr:first-child th {
  top: 0;
}

.industry-valuation-table thead tr:first-child th:not(.industry-valuation-fixed-header) {
  height: var(--industry-valuation-header-row-height);
  box-sizing: border-box;
}

.industry-valuation-table thead tr:nth-child(2) th {
  top: var(--industry-valuation-header-row-height);
}

.industry-valuation-table thead tr:first-child th {
  color: #172554;
  background: #dceafe;
  border-bottom: 1px solid #b9d2f5;
}

.industry-valuation-table thead tr:nth-child(2) th {
  color: #334155;
  background: #eef5ff;
}

.industry-valuation-table .industry-valuation-quarter-header {
  background: #e4f1ff;
}

.industry-valuation-table .industry-valuation-fixed-header {
  min-width: 62px;
}

.industry-valuation-table .industry-valuation-fixed-header:first-child {
  width: 160px;
  min-width: 160px;
  max-width: 160px;
}

.industry-valuation-table .industry-valuation-name-header {
  position: sticky;
  left: 0;
  z-index: 6;
}

.industry-valuation-table .industry-valuation-name {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  overflow: hidden;
  background: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.industry-valuation-name-button {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0;
  border: 0;
  color: #1d4ed8;
  background: transparent;
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.industry-valuation-name-button:hover {
  color: #1e40af;
  text-decoration: underline;
}

.industry-valuation-name-button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}

.industry-valuation-table tbody tr:hover .industry-valuation-name {
  background: #f8fbff;
}

.industry-valuation-table .industry-valuation-capital,
.industry-valuation-table .industry-valuation-ratio,
.industry-valuation-table .industry-valuation-value {
  min-width: 62px;
}

.industry-valuation-table .industry-valuation-capital {
  font-weight: 600;
}

.industry-valuation-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 16px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

.industry-valuation-sort-icon {
  color: #94a3b8;
  font-size: 10px;
  line-height: 1;
}

.industry-valuation-sort-button.is-active,
.industry-valuation-sort-button.is-active .industry-valuation-sort-icon {
  color: #1d4ed8;
}

.industry-valuation-sort-button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 3px;
}

.industry-valuation-value.is-positive {
  color: #047857;
  font-weight: 700;
}

.industry-valuation-value.is-negative {
  color: #dc2626;
  font-weight: 700;
}

.industry-selector-body {
  padding: 12px;
}

.industry-selector-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: nowrap;
}

.industry-selector-control {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.industry-selector-control span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.industry-selector-control select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #0f172a;
  background: #ffffff;
  font-size: 12px;
}

.industry-stock-list-action {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 7px 10px;
  border: 1px solid #2563eb;
  border-radius: 6px;
  color: #ffffff;
  background: #2563eb;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.industry-stock-list-action:hover:not(:disabled) {
  background: #1d4ed8;
}

.industry-stock-list-action:disabled {
  cursor: wait;
  opacity: 0.65;
}

.industry-stock-list-modal {
  position: fixed;
  z-index: 10030;
  /* Neo dưới navbar để kích thước tối đa đúng bằng vùng tab đang xem. */
  inset: var(--app-navbar-height, 32px) 0 0;
  display: grid;
  place-items: center;
  padding: 8px;
  background: rgba(15, 23, 42, 0.45);
}

.industry-stock-list-modal-dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 1920px);
  height: auto;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 22px 65px rgba(15, 23, 42, 0.32);
}

.industry-stock-list-modal-dialog.is-expanded {
  height: 100%;
}

.industry-stock-list-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 39px;
  padding: 6px 112px 6px 14px;
  border-bottom: 1px solid #bcd3f4;
  background: linear-gradient(135deg, #e7f0ff, #cfe0fb);
  text-align: center;
}

.industry-stock-list-modal-header h3 {
  margin: 0;
  color: #172554;
  font-size: 12px;
  font-weight: 700;
}

.industry-stock-list-modal-header p {
  margin: 2px 0 0;
  color: #475569;
  font-size: 10px;
}

.industry-stock-list-modal-close {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 27px;
  height: 27px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #dc2626;
  background: #fff1f2;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.industry-stock-list-modal-expand {
  position: absolute;
  top: 50%;
  right: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.industry-stock-list-modal-refresh {
  position: absolute;
  top: 50%;
  right: 78px;
  transform: translateY(-50%);
}

.industry-stock-list-modal-expand:hover,
.industry-stock-list-modal-expand[aria-pressed="true"] {
  color: #ffffff;
  background: #2563eb;
}

.industry-stock-list-modal-close:hover {
  color: #ffffff;
  background: #dc2626;
}

.industry-stock-list-modal-content {
  /* Với ít dòng, dialog cao vừa bằng nội dung. Khi bảng cao hơn vùng tab,
     chỉ phần nội dung dừng ở chiều cao còn lại và tự xuất hiện thanh cuộn. */
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(100dvh - var(--app-navbar-height, 32px) - 68px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.industry-stock-list-modal-dialog.is-expanded .industry-stock-list-modal-content {
  flex: 1 1 auto;
  max-height: none;
}

.industry-stock-list-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10px;
  table-layout: auto;
}

.industry-stock-list-table th,
.industry-stock-list-table td {
  padding: 2px 5px;
  border-bottom: 1px solid #ddd;
  background-color: #ffffff;
  color: #0f172a;
  text-align: center;
  white-space: nowrap;
}

.industry-stock-list-table th {
  color: #0f172a;
  font-weight: 700;
}

.industry-stock-list-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 16px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

.industry-stock-list-sort-icon {
  color: #94a3b8;
  font-size: 10px;
  line-height: 1;
}

.industry-stock-list-sort-button.is-active,
.industry-stock-list-sort-button.is-active .industry-stock-list-sort-icon {
  color: #1d4ed8;
}

.industry-stock-list-sort-button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 3px;
}

.industry-stock-list-table th[data-industry-stock-freeze],
.industry-stock-list-table td[data-industry-stock-freeze] {
  background-clip: padding-box;
}

.industry-stock-list-table tbody tr:hover td {
  border-top: 1px solid #111827;
  border-bottom-color: #111827;
}

@media (max-width: 768px) {
  /* Phần chọn ngành phải xuống hàng trên điện thoại. Ở kích thước desktop,
     nhãn + select + nút nằm trên một hàng; giữ cách đó trên màn hình hẹp
     khiến nút cuối bị tràn khỏi thẻ (thẻ này có overflow: hidden). */
  .industry-selector-body {
    padding: 10px;
  }

  .industry-selector-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .industry-selector-control {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  .industry-selector-control select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .industry-stock-list-action {
    width: 100%;
    box-sizing: border-box;
  }

  /* Không dùng cụm điều khiển định vị tuyệt đối cho biểu đồ ngành trên
     điện thoại. Tiêu đề nằm ở hàng trên; bộ chọn năm và nút thêm biểu đồ
     chia đều hàng dưới, nên không che hoặc bị cắt ở mép phải. */
  .industry-growth-charts-card .market-growth-charts-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px;
    text-align: left;
  }

  .industry-growth-charts-card .market-growth-charts-title-row > div:first-child,
  .industry-growth-charts-card .market-growth-charts-title-row h3,
  .industry-growth-charts-card .market-growth-charts-title-row p {
    min-width: 0;
    text-align: left;
  }

  .industry-growth-charts-card .market-growth-charts-title-row .market-growth-chart-actions {
    position: static;
    display: grid;
    grid-template-columns: minmax(68px, 0.42fr) minmax(0, 0.58fr);
    align-items: stretch;
    width: 100%;
    gap: 6px;
    transform: none;
  }

  .industry-growth-charts-card .market-growth-year-range,
  .industry-growth-charts-card .market-growth-charts-title-row .market-chart-action {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    box-sizing: border-box;
  }

  .industry-growth-charts-card .market-growth-charts-title-row .market-chart-action {
    padding-right: 6px;
    padding-left: 6px;
    white-space: nowrap;
  }

  .industry-stock-list-modal {
    padding: 5px;
  }

  .industry-stock-list-modal-dialog {
    width: 100%;
    max-height: 100%;
  }

  .industry-stock-list-modal-content {
    max-height: calc(100dvh - var(--app-navbar-height, 32px) - 62px);
  }

  .industry-stock-list-modal-dialog.is-expanded {
    height: 100%;
  }
}

.industry-growth-charts-card .market-chart-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.industry-growth-chart-panel {
  min-height: 0;
}

/* =============== TAB THỊ TRƯỜNG: ĐỊNH GIÁ THỊ TRƯỜNG =============== */
#dinhgia_market,
#dinhgia_market_content {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#dinhgia_market {
  padding: 0 10px;
}

#dinhgia_market_content {
  padding: 8px 0 16px;
}

/* Khung giới thiệu dùng đúng lề ngang với hai khối A/B bên dưới. */
#dinhgia_market > .market-valuation-intro {
  width: 100% !important;
  margin: 8px 0 0;
  box-sizing: border-box;
}

.valuation-market-dashboard {
  display: grid;
  grid-template-columns: minmax(360px, 2fr) minmax(0, 3fr);
  gap: 12px;
  width: 100%;
  height: calc(100dvh - 172px);
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
}

.valuation-chart-card,
.valuation-market-table-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #cbdcf5;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
}

/* Trên máy tính, bảng B ở cột trái và biểu đồ A ở cột phải. */
.valuation-market-table-card {
  order: -1;
}

.valuation-chart-card__header,
.valuation-market-table-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 58px;
  padding: 9px 12px;
  border-bottom: 1px solid #bfd5f4;
  background: linear-gradient(135deg, #edf4ff, #d9e9ff);
  box-sizing: border-box;
}

.valuation-chart-card__heading {
  min-width: 0;
  flex: 1 1 auto;
}

.valuation-chart-card__heading h3,
.valuation-market-table-card__header h3 {
  margin: 0;
  color: #0f2f68;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.15px;
}

.valuation-chart-card__heading p,
.valuation-market-table-card__header p {
  margin: 3px 0 0;
  color: #475569;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

.valuation-market-table-card__header {
  display: block;
}

.valuation-chart-expand,
.valuation-chart-modal-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #93c5fd;
  border-radius: 7px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.valuation-chart-expand:hover {
  color: #ffffff;
  background: #2563eb;
}

.valuation-chart-canvas {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  /* Chừa một khoảng với header để dãy Zoom ở phần trên không bị che. */
  margin-top: 4px;
  /* Để Highcharts nhận thao tác kéo ngang; cuộn dọc ngoài trang vẫn hoạt động. */
  touch-action: pan-y;
}

/* Nhãn giá trị luôn ở góc trên-trái của vùng biểu đồ. Nó không nhận sự kiện
   chuột để việc rê chuột, Zoom và kéo thanh thời gian vẫn hoạt động bình thường. */
.valuation-chart-hover-summary {
  position: absolute;
  z-index: 8;
  top: 3px;
  left: 6px;
  max-width: calc(100% - 12px);
  padding: 2px 5px;
  border-radius: 3px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.78);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  line-height: 1.25;
  pointer-events: none;
  box-sizing: border-box;
}

.valuation-chart-hover-summary__date {
  color: #334155;
  font-weight: 700;
}

.valuation-chart-hover-summary__values {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  font-weight: 500;
}

.valuation-chart-hover-summary__values b {
  font-weight: 800;
}

.valuation-market-table-scroll {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 8px 8px 18px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.valuation-market-table-scroll::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.valuation-market-table-scroll::-webkit-scrollbar-track {
  background: #eef2f7;
}

.valuation-market-table-scroll::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 999px;
}

.valuation-market-pe-table {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  min-width: 420px;
  min-height: 0;
  color: #111827;
  background: #ffffff;
}

.valuation-pe-grid-header,
.valuation-pe-marker__content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.valuation-pe-grid-header {
  min-height: 36px;
  padding: 6px 8px;
  color: #0f172a;
  background: #ffffff;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  box-sizing: border-box;
}

.valuation-pe-grid-header > span {
  min-width: 0;
  text-align: center;
}

.valuation-pe-bands {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: visible;
}

/* Mốc P/E chỉ là vị trí đổi màu của hai dải liền nhau, không hiển thị đường
   kẻ ngang. */
.valuation-pe-marker {
  position: relative;
  z-index: 1;
  height: 0;
}

.valuation-pe-marker::before {
  display: none;
}

.valuation-pe-marker__content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  color: #111827;
  font-size: 13px;
  font-style: italic;
  line-height: 1.2;
  text-align: center;
}

.valuation-pe-marker__content > span {
  justify-self: center;
  min-width: 0;
  padding: 0 5px;
  border-radius: 5px;
  background-color: var(--valuation-pe-band-color);
  white-space: nowrap;
}

.valuation-pe-marker__content > span.is-positive {
  color: #07833d;
  font-weight: 700;
}

.valuation-pe-marker__content > span.is-negative {
  color: #dc2626;
  font-weight: 700;
}

.valuation-pe-band-fill {
  flex: 1 1 0;
  min-height: 16px;
  height: auto;
  background: var(--valuation-pe-band-color);
}

.valuation-pe-band-fill--before-current,
.valuation-pe-band-fill--after-current {
  /* Hai khoảng ngay sát bảng nhỏ bằng một nửa dải thông thường. */
  flex: 0.5 1 0;
  min-height: 8px;
  height: auto;
}

.valuation-pe-band-fill--inner-edge {
  flex: 1 1 0;
  min-height: 14px;
  height: auto;
}

.valuation-pe-band-fill--outer-edge {
  flex: 1 1 0;
  min-height: 12px;
  height: auto;
}

.valuation-current-summary {
  padding: 0;
  background: transparent;
}

.valuation-current-summary-table {
  width: 100%;
  overflow: hidden;
  border: 2px solid #111827 !important;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) inset, 0 3px 9px rgba(15, 23, 42, 0.5);
  font-family: "Segoe UI", Arial, sans-serif;
}

.valuation-current-pe-result {
  display: inline;
  white-space: nowrap;
}

/* Khi Livestream ON, chỉ che hai kết luận định giá trong bảng P/E. Phần
   còn lại của bảng và màu nền đánh giá vẫn giữ nguyên để bố cục không đổi. */
.livestream-sensitive-value__mask {
  display: none;
}

html.is-livestream-mode .valuation-current-summary-table .livestream-sensitive-value--valuation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 22px;
  vertical-align: middle;
}

html.is-livestream-mode .valuation-current-summary-table .livestream-sensitive-value--valuation .livestream-sensitive-value__text {
  display: none;
}

html.is-livestream-mode .valuation-current-summary-table .livestream-sensitive-value--valuation .livestream-sensitive-value__mask {
  display: inline-grid;
  width: 24px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}

html.is-livestream-mode .valuation-current-summary-table .livestream-sensitive-value--valuation svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Watchlist: chỉ che ô có dữ liệu của Cảnh báo, Tỷ trọng và Hold khi
   Livestream ON. Tiêu đề cột và ô chưa có dữ liệu luôn giữ nguyên. */
.ptkt-livestream-cell-mask {
  display: none;
}

html.is-livestream-mode #ptkt td.ptkt-livestream-sensitive-cell,
html.is-livestream-mode #ptkt-table-modal td.ptkt-livestream-sensitive-cell,
html.is-livestream-mode #choncp #valuationTable td.choncp-livestream-sensitive-cell,
html.is-livestream-mode .industry-stock-list-modal td.industry-stock-list-livestream-sensitive-cell {
  position: relative;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}

html.is-livestream-mode #ptkt td.ptkt-livestream-sensitive-cell > :not(.ptkt-livestream-cell-mask),
html.is-livestream-mode #ptkt-table-modal td.ptkt-livestream-sensitive-cell > :not(.ptkt-livestream-cell-mask),
html.is-livestream-mode #choncp #valuationTable td.choncp-livestream-sensitive-cell > :not(.ptkt-livestream-cell-mask),
html.is-livestream-mode .industry-stock-list-modal td.industry-stock-list-livestream-sensitive-cell > :not(.ptkt-livestream-cell-mask) {
  display: none !important;
}

html.is-livestream-mode #ptkt td.ptkt-livestream-sensitive-cell > .ptkt-livestream-cell-mask,
html.is-livestream-mode #ptkt-table-modal td.ptkt-livestream-sensitive-cell > .ptkt-livestream-cell-mask,
html.is-livestream-mode #choncp #valuationTable td.choncp-livestream-sensitive-cell > .ptkt-livestream-cell-mask,
html.is-livestream-mode .industry-stock-list-modal td.industry-stock-list-livestream-sensitive-cell > .ptkt-livestream-cell-mask {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  vertical-align: middle;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.14);
}

html.is-livestream-mode #ptkt .ptkt-livestream-cell-mask svg,
html.is-livestream-mode #ptkt-table-modal .ptkt-livestream-cell-mask svg,
html.is-livestream-mode #choncp #valuationTable .ptkt-livestream-cell-mask svg,
html.is-livestream-mode .industry-stock-list-modal .ptkt-livestream-cell-mask svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.valuation-current-summary-table th {
  padding: 6px 4px;
  border: 0;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.valuation-current-summary-table td {
  border: 0;
  line-height: 1.25;
  text-align: center;
}

/* Hàng P/E không gồm VINgroup vẫn theo lưới 6 cột của bảng nhỏ: phần mô tả
   chiếm hai cột đầu, giá trị nằm đúng dưới cột P/E trailing và không có vách ngăn. */
.valuation-current-summary-table .valuation-current-pe-note,
.valuation-current-summary-table .valuation-current-pe-value {
  border: 0 !important;
}

.valuation-current-summary-table .valuation-current-pe-note {
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
}

.valuation-current-summary-table .valuation-current-pe-value {
  white-space: nowrap !important;
  text-align: center;
}

.valuation-chart-modal {
  position: fixed;
  z-index: 10035;
  /* Cùng hệ toạ độ với popup TÍN HIỆU HỆ THỐNG: khi không fullscreen,
     popup chỉ bắt đầu bên dưới navbar fixed để mép trên và nút đóng không
     bị che. --app-navbar-height được JavaScript đo theo navbar thực tế. */
  inset: var(--app-navbar-height, 32px) 0 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(15, 23, 42, 0.52);
}

.valuation-chart-modal-dialog {
  width: min(1800px, calc(100vw - 24px));
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 22px 65px rgba(15, 23, 42, 0.34);
}

.valuation-chart-modal-slot,
.valuation-chart-card--expanded {
  width: 100%;
  height: 100%;
}

.valuation-chart-card--expanded {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
}

.valuation-chart-card--expanded .valuation-chart-card__header {
  flex: 0 0 auto;
}

.valuation-chart-card--expanded .valuation-chart-canvas {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.valuation-chart-card--expanded .valuation-chart-expand {
  display: none;
}

.valuation-chart-modal-close {
  display: none;
  border-color: #fecaca;
  color: #dc2626;
  background: #fff1f2;
  font-size: 21px;
  font-weight: 400;
}

.valuation-chart-card--expanded .valuation-chart-modal-close {
  display: grid;
}

.valuation-chart-modal-close:hover {
  color: #ffffff;
  background: #dc2626;
}

.valuation-chart-modal:fullscreen {
  /* Fullscreen thật không còn navbar, nên dùng lại toàn bộ viewport. */
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
}

.valuation-chart-modal:fullscreen .valuation-chart-modal-dialog {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
}

@media (max-width: 900px) {
  #dinhgia_market {
    padding: 0 2px;
  }

  #dinhgia_market_content {
    padding: 5px 0 12px;
  }

  #dinhgia_market > .market-valuation-intro {
    width: 100% !important;
    margin: 4px 0 0;
  }

  .valuation-market-dashboard {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    gap: 10px;
  }

  /* Điện thoại dùng một cột: bảng B ở trên, biểu đồ A ở dưới. */
  .valuation-market-table-card {
    order: -1;
  }

  .valuation-chart-card {
    /* Biểu đồ thường gần bằng chiều cao điện thoại để vùng vẽ đủ rộng. */
    height: min(90dvh, 760px);
    min-height: 560px;
  }

  .valuation-market-table-card {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .valuation-chart-card__header,
  .valuation-market-table-card__header {
    min-height: 54px;
    padding: 8px 9px;
  }

  .valuation-chart-card__heading h3,
  .valuation-market-table-card__header h3 {
    font-size: 12px;
  }

  .valuation-chart-card__heading p,
  .valuation-market-table-card__header p {
    /* Dòng chú thích nằm trong khung ĐỊNH LƯỢNG P/E cần dễ đọc trên màn
       hình hẹp, nhưng vẫn vừa một dòng trong vùng thẻ. */
    font-size: 10px;
    line-height: 1.35;
  }

  .valuation-market-table-scroll {
    flex: 0 0 auto;
    overflow: auto;
    padding: 5px 5px 18px;
  }

  .valuation-market-pe-table {
    flex: 0 0 auto;
    min-width: 0;
    /* Rút các dải màu giữa mốc P/E còn khoảng 2/3 chiều cao cũ. */
    min-height: 440px;
  }

  /* Sáu cột của bảng nhỏ được co đều theo chiều ngang điện thoại, tránh
     phát sinh cuộn ngang hoặc cắt nội dung khi bảng nằm giữa hai mốc P/E. */
  .valuation-current-summary-table {
    table-layout: fixed;
    font-size: 10px;
  }

  .valuation-current-summary-table th {
    padding: 5px 2px;
    font-size: 9px;
    line-height: 1.18;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .valuation-current-summary-table td {
    padding: 4px 2px !important;
    font-size: 12px !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .valuation-current-summary-table td span {
    font-size: 13px !important;
  }

  .valuation-current-summary-table .valuation-current-pe-value {
    text-align: center;
  }

  .valuation-current-pe-result {
    display: block;
    margin-top: 1px;
  }

  .valuation-current-summary-table .valuation-current-signal {
    /* Nhãn kết luận có thể dài hơn số liệu; giữ nhỏ hơn một nhịp để không
       tràn cột nhưng vẫn rõ ràng khi hiển thị ở điện thoại. */
    font-size: 10px !important;
    line-height: 1.2;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .valuation-current-summary-table .valuation-current-pe-note {
    font-size: 10px !important;
    line-height: 1.2;
  }

  /* Bảng nhỏ giữ nguyên vị trí khi người dùng vuốt trực tiếp trên bảng. */
  .valuation-current-summary-table {
    touch-action: none;
  }

  .valuation-chart-canvas .highcharts-range-selector-buttons text {
    font-size: 9px !important;
  }

  .valuation-pe-marker__content {
    font-size: 12px;
  }

  .valuation-pe-band-fill {
    min-height: 30px;
  }

  .valuation-pe-band-fill--before-current,
  .valuation-pe-band-fill--after-current {
    min-height: 15px;
  }

  .valuation-chart-modal {
    padding: 0;
  }

  .valuation-chart-modal-dialog {
    width: 100dvw;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }

  /* Khi phóng to, thẻ dùng hết vùng popup hiện có bên dưới navbar. Nếu
     trình duyệt cho phép fullscreen, quy tắc :fullscreen bên trên sẽ dùng
     lại toàn bộ viewport thật của thiết bị. */
  .valuation-chart-card--expanded {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}

/* =============== TAB THỊ TRƯỜNG: TÍN HIỆU HỆ THỐNG =============== */
#danhgiachung_market,
#danhgiachung_market_content {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.system-signal-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px 16px;
  box-sizing: border-box;
}

.system-signal-chart-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cbdcf5;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
}

.system-signal-chart-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 9px 12px;
  border-bottom: 1px solid #bfd5f4;
  background: linear-gradient(135deg, #edf4ff, #d9e9ff);
  box-sizing: border-box;
}

.system-signal-chart-card__heading {
  min-width: 0;
  flex: 1 1 auto;
}

.system-signal-chart-card__heading h3 {
  margin: 0;
  color: #0f2f68;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.15px;
  text-align: left;
}

.system-signal-chart-card__heading p {
  margin: 3px 0 0;
  color: #475569;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.system-signal-opportunity {
  color: #1d4ed8;
  font-weight: 800;
}

.system-signal-risk {
  color: #dc2626;
  font-weight: 800;
}

.system-signal-chart-expand,
.system-signal-chart-modal-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #93c5fd;
  border-radius: 7px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.system-signal-chart-expand:hover {
  color: #ffffff;
  background: #2563eb;
}

.system-signal-chart-canvas {
  width: 100%;
  height: clamp(480px, calc(100dvh - 190px), 760px);
  min-width: 0;
  box-sizing: border-box;
  touch-action: pan-y;
}

.system-signal-chart-modal {
  position: fixed;
  z-index: 10030;
  /* Cùng hệ tọa độ với các popup của TỔNG QUAN THỊ TRƯỜNG: phần đầu dialog
     luôn nằm dưới navbar fixed, không bị navbar che khi phóng to. */
  inset: var(--app-navbar-height, 32px) 0 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(15, 23, 42, 0.52);
}

.system-signal-chart-modal-dialog {
  width: calc(100vw - 24px);
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 22px 65px rgba(15, 23, 42, 0.34);
}

.system-signal-chart-modal-slot,
.system-signal-chart-card--expanded {
  width: 100%;
  height: 100%;
}

.system-signal-chart-card--expanded {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
}

.system-signal-chart-card--expanded .system-signal-chart-card__header {
  flex: 0 0 auto;
}

.system-signal-chart-card--expanded .system-signal-chart-expand {
  display: none;
}

.system-signal-chart-modal-close {
  display: none;
  border-color: #fecaca;
  color: #dc2626;
  background: #fff1f2;
  font-size: 21px;
  font-weight: 400;
}

.system-signal-chart-card--expanded .system-signal-chart-modal-close {
  display: grid;
}

.system-signal-chart-modal-close:hover {
  color: #ffffff;
  background: #dc2626;
}

.system-signal-chart-card--expanded .system-signal-chart-canvas {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* Fullscreen thật sự không còn navbar, vì vậy dùng trọn viewport thay vì
   giữ khoảng offset dành cho navbar ở chế độ popup thông thường. */
.system-signal-chart-modal:fullscreen {
  inset: 0;
  padding: 0;
}

.system-signal-chart-modal:fullscreen .system-signal-chart-modal-dialog {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
}

@media (max-width: 768px) {
  #danhgiachung_market,
  #danhgiachung_market_content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .system-signal-dashboard {
    gap: 10px;
    padding: 4px 2px 12px;
  }

  .system-signal-chart-card {
    border-radius: 8px;
  }

  .system-signal-chart-card__header {
    min-height: 58px;
    padding: 8px 9px;
  }

  .system-signal-chart-card__heading h3 {
    font-size: 13px;
  }

  .system-signal-chart-card__heading p {
    font-size: 10px;
  }

  .system-signal-chart-canvas {
    height: clamp(410px, 70dvh, 560px);
  }

  .system-signal-chart-modal {
    padding: 0;
  }

  .system-signal-chart-modal-dialog {
    width: 100dvw;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }

  .system-signal-chart-card--expanded .system-signal-chart-card__header {
    min-height: 54px;
    padding: 7px 9px;
  }

  .system-signal-chart-card--expanded .system-signal-chart-card__heading p {
    font-size: 9px;
  }
}

/* Sau khi trình duyệt khóa xoay ngang, rút gọn header để phần biểu đồ dùng
   gần như toàn bộ diện tích của điện thoại. */
@media (max-width: 768px) and (orientation: landscape) {
  .system-signal-chart-card--expanded .system-signal-chart-card__header {
    min-height: 42px;
    padding: 5px 9px;
  }

  .system-signal-chart-card--expanded .system-signal-chart-card__heading p {
    display: none;
  }

  .system-signal-chart-card--expanded .system-signal-chart-canvas {
    min-height: 0;
  }
}

@media (max-width: 1180px) {
  .market-growth-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  /* Chỉ Tab Thị trường được phép nở theo nội dung và cuộn toàn trang.
     Các tab khác, như Phân tích cơ bản, vẫn giữ bố cục cố định riêng. */
  body.no-scroll-y.market-mobile-scroll {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Desktop đặt .container-fluid tối thiểu 1510px và .tab-content.active
     rộng 100%. Trên điện thoại, nội dung phải nhận đúng phần chiều ngang còn
     lại sau thanh tab dọc bên trái, thay vì nở thêm ra ngoài màn hình. */
  body.market-mobile-scroll .container-fluid,
  body.market-mobile-scroll .tab-wrapper {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  body.market-mobile-scroll .tab-wrapper {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Khoảng hở đã được tạo tại khung trang phía trên. Không cộng thêm offset
     vào chính thanh sticky, vì .tab-wrapper là scrollport và offset đó làm
     các tab con bị đẩy xuống một khoảng lớn trên điện thoại. */
  body.market-mobile-scroll #market > .subtab-wrapper > .sub-tabs {
    top: 0;
  }

  body.market-mobile-scroll .tabs {
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
    max-width: 22px;
  }

  body.market-mobile-scroll .tab-btn {
    width: 100%;
    padding-right: 1px;
    padding-left: 1px;
    box-sizing: border-box;
  }

  body.market-mobile-scroll .tab-content,
  body.market-mobile-scroll .tab-content.active,
  body.market-mobile-scroll #market.tab-content.active {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  #market > .subtab-wrapper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    overflow: visible;
    box-sizing: border-box;
  }

  #market > .subtab-wrapper > .sub-tab-content.active,
  #market > .subtab-wrapper > #thitruong_market.sub-tab-content.active,
  #thitruong_market {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #market > .subtab-wrapper > .sub-tabs {
    overflow: hidden;
    gap: 5px;
    padding: 4px 5px 5px;
  }

  #market > .subtab-wrapper > .sub-tabs .market-subtabs-scroll {
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: 5px;
  }

  #market > .subtab-wrapper > .sub-tabs .market-subtab-btn {
    min-height: 30px;
    gap: 5px;
    padding: 5px 8px;
    font-size: 10px;
  }

  #market > .subtab-wrapper > .sub-tabs .market-subtab-icon {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
    border-radius: 5px;
  }

  #market > .subtab-wrapper > .sub-tabs .market-subtab-icon svg {
    width: 11px;
    height: 11px;
  }

  #market > .subtab-wrapper > .sub-tabs .market-subtabs-scroll::-webkit-scrollbar {
    display: none;
  }

  .market-overview-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    overflow: visible;
    padding: 0 2px 10px;
    box-sizing: border-box;
  }

  .market-overview-left,
  .market-overview-right {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
  }

  .market-overview-left {
    padding-right: 0;
  }

  /* Hai bảng tóm tắt phải hiển thị trọn vẹn trong chiều ngang điện thoại.
     Cột sẽ tự xuống dòng hợp lý thay vì giữ min-width desktop và tạo cuộn
     ngang cho toàn bộ tab. */
  .market-screening-card .market-table-scroll,
  .market-growth-summary-card .market-table-scroll {
    width: 100%;
    overflow-x: hidden;
  }

  .market-screening-table,
  .market-growth-summary-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: fixed;
    font-size: clamp(8px, 2.3vw, 10px);
  }

  .market-screening-table th,
  .market-screening-table td,
  .market-growth-summary-table th,
  .market-growth-summary-table td {
    padding: 4px 2px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: middle;
  }

  .market-screening-table tbody th:first-child,
  .market-screening-table tbody td:first-child {
    width: 19%;
  }

  .market-screening-table tbody td:nth-child(2) {
    width: 18%;
  }

  .market-screening-table tbody td:nth-child(3),
  .market-screening-table tbody td:nth-child(4) {
    width: 31.5%;
  }

  .market-screening-table .market-screening-capital-header,
  .market-screening-table .market-screening-capital-rate,
  .market-growth-value {
    font-size: inherit;
  }

  .market-growth-summary-table th,
  .market-growth-summary-table td {
    width: 25%;
  }

  .market-monthly-movement-card {
    height: auto;
  }

  /* Mỗi ô tháng rất hẹp trên điện thoại. Đặt VnIndex kèm dấu "|" ở dòng
     đầu; trung vị xuống dòng thứ hai và bám mép phải để không tràn ra ô.
     Quy tắc này cũng áp dụng khi bảng được phóng to trên điện thoại. */
  .market-monthly-table .market-monthly-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-height: 15px;
    font-size: clamp(5px, 1cqw, 10px);
    line-height: 1.05;
    white-space: normal;
  }

  .market-monthly-table .market-monthly-vni {
    order: 1;
    white-space: nowrap;
  }

  .market-monthly-table .market-monthly-separator {
    order: 2;
  }

  .market-monthly-table .market-monthly-avgln {
    order: 3;
    flex: 0 0 100%;
    text-align: right;
    white-space: nowrap;
  }

  /* Bảng thường giữ ô gọn; khi phóng to trên điện thoại vẫn hiển thị số
     điểm trong ngoặc theo yêu cầu. */
  .market-monthly-table .market-monthly-vni-points {
    display: none;
  }

  .market-monthly-movement-card--expanded .market-monthly-table .market-monthly-vni-points {
    display: inline;
    margin-left: 0;
    font-size: 0.65em;
  }

  .market-monthly-movement-card--expanded .market-monthly-table .market-monthly-vni {
    white-space: normal;
  }

  /* Popup điện thoại: VnIndex và nhóm số điểm/dấu | cùng dòng khi đủ chỗ;
     nếu thiếu chỗ, cả nhóm số điểm/dấu | chuyển xuống dòng. Trung vị luôn
     là một dòng riêng phía dưới. */
  .market-monthly-movement-card--expanded .market-monthly-table .market-monthly-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .market-monthly-movement-card--expanded .market-monthly-table .market-monthly-vni {
    order: 1;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .market-monthly-movement-card--expanded .market-monthly-table .market-monthly-vni-detail {
    display: inline-flex;
    order: 2;
    flex: 0 0 auto;
    align-items: baseline;
    white-space: nowrap;
  }

  .market-monthly-movement-card--expanded .market-monthly-table .market-monthly-vni-points {
    white-space: nowrap;
  }

  .market-monthly-movement-card--expanded .market-monthly-table .market-monthly-avgln {
    order: 3;
    flex: 0 0 100%;
    text-align: right;
  }

  .market-growth-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-overview-card-title {
    align-items: flex-start;
  }

  .market-growth-summary-card .market-overview-card-title {
    flex-direction: column;
    align-items: center;
  }

  .market-growth-summary-card .market-period-label {
    position: static;
  }

  /* Tiêu đề biểu đồ trên điện thoại, ở cả dạng thường lẫn popup: mô tả dùng
     phần rộng bên trái; bên phải là cụm chọn thời gian / thêm biểu đồ xếp dọc. */
  .market-growth-charts-card:not(.industry-growth-charts-card) .market-growth-charts-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: stretch;
    column-gap: 6px;
    row-gap: 4px;
    padding: 8px;
    text-align: left;
  }

  .market-growth-charts-card:not(.industry-growth-charts-card) .market-growth-charts-title-row > div:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
    text-align: left;
  }

  .market-growth-charts-card:not(.industry-growth-charts-card) .market-growth-charts-title-row h3,
  .market-growth-charts-card:not(.industry-growth-charts-card) .market-growth-charts-title-row p {
    text-align: left;
  }

  .market-growth-charts-card:not(.industry-growth-charts-card) .market-growth-title-year-range {
    position: static;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    transform: none;
  }

  .market-growth-charts-card:not(.industry-growth-charts-card) .market-growth-chart-actions {
    position: static;
    display: contents;
    transform: none;
    margin: 0;
  }

  .market-growth-charts-card:not(.industry-growth-charts-card) .market-growth-chart-actions .market-chart-action {
    position: static;
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    white-space: nowrap;
  }

  .market-growth-charts-card:not(.industry-growth-charts-card):not(.market-growth-charts-card--expanded) .market-growth-chart-actions .market-growth-charts-expand,
  .market-growth-charts-card--expanded .market-growth-charts-modal-close {
    position: static;
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: stretch;
    width: 30px;
    height: auto;
    min-height: 52px;
    margin: 0;
    transform: none;
  }

  /* Popup cần hai hàng điều khiển có chiều cao rõ ràng để nút Thêm không
     che ô chọn thời gian trên màn hình điện thoại. */
  .market-growth-charts-card--expanded .market-growth-charts-title-row {
    grid-template-rows: minmax(30px, auto) minmax(32px, auto);
    row-gap: 6px;
  }

  .market-growth-charts-card--expanded .market-growth-title-year-range,
  .market-growth-charts-card--expanded .market-growth-charts-title-row .market-chart-action {
    position: static;
    min-height: 30px;
    box-sizing: border-box;
    transform: none;
  }

  .market-growth-chart-modal {
    padding: 12px;
  }

  .market-growth-chart-modal-dialog {
    width: 92vw;
    height: 86vh;
  }

  .market-monthly-legend {
    display: block;
    padding: 22px 6px 7px;
  }

  /* Giữ ô minh họa và phần giải thích cạnh nhau, sát nhau trên điện thoại;
     không xếp thành hai hàng khiến xuất hiện một khoảng trống lớn. */
  .market-monthly-legend-content {
    display: grid;
    grid-template-columns: minmax(108px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    justify-content: stretch;
    gap: 4px;
    width: 100%;
  }

  .market-monthly-legend-example {
    width: 100%;
    min-width: 0;
    flex: none;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 3px;
  }

  .market-monthly-legend-year {
    padding-bottom: 4px;
    font-size: 9px;
  }

  .market-monthly-legend-month {
    margin-bottom: 1px;
    font-size: 10px;
  }

  .market-monthly-legend-cell {
    padding: 4px;
  }

  .market-monthly-legend-cell .market-monthly-summary {
    font-size: 10px;
  }

  .market-monthly-legend-cell .market-monthly-up-track {
    height: 16px;
    margin-top: 3px;
  }

  .market-monthly-legend-cell .market-monthly-up-label {
    font-size: 9px;
  }

  .market-monthly-legend-notes {
    align-self: center;
    min-width: 0;
    margin: 0;
    padding-left: 12px;
    font-size: 9px;
    line-height: 1.25;
  }

  .market-monthly-legend-empty {
    grid-column: 1 / -1;
  }

  .market-monthly-movement-modal {
    padding: 8px;
  }

  .market-monthly-movement-modal-dialog {
    width: 96vw;
    height: 94vh;
  }

  .market-growth-charts-modal {
    padding: 8px;
  }

  .market-growth-charts-modal-dialog {
    width: 96vw;
    height: 94vh;
  }

  #nganh_market {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .industry-dashboard-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    padding-inline: 0;
  }

  .industry-dashboard-left {
    display: block;
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .industry-valuation-card {
    display: flex;
    flex-direction: column;
    /* Trên màn hình hẹp, để bảng có đúng scrollport riêng. Nếu để nở theo
       toàn bộ nội dung, thao tác cuộn xảy ra ở trang và tiêu đề sticky không
       có vùng cuộn để bám vào. */
    height: min(68dvh, 600px);
    min-height: 340px;
    overflow: hidden;
  }

  .industry-valuation-table-slot {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  .industry-valuation-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }

  .industry-dashboard-right {
    height: auto;
    overflow: visible;
    padding-right: 0;
  }
}

/* ===== 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;
  }
}

/* ===== VĨ MÔ / THỊ TRƯỜNG TIỀN TỆ =====
   Ba tab con dùng chung một dãy ngang. Nội dung của từng tab là một dashboard
   độc lập: biểu đồ ở trái, diễn giải và bảng số liệu ở các cột còn lại. */
#vimo_market {
  --macro-tab-blue: #0b76ad;
  --macro-tab-blue-dark: #075985;
  --macro-tab-ink: #334155;
  --macro-tab-line: #d8e4ef;
}

/* Tầng tab đầu tiên của VĨ MÔ. Đệm hai bên được đặt cùng nhịp 8px với thanh
   tab lớn phía trên để THỊ TRƯỜNG TIỀN TỆ không còn áp sát mép trái. */
#vimo_market > .sub2-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 5px 8px 6px;
  border-bottom: 1px solid var(--macro-tab-line);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

#vimo_market > .sub2-tabs .sub2-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: 0.12px;
  text-transform: uppercase;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#vimo_market > .sub2-tabs .sub2-tab-btn:hover {
  border-color: #b7d8eb;
  background: #ffffff;
  color: var(--macro-tab-blue-dark);
  box-shadow: 0 2px 6px rgba(14, 116, 144, 0.1);
  transform: translateY(-1px);
}

#vimo_market > .sub2-tabs .sub2-tab-btn.active {
  border-color: #78bce0;
  background: linear-gradient(135deg, #e5f4ff 0%, #dbeafe 100%);
  color: #075985;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 2px 6px rgba(14, 116, 144, 0.12);
}

#vimo_market > .sub2-tabs .sub2-tab-btn.active::after {
  display: none;
}

/* Tầng tab chi tiết: không dùng icon theo yêu cầu, vẫn giữ cảm giác thẻ rõ
   ràng để phân biệt với tầng phía trên và để dễ bấm trên màn hình cảm ứng. */
#vimo_market #tiente .sub3-tabs,
#vimo_market #kinhte .sub3-tabs {
  gap: 7px;
  padding: 5px 5px 8px;
  border: 1px solid #dce7f1;
  border-radius: 9px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  box-sizing: border-box;
  scrollbar-color: #a8bfce transparent;
}

#vimo_market #tiente .sub3-tab-btn,
#vimo_market #kinhte .sub3-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--macro-tab-ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.05px;
  text-align: center;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#vimo_market #tiente .sub3-tab-btn:hover,
#vimo_market #kinhte .sub3-tab-btn:hover {
  border-color: #b8d8ec;
  background: rgba(255, 255, 255, 0.88);
  color: var(--macro-tab-blue-dark);
  box-shadow: 0 2px 6px rgba(14, 116, 144, 0.1);
  transform: translateY(-1px);
}

#vimo_market #tiente .sub3-tab-btn.active,
#vimo_market #kinhte .sub3-tab-btn.active {
  border-color: var(--macro-tab-blue);
  background: linear-gradient(135deg, #0b7db7 0%, #075985 100%);
  color: #ffffff;
  font-weight: 750;
  box-shadow: 0 3px 8px rgba(3, 105, 161, 0.23);
}

#vimo_market #tiente.sub2-content,
#vimo_market #kinhte.sub2-content {
  min-width: 0;
  padding: 10px 18px 14px;
}

#vimo_market #tiente .sub3-wrapper,
#vimo_market #kinhte .sub3-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

#vimo_market #tiente .sub3-tabs,
#vimo_market #kinhte .sub3-tabs {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-width: 0;
  gap: 7px;
  padding: 0 0 8px;
  overflow-x: auto;
  border-right: 0;
  border-bottom: 1px solid #dbe5f4;
  scrollbar-width: thin;
}

#vimo_market #tiente .sub3-tab-btn,
#vimo_market #kinhte .sub3-tab-btn {
  flex: 1 1 0;
  min-width: 190px;
  padding: 8px 12px;
  white-space: nowrap;
}

/* Dải tab FED/SBV và các biểu đồ kinh tế dùng nút mũi tên ở hai đầu khi
   không đủ bề ngang. Thanh cuộn gốc được ẩn để dải tab không bị che khuất. */
#vimo_market #tiente .macro-subtabs-shell,
#vimo_market #kinhte .macro-subtabs-shell {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  gap: 4px;
}

#vimo_market #tiente .sub3-tabs.macro-subtabs-scroll,
#vimo_market #kinhte .sub3-tabs.macro-subtabs-scroll {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-padding-inline: 2px;
}

#vimo_market #tiente .sub3-tabs.macro-subtabs-scroll::-webkit-scrollbar,
#vimo_market #kinhte .sub3-tabs.macro-subtabs-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#vimo_market #tiente .macro-subtab-nav,
#vimo_market #kinhte .macro-subtab-nav {
  display: none;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 32px;
  padding: 0;
  border: 1px solid #bad0df;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #edf6fb);
  color: #075985;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

#vimo_market #tiente .macro-subtabs-shell--overflowing .macro-subtab-nav,
#vimo_market #kinhte .macro-subtabs-shell--overflowing .macro-subtab-nav {
  display: inline-flex;
}

#vimo_market #tiente .macro-subtab-nav:hover:not(:disabled),
#vimo_market #kinhte .macro-subtab-nav:hover:not(:disabled) {
  border-color: #178cc5;
  background: #e0f2fe;
  color: #0369a1;
}

#vimo_market #tiente .macro-subtab-nav:disabled,
#vimo_market #kinhte .macro-subtab-nav:disabled {
  cursor: default;
  opacity: 0.38;
}

#vimo_market #tiente .macro-subtab-nav svg,
#vimo_market #kinhte .macro-subtab-nav svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#vimo_market #tiente .sub3-content,
#vimo_market #kinhte .sub3-content {
  width: 100%;
  min-width: 0;
}

/* GDP dùng toàn bộ không gian còn lại của tab Chỉ số kinh tế. Chiều cao thực
   được JavaScript đo theo viewport, nên tự thích ứng với desktop/điện thoại. */
#vimo_market #kinhte .economic-chart-card,
.economic-chart-card--gdp,
.economic-chart-card--cpi {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--economic-chart-height, calc(100dvh - 180px));
  min-height: 420px;
  overflow: hidden;
  border: 1px solid #cbdcf5;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

#vimo_market #kinhte .economic-chart-canvas,
.economic-chart-card--gdp .economic-chart-canvas,
.economic-chart-card--cpi .economic-chart-canvas {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  touch-action: pan-y;
}

/* GDP dùng cùng thanh Zoom HTML ổn định với các biểu đồ tiền tệ: không bị
   Highcharts co lại sau reflow, đổi khung thời gian hay đóng popup. */
.gdp-zoom-toolbar {
  position: absolute;
  z-index: 13;
  top: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #475569;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.gdp-zoom-toolbar__label {
  display: grid;
  height: 18px;
  place-items: center;
}

.gdp-zoom-toolbar button {
  min-width: 27px;
  height: 18px;
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  color: #334155;
  background: #f4f5f7;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.gdp-zoom-toolbar button:hover,
.gdp-zoom-toolbar button.is-active {
  color: #0f172a;
  background: #e2e8f0;
}

.gdp-zoom-toolbar button.is-active {
  font-weight: 800;
}

/* Tooltip cố định của GDP/CPI: luôn đọc mốc category cuối có dữ liệu, tách
   khỏi tooltip hover để người dùng vẫn thấy số mới nhất khi không rê chuột. */
.economic-chart-latest-summary {
  position: absolute;
  z-index: 12;
  top: 50px;
  left: 10px;
  max-width: calc(100% - 20px);
  color: #0f172a;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  line-height: 1.35;
  pointer-events: none;
}

.economic-chart-latest-summary__date {
  color: #334155;
  font-weight: 800;
}

.economic-chart-latest-summary__values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 1px 8px;
  font-weight: 500;
}

.economic-chart-latest-summary__values b {
  font-weight: 800;
}

/* GDP chỉ có ba chỉ số; xếp dọc để mốc quý và từng số liệu dễ đối chiếu. */
.economic-chart-card--gdp .economic-chart-latest-summary__values {
  grid-template-columns: minmax(0, max-content);
  gap: 1px;
}

.gdp-chart-heading {
  top: 34px;
}

.economic-chart-card--gdp.macro-money-chart-card--expanded,
.economic-chart-card--cpi.macro-money-chart-card--expanded {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.macro-money-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(255px, 1fr);
  width: 100%;
  /* JavaScript đo vị trí thật của dashboard để cạnh dưới luôn cách mép màn
     hình một khoảng nhỏ, không phụ thuộc chiều cao thanh tab/phần đầu trang. */
  height: var(--macro-money-dashboard-height, calc(100dvh - 150px));
  min-height: 0;
  gap: 13px;
}

.macro-money-dashboard--triple {
  grid-template-columns: minmax(0, 2fr) minmax(230px, 0.92fr) minmax(285px, 1.1fr);
}

/* Lãi suất huy động: đưa Bảng lãi suất đứng trước Mối tương quan ở cả grid
   desktop lẫn bố cục một cột trên điện thoại. */
#ls_huydong .macro-money-dashboard--triple {
  /* Hoán đổi nguyên hai cột: bảng giữ bề rộng gốc 1.1fr/285px, còn Mối tương
     quan giữ bề rộng gốc 0.92fr/230px ở vị trí mới bên phải. */
  grid-template-columns: minmax(0, 2fr) minmax(285px, 1.1fr) minmax(230px, 0.92fr);
}

#ls_huydong .macro-money-table-card {
  order: 2;
}

#ls_huydong .macro-rate-insight-card {
  order: 3;
}

.macro-money-chart-card,
.macro-money-insight-card,
.macro-money-table-card {
  min-width: 0;
  min-height: 0;
  border: 1px solid #cbdcf5;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

.macro-money-chart-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.macro-money-chart-canvas {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  touch-action: pan-y;
}

/* Thanh Zoom riêng của biểu đồ Lãi suất huy động: dùng HTML thay vì SVG
   Range Selector để không bị Highcharts tự co/giãn sau popup hay reflow. */
.ls-huydong-zoom-toolbar {
  position: absolute;
  z-index: 13;
  top: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #475569;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.ls-huydong-zoom-toolbar__label {
  display: grid;
  height: 18px;
  place-items: center;
}

.ls-huydong-zoom-toolbar button {
  min-width: 24px;
  height: 18px;
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  color: #334155;
  background: #f4f5f7;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.ls-huydong-zoom-toolbar button:hover {
  background: #e2e8f0;
}

.ls-huydong-zoom-toolbar button.is-active {
  color: #0f172a;
  background: #e2e8f0;
  font-weight: 800;
}

/* Thanh Zoom lớn cần một hàng riêng, không chồng lên tiêu đề/tóm tắt. */
#ls_huydong .macro-money-chart-heading,
.macro-money-chart-card--ls-huydong .macro-money-chart-heading {
  top: 34px;
}

#ls_huydong .ls-on-chart-latest-summary,
.macro-money-chart-card--ls-huydong .ls-on-chart-latest-summary {
  top: 53px;
}

/* Tiêu đề và phần tóm tắt của các biểu đồ tiền tệ nằm đè nhẹ trong vùng đầu
   biểu đồ, giữ nguyên diện tích vẽ và luôn đồng nhất với dãy Zoom. */
.ls-on-chart-heading,
.macro-money-chart-heading {
  position: absolute;
  z-index: 10;
  /* Tiêu đề nằm ở hàng riêng bên dưới dãy Zoom. */
  top: 29px;
  left: 50%;
  width: min(360px, calc(100% - 230px));
  transform: translateX(-50%);
  color: #0f172a;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

.ls-on-chart-latest-summary {
  position: absolute;
  z-index: 10;
  top: 46px;
  left: 5px;
  max-width: min(360px, calc(100% - 28px));
  padding: 4px 7px;
  border-radius: 5px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.82);
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  line-height: 1.3;
  pointer-events: none;
}

.ls-on-chart-latest-summary__date {
  color: #334155;
  font-weight: 800;
}

.ls-on-chart-latest-summary__values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 1px 8px;
  font-weight: 500;
}

.ls-on-chart-latest-summary__values b {
  font-weight: 800;
}

/* Tooltip hover của biểu đồ Tỷ giá dùng renderer ngoài vùng vẽ; lớp này
   luôn nằm trên phần tóm tắt cố định và tiêu đề của biểu đồ. */
.macro-money-chart-hover-tooltip {
  z-index: 30 !important;
  pointer-events: none;
}

.macro-money-chart-expand,
.macro-money-chart-modal-close {
  position: absolute;
  z-index: 12;
  top: 7px;
  right: 7px;
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 1px solid #93c5fd;
  border-radius: 7px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.macro-money-chart-expand:hover {
  color: #ffffff;
  background: #2563eb;
}

.macro-money-insight-card,
.macro-money-table-card {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.macro-money-insight-card {
  display: flex;
  flex-direction: column;
}

/* Tiêu đề sự kiện của FED–SBV thuộc cột diễn giải, không còn chiếm chiều
   cao phía trên biểu đồ. Phần nội dung bên dưới tự cuộn trong đúng cột 1/4. */
#ls_on .macro-money-insight-card {
  overflow: hidden;
}

.macro-money-event-intro {
  flex: 0 0 auto;
  padding: 13px 14px 11px;
  border-bottom: 1px solid #dbe5f4;
  background: linear-gradient(135deg, #f8f9ff, #eef2ff);
}

.macro-money-event-intro__title {
  color: #111827;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

.macro-money-event-intro__subtitle {
  margin: 6px 0 0 4px;
  padding-left: 9px;
  border-left: 3px solid rgba(59, 130, 246, 0.42);
  color: #4b5563;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.macro-money-insight-card .ls-on-desc {
  min-height: 100%;
  margin: 0;
  border: 0;
  border-left: 4px solid #3b82f6;
  border-radius: 10px;
  box-sizing: border-box;
}

.macro-money-insight-card .ls-on-desc + .ls-on-desc {
  min-height: 0;
  border-top: 1px solid #dbe5f4;
}

#ls_on .macro-money-insight-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-radius: 0;
}

/* Cột sự kiện FED–SBV: header luôn cố định, phần diễn giải cuộn độc lập. */
.macro-money-insight-card.macro-fed-insight-card {
  overflow: hidden;
}

.macro-fed-insight-header {
  flex: 0 0 auto;
  padding: 13px 14px 11px;
  border-bottom: 1px solid #dbe5f4;
  background: linear-gradient(135deg, #f8faff, #eef4ff);
  text-align: center;
}

.macro-fed-insight-header h3 {
  margin: 0;
  color: #173f78;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-wrap: balance;
}

.macro-fed-insight-header p {
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px solid rgba(147, 197, 253, 0.7);
  color: #475569;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.macro-fed-insight-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.macro-fed-insight-section {
  padding: 0 13px 13px;
  color: #334155;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.macro-fed-insight-section h4 {
  position: sticky;
  z-index: 1;
  top: 0;
  margin: 0 -13px 11px;
  padding: 11px 13px 8px;
  border-bottom: 1px solid #e2e8f0;
  color: #123f78;
  background: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.macro-fed-insight-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.macro-fed-insight-list li {
  position: relative;
  padding: 9px 9px 9px 24px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.macro-fed-insight-list li::before {
  position: absolute;
  top: 10px;
  left: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  content: "";
}

.macro-fed-insight-list__alert {
  border-color: #fed7aa !important;
  background: #fffaf4 !important;
}

.macro-fed-insight-list__alert::before {
  background: #ea580c !important;
}

.macro-money-table-card {
  padding: 10px;
}

.macro-money-table-card .ls-on-table {
  width: 100%;
  margin: 0;
}

.macro-money-table-card .ls-on-table table {
  width: 100%;
  min-width: 340px;
  font-size: 11px;
}

.macro-money-table-card .ls-on-table th,
.macro-money-table-card .ls-on-table td {
  vertical-align: middle;
}

/* Bảng lãi suất huy động: một khối chung với ngày cập nhật động và hai bảng
   con. Dùng table-layout cố định để tiêu đề/cột tự xuống dòng, không tràn. */
.rate-banks-table-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  color: #1e293b;
  font-family: "Segoe UI", Arial, sans-serif;
}

.rate-banks-table-panel__header {
  padding: 9px 10px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #173f78;
  background: linear-gradient(135deg, #eff6ff, #f8fbff);
  text-align: center;
}

.rate-banks-table-panel__header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.rate-banks-table-panel__header div {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.rate-banks-table-section {
  overflow: hidden;
  border: 1px solid #dbe5f4;
  border-radius: 8px;
  background: #ffffff;
}

.rate-banks-table-section h4 {
  margin: 0;
  padding: 7px 8px;
  border-bottom: 1px solid #dbe5f4;
  color: #1e40af;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.rate-banks-table-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.rate-banks-table {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
}

.rate-banks-table th,
.rate-banks-table td {
  width: 25%;
  padding: 6px 4px;
  border: 1px solid #e2e8f0;
  vertical-align: middle;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
  word-break: normal;
}

.rate-banks-table th {
  color: #334155;
  background: #f1f5f9;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.28;
}

.rate-banks-table td {
  line-height: 1.35;
}

.rate-banks-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.rate-banks-table td:first-child strong {
  display: inline-block;
  color: #1e3a8a;
  font-weight: 700;
}

/* Khối diễn giải của biểu đồ Tỷ giá: phần tiêu đề luôn nằm yên, chỉ phần
   nội dung bên dưới được cuộn. Nhờ đó tiêu đề không còn trôi theo scrollbar. */
.macro-money-insight-card.macro-tygia-insight-card {
  overflow: hidden;
}

.macro-tygia-insight-title {
  flex: 0 0 auto;
  padding: 13px 14px 10px;
  border-bottom: 1px solid #dbe5f4;
  background: linear-gradient(135deg, #f8faff, #eef4ff);
}

.macro-tygia-insight-title h3 {
  margin: 0;
  color: #173f78;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
}

.macro-tygia-insight-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.macro-tygia-insight-section {
  padding: 14px 15px 8px;
  color: #334155;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.58;
}

.macro-tygia-insight-section + .macro-tygia-insight-section {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.macro-tygia-insight-section h4 {
  margin: 0 0 7px;
  color: #123f78;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.macro-tygia-insight-section p {
  margin: 0;
}

.macro-tygia-insight-section p + p {
  margin-top: 8px;
}

.macro-tygia-insight-note {
  padding-left: 10px;
  border-left: 3px solid #93c5fd;
  color: #475569;
  font-weight: 600;
}

/* Khối Mối tương quan của Lãi suất huy động: cố định tiêu đề, chỉ cuộn phần
   diễn giải để người xem luôn biết mình đang ở trong nội dung nào. */
.macro-money-insight-card.macro-rate-insight-card {
  overflow: hidden;
}

.macro-rate-insight-title {
  flex: 0 0 auto;
  padding: 13px 14px 10px;
  border-bottom: 1px solid #dbe5f4;
  background: linear-gradient(135deg, #f8faff, #eef4ff);
}

.macro-rate-insight-title h3 {
  margin: 0;
  color: #173f78;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
}

.macro-rate-insight-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #eef2f7;
}

.macro-rate-insight-section {
  padding: 13px 14px 12px;
  color: #334155;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.macro-rate-insight-section + .macro-rate-insight-section {
  border-top: 1px solid #e2e8f0;
}

.macro-rate-insight-section h4 {
  margin: 0 0 7px;
  color: #123f78;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.macro-rate-insight-section ul {
  margin: 0;
  padding-left: 19px;
}

.macro-rate-insight-section li + li {
  margin-top: 5px;
}

.macro-rate-insight-section--up h4 {
  color: #b45309;
}

.macro-rate-insight-section--down h4 {
  color: #15803d;
}

.macro-rate-insight-point {
  padding: 9px 10px;
  border: 1px solid #dbe5f4;
  border-radius: 8px;
  background: #f8fafc;
}

.macro-rate-insight-point + .macro-rate-insight-point {
  margin-top: 9px;
}

.macro-rate-insight-point h5 {
  margin: 0 0 4px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.macro-rate-insight-point p {
  margin: 0;
}

.macro-rate-insight-point p + p {
  margin-top: 8px;
}

.macro-rate-insight-point--special {
  border-color: #fed7aa;
  background: #fffaf4;
}

.macro-rate-insight-point--special h5 {
  color: #c2410c;
}

.macro-rate-insight-context {
  padding-left: 8px;
  border-left: 3px solid #93c5fd;
  color: #475569;
}

.macro-rate-insight-section--note {
  margin: 10px 10px 12px;
  padding: 11px 12px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
}

.macro-rate-insight-section--note h4 {
  color: #a16207;
}

.macro-tygia-yield-intro {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.macro-tygia-rates-table {
  width: 100%;
  margin-top: 11px;
}

.macro-tygia-case-scenario {
  overflow: hidden;
  border: 1px solid #cbdcf5;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05);
}

.macro-tygia-case-scenario + .macro-tygia-case-scenario {
  margin-top: 13px;
}

.macro-tygia-case-scenario-title {
  padding: 7px 10px;
  color: #ffffff;
  background: linear-gradient(90deg, #1e3a5f, #2563a8);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
}

.macro-tygia-case-grid {
  display: grid;
  grid-template-columns: minmax(105px, 0.82fr) minmax(0, 1.58fr);
}

.macro-tygia-case-cell {
  min-width: 0;
  padding: 8px 9px;
  border-bottom: 1px solid #e5edf8;
  color: #334155;
  font-size: 12px;
  line-height: 1.38;
  overflow-wrap: anywhere;
  word-break: normal;
}

.macro-tygia-case-grid > :nth-last-child(-n + 2) {
  border-bottom: 0;
}

.macro-tygia-case-criterion {
  border-right: 1px solid #e5edf8;
  color: #1e3a5f;
  background: #f8fbff;
  font-weight: 700;
}

.macro-tygia-case-value {
  background: #ffffff;
  font-weight: 500;
  white-space: pre-line;
}

.macro-tygia-case-header {
  display: flex;
  align-items: center;
  min-height: 37px;
  color: #ffffff;
  background: #3b5f8b;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.macro-tygia-case-header:first-child {
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.macro-tygia-case-header--switch {
  justify-content: space-between;
  gap: 6px;
}

.macro-tygia-case-header--switch span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.macro-tygia-case-nav {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.macro-tygia-case-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.macro-tygia-case-nav:disabled {
  opacity: 0.32;
  cursor: default;
}

.macro-tygia-case-criterion--emphasis,
.macro-tygia-case-value--emphasis {
  font-weight: 800;
}

.macro-tygia-case-value.is-positive {
  color: #15803d;
}

.macro-tygia-case-value.is-negative {
  color: #dc2626;
}

.macro-tygia-case-value.is-neutral {
  color: #a16207;
}

.macro-money-chart-modal {
  position: fixed;
  z-index: 10045;
  /* Chế độ popup trên desktop: giữ khoảng đệm đều 12px phía trên/dưới
     sau navbar cố định, thay vì để khung phủ lên phần header. */
  inset: var(--app-navbar-height, 32px) 0 0;
  display: grid;
  padding: 12px;
  place-items: center;
  background: rgba(15, 23, 42, 0.52);
}

.macro-money-chart-modal-dialog {
  width: min(1800px, calc(100vw - 24px));
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 22px 65px rgba(15, 23, 42, 0.34);
}

.macro-money-chart-modal-slot,
.macro-money-chart-card--expanded {
  width: 100%;
  height: 100%;
}

.macro-money-chart-card--expanded {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
}

.macro-money-chart-card--expanded .macro-money-chart-canvas {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.macro-money-chart-card--expanded .macro-money-chart-expand {
  display: none;
}

.macro-money-chart-modal-close {
  display: none;
  border-color: #fecaca;
  color: #dc2626;
  background: #fff1f2;
  font-size: 14px;
  font-weight: 400;
}

.macro-money-chart-card--expanded .macro-money-chart-modal-close {
  display: grid;
}

.macro-money-chart-modal-close:hover {
  color: #ffffff;
  background: #dc2626;
}

.macro-money-chart-modal:fullscreen {
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
}

.macro-money-chart-modal:fullscreen .macro-money-chart-modal-dialog {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
}

@media (max-width: 768px) {
  #vimo_market > .sub2-tabs {
    gap: 4px;
    padding: 4px 5px 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #vimo_market > .sub2-tabs::-webkit-scrollbar {
    display: none;
  }

  #vimo_market > .sub2-tabs .sub2-tab-btn {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 6px 9px;
    font-size: 10px;
  }

  #vimo_market #tiente.sub2-content,
  #vimo_market #kinhte.sub2-content {
    padding: 8px 9px 12px;
  }

  #vimo_market #tiente .sub3-tabs,
  #vimo_market #kinhte .sub3-tabs {
    gap: 6px;
    padding-bottom: 7px;
  }

  #vimo_market #tiente .sub3-tab-btn,
  #vimo_market #kinhte .sub3-tab-btn {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 7px 10px;
    font-size: 12px;
  }

  .macro-money-dashboard,
  .macro-money-dashboard--triple {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    gap: 10px;
  }

  #ls_huydong .macro-money-dashboard--triple {
    grid-template-columns: minmax(0, 1fr);
  }

  .macro-money-chart-card {
    height: min(78dvh, 620px);
    min-height: 430px;
  }

  /* FED–SBV ở trạng thái thường dùng gần trọn chiều cao điện thoại để vùng
     biểu đồ đủ rộng, tương đương cách hiển thị biểu đồ Định giá VNINDEX. */
  #ls_on .macro-money-chart-card,
  #tygia .macro-money-chart-card,
  #ls_huydong .macro-money-chart-card,
  .macro-money-chart-card--ls-huydong {
    height: min(90dvh, 760px);
    min-height: 560px;
  }

  .ls-huydong-zoom-toolbar {
    top: 6px;
    left: 6px;
    gap: 3px;
    font-size: 8px;
  }

  .ls-huydong-zoom-toolbar__label {
    height: 13px;
  }

  .ls-huydong-zoom-toolbar button {
    min-width: 0;
    height: 13px;
    padding: 0 2px;
    border-radius: 2px;
  }

  #vimo_market #kinhte .economic-chart-card--gdp,
  #vimo_market #kinhte .economic-chart-card--cpi {
    min-height: min(90dvh, 560px);
  }

  .gdp-zoom-toolbar {
    top: 6px;
    left: 6px;
    gap: 3px;
    font-size: 8px;
  }

  .gdp-zoom-toolbar__label {
    height: 13px;
  }

  .gdp-zoom-toolbar button {
    min-width: 0;
    height: 13px;
    padding: 0 2px;
    border-radius: 2px;
  }

  .economic-chart-latest-summary {
    top: 45px;
    left: 6px;
    max-width: calc(100% - 12px);
    font-size: 9px;
  }

  .economic-chart-latest-summary__values {
    grid-template-columns: minmax(0, max-content);
    gap: 1px;
  }

  /* CPI có chuỗi tháng dài hơn GDP; giảm nhẹ cỡ tick mobile để các mốc không
     lồng lên nhau khi giữ mật độ tick theo Zoom. */
  .economic-chart-card--cpi .highcharts-xaxis-labels text {
    font-size: 7px !important;
  }

  .gdp-chart-heading,
  .cpi-chart-heading {
    top: 28px;
    width: min(210px, calc(100% - 150px));
    font-size: 11px;
  }

  #ls_huydong .macro-money-chart-heading,
  .macro-money-chart-card--ls-huydong .macro-money-chart-heading {
    top: 24px;
    width: min(220px, calc(100% - 128px));
  }

  #ls_huydong .ls-on-chart-latest-summary,
  .macro-money-chart-card--ls-huydong .ls-on-chart-latest-summary {
    top: 42px;
  }

  .ls-on-chart-heading,
  .macro-money-chart-heading {
    top: 24px;
    width: min(205px, calc(100% - 170px));
    font-size: 11px;
  }

  .ls-on-chart-latest-summary {
    top: 42px;
    left: 4px;
    max-width: calc(100% - 8px);
    font-size: 9px;
  }

  .ls-on-chart-latest-summary__values {
    grid-template-columns: minmax(0, max-content);
    gap: 1px;
  }

  .macro-money-insight-card,
  .macro-money-table-card {
    min-height: 0;
    max-height: none;
  }

  .macro-money-insight-card .ls-on-desc {
    min-height: 0;
  }

  #ls_on .macro-fed-insight-card {
    height: min(72dvh, 560px);
    overflow: hidden;
  }

  .macro-fed-insight-header {
    padding: 11px 12px 9px;
  }

  .macro-fed-insight-header h3 {
    font-size: 13px;
  }

  .macro-fed-insight-header p {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 10px;
  }

  .macro-fed-insight-section {
    padding: 0 10px 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  .macro-fed-insight-section h4 {
    margin: 0 -10px 9px;
    padding: 9px 10px 7px;
    font-size: 13px;
  }

  .macro-fed-insight-list {
    gap: 7px;
  }

  .macro-fed-insight-list li {
    padding: 8px 8px 8px 21px;
  }

  .macro-fed-insight-list li::before {
    top: 10px;
    left: 8px;
    width: 6px;
    height: 6px;
  }

  /* Trên điện thoại phần diễn giải Tỷ giá hiển thị nối tiếp theo trang;
     vẫn giữ tiêu đề tách riêng và bảng Case chỉ gồm hai cột dễ đọc. */
  #tygia .macro-tygia-insight-card {
    height: auto;
    overflow: visible;
  }

  #tygia .macro-tygia-insight-scroll {
    overflow: visible;
  }

  /* Điện thoại giữ phần tiêu đề Mối tương quan cố định; chỉ cuộn nội dung
     bên trong thẻ để không làm tiêu đề trôi khỏi tầm nhìn. */
  #ls_huydong .macro-rate-insight-card {
    height: min(72dvh, 560px);
    overflow: hidden;
  }

  .macro-rate-insight-title {
    padding: 11px 12px 9px;
  }

  .macro-rate-insight-title h3 {
    font-size: 14px;
  }

  .macro-rate-insight-section {
    padding: 12px 11px 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  .macro-rate-insight-section h4 {
    font-size: 13px;
  }

  .macro-rate-insight-point {
    padding: 8px 9px;
  }

  .macro-rate-insight-point h5 {
    font-size: 11px;
  }

  .macro-rate-insight-section--note {
    margin: 9px 8px 10px;
    padding: 10px;
  }

  .macro-tygia-insight-title {
    padding: 11px 12px 9px;
  }

  .macro-tygia-insight-title h3 {
    font-size: 14px;
  }

  .macro-tygia-insight-section {
    padding: 12px 11px 7px;
    font-size: 12px;
    line-height: 1.5;
  }

  .macro-tygia-insight-section + .macro-tygia-insight-section {
    padding-top: 12px;
  }

  .macro-tygia-insight-section h4 {
    font-size: 13px;
  }

  .macro-tygia-case-grid {
    grid-template-columns: minmax(88px, 0.72fr) minmax(0, 1.28fr);
  }

  .macro-tygia-case-cell {
    padding: 7px 6px;
    font-size: 11px;
    line-height: 1.34;
  }

  .macro-tygia-case-header {
    min-height: 34px;
    font-size: 11px;
  }

  .macro-tygia-case-header--switch {
    gap: 4px;
  }

  .macro-tygia-case-nav {
    flex-basis: 21px;
    width: 21px;
    height: 21px;
    font-size: 17px;
  }

  .macro-money-event-intro {
    padding: 11px 12px 9px;
  }

  .macro-money-table-card {
    padding: 8px;
  }

  .rate-banks-table-panel {
    gap: 8px;
  }

  .rate-banks-table-panel__header {
    padding: 8px 7px 7px;
  }

  .rate-banks-table-panel__header h3 {
    font-size: 12px;
  }

  .rate-banks-table-panel__header div {
    font-size: 10px;
  }

  .rate-banks-table-section h4 {
    padding: 6px;
    font-size: 11px;
  }

  .rate-banks-table {
    font-size: 10px;
  }

  .rate-banks-table th,
  .rate-banks-table td {
    padding: 5px 3px;
  }

  .rate-banks-table th {
    font-size: 9px;
  }

  .macro-money-chart-card--expanded {
    height: 100%;
    min-height: 0;
  }
}

/* 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);
}
.gioithieu-page .hero-button {
    border: 2px solid #075985;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(7, 89, 133, 0.76), rgba(14, 165, 233, 0.7));
    backdrop-filter: blur(3px);
    box-shadow: 0 8px 20px rgba(3, 105, 161, 0.3), inset 0 1px 0 rgba(255,255,255,0.28);
    letter-spacing: 0.1px;
}
.gioithieu-page .hero-button:hover,
.gioithieu-page .hero-button:focus-visible {
    border-color: #022c43;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(3, 105, 161, 0.9), rgba(2, 132, 199, 0.86));
    box-shadow: 0 12px 26px rgba(3, 105, 161, 0.38), inset 0 1px 0 rgba(255,255,255,0.32);
    outline: none;
}
/* 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;
}

.hero-slider .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;
}

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

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

.hero-slider .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;
    /* Navbar luôn nằm trên lightbox. Neo cả overlay xuống dưới navbar để nút
       đóng không bị thanh điều hướng phủ lên ở mọi độ rộng màn hình. */
    inset: var(--app-navbar-height, 32px) 0 0;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 48px 18px 18px;
    z-index: 9999;
}
#lightbox img {
    max-width: min(94%, 1560px);
    max-height: calc(100% - 58px);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
#lightbox .close-btn {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 50%;
    background: rgba(15,23,42,0.56);
    box-shadow: 0 4px 14px rgba(0,0,0,0.24);
    font-size: 23px;
    font-weight: 300;
    line-height: 1;
    color: white;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}
#lightbox .close-btn:hover {
    background: rgba(220,38,38,0.92);
    transform: scale(1.06);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero-slider {
        height: 240px;
    }

    /* Trang giới thiệu: bỏ khoảng trống 95vh trên điện thoại để ảnh slider
       và phần giới thiệu đi liền mạch hơn, vẫn giữ đủ nhịp thở cho nội dung. */
    .gioithieu-page {
        overflow-x: clip;
    }
    .gioithieu-page .gioithieu-hero {
        display: flex;
        align-items: flex-start;
        height: auto;
        min-height: 395px;
        padding: 42px 18px 30px;
    }
    .gioithieu-page .hero-bg {
        background-position: 60% center;
    }
    .gioithieu-page .hero-content {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 540px;
        margin: 0 auto;
        transform: none;
    }
    .gioithieu-page .hero-title {
        margin-bottom: 8px;
        font-size: clamp(30px, 9.4vw, 39px);
        line-height: 1;
    }
    .gioithieu-page .hero-logo {
        width: 23px;
        height: 23px;
        top: -9px;
        left: -6px;
    }
    .gioithieu-page .hero-subtitle {
        margin-bottom: 18px;
        font-size: 14px;
        line-height: 1.52;
    }
    .gioithieu-page .hero-button {
        align-self: flex-end;
        /* Đưa CTA xuống gần vùng giữa màn hình điện thoại, nhưng vẫn co giãn
           hợp lý trên các máy có chiều cao khác nhau. */
        margin-top: clamp(78px, 16vh, 145px);
        padding: 10px 20px;
        border: 2px solid #075985;
        background: linear-gradient(135deg, rgba(7, 89, 133, 0.76), rgba(14, 165, 233, 0.7));
        box-shadow: 0 7px 18px rgba(3, 105, 161, 0.28), inset 0 1px 0 rgba(255,255,255,0.28);
        font-size: 14px;
    }
    .gioithieu-page .gioithieu-slider-section {
        padding: 16px 14px 18px;
    }
    .gioithieu-page .slider-container {
        max-width: 620px;
    }
    .gioithieu-page .hero-slider {
        height: 214px;
        border-radius: 13px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    }
    .gioithieu-page .hero-dots {
        margin-top: 8px;
        gap: 7px;
    }
    .gioithieu-page .gioithieu-intro-section {
        padding: 20px 16px 24px;
    }
    .gioithieu-page .intro-content {
        max-width: 620px;
        font-size: 14px;
        line-height: 1.5;
    }
    .gioithieu-page .intro-content p {
        margin: 0;
    }
    .gioithieu-page .intro-content strong {
        overflow-wrap: anywhere;
    }
    .gioithieu-footer {
        margin-top: 18px;
        padding: 16px 12px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .gioithieu-page .gioithieu-hero {
        min-height: 370px;
        padding-top: 34px;
        padding-bottom: 24px;
    }
    .gioithieu-page .hero-slider {
        height: 195px;
    }
}

/* ====== Trang Khuyến cáo ================================================================== */
.advisory-page {
    box-sizing: border-box;
    max-width: 1080px;
    margin: 38px auto 56px;
    padding: 0 22px;
    color: #1e293b;
    font: 400 15px/1.65 "Segoe UI", Arial, sans-serif;
}
.advisory-hero {
    position: relative;
    overflow: hidden;
    padding: 32px 38px 30px;
    border: 1px solid #fecaca;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(125deg, #7f1d1d 0%, #b91c1c 52%, #ef4444 100%);
    box-shadow: 0 14px 30px rgba(127, 29, 29, 0.18);
}
.advisory-hero::after {
    content: "!";
    position: absolute;
    top: -44px;
    right: 24px;
    color: rgba(255, 255, 255, 0.11);
    font: 800 178px/1 Georgia, serif;
    pointer-events: none;
}
.advisory-hero__eyebrow,
.advisory-hero h1,
.advisory-hero__lead {
    position: relative;
    z-index: 1;
}
.advisory-hero__eyebrow {
    margin: 0 0 7px;
    color: #fee2e2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
}
.advisory-hero h1 {
    margin: 0;
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 800;
    letter-spacing: 0.2px;
}
.advisory-hero__lead {
    max-width: 680px;
    margin: 10px 0 0;
    color: #fff7f7;
    font-size: 15px;
}
.advisory-statement {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin: 22px 0;
    padding: 18px 20px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: linear-gradient(105deg, #fff7ed, #fffdfa);
    box-shadow: 0 4px 12px rgba(154, 52, 18, 0.06);
}
.advisory-statement__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    background: #ea580c;
    box-shadow: 0 3px 8px rgba(194, 65, 12, 0.22);
    font-size: 19px;
    font-weight: 800;
}
.advisory-statement p {
    margin: 0;
    color: #7c2d12;
}
.advisory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.advisory-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    min-height: 148px;
    padding: 19px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.055);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.advisory-card:hover {
    border-color: #fca5a5;
    box-shadow: 0 10px 22px rgba(127, 29, 29, 0.1);
    transform: translateY(-2px);
}
.advisory-card__index {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    color: #b91c1c;
    background: #fef2f2;
    font-size: 12px;
    font-weight: 800;
}
.advisory-card h2 {
    margin: 1px 0 7px;
    color: #7f1d1d;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.35;
}
.advisory-card p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.62;
}
.advisory-acknowledgement {
    margin-top: 22px;
    padding: 20px 24px;
    border-top: 4px solid #b91c1c;
    border-radius: 0 0 12px 12px;
    color: #7f1d1d;
    background: #fffafa;
    text-align: center;
}
.advisory-acknowledgement p {
    margin: 0;
}
.advisory-acknowledgement__label {
    margin-bottom: 7px !important;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.85px;
}
.advisory-acknowledgement__thanks {
    margin-top: 10px !important;
    font-weight: 800;
}
.advisory-acknowledgement__copyright {
    margin-top: 8px !important;
    color: #9f1239;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}
@media (max-width: 700px) {
    .advisory-page {
        margin: 18px auto 32px;
        padding: 0 12px;
        font-size: 14px;
    }
    .advisory-hero {
        padding: 24px 20px 22px;
        border-radius: 12px;
    }
    .advisory-hero::after {
        top: -26px;
        right: 8px;
        font-size: 124px;
    }
    .advisory-hero__eyebrow {
        font-size: 9.5px;
        letter-spacing: 0.7px;
    }
    .advisory-hero__lead {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.48;
    }
    .advisory-statement {
        gap: 11px;
        margin: 14px 0;
        padding: 14px;
        border-radius: 10px;
    }
    .advisory-statement__icon {
        width: 26px;
        height: 26px;
        font-size: 16px;
    }
    .advisory-statement p {
        font-size: 13px;
        line-height: 1.54;
    }
    .advisory-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .advisory-card {
        min-height: 0;
        gap: 10px;
        padding: 15px 13px;
        border-radius: 10px;
    }
    .advisory-card__index {
        width: 27px;
        height: 27px;
        font-size: 10px;
    }
    .advisory-card h2 {
        margin-top: 0;
        font-size: 14px;
    }
    .advisory-card p {
        font-size: 13px;
        line-height: 1.55;
    }
    .advisory-acknowledgement {
        margin-top: 14px;
        padding: 16px 14px;
        font-size: 13px;
        line-height: 1.55;
    }
}

.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;
    /* Nhận đúng chiều cao của tab-wrapper đã trừ navbar, thay vì tự trừ một
       mốc 25px cũ khiến vùng biểu đồ không cùng mép với các tab khác. */
    height: 100%;
    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;
}

/* Điều kiện mô phỏng 2 tháng và 6 tháng cùng âm được JavaScript gắn vào
   #chart-stats. Quy tắc tường minh này bảo đảm panel biến mất cả khi CSS
   display:flex của layout desktop đang được áp dụng. */
#chart-stats[hidden],
#chart-stats.is-simulation-performance-hidden {
    display: none !important;
}
#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;
}

/* Lớp phủ phóng to biểu đồ cho điện thoại/vùng hẹp. Khối #chart-left được
   chuyển trực tiếp vào đây để biểu đồ, realtime và công cụ vẽ không bị khởi
   tạo lại khi người dùng mở/đóng. */
body.tv-chart-mobile-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.tv-chart-mobile-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #f6f8fb;
}

.tv-chart-mobile-modal__surface {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
}

@media (max-width: 900px) {
    .tv-chart-mobile-modal #chart-left {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .tv-chart-mobile-modal #chart_tradingview,
    .tv-chart-mobile-modal #chart_wrapper {
        width: 100%;
        max-width: none;
        min-width: 0;
        height: 100%;
        min-height: 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;
}

/* Tab Biểu đồ & Trading: che các giá trị mô phỏng được đánh dấu khi
   Livestream ON, giữ nguyên tiêu đề, khung và bố cục của phần thống kê. */
.livestream-trend-sensitive__mask {
    display: none;
}

html.is-livestream-mode #chart_signal .livestream-trend-sensitive__content {
    display: none !important;
}

html.is-livestream-mode #chart_signal .livestream-trend-sensitive--summary,
html.is-livestream-mode #chart_signal .livestream-trend-sensitive--table-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    min-height: 17px;
    vertical-align: middle;
}

html.is-livestream-mode #chart_signal .livestream-trend-sensitive--status-warning,
html.is-livestream-mode #chart_signal .livestream-trend-sensitive--status-current {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
}

html.is-livestream-mode #chart_signal .livestream-trend-sensitive--status-warning {
    min-height: 52px;
}

html.is-livestream-mode #chart_signal .livestream-trend-sensitive__mask {
    display: inline-grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 999px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.14);
}

html.is-livestream-mode #chart_signal .livestream-trend-sensitive__mask svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.box-header {
    margin-bottom: 10px;
}
.box-title {
    font-size: 15px;
    font-weight: 700;
    color: #0a7cff;
}

/* Mã trong tiêu đề PHÂN TÍCH XU HƯỚNG tách màu nhẹ với nhãn chung để người
   dùng nhận biết ngay kết quả mô phỏng đang thuộc cổ phiếu nào. */
#trend-analysis-title .trend-analysis-ticker {
    display: inline-block;
    margin-left: 4px;
    color: #7c3aed;
    font-weight: 800;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}
.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-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;
}

/* Bấm vào tên nhóm để mở popup Sửa/Xóa, thay cho các nút chỉ hiện khi hover. */
#ptkt .customer-name--editable {
    cursor: pointer;
    user-select: none;
}

#ptkt .customer-name--editable:hover,
#ptkt .customer-name--editable:focus-visible {
    background: linear-gradient(90deg, rgba(186, 230, 253, 0.9), rgba(240, 249, 255, 0.25));
    outline: 1px solid #86c7e8;
    outline-offset: 1px;
}

.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;
    padding:0;
    background:#fafafa;
    border-bottom:1px solid #e4e4e4;
    overflow:hidden;
    z-index:1000;
}

.tv-topbar-scroll{
    display:flex;
    flex:1 1 auto;
    align-items:center;
    gap:8px;
    min-width:0;
    height:100%;
    box-sizing:border-box;
    padding:0 50px 0 4px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
}

.tv-topbar-scroll::-webkit-scrollbar{
    display:none;
}

.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;
}

/* ===========================
   GROUP
=========================== */
.tv-group{
    display:flex;
    align-items:center;
    gap:4px;
    flex:0 0 auto;
    padding-left:0;
    border-left:0;
    scroll-snap-align:start;
}

.tv-group--drawing{
  margin-left:4px;
  padding-left:8px;
  border-left:1px solid #e1e5eb;
}

/* Giữ thanh đệm trái 5px của TradingView để phần vẽ không dính sát mép,
   nhưng bỏ đường phân cách mờ giữa thanh đệm và đồ thị. */
#tv_leftbar {
  border-right: 0 !important;
  background: transparent !important;
}

.tv-symbol-group{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:6px;
    scroll-snap-align:start;
}

.tv-symbol-group--fixed{
    position:relative;
    z-index:1;
    margin-left:10px;
    margin-right:6px;
    padding-right:6px;
    border-right:1px solid #dfe5ec;
    background:#fafafa;
    box-shadow:7px 0 8px -9px rgba(15, 23, 42, .6);
}

.tv-long-signal-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:4px 9px;
    border:1px solid #b9c5d6;
    border-radius:5px;
    font:600 11px/1 Arial, sans-serif;
    white-space:nowrap;
    box-shadow:0 1px 3px rgba(15, 23, 42, .1);
    cursor:pointer;
    transition:background .16s ease, color .16s ease, border-color .16s ease;
}

.tv-long-signal-button:hover,
.tv-long-signal-button:focus-visible{
    border-color:#2962ff;
    outline:none;
    box-shadow:0 0 0 2px rgba(41, 98, 255, .18);
}

/* ===========================
   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;
    line-height:1;
    text-align:center;
}

.tv-tool svg{
    display:block;
    margin:auto;
}

.tv-tool .tv-polyline-icon{
    flex:0 0 auto;
}

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

/* Biểu tượng chỉ báo theo quy ước f(x): thay nhãn dài để toolbar gọn hơn,
   nhưng vẫn giữ title/aria-label cho chuột và trình đọc màn hình. */
.tv-indicator-button{
    width:34px;
    min-width:34px;
    padding:0 5px;
}

.tv-indicator-icon{
    display:inline-flex;
    align-items:baseline;
    color:#131722;
    font-family:Cambria Math, "Times New Roman", serif;
    font-size:21px;
    font-style:italic;
    font-weight:500;
    line-height:1;
    transform:translateY(-1px);
}

.tv-indicator-icon sub{
    margin-left:-1px;
    font-size:10px;
    line-height:1;
    position:relative;
    top:5px;
}

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

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

/* Thước đo có nhiều vạch nhỏ nên cần lớn hơn icon đường vẽ thông thường để
   dễ nhận ra, cân bằng với biểu tượng f(x) của nút Chỉ báo. */
#tool_measure svg {
    width:22px;
    height:22px;
}

/* Nhóm công cụ vẽ dùng icon chi tiết (điểm neo, các mức Fibo…) nên hiển thị
   cùng tỷ lệ với biểu tượng f(x), thay vì nhỏ hơn các nút khung thời gian. */
.tv-group--drawing .tv-tool:not(#tool_text) {
    font-size:22px;
}

.tv-group--drawing .tv-tool:not(#tool_text) svg {
    width:22px;
    height:22px;
}

/* Chỉ phóng phần hình được vẽ, không phóng phần tử button. scale() không tham
   gia tính kích thước layout nên vùng bấm, khoảng cách nút và chiều cao toolbar
   vẫn hoàn toàn giữ nguyên. 22px × 1,59 ≈ 35px trên màn hình desktop. */
@media (min-width:901px) {
    .tv-group--drawing .tv-tool:not(#tool_text) svg,
    #tool_measure svg {
        transform:scale(1.59);
        transform-box:fill-box;
        transform-origin:center;
    }

    .tv-cursor-icon {
        display:block;
        transform:scale(1.59);
        transform-origin:center;
    }
}

/* Biểu tượng đường gấp khúc ba đoạn cho công cụ nối nhiều điểm. */
.tv-polyline-icon{
    position:relative;
    display:inline-block;
    width:20px;
    height:18px;
    vertical-align:middle;
}

.tv-polyline-icon i{
    position:absolute;
    display:block;
    width:8px;
    height:1px;
    background:currentColor;
    border-radius:2px;
    transform-origin:left center;
}

.tv-polyline-icon i:nth-child(1){
    left:1px;
    top:13px;
    transform:rotate(-45deg);
}

.tv-polyline-icon i:nth-child(2){
    left:6.5px;
    top:7.5px;
    transform:rotate(45deg);
}

.tv-polyline-icon i:nth-child(3){
    left:12px;
    top:13px;
    transform:rotate(-45deg);
}

/* ===========================
   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;
    display:flex;
    align-items:center;
    gap:8px;
    text-align:left;
    cursor:pointer;
    border-radius:5px;
}

.tv-fib-option-icon{
    width:20px;
    height:20px;
    flex:0 0 20px;
}

.tv-fib-option:hover{
    background:#f3f3f3;
}

/* Hướng dẫn ngắn và thao tác hoàn tất/hủy giúp vẽ bằng chuột, chạm hoặc
   kéo trực tiếp dễ nhận biết hơn mà không che vùng nến. */
.tv-drawing-hint,
.tv-drawing-actions {
    position: absolute;
    z-index: 1002;
    right: 12px;
    bottom: 14px;
    box-sizing: border-box;
    font: 600 11px/1.2 Arial, sans-serif;
}

.tv-drawing-hint {
    max-width: min(330px, calc(100% - 24px));
    bottom: 52px;
    padding: 6px 9px;
    border: 1px solid rgba(41, 98, 255, 0.28);
    border-radius: 6px;
    color: #173d8f;
    background: rgba(245, 249, 255, 0.94);
    box-shadow: 0 2px 8px rgba(24, 58, 122, 0.14);
    pointer-events: none;
}

.tv-drawing-actions {
    display: flex;
    gap: 6px;
}

.tv-drawing-hint[hidden],
.tv-drawing-actions[hidden],
.tv-drawing-actions button[hidden] {
    display: none !important;
}

.tv-drawing-actions button {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #b6c7e8;
    border-radius: 5px;
    color: #123a88;
    background: rgba(255, 255, 255, 0.97);
    font: 700 11px/1 Arial, sans-serif;
    box-shadow: 0 2px 7px rgba(18, 58, 136, 0.17);
    cursor: pointer;
    touch-action: manipulation;
}

.tv-drawing-actions button[data-tv-drawing-action="finish"] {
    border-color: #15965b;
    color: #ffffff;
    background: #15965b;
}

.tv-drawing-actions button:hover,
.tv-drawing-actions button:focus-visible {
    filter: brightness(.95);
    outline: 2px solid rgba(41, 98, 255, 0.42);
    outline-offset: 1px;
}

/* TradingView trên điện thoại/khung hẹp: thu gọn chữ, đệm và thanh công cụ
   để phần nến có nhiều diện tích hơn. Hộp thông tin XU THẾ/BIẾN ĐỘNG/KEY ở
   góc trái trên được ưu tiên thu gọn vì luôn hiện cùng biểu đồ. */
@media (max-width: 900px) {
    #tv_topbar {
        height: 46px !important;
        padding: 0 !important;
    }

    .tv-topbar-scroll {
        gap:4px;
        padding:0 40px 0 2px;
    }

    .tv-symbol-group--fixed {
        margin-left:8px;
        margin-right:5px;
        padding-right:5px;
    }

    #chart_view,
    #tv_leftbar {
        top: 46px !important;
    }

    #tv_leftbar {
        padding-top: 6px !important;
        gap: 8px !important;
    }

    .tv-symbol {
        padding: 3px 5px !important;
        border-radius: 5px !important;
        font-size: 10px !important;
    }

    .tv-btn,
    .tv_tf {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        padding: 0 5px !important;
        border-radius: 5px !important;
        font-size: 10px !important;
    }

    /* Giữ vùng chạm của công cụ vẽ lớn hơn chữ: thao tác một ngón tay ổn
       định hơn, trong khi phần còn lại của toolbar vẫn gọn. */
    .tv-tool {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 6px !important;
        border-radius: 6px !important;
        font-size: 10px !important;
        touch-action: manipulation;
    }

    .tv-tool svg {
        width: 14px !important;
        height: 14px !important;
    }

    #tool_measure svg {
        width:20px !important;
        height:20px !important;
    }

    .tv-group--drawing .tv-tool:not(#tool_text) {
        font-size:20px !important;
    }

    .tv-group--drawing .tv-tool:not(#tool_text) svg {
        width:20px !important;
        height:20px !important;
    }

    .tv-polyline-icon {
        transform: scale(.8);
    }

    .tv-layout-maximize-button {
        top: 7px;
        right: 6px;
        width: 28px;
        height: 28px;
    }

    .tv-layout-maximize-button svg {
        width: 14px;
        height: 14px;
    }

    #tv_info {
        top: 50px !important;
        left: 7px !important;
        font-size: 9.2px !important;
        line-height: 1.15 !important;
    }

    #tv_info > div {
        margin-top: 2px !important;
    }

    #tv_info .tv-info-status-row {
        gap: 4px !important;
        border-radius: 5px !important;
        padding-left: 3px !important;
    }

    #tv_info #tv_trend,
    #tv_info #tv_biendong,
    #tv_info #tv_keypoint {
        padding: 1px 5px !important;
        border-radius: 4px !important;
        font-size: 9.2px !important;
        line-height: 1.15 !important;
    }

    .tv-long-signal-button {
        min-height: 26px;
        padding: 4px 7px;
        border-radius: 4px !important;
        font-size: 10px !important;
    }

    #indicator_menu {
        width: 220px !important;
        padding: 4px !important;
    }

    .indicator-item {
        height: 24px;
        padding: 1px 3px;
        font-size: 10px;
    }

    .tv-popup {
        top: 40px;
        padding: 4px;
        font-size: 10px;
    }

    .tv-fib-option {
        padding: 6px 9px;
        font-size: 10px;
    }

    .tv-floating-toolbar {
        gap: 4px;
        padding: 4px;
    }

    .tv-toolbar-btn {
        width: 27px;
        min-width: 27px;
        height: 27px;
        border-radius: 5px;
        font-size: 10px;
    }

    .tv-toolbar-select {
        height: 27px;
        padding: 0 5px;
        font-size: 10px;
    }

    .tv-drawing-hint,
    .tv-drawing-actions {
        right: 8px;
        bottom: 10px;
    }

    .tv-drawing-hint {
        max-width: calc(100% - 16px);
        bottom: 52px;
        padding: 5px 7px;
        font-size: 9.5px;
    }

    .tv-drawing-actions button {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 10px;
    }
}
/* ===========================================================
   MOBILE
=========================================================== */

@media (max-width: 768px) {

    /* Rút gọn nhãn tab dọc chỉ trên điện thoại. Nội dung gốc trong HTML vẫn
       được giữ nguyên để không ảnh hưởng giao diện desktop và trợ năng. */
    .tabs {
        width: 22px;
        min-width: 22px;
    }

    .tab-btn {
        gap: 0;
        padding-right: 1px;
        padding-left: 1px;
    }

    /* Cột tab điện thoại rất hẹp; giữ nhãn như cũ để dành diện tích cho nội
       dung, còn icon đầy đủ được dùng ở desktop/tablet. */
    .main-tab-icon {
        display: none;
    }

    .tab-btn[data-tab="market"] .main-tab-label {
        font-size: 0;
    }

    .tab-btn[data-tab="market"]::after {
        content: "TẦM SOÁT TT";
        display: inline-block;
        font-size: 12px;
        line-height: 1.1;
        white-space: nowrap;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    /* Tab Biểu đồ & Trading dùng cùng cách cuộn toàn trang với Phân tích cơ
       bản, để phần Thống kê không bị cắt bởi chiều cao cố định của tab. */
    body.no-scroll-y.chart-mobile-scroll {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Lọc chọn dùng cùng một khung nhìn với các tab thông thường. Bảng tự
       cuộn bên trong khung để tiêu đề vẫn cố định trong suốt quá trình xem. */
    body.no-scroll-y.choncp-mobile-scroll {
        overflow-x: hidden;
    }

    body.choncp-mobile-scroll .tab-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.choncp-mobile-scroll #choncp.tab-content.active {
        display: flex;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.choncp-mobile-scroll #choncp .table-container {
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        min-height: 0;
        max-height: none;
        overflow: auto;
        overscroll-behavior: contain;
    }

    body.choncp-mobile-scroll #choncp #paginationBar {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }

    body.choncp-mobile-scroll .container-fluid {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.choncp-mobile-scroll .tabs {
        flex: 0 0 22px;
        width: 22px;
        min-width: 22px;
        max-width: 22px;
    }

    body.choncp-mobile-scroll .tab-btn {
        width: 100%;
        padding-right: 1px;
        padding-left: 1px;
        box-sizing: border-box;
    }

    body.choncp-mobile-scroll .tab-content,
    body.choncp-mobile-scroll .tab-content.active {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

    body.chart-mobile-scroll .tab-wrapper {
        /* Thanh tab dọc ở bên trái cũng chiếm bề ngang. Đặt lại toàn bộ
           wrapper theo vùng nhìn thấy, rồi để phần nội dung nhận phần còn
           lại thay vì tự lấy 100% và chèn lên thanh tab. */
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Base desktop dùng .container-fluid có min-width 1510px. Khi xem riêng
       tab Chart trên điện thoại, bỏ giới hạn đó để width của tab được tính
       theo đúng phần màn hình còn lại. */
    body.chart-mobile-scroll .container-fluid {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.chart-mobile-scroll .tabs {
        /* Giữ thanh tab gần với độ rộng gốc; box-sizing bảo đảm padding của
           nút không làm nó nở thêm ra ngoài khung. */
        flex: 0 0 22px;
        width: 22px;
        min-width: 22px;
        max-width: 22px;
    }

    body.chart-mobile-scroll .tab-btn {
        width: 100%;
        padding-right: 1px;
        padding-left: 1px;
        box-sizing: border-box;
    }

    body.chart-mobile-scroll .tab-content,
    body.chart-mobile-scroll .tab-content.active {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

    body.chart-mobile-scroll #chart_signal.tab-content.active {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 100%;
        overflow: visible;
        box-sizing: border-box;
    }

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

    #chart-left {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: min(86dvh, 760px);
        min-height: 360px;
    }

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

    /* Bỏ vùng cuộn nội bộ cố định: bảng thống kê đang chọn nở đủ số hàng,
       sau đó người dùng cuộn dọc cả trang để xem tiếp. */
    #chart-stats .chart-stats-table,
    #chart-stats .chart-stats-table .sub-content {
        flex: none;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    #chart-stats .chart-stats-table .sub-content.active {
        height: auto;
    }

    /* Không để thành phần động của biểu đồ nở rộng khung ngoài. Thanh công
       cụ được cuộn ngang ngay trong chính nó nếu số nút nhiều hơn bề ngang. */
    #chart_tradingview,
    #chart_wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .tv-topbar-scroll {
        gap: 4px;
        padding: 0 44px 0 6px;
        scrollbar-width: none;
    }

    .tv-symbol {
        padding: 4px 6px;
        font-size: 12px;
    }

    .tv-btn,
    .tv_tf,
    .tv-tool {
        width: 28px;
        min-width: 28px;
        height: 28px;
        padding: 0 5px;
        font-size: 11px;
    }

    .tv-tool svg {
        width: 16px;
        height: 16px;
    }

    /* Bảng thống kê co theo đúng bề ngang điện thoại thay vì làm tab tràn
       ngang. Nội dung dài được xuống dòng bên trong từng ô. */
    #chart-stats .sub-content > table {
        width: 100%;
        table-layout: fixed;
    }

    #chart-stats .sub-content th,
    #chart-stats .sub-content td {
        padding: 3px 2px;
        font-size: 10px;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tv-topbar-scroll::-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;
  /* Workspace có thể cao hơn viewport ở màn hình thấp. Neo từ mép trên để
     thanh cuộn luôn mở được phần đầu, thay vì căn giữa rồi làm mất nội dung. */
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  /* Giữ đệm hai bên cho workspace, nhưng căn đỉnh giống TẦM SOÁT THỊ TRƯỜNG. */
  padding: 0 clamp(4px, 0.45vw, 8px);
}

#bctc .bctc-workspace {
  --bctc-gap: clamp(4px, 0.45vw, 8px);
  width: 100%;
  height: 100%;
  min-width: 1120px;
  /* Đủ chỗ cho toàn bộ hàng của bảng số liệu. Khi viewport thấp hơn, vùng
     BCTC dùng thanh cuộn riêng thay vì thu hẹp/cắt các hàng cuối. */
  min-height: 760px;
  max-width: none;
  margin: auto !important;
  /* Tách biểu đồ phía dưới khỏi mép dưới của tab một khoảng nhỏ, ổn định. */
  padding: 0 0 8px;
  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;
  /* Các ô đầu trang cùng kéo giãn theo toàn bộ chiều cao của hàng. */
  align-items: stretch !important;
}

#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;
}

/* The business-plan cell deliberately uses the same Bootstrap utility classes
   as the company and listing cards: rounded, bg-light, padding 0 and h-100.
   Only the inner layout is custom, so its outer box cannot drift from them. */
#bctc .bctc-plan-cell {
  align-items: stretch !important;
  height: 100% !important;
  min-height: 0;
}

#bctc .bctc-plan-card {
  height: 100% !important;
  min-height: 0;
  margin: 0 !important;
}

#bctc .bctc-plan-card__target,
#bctc .bctc-plan-card__done {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

#bctc .bctc-plan-card__target {
  flex: 0 0 66.666667%;
}

#bctc .bctc-plan-card__done {
  flex: 0 0 33.333333%;
}

#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;
  /* Bảng dài cuộn trong chính ô của nó, không được phép đẩy biểu đồ xuống. */
  overflow-y: auto;
  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;
  /* Thu gọn thêm một nấc nhưng vẫn giữ khoảng thở đủ đọc ở cỡ chữ hiện tại. */
  line-height: 1.1;
  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 {
  /* The title only needs two compact lines. Keeping it at a fixed, small
     visual height prevents the empty strip under “PHÂN LỚP ĐỊNH GIÁ” from
     making the four valuation cards feel uneven. The recovered space is
     shared by the four data cards below. */
  grid-template-rows: clamp(38px, 3vw, 42px) 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 {
  /* Tăng phần bảng số liệu (hàng giữa) để hiển thị trọn nội dung. Phần biểu
     đồ tự nhận chiều cao còn lại và không bị ép sát mép dưới workspace. */
  grid-template-rows: minmax(64px, 9fr) minmax(390px, 48fr) minmax(0, 43fr);
}

/* 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;
}

/* Give the two Sharks cash-flow bars a clear, even separation from their
   heading without changing the spacing of the other header cells. */
#bctc .bctc-sharks-cashflow {
  gap: clamp(4px, 0.35vw, 6px);
}

#bctc .bctc-sharks-cashflow__bars {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The technical-analysis label and report date share one vertical rail.
   Each item keeps the existing bottom-to-top reading direction, while the
   label sits to the left of the date. */
#bctc .bctc-trend-date-rail {
  flex: 0 0 auto;
  flex-direction: row;
  gap: 3px;
  min-width: 30px;
  padding: 3px 4px;
}

#bctc .bctc-trend-date-rail__label,
#bctc .bctc-trend-date-rail__date {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

#bctc .bctc-trend-date-rail__label {
  font-size: 10px;
  letter-spacing: 0.3px;
}

/* Keep the financial block compact instead of letting its three columns
   stretch to consume every free pixel. JavaScript may still raise the lower
   bound when real data needs more room, so the final rows are never clipped. */
#bctc .bctc-primary {
  grid-template-rows:
    clamp(60px, 6.5vh, 70px)
    minmax(
      max(300px, var(--bctc-financial-min-height, 0px)),
      clamp(300px, 34vh, 370px)
    )
    minmax(220px, 1fr);
}

/* Desktop BCTC is a single viewport workspace.  Its sections receive the
   available height rather than retaining a fixed minimum that creates a
   page-level scrollbar and hides the lower charts.  Long table data scrolls
   inside its own panel (defined above), never at the tab level. */
@media (min-width: 769px) {
  #bctc.active {
    overflow: hidden;
  }

  #bctc .bctc-workspace,
  #bctc .bctc-layout,
  #bctc .bctc-primary,
  #bctc .bctc-sidebar {
    height: 100% !important;
    min-height: 0;
  }

  #bctc .bctc-workspace {
    min-height: 0;
  }

  #bctc .bctc-primary {
    grid-template-rows:
      clamp(54px, 6.5dvh, 70px)
      minmax(
        max(280px, var(--bctc-financial-min-height, 0px)),
        1fr
      )
      /* Vùng biểu đồ giữ nhịp thấp, ổn định theo mốc xanh–đen người dùng
         đánh dấu. Toàn bộ phần cao còn lại ưu tiên cho bảng chỉ tiêu. */
      clamp(280px, 40dvh, 420px);
  }
}

/* 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ế has room for
   both metric groups, the compact valuation card stays stable, and the
   current-data card keeps an even six-line rhythm. */
#bctc .bctc-summary {
  grid-template-rows:
    minmax(96px, 0.9fr)
    77px
    minmax(112px, 1.1fr);
  /* Leave the same visual rhythm below "HIỆN TẠI" as the grid gap between
     the three summary cards, rather than letting its lower edge touch the
     neighbouring panel.  The financial-grid children already use
     border-box sizing, so this padding stays within the allocated row. */
  /* The shared financial-cell reset uses padding: 0 !important, therefore
     this matching priority is required for the bottom rhythm to render. */
  padding-bottom: 2px !important;
}

/* 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: nowrap;
  text-overflow: ellipsis;
}

#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;
}

/* Nhãn MÔ HÌNH / ĐỊNH GIÁ dùng hai dòng cố định để nhất quán với nhịp của
   thẻ thông tin và luôn căn giữa ở mọi kích thước màn hình. */
#bctc .bctc-summary > .inner-box > .bctc-summary-title--model-valuation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 30px;
  padding: 2px 6px;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(10px, 0.72vw, 12px);
  line-height: 1.08;
  letter-spacing: 0.35px;
  white-space: nowrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

#bctc .bctc-summary-title--model-valuation > span {
  display: block;
}

#bctc .bctc-summary-title--model-valuation .bctc-summary-title--mobile-line {
  display: none;
}

@media (max-width: 768px) {
  /* Điện thoại: ưu tiên một nhãn ngắn gọn trên cùng hàng, tránh chiếm chiều
     cao của thẻ tóm tắt. */
  #bctc .bctc-summary > .inner-box > .bctc-summary-title--model-valuation {
    flex-direction: row;
    min-height: 26px;
    padding: 4px 8px;
    font-size: clamp(11px, 3.6vw, 14px);
    letter-spacing: 0.15px;
    white-space: nowrap;
  }

  #bctc .bctc-summary-title--model-valuation .bctc-summary-title--desktop-line {
    display: none;
  }

  #bctc .bctc-summary-title--model-valuation .bctc-summary-title--mobile-line {
    display: block;
  }
}

#bctc .bctc-summary-model-valuation {
  gap: 2px;
}

#bctc .bctc-summary-model-valuation .bctc-summary-content {
  gap: 1px;
  padding-block: 0 1px;
}

#bctc .bctc-summary-model-valuation .bctc-summary-valuation-value-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  white-space: nowrap;
}

#bctc .bctc-summary-model-valuation .bctc-summary-valuation-value-row > * {
  line-height: 1.15;
}

#bctc .bctc-summary-model-valuation .bctc-summary-valuation-value-separator {
  display: block;
  flex: 0 0 1px;
  width: 1px;
  min-width: 1px;
  height: 1.25em;
  min-height: 14px;
  margin-inline: 1px;
  padding: 0;
  border-radius: 1px;
  background: #94a3b8;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

#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);
}

/* "HIỆN TẠI" has six live data lines.  Do not let its content flex-shrink
   beneath those lines when the desktop panel is narrowed; the financial-row
   fit routine can then grow the row instead of allowing the last line to
   spill over the panel below. */
#bctc .bctc-summary > .inner-box:last-child .bctc-summary-content {
  flex-shrink: 0;
  justify-content: space-between;
  gap: 0;
  padding-block: 1px 2px;
  line-height: 1.1;
}

/* The current-data card is intentionally compact, but its six live values
   still use the full available height with an even rhythm rather than a
   large blank area under the final “Vốn hóa” line. */
#bctc .bctc-summary > .inner-box:last-child {
  gap: 2px;
}

#bctc .bctc-summary > .inner-box:last-child .bctc-summary-content > * {
  line-height: 1.1;
}

/* ========================================================================
   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;
}

/* ========================================================================
   FUNDAMENTAL ANALYSIS — mobile, single-column information flow
   The desktop grid above is intentionally left untouched. On phones every
   module becomes its own readable section and the page scrolls vertically.
   ======================================================================== */
/* Bảng Năm dùng chung cấu trúc có cột TIÊU CHÍ với bảng Quý để điện thoại
   hiển thị đầy đủ. Trên desktop, ẩn riêng cột bổ sung này để bố cục gốc của
   bảng Năm không thay đổi. */
@media (min-width: 769px) {
  #bctc .bctc-year-panel table tr > :first-child {
    display: none;
  }
}

@media (max-width: 768px) {
  body.no-scroll-y.bctc-mobile-scroll {
    overflow-y: auto;
  }

  body.bctc-mobile-scroll .tab-wrapper {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.bctc-mobile-scroll #bctc.tab-content.active {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  #bctc.active {
    display: block !important;
    height: auto;
    min-height: 0;
    overflow: visible;
    /* Căn đỉnh workspace với các tab khác; chỉ giữ đệm hai bên và phía dưới. */
    padding: 0 8px 8px;
  }

  #bctc .bctc-workspace {
    --bctc-gap: 8px;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
  }

  /* Primary analysis and desktop sidebar become two consecutive sections. */
  #bctc .bctc-layout {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: 14px;
  }

  /* Cho phép đặt Cụm 12, 14 trước Cụm 13 trong một luồng dọc duy nhất. */
  #bctc .bctc-primary,
  #bctc .bctc-sidebar {
    display: contents;
  }

  #bctc .bctc-header,
  #bctc .bctc-financial,
  #bctc .bctc-lower,
  #bctc .bctc-sidebar-panel {
    width: 100%;
  }

  #bctc .bctc-header { order: 1; }
  #bctc .bctc-financial { order: 2; }
  #bctc #sectorTableWrapper { order: 3; }
  #bctc .bctc-sidebar > .bctc-sidebar-chart:nth-child(2) { order: 4; }
  #bctc .bctc-sidebar > .bctc-sidebar-chart:nth-child(3) { order: 5; }
  #bctc .bctc-lower { order: 6; }

  #bctc .bctc-primary {
    height: auto;
  }

  /* Cụm 1: mã (4), dòng tiền (6) và thông tin doanh nghiệp (1) cùng một
     hàng. Tỷ lệ 4 : 6 là 1 : 2; ba khung dùng chung một chiều cao. */
  #bctc .bctc-header {
    grid-template-columns: minmax(54px, 1fr) minmax(108px, 2fr) minmax(0, 3fr);
    grid-template-areas:
      "ticker sharks company"
      "listing listing plan"
      "trend trend trend";
    height: auto;
    gap: 6px;
    padding: 0;
    align-items: stretch;
  }

  #bctc .bctc-header > * {
    margin: 0 !important;
  }

  #bctc .bctc-header > :nth-child(1) {
    grid-area: company;
    min-height: 0;
    height: 62px !important;
  }
  #bctc .bctc-header > :nth-child(2) {
    grid-area: listing;
    min-height: 0;
    height: 66px !important;
  }
  #bctc .bctc-header > :nth-child(3) {
    grid-area: plan;
    min-height: 0;
    height: 66px !important;
  }
  #bctc .bctc-header > :nth-child(4) {
    grid-area: ticker;
    min-height: 0;
    height: 62px !important;
    border: 1px solid #d1d5db;
    border-radius: 8px;
  }
  #bctc .bctc-header > :nth-child(5) {
    grid-area: trend;
    display: flex !important;
    min-height: 0;
    height: 76px !important;
  }
  #bctc .bctc-header > :nth-child(6) {
    grid-area: sharks;
    min-height: 0;
    height: 62px !important;
    border: 0;
    border-radius: 0;
    justify-content: center;
  }

  #bctc .bctc-header #stockInput {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    min-width: 0;
    margin: 4px;
    padding: 2px 3px !important;
    font-size: clamp(9px, 4.2vw, 16px);
    letter-spacing: 0;
    box-sizing: border-box;
  }

  #bctc .bctc-header > :nth-child(5) > :first-child {
    min-width: 26px;
    padding: 4px 6px;
    writing-mode: vertical-rl !important;
    transform: rotate(-180deg) !important;
  }

  /* The date rail now contains PTKT and the date as two adjacent vertical
     labels; override the legacy single-label rotation above. */
  #bctc .bctc-header > :nth-child(5) > .bctc-trend-date-rail {
    min-width: 43px;
    padding: 4px 5px;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    flex-direction: row !important;
    gap: 3px;
  }

  #bctc .bctc-header > :nth-child(5) > :last-child {
    min-width: 60px !important;
    padding-inline: 6px !important;
    justify-content: center !important;
  }

  #bctc .bctc-header > :nth-child(6) .row {
    width: 100% !important;
    max-width: none !important;
  }

  #bctc .bctc-header > :nth-child(6) .signal-bar-container {
    height: 13px;
    margin-bottom: 0;
  }

  /* Cụm 4: 8 và 10 đặt cạnh nhau như desktop; trong mỗi cột, các thẻ
     vẫn đi từ trên xuống dưới. Cụm 5 chiếm toàn bộ bề ngang bên dưới. */
  #bctc .bctc-financial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "summary valuation"
      "period-switch period-switch"
      "period-table period-table";
    height: auto;
    gap: 14px;
    overflow: visible;
  }

  #bctc .bctc-financial > * {
    overflow: visible;
  }

  #bctc .bctc-quarter-cell { grid-area: period-table; }
  #bctc .bctc-summary { grid-area: summary; }
  #bctc .bctc-year-cell { grid-area: period-table; }
  #bctc .bctc-valuation { grid-area: valuation; }

  #bctc .bctc-mobile-period-switch {
    display: flex;
    grid-area: period-switch;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f8fafc;
  }

  #bctc .bctc-mobile-period-title {
    min-width: 0;
    padding-left: 8px;
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
  }

  #bctc .bctc-mobile-period-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 3px;
    border-radius: 7px;
    background: #e5e7eb;
  }

  #bctc .bctc-mobile-period-btn {
    min-width: 52px;
    padding: 5px 8px;
    border: 0;
    border-radius: 5px;
    color: #4b5563;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
  }

  #bctc .bctc-mobile-period-btn.is-active {
    color: #ffffff;
    background: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  }

  #bctc .bctc-financial.bctc-mobile-period-quarter .bctc-year-cell,
  #bctc .bctc-financial.bctc-mobile-period-year .bctc-quarter-cell {
    display: none;
  }

  #bctc .bctc-table-panel {
    min-height: 0;
    max-height: none;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: visible;
  }

  #bctc .bctc-table-panel,
  #bctc .bctc-table-panel > div,
  #bctc .bctc-table-panel table {
    height: auto;
  }

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

  #bctc #quarterTable tr,
  #bctc #yearTable tr {
    height: auto;
  }

  #bctc .bctc-table-panel th,
  #bctc .bctc-table-panel td {
    padding: 4px 6px !important;
    font-size: 12px;
  }

  #bctc .bctc-summary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    height: auto;
    gap: 6px;
    /* Trên điện thoại, các cụm nối tiếp theo chiều dọc nên không cần nhịp
       đệm cuối của bố cục desktop. */
    padding-bottom: 0 !important;
  }

  #bctc .bctc-summary > .inner-box {
    min-height: 104px;
    padding: 3px;
    font-size: 12px;
  }

  #bctc .bctc-summary > .inner-box:last-child {
    min-height: 142px;
  }

  #bctc .bctc-valuation {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    height: auto;
    gap: 6px;
    padding: 6px;
    border: 1px solid #f3c91c;
    border-radius: 8px;
  }

  #bctc .bctc-valuation > .inner-box {
    min-height: 68px;
    padding: 3px;
    font-size: 13px;
  }

  #bctc .bctc-valuation > .inner-box:first-child {
    grid-column: 1 / -1;
    min-height: 32px;
  }

  /* Tab A / Tab B: controls become horizontal, charts stack vertically. */
  #bctc .bctc-lower {
    flex-direction: column;
    height: auto !important;
    gap: 10px;
    overflow: visible;
  }

  /* Mobile v2: Tab A và Tab B không còn là lựa chọn. Toàn bộ nội dung được
     đọc tuần tự: Tab A trước, sau đó Tab B. */
  #bctc .bctc-lower > :first-child {
    display: none !important;
  }

  #bctc .bctc-lower #chartsRed,
  #bctc .bctc-lower #chartsGreen {
    display: flex !important;
  }

  /* Hai cụm biểu đồ chính nối tiếp nhau trên mobile: chừa một nhịp bằng với
     khoảng cách giữa các biểu đồ khác, thay vì để khung cuối của cụm đỏ sát
     vào khung đầu của cụm xanh. */
  #bctc .bctc-lower #chartsRed {
    margin-bottom: 12px;
  }

  #bctc .bctc-lower > .flex-grow-1 {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  #bctc .bctc-lower .charts-flex,
  #bctc #chartsRed,
  #bctc #chartsGreen {
    flex-direction: column;
    width: 100%;
    height: auto !important;
    gap: 12px;
  }

  #bctc .bctc-lower .chart-box,
  #bctc .bctc-lower #chartsRed > .chart-box,
  #bctc .bctc-lower #chartsGreen > .chart-box {
    flex: 0 0 auto !important;
    width: 100%;
    min-width: 0;
    height: clamp(304px, 83vw, 352px) !important;
    margin: 0 !important;
  }

  #bctc .bctc-lower #chartsGreen > .bctc-green-detail {
    height: auto !important;
    border: 1px solid #d1d5db;
  }

  #bctc .bctc-lower #greenTabs {
    display: none !important;
  }

  /* Tab con của Tab B cũng được mở toàn bộ và xếp lần lượt từ trên xuống. */
  #bctc .bctc-lower #contentExtra1,
  #bctc .bctc-lower #contentExtra2,
  #bctc .bctc-lower #contentTable {
    display: block !important;
    height: auto !important;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #d1d5db;
  }

  #bctc .bctc-lower #contentExtra1::before,
  #bctc .bctc-lower #contentExtra2::before {
    display: block;
    margin: 0 0 8px;
    padding: 6px 8px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
  }

  #bctc .bctc-lower #contentExtra1::before {
    content: "GIAO DỊCH NĐT NƯỚC NGOÀI";
    background: #1d4ed8;
  }

  #bctc .bctc-lower #contentExtra2::before {
    content: "GIAO DỊCH TỰ DOANH";
    background: #7c3aed;
  }

  /* Khối Giao dịch NĐT nước ngoài bắt đầu ngay sau biểu đồ phía trên. Bỏ
     khoảng đệm dư trước tiêu đề và trước hàng Ngày GD, nhưng giữ phần phân
     cách của các khối Giao dịch Tự doanh và Lịch sử kế hoạch. */
  #bctc .bctc-lower #contentExtra1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  #bctc .bctc-lower #contentExtra1::before {
    margin-bottom: 4px;
  }

  #bctc .bctc-lower #contentExtra1 > .bctc-green-pane-body,
  #bctc .bctc-lower #contentExtra1 #stocktablendtnn {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  #bctc .bctc-lower .tab-content-box,
  #bctc .bctc-lower .tab-content-box > *,
  #bctc .bctc-lower .bctc-green-pane,
  #bctc .bctc-lower .bctc-history-pane,
  #bctc .bctc-lower .bctc-green-pane-body,
  #bctc .bctc-lower .bctc-history-body {
    display: block;
    height: auto !important;
    min-height: 0;
    overflow: visible;
  }

  #bctc .bctc-lower .bctc-history-body {
    padding: 8px !important;
  }

  /* Giữ đúng luồng hiển thị gốc của tab "Lịch sử Kế hoạch kinh doanh".
     Các selector này ghi đè chiều cao desktop có độ ưu tiên cao hơn để bảng
     không bị co về 0 khi cha của nó đổi sang chiều cao tự động trên mobile. */
  #bctc .bctc-lower #contentTable,
  #bctc .bctc-lower #contentTable > .bctc-history-body,
  #bctc .bctc-lower #contentTable #extra-tablekh {
    display: block;
    height: auto !important;
    min-height: 0;
  }

  #bctc .bctc-lower #contentTable #extra-tablekh {
    min-height: 0;
    height: auto !important;
    max-height: none;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  /* Lịch sử KHKD: trên mobile, toàn bộ các hàng phải mở theo chiều dọc của
     trang; không giữ vùng cuộn cao cố định như bố cục desktop. */
  #bctc .bctc-lower #contentTable,
  #bctc .bctc-lower #contentTable > .bctc-history-body,
  #bctc .bctc-lower #contentTable #extra-tablekh,
  #bctc .bctc-lower #contentTable #extra-tablekh .bctc-history-data-table {
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Bootstrap gán `d-flex` và `flex-grow-1` trực tiếp trong HTML. Trên
     mobile phải bỏ hai thuộc tính này để bảng lấy đúng chiều cao nội dung. */
  #bctc .bctc-lower #contentTable > .bctc-history-body {
    display: block !important;
  }

  #bctc .bctc-lower #contentTable #extra-tablekh {
    display: block !important;
    flex: none !important;
  }

  #bctc .bctc-lower #contentTable,
  #bctc .bctc-lower #contentTable > .bctc-history-body {
    min-height: 0 !important;
  }

  #bctc .bctc-lower #contentTable #extra-tablekh {
    min-height: 0 !important;
  }

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

  #bctc .bctc-lower #contentTable .bctc-history-empty {
    padding: 12px;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    color: #475569;
    background: #f8fafc;
    font-size: 12px;
    font-style: italic;
    text-align: center;
  }

  #bctc .bctc-lower #contentTable #extra-tablekh .bctc-history-data-table {
    width: max-content !important;
    min-width: 680px !important;
    table-layout: auto !important;
  }

  #bctc .bctc-lower #contentTable #extra-tablekh .bctc-history-data-table th,
  #bctc .bctc-lower #contentTable #extra-tablekh .bctc-history-data-table td {
    padding: 4px 6px !important;
    white-space: nowrap;
  }

  #bctc .bctc-lower .bctc-history-table,
  #bctc .bctc-lower .bctc-pane-latest,
  #bctc .bctc-lower .bctc-trading-stats {
    width: 100%;
    max-height: 320px;
    overflow: auto;
  }

  #bctc .bctc-lower .bctc-trading-split {
    flex-direction: column;
    height: auto !important;
    margin-top: 8px;
    overflow: visible;
  }

  #bctc .bctc-lower .bctc-trading-chart {
    flex: 0 0 auto !important;
    width: 100%;
    height: clamp(304px, 83vw, 352px) !important;
  }

  /* Sidebar: Cổ phiếu cùng ngành, Cụm 12 và Cụm 14 lần lượt nối tiếp nhau. */
  #bctc .bctc-sidebar {
    grid-template-rows: none;
    height: auto;
    gap: 14px;
    overflow: visible;
  }

  #bctc .bctc-sidebar-panel {
    height: clamp(304px, 83vw, 352px) !important;
    overflow: hidden;
  }

  #bctc .bctc-sector-panel {
    height: 320px !important;
  }

  #bctc #sectorTableBody {
    overflow: auto;
  }

  #bctc .bctc-chart-expand {
    width: 24px;
    height: 24px;
    font-size: 15px;
  }
}

/* =============== THANH CUỘN DỌC TAB THỊ TRƯỜNG / CỔ PHIẾU THEO DÕI ===============
   Vẫn giữ nguyên overflow để cuộn bằng chuột, phím và cảm ứng; chỉ ẩn phần
   thanh cuộn dọc nhằm dành trọn chiều ngang cho nội dung bảng. Không áp dụng
   cho các vùng bảng có thể cần thanh cuộn ngang. */
#ptkt.tab-content,
#market > .subtab-wrapper > .sub-tab-content.active,
.market-overview-left,
.industry-dashboard-right,
body.market-mobile-scroll,
#ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .left-col,
#ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .right-col {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#ptkt.tab-content::-webkit-scrollbar,
#market > .subtab-wrapper > .sub-tab-content.active::-webkit-scrollbar,
.market-overview-left::-webkit-scrollbar,
.industry-dashboard-right::-webkit-scrollbar,
body.market-mobile-scroll::-webkit-scrollbar,
#ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .left-col::-webkit-scrollbar,
#ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .right-col::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* =============== POPUP DANH SÁCH CỔ PHIẾU ƯU TIÊN =============== */
/* Hai nút hành động dùng chung vùng bên phải của tiêu đề: danh sách ưu tiên
   luôn đứng trước, ngay cạnh nút Cổ phiếu theo dõi riêng. */
#ptkt-main-heading.ptkt-dashboard-header {
  grid-template-columns: minmax(130px, 0.55fr) minmax(0, 1.7fr) minmax(0, 1.15fr);
}

.ptkt-dashboard-header__actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-self: end;
  justify-content: flex-end;
  align-items: stretch;
  gap: 7px;
  width: 100%;
  max-width: 330px;
  min-width: 0;
}

.ptkt-dashboard-header__actions .ptkt-dashboard-header__private-action {
  display: flex;
  min-width: 0;
}

#ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle,
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle {
  position: static;
  display: inline-grid;
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  background: rgba(5, 68, 116, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  font: 700 9.5px/1.15 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.15px;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle span,
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle span {
  display: block;
  white-space: nowrap;
}

#ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle:hover,
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

#ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle.is-active,
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle.is-active {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 3px 8px rgba(6, 66, 111, 0.2);
  color: #087ec8;
}

/* Popup được neo theo đúng khung hiển thị thực tế của tab bằng các biến CSS
   do JavaScript cập nhật khi mở/đổi kích thước cửa sổ. */
#ptkt .ptkt-priority-popup[hidden] {
  display: none !important;
}

#ptkt .ptkt-priority-popup {
  position: fixed;
  top: var(--ptkt-priority-popup-top, 84px);
  left: var(--ptkt-priority-popup-left, 0px);
  bottom: var(--ptkt-priority-popup-bottom, 0px);
  /* Popup danh sách phải phủ lên cả các lớp nổi của TradingView (toolbar,
     nhãn giá, menu công cụ có z-index tới 99999), không chỉ phủ canvas. */
  z-index: 100100;
  isolation: isolate;
  display: flex;
  width: var(--ptkt-priority-popup-width, 100%);
  min-width: 0;
  padding: 8px 14px 14px;
  box-sizing: border-box;
  pointer-events: auto;
}

/* Khi cả CHART và Danh sách cổ phiếu phân tích cùng mở trên desktop, mỗi
   popup nhận đúng một nửa bề ngang; chart vẫn là instance TradingView cũ. */
#ptkt .ptkt-priority-popup.is-chart-split {
  padding-right: 7px;
}

/* Chart đang được phóng to trong cặp popup: giữ DOM/dữ liệu danh sách để
   thu nhỏ là trở lại ngay, nhưng ẩn hoàn toàn khỏi màn hình trong lúc đó. */
#ptkt .ptkt-priority-popup.is-chart-temporarily-hidden {
  display: none !important;
}

#ptkt .ptkt-priority-chart-popup[hidden] {
  display: none !important;
}

#ptkt .ptkt-priority-chart-popup {
  position: fixed;
  top: var(--ptkt-priority-popup-top, 84px);
  left: var(--ptkt-priority-popup-left, 50%);
  bottom: var(--ptkt-priority-popup-bottom, 0px);
  z-index: 100099;
  display: flex;
  width: var(--ptkt-priority-popup-width, 50%);
  min-width: 0;
  padding: 8px 14px 14px 7px;
  box-sizing: border-box;
  isolation: isolate;
  pointer-events: auto;
}

#ptkt .ptkt-priority-chart-popup__panel,
#ptkt .ptkt-priority-chart-popup__chart {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#ptkt .ptkt-priority-chart-popup__panel {
  border: 1px solid #73bce9;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 58, 94, 0.28);
}

#ptkt .ptkt-priority-chart-popup #chart-left,
#ptkt .ptkt-priority-chart-popup #chart_tradingview,
#ptkt .ptkt-priority-chart-popup #chart_wrapper {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#ptkt .ptkt-priority-popup__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #73bce9;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 58, 94, 0.28);
}

#ptkt .ptkt-priority-popup__toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 6px 10px;
  border-bottom: 1px solid #b9def3;
  background: linear-gradient(105deg, #e9f7ff, #f8fcff);
}

#ptkt .ptkt-priority-popup__toolbar h2 {
  margin: 0;
  color: #076fac;
  font: 700 14px/1.2 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.15px;
}

#ptkt .ptkt-priority-popup__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #74b7df;
  border-radius: 5px;
  background: #fff;
  color: #076fac;
  cursor: pointer;
  font: 700 21px/1 "Segoe UI", Arial, sans-serif;
}

#ptkt .ptkt-priority-popup__close:hover {
  background: #dff3ff;
}

/* Nội dung giữ cuộn dọc bên trong popup. Thanh dọc được ẩn như các vùng
   khác của tab, còn thanh ngang của bảng vẫn có thể sử dụng khi cần. */
#ptkt .ptkt-priority-popup__content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  /* Cùng một vùng nhận cả cuộn ngang và dọc để header/cột sticky bám đúng. */
  overflow-x: auto;
  overflow-y: auto;
  padding: 0 8px 10px;
  -ms-overflow-style: none;
  /* Firefox: hiện thanh ngang mảnh; WebKit bên dưới vẫn ẩn riêng thanh dọc. */
  scrollbar-width: thin;
  scrollbar-color: #63acd6 #eaf4fa;
}

#ptkt .ptkt-priority-popup__content::-webkit-scrollbar:vertical {
  display: none;
  width: 0;
}

/* Thanh cuộn ngang riêng cho bảng popup: nhỏ, có track sáng và dễ kéo. */
#ptkt .ptkt-priority-popup__content::-webkit-scrollbar:horizontal {
  display: block;
  height: 8px;
}

#ptkt .ptkt-priority-popup__content::-webkit-scrollbar-track:horizontal {
  margin: 1px 8px 2px;
  border-radius: 999px;
  background: #eaf4fa;
}

#ptkt .ptkt-priority-popup__content::-webkit-scrollbar-thumb:horizontal {
  min-width: 34px;
  border: 2px solid #eaf4fa;
  border-radius: 999px;
  background: linear-gradient(90deg, #7bc3e8, #3b9dce);
}

#ptkt .ptkt-priority-popup__content::-webkit-scrollbar-thumb:horizontal:hover {
  background: linear-gradient(90deg, #4fb3e4, #187eb6);
}

#ptkt .ptkt-priority-popup__content #ctck-container {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable {
  width: 100%;
  min-width: 1280px;
  margin-bottom: 0;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* Nút chọn kỳ ở cột Tổng Lãi/lỗ: dùng mũi tên riêng, nằm đúng giữa chiều
   cao ô và luôn có khoảng đệm với nội dung bên trái. */
#ptkt .ptkt-priority-popup__content #valuationCTCKTable th[data-col-id="period"] {
  padding: 2px 3px !important;
  vertical-align: middle;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable #periodSelect {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 4px) !important;
  min-width: 0;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 auto;
  padding: 0 17px 0 5px !important;
  border: 1px solid #b7cad8;
  border-radius: 4px;
  color: #0f172a;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23475569' d='M0 0h8L4 5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 5px center !important;
  background-size: 8px 5px !important;
  font-size: 10px !important;
  line-height: 18px !important;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable #periodSelect:focus {
  outline: 2px solid rgba(59, 157, 206, 0.35);
  outline-offset: 1px;
}

/* Bỏ sticky mặc định của toàn trang cho hàng nhóm (tầng 1) trong popup.
   Chỉ hàng tên cột dữ liệu bên dưới mới được đóng băng. */
#ptkt .ptkt-priority-popup__content #valuationCTCKTable thead tr:first-child > th {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
}

/* Popup ưu tiên: hàng tiêu đề dữ liệu (tầng 2) luôn hiện khi cuộn dọc,
   còn cột Mã & F.A giữ nguyên khi cuộn ngang.  Tô nền đặc để nội dung bên
   dưới không nhìn xuyên qua các phần đã cố định. */
#ptkt .ptkt-priority-popup__content #valuationCTCKTable thead tr:nth-child(2) > th {
  position: sticky !important;
  top: 0;
  z-index: 8;
  background: #f1f3f5 !important;
  box-shadow: 0 1px 0 #cbd5e1;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable thead tr:nth-child(2) > th:first-child {
  /* Bù đúng padding ngang 8px của vùng cuộn để cột bám sát mép khung. */
  left: -8px;
  z-index: 10;
  box-shadow: 1px 1px 0 #cbd5e1;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr > td:first-child {
  position: sticky;
  left: -8px;
  z-index: 4;
  background: #fff !important;
  box-shadow: 1px 0 0 #d7dde5;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr:nth-child(even) > td:first-child {
  background: #f2f4f6 !important;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr:hover > td:first-child {
  background: #edf5ff !important;
}

/* Giữ nguyên bảng màu R5 của Mã & F.A khi cột này được cố định ngang.
   Các màu này tương ứng trực tiếp với applyR5Style() của dữ liệu gốc. */
#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr > td:first-child[data-r5="-1"],
#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr > td:first-child[data-r5="3"] {
  background: rgb(198, 251, 184) !important;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr > td:first-child[data-r5="1"],
#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr > td:first-child[data-r5="4"] {
  background: rgb(12, 253, 16) !important;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr > td:first-child[data-r5="2"],
#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr > td:first-child[data-r5="5"] {
  background: rgb(251, 110, 242) !important;
}

/* Vùng ghim của Danh sách cổ phiếu phân tích ưu tiên. Không đặt sticky lên
   chính <tr> vì border-collapse của Bootstrap có thể tách nét kẻ khỏi hàng
   khi nhiều hàng sticky chồng lên nhau. Mỗi ô sẽ tự bám theo cùng offset do
   dashboard.js tính, nên toàn bộ một dòng vẫn di chuyển như một khối liền. */
#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr.ctck-row-pinned {
  position: static;
  background-color: #f7fbff;
}

/* Từng ô bám theo cùng offset của dòng. Nét kẻ đáy 1px được vẽ bằng inset
   shadow ngay trong ô (không dùng border-collapse), nên không biến mất khi
   cuộn và cũng không tạo thêm khoảng cách. Màu inline của Xu thế/Biến động/
   Cảnh báo và màu R5 vẫn được giữ. */
#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr.ctck-row-pinned > td {
  position: sticky;
  top: var(--ctck-pinned-top, 0px);
  z-index: 7;
  box-sizing: border-box;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background-color: #f7fbff;
  background-clip: padding-box;
  box-shadow:
    inset 0 -1px 0 rgba(148, 163, 184, 0.56),
    inset 0 0 0 9999px rgba(224, 247, 255, 0.14);
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr.ctck-row-pinned > td:first-child {
  position: sticky;
  top: var(--ctck-pinned-top, 0px);
  z-index: 9;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr.ctck-row-pinned:hover > td {
  box-shadow:
    inset 0 -1px 0 rgba(100, 116, 139, 0.66),
    inset 0 0 0 9999px rgba(186, 230, 253, 0.28);
}

/* Dải đệm có chiều cao thật bằng vùng bóng: nó luôn nằm giữa khối ghim và
   phần bảng cuộn, kể cả khi bảng đang ở giữa màn hình. Cả dải là một ô
   colspan nên đường biên và bóng liền mạch khi cuộn ngang. */
#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr.ctck-pinned-divider {
  position: static;
  height: 13px;
  pointer-events: none;
}

#ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr.ctck-pinned-divider > td {
  position: sticky;
  top: var(--ctck-pinned-divider-top, 0px);
  z-index: 6;
  height: 13px;
  min-height: 13px;
  padding: 0 !important;
  border: 0 !important;
  background-color: #fff !important;
  background: linear-gradient(
    to bottom,
    rgba(7, 111, 172, 0.72) 0 1px,
    rgba(255, 255, 255, 0.98) 1px 3px,
    rgba(226, 242, 251, 0.88) 3px 6px,
    rgba(148, 163, 184, 0.24) 6px 9px,
    rgba(15, 23, 42, 0) 13px
  ) !important;
  /* Bóng nằm hoàn toàn trong dải đệm 13px, không lấn thêm xuống dòng kế tiếp. */
  box-shadow: inset 0 8px 10px -9px rgba(15, 23, 42, 0.52);
  color: transparent;
  font-size: 0;
  line-height: 0;
}

/* Ở điện thoại, vùng popup chỉ còn padding ngang 4px. */
@media (max-width: 700px) {
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable thead tr:nth-child(2) > th:first-child,
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable tbody > tr > td:first-child {
    left: -4px;
  }
}

@media (max-width: 900px) {
  #ptkt .ptkt-priority-chart-popup {
    display: none !important;
  }

  /* Giá vốn và Lãi/lỗ tạm tính là tiện ích nhập liệu của popup desktop.
     Nếu người dùng đổi cửa sổ sang khung hẹp khi popup đang mở, ẩn chúng
     ngay để giao diện điện thoại vẫn giữ nguyên cấu trúc gọn. */
  #ptkt .ptkt-table-modal .ptkt-modal-cost-table {
    min-width: 0;
  }

  #ptkt .ptkt-table-modal .ptkt-modal-cost-header,
  #ptkt .ptkt-table-modal .ptkt-modal-cost-cell,
  #ptkt .ptkt-table-modal .ptkt-modal-pnl-header,
  #ptkt .ptkt-table-modal .ptkt-modal-pnl-cell {
    display: none !important;
  }

  /* Trên điện thoại/khung hẹp, tab Cổ phiếu theo dõi nở theo toàn bộ nội
     dung thay vì bị giới hạn bởi chiều cao khung desktop. Nhờ vậy những bảng
     nằm cuối danh sách luôn cuộn tới được, kể cả sau khi chúng xếp dọc. */
  body.no-scroll-y.ptkt-mobile-scroll {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Giữ thanh cuộn dọc ẩn nhưng không vô hiệu hóa thao tác vuốt/cuộn. */
  body.ptkt-mobile-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  body.ptkt-mobile-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  body.ptkt-mobile-scroll .container-fluid,
  body.ptkt-mobile-scroll .tab-wrapper {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.ptkt-mobile-scroll .tab-wrapper {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.ptkt-mobile-scroll .tabs {
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
    max-width: 22px;
  }

  body.ptkt-mobile-scroll .tab-btn {
    width: 100%;
    padding-right: 1px;
    padding-left: 1px;
    box-sizing: border-box;
  }

  body.ptkt-mobile-scroll .tab-content,
  body.ptkt-mobile-scroll .tab-content.active,
  body.ptkt-mobile-scroll #ptkt.tab-content.active {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 100%;
    height: auto !important;
    overflow: visible;
    box-sizing: border-box;
  }

  #ptkt-main-heading.ptkt-dashboard-header {
    grid-template-columns: minmax(114px, 0.55fr) minmax(0, 1.1fr) minmax(0, 1.05fr);
    gap: 7px;
  }

  .ptkt-dashboard-header__actions {
    max-width: none;
    gap: 5px;
  }

  #ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle,
  #ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle {
    padding: 4px 5px;
    font-size: 8px;
    letter-spacing: 0;
  }
}

/* PTKT cuộn theo trang ở giao diện hẹp. Header không còn margin-top nên khi
   sticky phải neo ngay dưới navbar và giữ cùng khoảng thở với các tab khác. */
@media (max-width: 900px) {
  body.ptkt-mobile-scroll #ptkt-main-heading.ptkt-dashboard-header {
    top: calc(var(--app-navbar-height, 32px) + var(--app-page-top-gap, 4px));
  }
}

@media (max-width: 700px) {
  #ptkt-main-heading.ptkt-dashboard-header {
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 66px;
  }

  .ptkt-dashboard-header__title {
    grid-column: 2;
    grid-row: 1;
  }

  .ptkt-dashboard-header__start {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .ptkt-dashboard-header__actions {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    width: 100%;
  }

  #ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle,
  #ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle {
    padding: 4px 2px;
    font-size: 7px;
  }

  #ptkt .ptkt-priority-popup {
    padding: 4px;
  }

  #ptkt .ptkt-priority-popup__toolbar {
    min-height: 34px;
    padding: 5px 7px;
  }

  #ptkt .ptkt-priority-popup__toolbar h2 {
    font-size: 11px;
  }

  #ptkt .ptkt-priority-popup__content {
    padding: 0 4px 8px;
  }
}

/* Khi mở Cổ phiếu theo dõi riêng ở desktop, hai cột giữ padding-top 10px
   để các bảng căn hàng đẹp lúc đầu. Header bảng sticky được bù đúng phần
   padding này, nên khi cuộn sẽ bám sát mép trên của vùng cuộn thay vì hở
   một khoảng trắng phía trên. */
@media (min-width: 901px) {
  #ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .left-col table thead th,
  #ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-private-watch-open > .right-col table thead th {
    top: -10px;
    z-index: 8;
  }
}

/* Nền đen rất nhạt nhưng đặc hoàn toàn, giúp phân tách rõ hàng tên cột với
   dữ liệu bên dưới và không nhìn xuyên nội dung khi tiêu đề đang sticky. */
#ptkt table thead th {
  background-color: #f3f4f6;
}

/* Ở chế độ cuộn một cột (bình thường hoặc màn hình hẹp), tiêu đề cột bám
   ngay dưới dashboard header. Biến offset được JavaScript tính theo chiều
   cao header thực tế để không bị che khi chữ/header thay đổi theo bề ngang. */
#ptkt.tab-content:not(.ptkt-split-scroll) > .container table thead th {
  top: var(--ptkt-table-header-sticky-top, 82px);
  z-index: 8;
}

/* Ô Thêm mã và nút phóng to của bảng Cổ phiếu theo dõi riêng dùng chung một
   cụm thao tác, giữ đúng cùng hàng và đặt nút phóng to bên phải ô nhập. */
#ptkt .ptkt-private-watch-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(152px, 238px) minmax(0, 1fr);
  align-items: center;
  justify-content: stretch !important;
  column-gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-right: 0;
}

#ptkt .ptkt-private-watch-header > .customer-header {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
}

/* Nút thu gọn nằm ngay trước tên của danh mục riêng và từng nhóm khách
   hàng. Khi đóng, header vẫn là điểm điều khiển duy nhất để mở lại bảng. */
#ptkt .ptkt-private-watch-header > .ptkt-private-watch-title {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 5px;
  min-width: 0;
}

#ptkt .ptkt-private-watch-title > .customer-name,
#ptkt .ptkt-private-watch-title > span:first-of-type {
  min-width: 0;
  padding-left: 0 !important;
}

/* Nhóm khách hàng vốn chừa 10px ở mép trái; giảm phần chừa này để nút ▾/▸
   nằm sát lề hơn mà vẫn không dính viền khung. */
#ptkt .ptkt-private-watch-header > .customer-header.ptkt-private-watch-title {
  padding-left: 2px;
}

#ptkt .ptkt-private-watch-collapse-button {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid #6fa8c7;
  border-radius: 3px;
  background: #eef8fd;
  color: #075985;
  font: 700 13px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

#ptkt .ptkt-private-watch-collapse-button:hover,
#ptkt .ptkt-private-watch-collapse-button:focus-visible {
  border-color: #168fc6;
  outline: none;
  background: #d7f0fc;
}

/* Nút mắt nằm cạnh tên nhóm và chỉ điều khiển việc hiển thị thông tin khách
   hàng, không ảnh hưởng tới thao tác bấm tên để mở menu Sửa/Xóa. */
#ptkt .ptkt-customer-privacy-button {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid #9db7c7;
  border-radius: 3px;
  background: #f8fafc;
  color: #36566a;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

#ptkt .ptkt-customer-privacy-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#ptkt .ptkt-customer-privacy-button:hover,
#ptkt .ptkt-customer-privacy-button:focus-visible {
  border-color: #168fc6;
  outline: none;
  background: #e0f2fe;
  color: #075985;
}

#ptkt .stock-box.ptkt-private-watch-collapsed > .ptkt-private-watch-header {
  margin-bottom: 0 !important;
}

#ptkt .stock-box.ptkt-private-watch-collapsed > table {
  display: none !important;
}

#ptkt .ptkt-private-watch-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

#ptkt .ptkt-private-watch-actions input[id^="new-stock-"] {
  flex: 0 0 auto;
  margin: 0;
}

#ptkt .ptkt-private-watch-reorder {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 1px;
}

#ptkt .ptkt-customer-move-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid #98b8ca;
  border-radius: 3px;
  color: #1e5d82;
  background: #eef8fd;
  font: 700 13px/1 Arial, sans-serif;
  cursor: pointer;
}

#ptkt .ptkt-customer-move-button:hover:not(:disabled) {
  border-color: #3b9dce;
  color: #075985;
  background: #d9f1fc;
}

#ptkt .ptkt-customer-move-button:disabled {
  opacity: 0.38;
  cursor: default;
}

#ptkt .ptkt-private-watch-actions .ptkt-table-expand-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid #64748b;
  border-radius: 4px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

#ptkt .ptkt-private-watch-actions .ptkt-table-expand-button:hover {
  background: #dbeafe;
}

/* Thanh phân bổ gọn của từng nhóm theo dõi riêng. Hai tỷ lệ đứng ở hai đầu
   thanh: xanh là cổ phiếu nắm giữ, vàng là sức mua còn lại. */
#ptkt .ptkt-customer-allocation {
  --ptkt-stock-percent: 0;
  display: grid;
  grid-template-columns: minmax(31px, auto) minmax(84px, 1fr) minmax(31px, auto);
  grid-column: 2;
  width: 100%;
  align-items: center;
  gap: 5px;
  min-width: 152px;
  max-width: none;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid #91cbea;
  border-radius: 999px;
  background: linear-gradient(145deg, #f8fdff, #e7f6ff);
  box-shadow: 0 2px 6px rgba(14, 116, 166, 0.13);
}

#ptkt .ptkt-customer-allocation__value {
  font: 800 10.4px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.05px;
  white-space: nowrap;
}

#ptkt .ptkt-customer-allocation__value--stock {
  color: #078247;
  text-align: left;
}

#ptkt .ptkt-customer-allocation__value--cash {
  color: #b97807;
  text-align: right;
}

#ptkt .ptkt-customer-allocation__bar {
  display: flex;
  width: 100%;
  height: 11px;
  overflow: hidden;
  border: 1px solid #d2e0e8;
  border-radius: 999px;
  background: #e9eef1;
  box-shadow: inset 0 1px 2px rgba(15, 78, 112, 0.14);
}

#ptkt .ptkt-customer-allocation__bar-stock {
  flex: 0 0 calc(var(--ptkt-stock-percent) * 1%);
  min-width: 0;
  background: linear-gradient(90deg, #079d55, #40ca7c);
  transition: flex-basis 220ms ease;
}

#ptkt .ptkt-customer-allocation__bar-cash {
  flex: 1 1 auto;
  min-width: 0;
  background: linear-gradient(90deg, #f8ce59, #eea620);
  transition: background 220ms ease;
}

#ptkt .ptkt-customer-allocation.is-waiting .ptkt-customer-allocation__bar-stock {
  flex-basis: 0;
}

#ptkt .ptkt-customer-allocation.is-waiting .ptkt-customer-allocation__bar-cash {
  background: #d9e2e8;
}

/* Tooltip tùy biến cho thanh phân bổ: thay tooltip mặc định bằng giao diện
   rõ nét, có mũi tên và bóng nhẹ để nổi bật mà không che dữ liệu quá nhiều. */
#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip] {
  position: relative;
  cursor: help;
  outline: none;
}

#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]::before,
#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]::after {
  position: absolute;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]::after {
  top: calc(100% + 9px);
  left: 50%;
  width: max-content;
  max-width: min(240px, calc(100vw - 24px));
  padding: 7px 10px;
  border: 1px solid rgba(191, 229, 250, 0.75);
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #075d8b, #1597d4);
  box-shadow: 0 5px 14px rgba(7, 67, 99, 0.28);
  content: attr(data-ptkt-allocation-tooltip);
  font: 700 10.2px/1.25 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08px;
  text-align: center;
  white-space: normal;
  transform: translate(-50%, -4px);
}

#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]::before {
  top: calc(100% + 3px);
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(191, 229, 250, 0.75);
  border-left: 1px solid rgba(191, 229, 250, 0.75);
  background: #0c76ae;
  content: "";
  transform: translate(-50%, -4px) rotate(45deg);
}

#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:hover,
#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:focus-visible {
  z-index: 61;
}

#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:hover::before,
#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:focus-visible::before,
#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:hover::after,
#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:focus-visible::after {
  opacity: 1;
}

#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:hover::after,
#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:focus-visible::after {
  transform: translate(-50%, 0);
}

#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:hover::before,
#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

#ptkt .ptkt-vnindex-allocation.ptkt-allocation-tooltip-host[data-ptkt-allocation-tooltip]:focus-visible {
  box-shadow: 0 0 0 2px rgba(28, 159, 223, 0.45), inset 0 1px 2px rgba(15, 78, 112, 0.14);
}

@media (max-width: 700px) {
  /* Trên điện thoại, nhãn chỉ ôm vừa chữ và bám trái thay vì trải hết khung
     phân bổ danh mục. */
  #ptkt .ptkt-vnindex-allocation__title {
    width: max-content;
    align-self: flex-start;
    padding: 4px 7px;
  }

  /* Tabs BUY/SELL phải bắt đầu từ mép trái; vẫn chừa phần phải cho nút
     phóng to của bảng. */
  #ptkt .group-1-1-2 .stock-box > .ptkt-top-tabs {
    justify-content: flex-start;
  }

  #ptkt .ptkt-private-watch-header {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  #ptkt .ptkt-private-watch-header > .customer-header {
    grid-column: 1;
    grid-row: 1;
  }

  #ptkt .ptkt-private-watch-actions {
    grid-column: 2;
    grid-row: 1;
  }

  #ptkt .ptkt-customer-allocation {
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(100% - 20px);
    justify-self: center;
    margin: 0;
  }
}

/* Popup Danh sách cổ phiếu phân tích ưu tiên: trên khung hẹp, bảng dùng
   cột gọn theo dữ liệu, tiêu đề có thể xuống dòng và toàn bộ ô đều căn giữa. */
@media (max-width: 900px) {
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable {
    width: 100%;
    min-width: 1089px;
    table-layout: fixed;
  }

  #ptkt .ptkt-priority-popup__content #valuationCTCKTable th,
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable td {
    padding: 3px 2px !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1.14;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #ptkt .ptkt-priority-popup__content #valuationCTCKTable thead tr:first-child th {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-weight: 700;
  }

  #ptkt .ptkt-priority-popup__content #valuationCTCKTable thead tr:nth-child(2) th {
    min-height: 31px;
    font-weight: 700;
  }

  #ptkt .ptkt-priority-popup__content #valuationCTCKTable #periodSelect {
    width: 100%;
    max-width: 58px;
  }

  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-cp { width: 54px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-current-price { width: 68px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-report-date { width: 55px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-report-price { width: 52px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-recommendation { width: 56px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-ssi-target { width: 55px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-upside { width: 52px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-thesis { width: 47px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-hsc { width: 47px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-vcsc { width: 47px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-trend { width: 58px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-movement { width: 72px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-action { width: 70px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-weight { width: 60px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-reference { width: 65px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-cost { width: 55px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-hold { width: 46px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-profit-loss { width: 72px; }
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable col.ctck-col-period { width: 58px; }

  /* Thu cột Mã & F.A bằng cách đưa tín hiệu Vol Break xuống đúng dòng riêng. */
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable td:nth-child(1) .ptkt-vol-break-indicator {
    display: block;
    margin-top: 1px;
    line-height: 1;
  }

  /* Cột Khuyến nghị ưu tiên chiều ngang gọn; nội dung tự xuống dòng trong ô. */
  #ptkt .ptkt-priority-popup__content #valuationCTCKTable td:nth-child(5) > span {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* Chỉ desktop nới STT trong popup; điện thoại/khung hẹp giữ kích thước cũ. */
@media (min-width: 901px) {
  #ptkt .ptkt-table-modal .ptkt-modal-table-box th:first-child,
  #ptkt .ptkt-table-modal .ptkt-modal-table-box td:first-child {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    box-sizing: border-box;
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
}

/* =============== CHART TRONG CỔ PHIẾU THEO DÕI ===============
   CHART dùng lại nguyên #chart-left của workspace kỹ thuật. Vì vậy các
   indicator, công cụ vẽ và trạng thái realtime vẫn là một instance duy nhất. */
#ptkt-main-heading.ptkt-dashboard-header {
  grid-template-columns: minmax(130px, 0.55fr) minmax(0, 1.55fr) minmax(0, 1.35fr);
}

.ptkt-dashboard-header__actions {
  max-width: 420px;
}

#ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle,
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle,
#ptkt-main-heading #ptkt-chart-toggle.ptkt-chart-toggle {
  position: static;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  background: rgba(5, 68, 116, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  font: 700 9.5px/1.15 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.15px;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

/* Hai nút danh sách dùng nhãn hai tầng cố định. Vì nút là flex container,
   cần đặt hướng cột thay vì chỉ dùng display:block cho từng span. */
#ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle,
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle {
  flex-direction: column;
  gap: 1px;
}

#ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle > span,
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle > span {
  display: block;
  white-space: nowrap;
}

#ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle:hover,
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle:hover,
#ptkt-main-heading #ptkt-chart-toggle.ptkt-chart-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

#ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle.is-active,
#ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle.is-active,
#ptkt-main-heading #ptkt-chart-toggle.ptkt-chart-toggle.is-active {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 3px 8px rgba(6, 66, 111, 0.2);
  color: #087ec8;
}

#ptkt > .container.ptkt-chart-watch-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

#ptkt > .container.ptkt-chart-watch-open > .left-col {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  /* Đồng bộ mép trên bảng VNINDEX với khung CHART khi hai cột cùng hiển thị. */
  padding-top: 0;
  align-items: stretch;
}

#ptkt > .container.ptkt-chart-watch-open > .ptkt-chart-watch-stage {
  grid-column: 2;
}

/* Khi chart đã được đưa vào popup cạnh Danh sách phân tích, stage cũ chỉ còn
   là khung rỗng. Ẩn hẳn nó để không còn viền/chart nền lộ phía sau hai popup. */
#ptkt > .container.ptkt-chart-watch-open.ptkt-chart-priority-popup-active > .ptkt-chart-watch-stage {
  display: none;
}

/* Phóng to CHART trong Cổ phiếu theo dõi (desktop): các bảng ở cột trái
   tạm thời ẩn đi và stage biểu đồ trải hết workspace. Bấm lại icon phóng to
   sẽ trả nguyên bố cục hai cột như trước. */
@media (min-width: 901px) {
  #ptkt > .container.ptkt-chart-watch-open.ptkt-chart-watch-maximized {
    grid-template-columns: minmax(0, 1fr);
  }

  #ptkt > .container.ptkt-chart-watch-open.ptkt-chart-watch-maximized > .left-col {
    display: none;
  }

  #ptkt > .container.ptkt-chart-watch-open.ptkt-chart-watch-maximized > .ptkt-chart-watch-stage {
    grid-column: 1;
    width: 100%;
  }
}

#ptkt .ptkt-chart-watch-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 420px;
  height: 100%;
  overflow: hidden;
  border: 1px solid #73bce9;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 7px 17px rgba(14, 128, 204, 0.16);
}

#ptkt .ptkt-chart-watch-stage.is-watchlist-open {
  grid-template-columns: minmax(0, 1fr) minmax(255px, 0.58fr);
}

#ptkt .ptkt-chart-watch-stage__chart,
#ptkt .ptkt-chart-watch-stage__watchlist {
  position: relative;
  min-width: 0;
  min-height: 0;
}

#ptkt .ptkt-chart-watch-stage__chart {
  display: flex;
  overflow: hidden;
}

#ptkt .ptkt-chart-watch-stage__watchlist {
  display: none;
  overflow: hidden;
  border-left: 1px solid #c9e5f5;
  background: #f8fcff;
}

#ptkt .ptkt-chart-watch-stage.is-watchlist-open .ptkt-chart-watch-stage__watchlist {
  display: block;
}

/* Ghi đè kích thước tối thiểu của workspace kỹ thuật gốc: trong stage, chart
   phải nhận chính xác phần ngang còn lại sau Watchlist, không ép cả tab tràn. */
#ptkt .ptkt-chart-watch-stage #chart-left,
#ptkt .ptkt-chart-watch-stage #chart_tradingview,
#ptkt .ptkt-chart-watch-stage #chart_wrapper {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

#ptkt .ptkt-chart-watch-stage #chart-left {
  display: flex;
  overflow: hidden;
}

/* right-col vẫn là đúng DOM Watchlist gốc; chỉ đổi parent và hình thức thành
   sidebar dọc khi CHART + WATCHLIST đang cùng bật. */
#ptkt > .container.ptkt-chart-watch-open .ptkt-chart-watch-stage .right-col {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  background: transparent;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}

#ptkt > .container.ptkt-chart-watch-open .ptkt-chart-watch-stage .right-col::-webkit-scrollbar {
  width: 7px;
}

#ptkt > .container.ptkt-chart-watch-open .ptkt-chart-watch-stage .right-col::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #94a3b8;
}

#ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-chart-watch-open {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  /* Chừa nhịp thở nhỏ ở đáy CHART, không để viền khung chạm sát viewport. */
  padding-bottom: 8px;
  overflow: hidden;
}

#ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-chart-watch-open > .left-col {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Khi CHART mở, cột bảng trái vẫn cuộn độc lập nhưng không để thanh cuộn
   nằm giữa hai cột làm bố cục bị nặng hoặc che mép CHART. */
#ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-chart-watch-open > .left-col {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#ptkt.tab-content.active.ptkt-split-scroll > .container.ptkt-chart-watch-open > .left-col::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Khi CHART bật, phần bảng còn lại chỉ có nửa bề ngang desktop. Giữ đúng
   thứ tự một cột như giao diện điện thoại để mỗi bảng luôn có đủ chiều ngang
   đọc dữ liệu, thay vì ép các cặp BUY/SELL hoặc bảng ngành đứng cạnh nhau. */
#ptkt > .container.ptkt-chart-watch-open .left-col > .stock-box[data-box-id="1"] {
  width: 100%;
  align-self: stretch;
}

#ptkt > .container.ptkt-chart-watch-open .left-col .group-1-1-2,
#ptkt > .container.ptkt-chart-watch-open .left-col.shrink .group-1-1-2 {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
}

#ptkt > .container.ptkt-chart-watch-open .left-col .group-1-1-2 .stock-box,
#ptkt > .container.ptkt-chart-watch-open .left-col.shrink .group-1-1-2 .stock-box {
  flex: 0 0 auto;
  width: 100% !important;
  min-width: 0;
  max-width: none;
}

#ptkt > .container.ptkt-chart-watch-open .left-col #group3-grid.layout-horizontal {
  grid-template-columns: minmax(0, 1fr);
}

/* Nếu bật thêm Watchlist, chính các bảng Watchlist được chuyển vào left-col
   ngay sau VNINDEX. Nhờ vậy chúng đi cùng luồng dọc với BUY/SELL và Theo
   ngành, thay vì giữ một sidebar riêng làm chart bị hẹp. */
#ptkt > .container.ptkt-chart-watch-open.ptkt-chart-watch-with-watchlist > .left-col > .right-col {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding-top: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

/* CHART được mở bên trong Cổ phiếu theo dõi chỉ rộng bằng một vùng chart
   điện thoại. Áp dụng đúng hệ kích thước compact của chart mobile cho riêng
   stage này: thanh công cụ, nhãn thông tin, menu và phần chữ của trục chart
   cùng mật độ, nhưng không làm thay đổi tab Phân tích kỹ thuật gốc trên PC. */
#ptkt .ptkt-chart-watch-stage.is-compact-chart #tv_topbar {
  height: 46px !important;
  padding: 0 !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-topbar-scroll {
  gap: 4px;
  padding: 0 44px 0 6px;
  scrollbar-width: none;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-topbar-scroll::-webkit-scrollbar {
  display: none;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-symbol-group--fixed {
  margin-left: 8px;
  margin-right: 5px;
  padding-right: 5px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart #chart_view,
#ptkt .ptkt-chart-watch-stage.is-compact-chart #tv_leftbar {
  top: 46px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart #tv_leftbar {
  padding-top: 6px !important;
  gap: 8px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-symbol {
  padding: 4px 6px !important;
  border-radius: 5px !important;
  font-size: 12px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-btn,
#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv_tf,
#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-tool {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 5px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  touch-action: manipulation;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-tool svg {
  width: 16px !important;
  height: 16px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart #tool_measure svg {
  width:19px !important;
  height:19px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-group--drawing .tv-tool:not(#tool_text) {
  font-size:19px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-group--drawing .tv-tool:not(#tool_text) svg {
  width:19px !important;
  height:19px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-polyline-icon {
  transform: scale(.8);
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-layout-maximize-button {
  top: 7px;
  right: 6px;
  width: 28px;
  height: 28px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-layout-maximize-button svg {
  width: 14px;
  height: 14px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart #tv_info {
  top: 50px !important;
  left: 7px !important;
  font-size: 9.2px !important;
  line-height: 1.15 !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart #tv_info > div {
  margin-top: 2px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart #tv_info .tv-info-status-row {
  gap: 4px !important;
  border-radius: 5px !important;
  padding-left: 3px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart #tv_info #tv_trend,
#ptkt .ptkt-chart-watch-stage.is-compact-chart #tv_info #tv_biendong,
#ptkt .ptkt-chart-watch-stage.is-compact-chart #tv_info #tv_keypoint {
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-size: 9.2px !important;
  line-height: 1.15 !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-long-signal-button {
  min-height: 26px;
  padding: 4px 7px;
  border-radius: 4px !important;
  font-size: 10px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart #indicator_menu {
  width: 220px !important;
  padding: 4px !important;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .indicator-item {
  height: 24px;
  padding: 1px 3px;
  font-size: 10px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-popup {
  top: 40px;
  padding: 4px;
  font-size: 10px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-fib-option {
  padding: 6px 9px;
  font-size: 10px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-floating-toolbar {
  gap: 4px;
  padding: 4px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-toolbar-btn {
  width: 27px;
  min-width: 27px;
  height: 27px;
  border-radius: 5px;
  font-size: 10px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-toolbar-select {
  height: 27px;
  padding: 0 5px;
  font-size: 10px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-drawing-hint,
#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-drawing-actions {
  right: 8px;
  bottom: 10px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-drawing-hint {
  max-width: calc(100% - 16px);
  bottom: 52px;
  padding: 5px 7px;
  font-size: 9.5px;
}

#ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-drawing-actions button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 10px;
}

/* Popup CHART đi cùng Danh sách cổ phiếu phân tích cũng chỉ có nửa chiều
   ngang. Kế thừa đầy đủ mật độ compact của CHART thường để toolbar, nhãn,
   menu chỉ báo và công cụ vẽ không bị phóng to trở lại khi chart đổi parent. */
#ptkt .ptkt-priority-chart-popup #tv_topbar {
  height: 46px !important;
  padding: 0 !important;
}

#ptkt .ptkt-priority-chart-popup .tv-topbar-scroll {
  gap: 4px;
  padding: 0 44px 0 6px;
  scrollbar-width: none;
}

#ptkt .ptkt-priority-chart-popup .tv-topbar-scroll::-webkit-scrollbar {
  display: none;
}

#ptkt .ptkt-priority-chart-popup .tv-symbol-group--fixed {
  margin-left: 8px;
  margin-right: 5px;
  padding-right: 5px;
}

#ptkt .ptkt-priority-chart-popup #chart_view,
#ptkt .ptkt-priority-chart-popup #tv_leftbar {
  top: 46px !important;
}

#ptkt .ptkt-priority-chart-popup #tv_leftbar {
  padding-top: 6px !important;
  gap: 8px !important;
}

#ptkt .ptkt-priority-chart-popup .tv-symbol {
  padding: 4px 6px !important;
  border-radius: 5px !important;
  font-size: 12px !important;
}

#ptkt .ptkt-priority-chart-popup .tv-btn,
#ptkt .ptkt-priority-chart-popup .tv_tf,
#ptkt .ptkt-priority-chart-popup .tv-tool {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 5px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  touch-action: manipulation;
}

#ptkt .ptkt-priority-chart-popup .tv-tool svg {
  width: 16px !important;
  height: 16px !important;
}

#ptkt .ptkt-priority-chart-popup #tool_measure svg {
  width:19px !important;
  height:19px !important;
}

#ptkt .ptkt-priority-chart-popup .tv-group--drawing .tv-tool:not(#tool_text) {
  font-size:19px !important;
}

#ptkt .ptkt-priority-chart-popup .tv-group--drawing .tv-tool:not(#tool_text) svg {
  width:19px !important;
  height:19px !important;
}

#ptkt .ptkt-priority-chart-popup .tv-polyline-icon {
  transform: scale(.8);
}

#ptkt .ptkt-priority-chart-popup .tv-layout-maximize-button {
  top: 7px;
  right: 6px;
  width: 28px;
  height: 28px;
}

#ptkt .ptkt-priority-chart-popup .tv-layout-maximize-button svg {
  width: 14px;
  height: 14px;
}

#ptkt .ptkt-priority-chart-popup #tv_info {
  top: 50px !important;
  left: 7px !important;
  font-size: 9.2px !important;
  line-height: 1.15 !important;
}

#ptkt .ptkt-priority-chart-popup #tv_info > div {
  margin-top: 2px !important;
}

#ptkt .ptkt-priority-chart-popup #tv_info .tv-info-status-row {
  gap: 4px !important;
  border-radius: 5px !important;
  padding-left: 3px !important;
}

#ptkt .ptkt-priority-chart-popup #tv_info #tv_trend,
#ptkt .ptkt-priority-chart-popup #tv_info #tv_biendong,
#ptkt .ptkt-priority-chart-popup #tv_info #tv_keypoint {
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-size: 9.2px !important;
  line-height: 1.15 !important;
}

#ptkt .ptkt-priority-chart-popup .tv-long-signal-button {
  min-height: 26px;
  padding: 4px 7px;
  border-radius: 4px !important;
  font-size: 10px !important;
}

#ptkt .ptkt-priority-chart-popup #indicator_menu {
  width: 220px !important;
  padding: 4px !important;
}

#ptkt .ptkt-priority-chart-popup .indicator-item {
  height: 24px;
  padding: 1px 3px;
  font-size: 10px;
}

#ptkt .ptkt-priority-chart-popup .tv-popup {
  top: 40px;
  padding: 4px;
  font-size: 10px;
}

#ptkt .ptkt-priority-chart-popup .tv-fib-option {
  padding: 6px 9px;
  font-size: 10px;
}

#ptkt .ptkt-priority-chart-popup .tv-floating-toolbar {
  gap: 4px;
  padding: 4px;
}

#ptkt .ptkt-priority-chart-popup .tv-toolbar-btn {
  width: 27px;
  min-width: 27px;
  height: 27px;
  border-radius: 5px;
  font-size: 10px;
}

#ptkt .ptkt-priority-chart-popup .tv-toolbar-select {
  height: 27px;
  padding: 0 5px;
  font-size: 10px;
}

#ptkt .ptkt-priority-chart-popup .tv-drawing-hint,
#ptkt .ptkt-priority-chart-popup .tv-drawing-actions {
  right: 8px;
  bottom: 10px;
}

#ptkt .ptkt-priority-chart-popup .tv-drawing-hint {
  max-width: calc(100% - 16px);
  bottom: 52px;
  padding: 5px 7px;
  font-size: 9.5px;
}

#ptkt .ptkt-priority-chart-popup .tv-drawing-actions button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 10px;
}

/* Riêng CHART thu hẹp trên máy tính trong Cổ phiếu theo dõi: icon công cụ vẽ
   hiển thị đúng 25px. Button vẫn giữ nguyên 28×28px, nên vùng bấm và bố cục
   compact không đổi. Điện thoại không dùng quy tắc này. */
@media (min-width: 901px) {
  #ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-group--drawing .tv-tool:not(#tool_text),
  #ptkt .ptkt-priority-chart-popup .tv-group--drawing .tv-tool:not(#tool_text) {
    font-size: 25px !important;
  }

  #ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-group--drawing .tv-tool:not(#tool_text) svg,
  #ptkt .ptkt-chart-watch-stage.is-compact-chart #tool_measure svg,
  #ptkt .ptkt-priority-chart-popup .tv-group--drawing .tv-tool:not(#tool_text) svg,
  #ptkt .ptkt-priority-chart-popup #tool_measure svg {
    width: 25px !important;
    height: 25px !important;
    transform: none !important;
  }

  #ptkt .ptkt-chart-watch-stage.is-compact-chart .tv-cursor-icon,
  #ptkt .ptkt-priority-chart-popup .tv-cursor-icon {
    transform: none !important;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  #ptkt .ptkt-chart-watch-stage.is-watchlist-open {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.5fr);
  }

  #ptkt > .container.ptkt-chart-watch-open {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
}

/* Khung hẹp giữ luồng dọc quen thuộc: chart xuất hiện ngay sau VNINDEX, và
   Watchlist (nếu bật) nằm tiếp theo để người dùng cuộn một mạch như trước. */
@media (max-width: 900px) {
  #ptkt-main-heading.ptkt-dashboard-header {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  /* Màn hình hẹp mở chart bằng double-click mã trong popup toàn màn hình;
     không để nút CHART inline chiếm chỗ hoặc tạo hai cách mở khác nhau. */
  #ptkt-main-heading .ptkt-dashboard-header__chart-action {
    display: none;
  }

  #ptkt-main-heading #priority-watch-toggle.ptkt-priority-watch-toggle,
  #ptkt-main-heading #toggle-btn.ptkt-private-watch-toggle,
  #ptkt-main-heading #ptkt-chart-toggle.ptkt-chart-toggle {
    padding: 4px 2px;
    font-size: 7px;
  }

  #ptkt > .container.ptkt-chart-watch-open {
    display: block;
  }

  #ptkt > .container.ptkt-chart-watch-open > .left-col {
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  #ptkt .left-col > .ptkt-chart-watch-stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    overflow: visible;
  }

  #ptkt .ptkt-chart-watch-stage__chart {
    flex: 0 0 auto;
    width: 100%;
    height: min(72dvh, 620px);
    min-height: 360px;
    overflow: hidden;
  }

  #ptkt .ptkt-chart-watch-stage__watchlist {
    width: 100%;
    overflow: visible;
    border-top: 1px solid #c9e5f5;
    border-left: 0;
  }

  #ptkt > .container.ptkt-chart-watch-open .ptkt-chart-watch-stage .right-col {
    width: 100%;
    height: auto;
    max-height: none;
    padding: 8px 0 0;
    overflow: visible;
  }
}

/* Thanh công cụ TradingView: mã và nút phóng to là hai vùng cố định. Chỉ dải
   công cụ giữa chúng được cuộn, với hai mũi tên điều hướng khi nội dung tràn. */
#chart_wrapper .tv-topbar {
  gap: 0;
}

#chart_wrapper .tv-topbar-scroll {
  padding: 0 4px !important;
  scroll-padding-inline: 4px;
}

#chart_wrapper .tv-topbar-nav {
  display: none;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
  padding: 0;
  border: 0;
  border-left: 1px solid #e1e6ed;
  border-right: 1px solid #e1e6ed;
  color: #075985;
  background: #f8fafc;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, opacity .16s ease;
}

#chart_wrapper .tv-topbar.tv-topbar--overflowing .tv-topbar-nav {
  display: inline-flex;
}

#chart_wrapper .tv-topbar-nav:hover:not(:disabled),
#chart_wrapper .tv-topbar-nav:focus-visible:not(:disabled) {
  color: #0369a1;
  background: #e0f2fe;
  outline: none;
}

#chart_wrapper .tv-topbar-nav:disabled {
  cursor: default;
  opacity: .36;
}

#chart_wrapper .tv-topbar-nav svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

#chart_wrapper .tv-topbar-maximize-fixed {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  border-left: 1px solid #dfe5ec;
  background: #fafafa;
}

#chart_wrapper .tv-layout-maximize-button {
  position: static;
  flex: 0 0 auto;
  z-index: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

@media (max-width: 900px) {
  #chart_wrapper .tv-topbar-scroll {
    padding: 0 2px !important;
  }

  #chart_wrapper .tv-topbar-maximize-fixed {
    flex-basis: 40px;
  }
}

/* Thanh cuộn ngang phụ cho DANH SÁCH NGÀNH trên màn hình hẹp. Nó neo sát
   đáy viewport để người dùng kéo ngang mà không cần cuộn dọc tới cuối bảng. */
.industry-valuation-edge-scroll {
  position: fixed;
  bottom: 3px;
  z-index: 1800;
  display: block;
  box-sizing: border-box;
  height: 12px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(125, 160, 187, 0.64);
  border-radius: 6px;
  background: rgba(248, 251, 255, 0.94);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.17);
  scrollbar-width: thin;
  scrollbar-color: #6f9fbd transparent;
  touch-action: pan-x;
}

.industry-valuation-edge-scroll[hidden] {
  display: none !important;
}

.industry-valuation-edge-scroll__spacer {
  width: 0;
  height: 1px;
  pointer-events: none;
}

.industry-valuation-edge-scroll::-webkit-scrollbar {
  height: 7px;
}

.industry-valuation-edge-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.industry-valuation-edge-scroll::-webkit-scrollbar-thumb {
  min-width: 34px;
  border: 1px solid rgba(248, 251, 255, 0.94);
  border-radius: 6px;
  background: #6f9fbd;
}

@media (min-width: 901px) {
  .industry-valuation-edge-scroll {
    display: none !important;
  }
}

/* Bảng khuyến nghị TRUNG DÀI HẠN của Broker: cùng nhịp với bảng ngắn hạn,
   nhưng có ô thêm mã nằm bên trái tiêu đề và thêm cột thời gian HOLD. */
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section {
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #99d7cf;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 40px;
  padding: 6px 10px;
  border-bottom: 1px solid #a7ddd5;
  background: linear-gradient(90deg, #effcf9, #f8fffd);
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-heading > strong {
  grid-column: 2;
  color: #0f766e;
  font: 800 14px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: .8px;
  text-align: center;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-add-form {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  margin: 0;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-add-form input {
  width: 92px;
  height: 26px;
  padding: 2px 7px;
  border: 1px solid #91cfc7;
  border-radius: 5px;
  outline: none;
  background: #fff;
  color: #134e4a;
  font: 800 10px/1 "Segoe UI", Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-add-form input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, .14);
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-add-form input.is-invalid {
  border-color: #dc2626;
  background: #fef2f2;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-add-form button {
  height: 26px;
  padding: 2px 8px;
  border: 1px solid #0f766e;
  border-radius: 5px;
  background: #0f766e;
  color: #fff;
  font: 800 10px/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-add-form button:hover {
  background: #115e59;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section > table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-empty {
  padding: 14px !important;
  color: #64748b;
  font-style: italic;
  text-align: center;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--stt { width: 4% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--code { width: 4.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--price { width: 5.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--key { width: 4.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--trend { width: 5.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--movement { width: 8% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--warning { width: 7.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--sharks { width: 6.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--ndtnn { width: 5.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--signal-weight { width: 4.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--hold { width: 3.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--recommendation-date { width: 8.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--hold-period { width: 7% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--cost { width: 5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--pnl { width: 5.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--t { width: 3% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--recommendation-weight { width: 6.5% !important; }
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--sale { width: 5.5% !important; }

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-scope {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-scope--short {
  background: #dbeafe;
  color: #1d4ed8;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-scope--long {
  background: #ccfbf1;
  color: #0f766e;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-serial-trigger {
  min-width: 17px;
  padding: 1px 2px;
  border-radius: 4px;
  color: #0f766e;
  cursor: pointer;
  pointer-events: auto;
  text-align: right;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-serial-trigger:hover,
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-serial-trigger:focus-visible {
  outline: none;
  background: #ccfbf1;
  box-shadow: 0 0 0 1px #5eead4;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table .ptkt-broker-serial-cell {
  padding-right: 3px !important;
  padding-left: 3px !important;
  overflow: visible !important;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table .ptkt-broker-serial-layout {
  justify-content: space-between;
  gap: 2px;
  overflow: visible;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-table .ptkt-broker-long-term-serial-trigger {
  min-width: 14px;
  margin-left: 0 !important;
  overflow: visible;
  white-space: nowrap;
}

.ptkt-broker-long-term-row-popup {
  border-color: #99d7cf;
}

/* Quyền Broker: mọi nghiệp vụ Nhóm và quản lý khuyến nghị đi qua một nút
   rõ ràng, nằm giữa nhãn NHÓM và vùng tìm tài khoản. */
#ptkt #ptkt-broker-groups-section {
  gap: 10px;
}

#ptkt #ptkt-broker-groups-section > span {
  flex: 0 0 auto;
}

#ptkt .ptkt-manage-recommendations-button {
  flex: 0 1 auto;
  min-height: 27px;
  padding: 4px 11px;
  border: 1px solid #0284c7;
  border-radius: 6px;
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  box-shadow: 0 1px 2px rgba(2, 132, 199, .22);
  color: #fff;
  font: 800 11px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: .08px;
  white-space: nowrap;
  cursor: pointer;
}

#ptkt .ptkt-manage-recommendations-button:hover:not(:disabled),
#ptkt .ptkt-manage-recommendations-button:focus-visible:not(:disabled) {
  border-color: #0369a1;
  background: linear-gradient(180deg, #0284c7, #0369a1);
  outline: none;
}

#ptkt #ptkt-broker-groups-section[hidden],
#ptkt #customer-box-container[hidden] {
  display: none !important;
}

/* Hai bảng khuyến nghị dùng cùng cấu trúc độc lập. Màu xanh dương giúp phân
   biệt NGẮN HẠN, còn xanh ngọc tiếp tục nhận diện TRUNG DÀI HẠN. */
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section {
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #a8cee7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 40px;
  padding: 6px 10px;
  border-bottom: 1px solid #b9d9ec;
  background: linear-gradient(90deg, #eff8ff, #f8fcff);
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-heading > strong {
  grid-column: 2;
  color: #075985;
  font: 800 14px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: .8px;
  text-align: center;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  margin: 0;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form input {
  width: 92px;
  height: 26px;
  padding: 2px 7px;
  border: 1px solid #8bbfdf;
  border-radius: 5px;
  outline: none;
  background: #fff;
  color: #075985;
  font: 800 10px/1 "Segoe UI", Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, .14);
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form input.is-invalid {
  border-color: #dc2626;
  background: #fef2f2;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form button {
  height: 26px;
  padding: 2px 8px;
  border: 1px solid #0369a1;
  border-radius: 5px;
  background: #0284c7;
  color: #fff;
  font: 800 10px/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form button:hover {
  background: #0369a1;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section > table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-empty {
  padding: 14px !important;
  color: #64748b;
  font-style: italic;
  text-align: center;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section {
  border-color: #99d7cf;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section > .ptkt-broker-recommendation-heading {
  border-bottom-color: #a7ddd5;
  background: linear-gradient(90deg, #effcf9, #f8fffd);
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section > .ptkt-broker-recommendation-heading > strong {
  color: #0f766e;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section .ptkt-broker-recommendation-add-form input {
  border-color: #91cfc7;
  color: #134e4a;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section .ptkt-broker-recommendation-add-form input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, .14);
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section .ptkt-broker-recommendation-add-form button {
  border-color: #0f766e;
  background: #0f766e;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section .ptkt-broker-recommendation-add-form button:hover {
  background: #115e59;
}

@media (min-width: 901px) {
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section > table.ptkt-broker-watchlist-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Khung hẹp vẫn có đầy đủ sổ khuyến nghị Broker. Thay vì ẩn cột nghiệp vụ,
   mỗi bảng cuộn ngang nội bộ để thao tác ngày/giá/tỷ trọng luôn sử dụng được. */
@media (max-width: 900px) {
  #ptkt .ptkt-broker-advisory-modal {
    padding: 5px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__dialog {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
    border-color: #75a9cf;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__header {
    min-height: 39px;
    padding: 6px 8px 6px 10px;
    border-bottom-color: #b9d4e8;
    background: linear-gradient(90deg, #eff8ff, #f8fbff);
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__header > strong {
    color: #075985;
    font-size: 12px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__content {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    padding: 5px;
    overflow: auto;
    background: #f6fbff;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section > table.ptkt-broker-watchlist-table {
    width: 1080px !important;
    min-width: 1080px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  /* Override quy tắc popup thông thường: những cột này là cốt lõi của sổ
     khuyến nghị và phải hiện cả trên điện thoại. */
  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-cell,
  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-pnl-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-pnl-cell {
    display: table-cell !important;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input,
  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-input,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input {
    height: 28px;
    font-size: 12px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input {
    width: 110px;
    padding: 2px 5px;
    border: 1px solid #9ec5df;
    border-radius: 4px;
    color: #12334a;
    text-align: center;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-input {
    width: 82px;
    text-align: center;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input {
    width: 76px;
    text-align: center;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-sale-button {
    min-width: 58px;
    height: 29px;
    font-size: 12px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics table {
    min-width: 760px;
  }
}

@media (max-width: 700px) {
  #ptkt #ptkt-broker-groups-section {
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 7px;
  }

  #ptkt #ptkt-broker-groups-section > div {
    width: 100%;
  }

  #ptkt .ptkt-manage-recommendations-button {
    min-height: 29px;
    padding-inline: 8px;
    font-size: 10px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-heading {
    grid-template-columns: 1fr auto;
    gap: 5px;
    padding: 6px 7px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-heading > strong {
    grid-column: 2;
    font-size: 12px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form {
    grid-column: 1;
  }
}

/* STT hai bảng khuyến nghị cùng bề rộng. Có dấu + thì dấu nằm trái và số
   nằm phải; chưa có vị thế để mua thêm thì số thứ tự tự căn chính giữa ô. */
@media (min-width: 901px) {
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-short-term-table > colgroup.ptkt-broker-watchlist-columns > .ptkt-broker-column--stt {
    width: 4% !important;
  }
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-layout.is-solo {
  justify-content: center !important;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-layout.is-solo .stt-action-trigger {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center;
}

/* Thời gian HOLD vẫn có thể chọn bằng cách bấm vào ô, nhưng không hiển thị
   mũi tên native để phần tiêu đề/bảng gọn và đồng nhất hơn. */
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3px !important;
  background-image: none !important;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input::-ms-expand {
  display: none;
}

/* Nút STT là vùng mở popup xóa ở cả NGẮN HẠN lẫn TRUNG DÀI HẠN. */
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-cell {
  display: table-cell !important;
  padding: 3px 4px !important;
  overflow: visible !important;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-layout {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-trigger {
  flex: 0 0 auto;
  width: auto !important;
  margin-left: auto;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  text-align: right;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-trigger:hover,
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-trigger:focus-visible {
  outline: none;
  border-radius: 4px;
  background: #e0f2fe;
  box-shadow: 0 0 0 1px #7dd3fc;
}

/* Thanh phân bổ của sổ khuyến nghị nằm cạnh nhãn TÍN HIỆU AIMAXSTOCK. Mỗi
   bảng sở hữu dữ liệu riêng nên NGẮN HẠN và TRUNG DÀI HẠN luôn hiển thị đúng
   tỷ trọng Hold/Sức mua của chính danh sách đó. */
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-signal-group-content {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  vertical-align: middle;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-allocation {
  flex: 0 1 230px;
  grid-template-columns: minmax(28px, auto) minmax(104px, 1fr) minmax(28px, auto);
  width: 210px;
  min-width: 170px;
  max-width: 230px;
  margin: 0;
  padding: 3px 5px;
  border-color: rgba(191, 229, 250, .9);
  background: rgba(255, 255, 255, .94);
  box-shadow: inset 0 1px 1px rgba(15, 78, 112, .08);
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-allocation .ptkt-customer-allocation__value {
  font-size: 10px;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-allocation .ptkt-customer-allocation__bar {
  height: 9px;
}

@media (max-width: 900px) {
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-signal-group-content {
    gap: 6px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-allocation {
    flex-basis: 180px;
    width: 180px;
    min-width: 150px;
    grid-template-columns: minmax(25px, auto) minmax(82px, 1fr) minmax(25px, auto);
  }
}

/* Popup quản lý sổ khuyến nghị: tách nội dung thành hai tab, để lịch sử
   giao dịch không còn kéo dài bên dưới hai bảng vị thế. */
#ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  padding: 9px 10px 0;
  border-bottom: 1px solid #b9d9ec;
  background: linear-gradient(90deg, #eef8ff, #f8fcff);
  box-sizing: border-box;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab {
  min-height: 34px;
  padding: 7px 15px;
  border: 1px solid #b6d5e8;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #e8f3fa;
  color: #35627d;
  font: 800 12px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: .15px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab:hover {
  border-color: #73b4d8;
  background: #dceffb;
  color: #075985;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab[aria-selected="true"] {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  border-color: #1684ba;
  border-bottom: 1px solid #fff;
  background: #fff;
  color: #075985;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab-panel {
  width: 100%;
  min-width: 0;
  padding: 0 10px 10px;
  box-sizing: border-box;
}

#ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab-panel[hidden] {
  display: none !important;
}

/* Nút lọc nằm gọn ở góc phải tiêu đề cột của bảng THỐNG KÊ TƯ VẤN. Giá trị
   đã chọn được giữ trên dòng thứ hai của chính tiêu đề để dễ nhận biết. */
#ptkt .ptkt-broker-advice-statistics__table .ptkt-broker-statistics-filter-header {
  position: relative;
  min-height: 42px;
  padding: 5px 25px 4px 5px !important;
  vertical-align: middle;
  white-space: normal;
}

#ptkt .ptkt-broker-statistics-filter-label,
#ptkt .ptkt-broker-statistics-filter-summary {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ptkt .ptkt-broker-statistics-filter-summary {
  min-height: 11px;
  margin-top: 2px;
  color: #0f766e;
  font: 800 9px/1.1 "Segoe UI", Arial, sans-serif;
}

#ptkt .ptkt-broker-statistics-filter-button {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  width: 18px;
  height: 18px;
  padding: 3px;
  border: 1px solid #a9cae0;
  border-radius: 4px;
  place-items: center;
  transform: translateY(-50%);
  background: #f8fcff;
  color: #28759e;
  cursor: pointer;
}

#ptkt .ptkt-broker-statistics-filter-button:hover,
#ptkt .ptkt-broker-statistics-filter-button.is-active {
  border-color: #0284c7;
  background: #dff3ff;
  color: #0369a1;
}

#ptkt .ptkt-broker-statistics-filter-button svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.ptkt-broker-statistics-filter-popover {
  position: fixed;
  z-index: 5300;
  width: min(244px, calc(100vw - 16px));
  padding: 11px;
  border: 1px solid #8fbad4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
  box-sizing: border-box;
}

.ptkt-broker-statistics-filter-popover > strong {
  display: block;
  margin-bottom: 9px;
  color: #075985;
  font: 800 12px/1 "Segoe UI", Arial, sans-serif;
}

.ptkt-broker-statistics-filter-popover form {
  display: grid;
  gap: 8px;
}

.ptkt-broker-statistics-filter-popover label {
  display: grid;
  gap: 4px;
  color: #334155;
  font: 700 11px/1.1 "Segoe UI", Arial, sans-serif;
}

.ptkt-broker-statistics-filter-popover select,
.ptkt-broker-statistics-filter-popover input {
  width: 100%;
  height: 30px;
  padding: 4px 7px;
  border: 1px solid #aac9dc;
  border-radius: 5px;
  outline: none;
  color: #12334a;
  font: 600 12px/1 "Segoe UI", Arial, sans-serif;
  box-sizing: border-box;
}

.ptkt-broker-statistics-filter-popover select:focus,
.ptkt-broker-statistics-filter-popover input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, .16);
}

.ptkt-broker-statistics-filter-popover footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
}

.ptkt-broker-statistics-filter-reset,
.ptkt-broker-statistics-filter-apply {
  height: 28px;
  padding: 3px 10px;
  border-radius: 5px;
  font: 800 11px/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.ptkt-broker-statistics-filter-reset {
  border: 1px solid #b9cddd;
  background: #f8fafc;
  color: #475569;
}

.ptkt-broker-statistics-filter-apply {
  border: 1px solid #0284c7;
  background: #0284c7;
  color: #fff;
}

.ptkt-broker-statistics-filter-error {
  min-height: 0;
  margin: 0;
  color: #dc2626;
  font: 600 10px/1.25 "Segoe UI", Arial, sans-serif;
}

@media (max-width: 700px) {
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tabs {
    gap: 3px;
    padding: 6px 5px 0;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab {
    flex: 1 1 0;
    min-height: 31px;
    padding: 6px 5px;
    font-size: 10px;
    white-space: nowrap;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab-panel {
    padding: 0 0 6px;
  }
}

/* Bản mobile của popup QUẢN LÝ DANH SÁCH KHUYẾN NGHỊ. Toàn bộ nghiệp vụ vẫn
   giữ trong bảng đầy đủ; bảng cuộn ngang nội bộ, còn popup/tabs cuộn dọc độc
   lập để không đẩy nội dung ra khỏi khung nhìn. */
@media (max-width: 900px) {
  #ptkt .ptkt-broker-advisory-modal {
    align-items: stretch;
    padding: 0;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__dialog {
    flex: 1 1 auto;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__header {
    min-height: 48px;
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__header > strong {
    font-size: 13px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__close {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    font-size: 25px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-table-modal__content {
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-table-box {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 7px 6px 0;
    box-shadow: 0 2px 7px rgba(15, 72, 112, .13);
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 7px 8px;
    overflow: hidden;
    font-size: 11px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab-panel {
    padding: 0 6px 10px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics {
    margin-top: 8px;
    border-radius: 7px;
    scrollbar-width: thin;
    scrollbar-color: #77abc8 #e7f1f7;
    touch-action: pan-x pan-y;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section::-webkit-scrollbar,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics::-webkit-scrollbar,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-lot-selection-dialog__table::-webkit-scrollbar {
    height: 7px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section::-webkit-scrollbar-thumb,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics::-webkit-scrollbar-thumb,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-lot-selection-dialog__table::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #78abc7;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section > table.ptkt-broker-watchlist-table {
    width: 1080px !important;
    min-width: 1080px !important;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics table {
    min-width: 940px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7px;
    min-height: 0;
    padding: 9px 10px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__title {
    min-width: 0;
    gap: 5px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__title strong {
    font-size: 12px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__actions {
    width: 100%;
    justify-content: flex-end;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-export-button,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-import-button {
    min-height: 32px;
    padding-inline: 10px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input,
  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-input,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input {
    min-height: 32px;
  }

  /* Các ô không có dữ liệu vẫn giữ đúng thiết kế chữ thuần đã áp dụng ở
     desktop, chỉ hiện khung khi Broker chạm để nhập/sửa. */
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input.is-empty:not(:focus),
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input:not(.is-empty):not(:focus),
  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-input:not(:focus):not(.is-invalid),
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input:not(:focus):not(.is-invalid) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 560px) {
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-heading > strong {
    grid-column: 1;
    grid-row: 1;
    font-size: 13px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form label {
    flex: 1 1 auto;
    min-width: 0;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form input {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-add-form button {
    min-width: 58px;
    height: 32px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tabs {
    padding-inline: 4px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advisory-tab {
    min-height: 36px;
    padding-inline: 5px;
    font-size: 10px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__title small {
    display: none;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-export-button,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-import-button {
    width: 100%;
    padding-inline: 5px;
    font-size: 10px;
  }

  #ptkt .ptkt-broker-advice-statistics__table .ptkt-broker-statistics-filter-button {
    width: 24px;
    height: 24px;
  }

  #ptkt .ptkt-broker-advice-statistics__table .ptkt-broker-statistics-filter-header {
    min-height: 47px;
    padding-right: 30px !important;
  }

  .ptkt-broker-statistics-filter-popover {
    width: calc(100vw - 24px);
    padding: 13px;
  }

  .ptkt-broker-statistics-filter-popover select,
  .ptkt-broker-statistics-filter-popover input {
    height: 36px;
    font-size: 14px;
  }

  .ptkt-broker-statistics-filter-reset,
  .ptkt-broker-statistics-filter-apply {
    flex: 1 1 0;
    min-height: 34px;
  }
}

@media (max-width: 900px) {
  .ptkt-broker-sale-dialog {
    align-items: flex-end;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .ptkt-broker-sale-dialog__card {
    display: flex;
    flex-direction: column;
    width: min(520px, 100%);
    max-height: min(720px, calc(100dvh - 20px));
    border-radius: 12px;
  }

  .ptkt-broker-sale-dialog__card > header {
    flex: 0 0 auto;
    padding: 12px;
  }

  .ptkt-broker-sale-dialog__card > header strong {
    font-size: 13px;
  }

  .ptkt-broker-sale-dialog__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 13px;
    -webkit-overflow-scrolling: touch;
  }

  .ptkt-broker-sale-dialog__body input {
    height: 38px;
    font-size: 15px;
  }

  .ptkt-broker-sale-dialog__summary {
    flex-wrap: wrap;
    align-items: flex-start;
    line-height: 1.35;
  }

  .ptkt-broker-sale-dialog__card > footer {
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }

  .ptkt-broker-sale-dialog__card > footer button {
    min-height: 36px;
  }

  .ptkt-broker-sale-dialog__card > footer .ptkt-broker-open-positions-button {
    flex: 1 0 100%;
    margin: 0;
  }

  .ptkt-broker-sale-dialog__cancel,
  .ptkt-broker-sale-dialog__confirm,
  .ptkt-broker-trade-delete-confirm,
  .ptkt-broker-trade-edit-confirm {
    flex: 1 1 0;
  }

  .ptkt-broker-lot-selection-dialog__table {
    padding-bottom: 5px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .ptkt-broker-lot-table {
    min-width: 620px;
  }

  .ptkt-broker-trade-actions-popover {
    min-width: 132px;
  }
}

@media (hover: none) and (pointer: coarse) {
  /* Tooltip hover không hữu ích trên cảm ứng; thao tác Bán vẫn mở bảng chọn
     vị thế khi chạm, nên không che nội dung hoặc làm kẹt thao tác. */
  .ptkt-broker-sale-tooltip {
    display: none !important;
  }
}

/* Giữ nguyên ngôn ngữ hình ảnh của bản desktop cho bảng thật bên trong popup
   mobile. Các quy tắc gốc của phần này từng nằm trong media desktop nên khi
   thu hẹp, browser chỉ còn cách vẽ bảng mặc định. */
@media (max-width: 900px) {
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-heading {
    min-height: 42px;
    border-bottom: 1px solid #b9d9ec;
    background: linear-gradient(90deg, #eff8ff, #f8fcff);
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-heading > strong {
    color: #075985;
    font-weight: 800;
    letter-spacing: .7px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section > .ptkt-broker-recommendation-heading {
    border-bottom-color: #a7ddd5;
    background: linear-gradient(90deg, #effcf9, #f8fffd);
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-long-term-section > .ptkt-broker-recommendation-heading > strong {
    color: #0f766e;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-section > table.ptkt-broker-watchlist-table {
    overflow: hidden;
    border: 1px solid #c9ddea;
    border-radius: 0 0 7px 7px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table th,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table td {
    box-sizing: border-box;
    padding: 5px 4px;
    border-color: #dceaf3;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 12px;
    vertical-align: middle;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th {
    border-color: #b9d4e8;
    background: #eaf5fd;
    color: #0c4a6e;
    font-weight: 800;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-signal-group-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-group-header {
    height: 31px;
    padding: 6px 10px;
    font: 800 11px/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: .35px;
    text-align: center;
    white-space: nowrap;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-signal-group-header {
    border-color: #0369a1;
    background: linear-gradient(90deg, #0369a1, #0284c7) !important;
    color: #fff !important;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-recommendation-group-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-date-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-hold-period-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-modal-cost-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-modal-pnl-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-t-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-weight-header,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table thead > tr:not(.ptkt-broker-header-groups) > th.ptkt-broker-sale-header {
    border-color: #9edac1;
    border-bottom-color: #76c69f;
    background: linear-gradient(180deg, #edfcf3, #dff7e9) !important;
    color: #047857 !important;
    box-shadow: inset 0 2px 0 #b9ebd0;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-serial-header {
    background: #dbeafe !important;
    color: #075985 !important;
    font-weight: 800;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-watchlist-table tbody tr:nth-child(even) {
    background: #f8fbfd;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-date-input {
    width: 110px;
    padding: 2px 5px;
    border: 1px solid #9ec5df;
    border-radius: 5px;
    color: #12334a;
    font: 700 12px/1 "Segoe UI", Arial, sans-serif;
    text-align: center;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-modal-cost-input {
    width: 82px;
    padding: 2px 5px;
    border: 1px solid #9ec5df;
    border-radius: 5px;
    background: #fff;
    color: #12334a;
    font: 700 12px/1 "Segoe UI", Arial, sans-serif;
    text-align: center;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-weight-input {
    width: 76px;
    padding: 2px 5px;
    border: 1px solid #8bc9aa;
    border-radius: 5px;
    background: #fff;
    color: #065f46;
    font: 800 12px/1 "Segoe UI", Arial, sans-serif;
    text-align: center;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input {
    width: 94px;
    max-width: 94px;
    padding: 2px 4px !important;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #0f766e;
    font: 800 11px/1 "Segoe UI", Arial, sans-serif;
    text-align: center;
    text-align-last: center;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-hold-period-input:focus {
    border-color: #5eead4;
    background: #f0fdfa;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, .12);
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-t-badge {
    display: inline-block;
    min-width: 32px;
    padding: 4px 6px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font: 800 11px/1 "Segoe UI", Arial, sans-serif;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-sale-button {
    min-width: 62px;
    min-height: 32px;
    padding: 3px 10px;
    border: 1px solid #dc2626;
    border-radius: 6px;
    background: linear-gradient(180deg, #fb7185, #dc2626);
    color: #fff;
    font: 800 12px/1 "Segoe UI", Arial, sans-serif;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-sale-button:disabled {
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #94a3b8;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-add-recommendation-button {
    display: grid;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #10b981;
    border-radius: 50%;
    place-items: center;
    background: #ecfdf5;
    color: #047857;
    font: 800 17px/1 "Segoe UI", Arial, sans-serif;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics {
    width: 100%;
    overflow: auto;
    border: 1px solid #bfd7ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__header {
    border-bottom: 1px solid #c8deee;
    background: linear-gradient(90deg, #edf8ff, #f8fcff);
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__title {
    display: flex;
    align-items: baseline;
    color: #075985;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__title > span {
    color: #0284c7;
    font-size: 16px;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__title strong {
    font-weight: 800;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__title small {
    color: #64748b;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-export-button {
    border: 1px solid #15803d;
    border-radius: 5px;
    background: #f0fdf4;
    color: #166534;
    font-weight: 800;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-import-button {
    border: 1px solid #0284c7;
    border-radius: 5px;
    background: #f0f9ff;
    color: #075985;
    font-weight: 800;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__table {
    border-collapse: collapse;
    background: #fff;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__table th {
    padding: 7px 9px;
    border-right: 1px solid #d9e8f2;
    background: #f1f7fb;
    color: #164e63;
    font: 800 12px/1.2 "Segoe UI", Tahoma, Arial, sans-serif;
    text-align: center;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__table td {
    padding: 7px 9px;
    border-top: 1px solid #e2edf4;
    color: #1e293b;
    font: 600 12px/1.25 "Segoe UI", Tahoma, Arial, sans-serif;
    text-align: center;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__table tbody tr:nth-child(even) {
    background: #f8fbfd;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-advice-statistics__ticker {
    color: #075985 !important;
    font-weight: 800;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-action-trigger {
    min-width: 27px;
    min-height: 27px;
    border: 1px solid #7dd3fc;
    border-radius: 4px;
    background: #f0f9ff;
    color: #0369a1;
    font-weight: 800;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-result,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-weight,
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-day {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 999px;
    font-weight: 800;
  }

  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-result--profit { background: #dcfce7; color: #15803d; }
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-result--loss { background: #fee2e2; color: #dc2626; }
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-result--flat { background: #fef3c7; color: #a16207; }
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-weight { background: #dff7e9; color: #047857; }
  #ptkt .ptkt-broker-advisory-modal .ptkt-broker-trade-day { background: #e0f2fe; color: #0369a1; }
}

/* ==========================================================================
   HTML template styles migrated to this shared stylesheet
   ========================================================================== */

/* ===== Migrated from base.html ===== */
/* Lời mời đăng ký là CTA độc lập trong thanh navbar: nhỏ gọn, đồng
           bộ với màu nhận diện AIMAXSTOCK, nhưng không thay đổi URL/hành vi
           do template navbar hiện có cung cấp. */
        #navbar .navbar-register-control {
            position: relative;
            z-index: 2;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 0 0 auto;
            min-height: 31px;
            margin: 0 5px 0 4px !important;
            padding: 0 11px !important;
            overflow: hidden;
            border: 1px solid rgba(166, 236, 255, .72) !important;
            border-radius: 9px !important;
            background: linear-gradient(135deg, #0999d2 0%, #0875bf 54%, #07599f 100%) !important;
            box-shadow: 0 3px 9px rgba(4, 76, 135, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
            color: #fff !important;
            font: 700 12px/1 "Segoe UI", Arial, sans-serif;
            letter-spacing: .01em;
            text-decoration: none !important;
            text-shadow: 0 1px 1px rgba(0, 48, 88, .3);
            white-space: nowrap;
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }

        #navbar .navbar-register-control::after {
            position: absolute;
            inset: 0 auto 0 -42%;
            width: 38%;
            background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .31), transparent);
            content: "";
            pointer-events: none;
            transform: skewX(-20deg);
            transition: transform .42s ease;
        }

        #navbar .navbar-register-control:hover,
        #navbar .navbar-register-control:focus-visible {
            filter: saturate(1.07) brightness(1.04);
            box-shadow: 0 5px 13px rgba(4, 76, 135, .36), inset 0 1px 0 rgba(255, 255, 255, .34);
            color: #fff !important;
            outline: none;
            transform: translateY(-1px);
        }

        #navbar .navbar-register-control:hover::after,
        #navbar .navbar-register-control:focus-visible::after {
            transform: translateX(390%) skewX(-20deg);
        }

        #navbar .navbar-register-control:focus-visible {
            outline: 2px solid #7ce6ff;
            outline-offset: 2px;
        }

        #navbar .navbar-register-icon {
            position: relative;
            z-index: 1;
            display: inline-grid;
            width: 16px;
            height: 16px;
            place-items: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, .18);
        }

        #navbar .navbar-register-icon svg {
            width: 11px;
            height: 11px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 2.1;
        }

        #navbar .navbar-register-label {
            position: relative;
            z-index: 1;
        }

        @media (max-width: 640px) {
            #navbar .navbar-register-control {
                width: 32px;
                min-width: 32px;
                margin-right: 3px !important;
                padding: 0 !important;
                border-radius: 8px !important;
            }

            #navbar .navbar-register-label {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                clip-path: inset(50%);
                white-space: nowrap;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            #navbar .navbar-register-control,
            #navbar .navbar-register-control::after {
                transition: none;
            }
        }

html body .migrated-inline-base-1.migrated-inline-base-1.migrated-inline-base-1 { top: 80px; z-index: 1055; }
html body .migrated-inline-base-2.migrated-inline-base-2.migrated-inline-base-2 { max-width: 420px; width: 100%; }

/* ===== Migrated from gioithieu.html ===== */
.aimax-intro {
    --ink: #082a4d;
    --blue: #067bb7;
    --teal: #057d6b;
    --mint: #c9f3df;
    --muted: #61768e;
    --line: rgba(23, 100, 153, .16);
    --shadow: 0 22px 60px rgba(12, 65, 106, .14);
    box-sizing: border-box;
    overflow: hidden;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 88% 2%, rgba(62, 181, 240, .16), transparent 28rem), linear-gradient(180deg, #f5fbff 0%, #fff 45%, #effaff 100%);
  }
  /* Ẩn thanh cuộn của riêng trang giới thiệu, nhưng vẫn giữ nguyên khả năng
     cuộn bằng chuột, trackpad, bàn phím và thao tác chạm. */
  html:has(.aimax-intro), body:has(.aimax-intro) { -ms-overflow-style: none; scrollbar-width: none; }
  html:has(.aimax-intro)::-webkit-scrollbar, body:has(.aimax-intro)::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .aimax-intro *, .aimax-intro *::before, .aimax-intro *::after { box-sizing: border-box; }
  .ai-wrap { width: min(1180px, calc(100% - 48px)); margin: auto; }

  .ai-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(62px, 8vw, 108px) 0 92px; background: linear-gradient(180deg, rgba(255,255,255,0) 56%, #fff 100%), radial-gradient(circle at 86% 4%, rgba(91,218,232,.34), transparent 24rem), linear-gradient(126deg, #f3fdff 0%, #e2f8ff 53%, #ebfff8 100%); }
  .ai-hero::before { position: absolute; z-index: -1; inset: 0; opacity: .2; background: linear-gradient(90deg, rgba(227,249,255,.76), rgba(219,248,253,.47) 52%, rgba(228,255,248,.15)), url("../hero-ai-chart.8e2fb9b6defa.png") center / cover no-repeat; content: ""; mask-image: linear-gradient(180deg, #000 0 61%, transparent 100%); }
  .ai-hero::after { position: absolute; z-index: -1; width: 570px; height: 570px; right: -180px; bottom: -330px; border: 1px solid rgba(28,159,180,.26); border-radius: 50%; box-shadow: 0 0 0 52px rgba(89,210,205,.1), 0 0 0 123px rgba(89,210,205,.05); content: ""; }
  .ai-hero-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(310px, .87fr); align-items: center; gap: clamp(36px, 7vw, 100px); }
  .ai-eyebrow, .ai-section-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; color: #d5f5ff; font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }
  .ai-hero .ai-eyebrow { padding: 7px 11px; border: 1px solid rgba(65,169,188,.27); border-radius: 99px; color: #08756d; background: rgba(255,255,255,.64); }
  .ai-eyebrow::before { width: 9px; height: 9px; border-radius: 50%; background: #78e5b6; box-shadow: 0 0 0 5px rgba(120, 229, 182, .16); content: ""; }
  .ai-hero .ai-eyebrow::before { width: 7px; height: 7px; background: #09aa83; box-shadow: 0 0 0 4px rgba(9,170,131,.13); }
  .ai-brand { display: flex; align-items: center; gap: 17px; margin-bottom: 23px; }
  /* Logo badge: tạo chiều sâu tinh tế bằng hai lớp viền và nền kính mờ,
     thay cho khung trắng đơn giản trước đây. */
  .ai-brand-mark { position: relative; display: grid; width: 70px; height: 70px; flex: 0 0 70px; place-items: center; padding: 7px; border: 1px solid rgba(33, 151, 177, .38); border-radius: 22px; background: radial-gradient(circle at 50% 48%, rgba(6, 132, 171, .56) 0%, rgba(20, 166, 184, .38) 30%, rgba(111, 211, 216, .2) 62%, rgba(229, 250, 250, .08) 100%); box-shadow: 0 14px 30px rgba(29,126,154,.16), inset 0 1px 0 rgba(228,255,253,.46); }
  .ai-brand-mark::before { position: absolute; inset: 4px; border: 1px solid rgba(176, 244, 238, .36); border-radius: 17px; background: radial-gradient(circle at center, rgba(7, 118, 158, .16), transparent 69%); content: ""; pointer-events: none; }
  .ai-brand-mark::after { position: absolute; width: 10px; height: 10px; top: -4px; right: -4px; border: 2px solid #f6fdff; border-radius: 50%; background: #16b98d; box-shadow: 0 3px 8px rgba(10, 130, 112, .22); content: ""; }
  .ai-brand-mark img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; border: 3px solid rgba(255,255,255,.96); border-radius: 50%; background: transparent; box-shadow: 0 4px 11px rgba(42, 78, 143, .17), 0 0 0 1px rgba(8, 123, 160, .16); mix-blend-mode: normal; object-fit: cover; }
  .ai-brand h1 { margin: 0; color: #075c87; font-size: clamp(33px, 4vw, 55px); font-weight: 850; letter-spacing: -.055em; line-height: .94; }
  .ai-brand > div > span { display: block; margin-top: 9px; color: #39758c; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .ai-hero-description { position: relative; max-width: 700px; margin: 0; padding: 19px 22px 20px; border: 1px solid rgba(65,169,188,.27); border-radius: 16px; color: #174b69; background: rgba(255,255,255,.64); box-shadow: 0 14px 34px rgba(29,126,154,.1); font-size: clamp(17px, 1.7vw, 20px); letter-spacing: -.015em; line-height: 1.7; backdrop-filter: blur(7px); }
  .ai-hero-description::before { position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; border-radius: 0 6px 6px 0; background: #0da782; content: ""; }
  .ai-hero-description strong { padding: 0; color: #075c87; background: none; font-weight: 850; text-decoration: none; }
  .ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
  .ai-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 49px; padding: 0 22px; border: 1px solid rgba(255,255,255,.45); border-radius: 13px; color: #06385e; background: linear-gradient(135deg, #b9f2d7, #eafff2); box-shadow: 0 12px 30px rgba(0,20,42,.24); font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
  .ai-button:hover { color: #06385e; box-shadow: 0 16px 34px rgba(0,20,42,.33); transform: translateY(-2px); }
  .ai-button svg { width: 16px; height: 16px; }
  .ai-trial-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 49px; padding: 0 20px; border: 1px solid rgba(208,255,229,.82); border-radius: 13px; color: #07395e; background: linear-gradient(135deg, #93edbf, #edffdf); box-shadow: 0 12px 30px rgba(0,20,42,.24); font-size: 14px; font-weight: 850; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
  .ai-trial-button span { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; color: #fff; background: #078562; font-size: 10px; letter-spacing: .02em; }
  .ai-trial-button:hover { color: #06385e; background: #fff; box-shadow: 0 16px 34px rgba(0,20,42,.33); transform: translateY(-2px); }
  .ai-trial-button svg { width: 16px; height: 16px; }
  .ai-trust { display: inline-flex; align-items: center; gap: 8px; color: #39758c; font-size: 12px; font-weight: 600; }
  .ai-trust svg { width: 17px; height: 17px; color: #0da782; }

  .ai-insight { position: relative; display: grid; gap: 16px; padding: clamp(22px, 3vw, 31px); border: 1px solid rgba(220,249,255,.42); border-radius: 24px; background: linear-gradient(145deg, rgba(11,111,155,.74), rgba(4,76,119,.68)); box-shadow: 0 26px 52px rgba(0,62,97,.2); backdrop-filter: blur(12px); }
  .ai-insight::before { position: absolute; top: 0; right: 26px; left: 26px; height: 2px; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, transparent, #78e5b6, transparent); content: ""; }
  .ai-insight-label { margin: 0; color: #b5deed; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .ai-insight h2 { margin: 0; color: #fff; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.03em; line-height: 1.28; }
  .ai-insight ul { display: grid; gap: 9px; margin: 3px 0 0; padding: 0; list-style: none; }
  .ai-insight li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(203,237,250,.15); color: rgba(234,248,255,.89); font-size: 14px; line-height: 1.45; }
  .ai-insight li:last-child { border-bottom: 0; }
  .ai-insight li svg { width: 19px; height: 19px; flex: 0 0 19px; color: #7ce7b8; }
  .ai-insight strong { color: #fff; }

  .ai-showcase { padding: 39px 0 18px; }
  .ai-heading { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: stretch; gap: clamp(26px, 4vw, 60px); margin-bottom: 20px; padding: clamp(24px, 3.2vw, 35px) clamp(24px, 4vw, 43px); overflow: hidden; border: 1px solid rgba(38,130,183,.16); border-radius: 22px; background: linear-gradient(118deg, rgba(255,255,255,.98) 0%, rgba(241,250,255,.94) 64%, rgba(232,249,255,.98) 100%); box-shadow: 0 12px 32px rgba(17,80,122,.07); }
  .ai-heading::before { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: linear-gradient(180deg, #15a9d7, #0c78b4); content: ""; }
  .ai-heading::after { position: absolute; width: 260px; height: 260px; right: -116px; bottom: -172px; border: 1px solid rgba(59,169,214,.16); border-radius: 50%; box-shadow: 0 0 0 28px rgba(59,169,214,.05), 0 0 0 61px rgba(59,169,214,.03); content: ""; }
  .ai-heading-primary, .ai-heading-summary { position: relative; z-index: 1; }
  .ai-heading-topline { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
  .ai-section-kicker { margin: 0; color: var(--blue); font-size: 11px; letter-spacing: .13em; }
  .ai-section-kicker::before { width: 21px; height: 2px; background: currentColor; content: ""; }
  .ai-heading-number { display: inline-grid; width: 30px; height: 24px; place-items: center; border: 1px solid #b5deef; border-radius: 7px; color: #0b7bac; background: #effaff; font-size: 11px; font-weight: 850; letter-spacing: .05em; }
  .ai-heading h2 { max-width: 780px; margin: 0; color: var(--ink); font-size: clamp(27px, 3.1vw, 43px); font-weight: 850; letter-spacing: -.055em; line-height: 1.1; }
  .ai-heading-summary { align-self: center; padding: 18px 19px 18px 21px; border: 1px solid rgba(64,154,199,.19); border-radius: 14px; background: rgba(255,255,255,.7); box-shadow: 0 8px 20px rgba(36,112,152,.06); }
  .ai-heading-summary::before { position: absolute; top: 18px; bottom: 18px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: #70d8a8; content: ""; }
  .ai-heading-summary-label { display: block; margin-bottom: 7px; color: #13817a; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
  .ai-heading-summary p { margin: 0; color: #55738d; font-size: 14px; line-height: 1.62; }

  .ai-slider-shell { position: relative; overflow: hidden; border: 1px solid rgba(20,108,162,.21); border-radius: 24px; background: #082d4d; box-shadow: var(--shadow); }
  .ai-slider-shell::before { position: absolute; z-index: 5; top: 19px; left: 20px; width: 10px; height: 10px; border-radius: 50%; background: #ff6e6e; box-shadow: 18px 0 #ffca5d, 36px 0 #69db9a; content: ""; }
  .ai-slider { position: relative; aspect-ratio: 16 / 8.7; min-height: 265px; overflow: hidden; background: #082d4d; }
  /* Ảnh minh hoạ có nhiều tỉ lệ khác nhau. Dùng contain thay vì cover để
     không cắt mất biểu đồ hay phần nội dung ở hai cạnh. */
  .ai-slide { position: absolute; inset: 0; opacity: 0; background-color: #082d4d; background-position: center; background-repeat: no-repeat; background-size: contain; cursor: zoom-in; pointer-events: none; transform: none; transition: opacity .62s ease; }
  .ai-slide::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,28,51,.23), transparent 43%, rgba(1,24,44,.57)); content: ""; }
  .ai-slide.is-active { z-index: 1; opacity: 1; pointer-events: auto; transform: none; }
  .ai-slide-note { position: absolute; z-index: 2; right: 23px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.46); border-radius: 99px; color: #fff; background: rgba(3,33,55,.58); backdrop-filter: blur(7px); font-size: 12px; font-weight: 700; }
  .ai-slide-note svg { width: 15px; height: 15px; }
  .ai-slider-controls { position: absolute; z-index: 6; top: 50%; right: 18px; left: 18px; display: flex; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
  .ai-arrow, .ai-lightbox-close { display: inline-grid; width: 43px; height: 43px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; color: #073b62; background: rgba(255,255,255,.93); box-shadow: 0 8px 20px rgba(0,23,43,.16); cursor: pointer; pointer-events: auto; transition: transform .2s ease, background .2s ease; }
  .ai-arrow:hover, .ai-lightbox-close:hover { background: #fff; transform: scale(1.06); }
  .ai-arrow svg { width: 20px; height: 20px; }
  .ai-slider-bottom { position: absolute; z-index: 6; right: 19px; bottom: 18px; left: 19px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .ai-dots { display: flex; gap: 7px; align-items: center; }
  .ai-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.53); cursor: pointer; transition: width .25s ease, background .25s ease; }
  .ai-dot.is-active { width: 25px; background: #85ebbc; }
  .ai-count { color: rgba(255,255,255,.91); font-size: 12px; font-weight: 800; letter-spacing: .09em; }

  .ai-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
  .ai-card { min-height: 176px; padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 10px 25px rgba(15,69,108,.05); }
  .ai-card-icon { display: grid; width: 40px; height: 40px; margin-bottom: 17px; place-items: center; border-radius: 12px; color: #05699e; background: #e1f5ff; }
  .ai-card-icon svg { width: 21px; height: 21px; }
  .ai-card:nth-child(2) .ai-card-icon { color: #087554; background: #dcf9ea; }
  .ai-card:nth-child(3) .ai-card-icon { color: #8a5a05; background: #fff3d5; }
  .ai-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
  .ai-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

  .ai-statement-section { padding: 36px 0 44px; }
  .ai-statement { position: relative; isolation: isolate; overflow: hidden; min-height: 365px; padding: clamp(34px, 5.2vw, 64px); border: 1px solid rgba(76,193,217,.42); border-radius: 26px; background: radial-gradient(circle at 88% 0%, rgba(91,218,232,.34), transparent 23rem), linear-gradient(126deg, #f3fdff 0%, #e2f8ff 53%, #ebfff8 100%); box-shadow: 0 22px 50px rgba(22,123,158,.12); }
  .ai-statement::before { position: absolute; z-index: -1; inset: 0; opacity: .55; background-image: linear-gradient(rgba(23,151,184,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(23,151,184,.1) 1px, transparent 1px); background-size: 34px 34px; content: ""; mask-image: linear-gradient(90deg, #000, transparent 78%); }
  .ai-statement::after { position: absolute; z-index: -1; width: 410px; height: 410px; top: -191px; right: -120px; border: 1px solid rgba(28,159,180,.27); border-radius: 50%; box-shadow: 0 0 0 30px rgba(89,210,205,.1), 0 0 0 76px rgba(89,210,205,.06); content: ""; }
  .ai-statement > div:not(.ai-statement-emblem) { position: relative; z-index: 1; max-width: 920px; }
  .ai-statement-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 17px; padding: 7px 11px; border: 1px solid rgba(65,169,188,.27); border-radius: 99px; color: #08756d; background: rgba(255,255,255,.64); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
  .ai-statement-kicker::before { width: 7px; height: 7px; border-radius: 50%; background: #09aa83; box-shadow: 0 0 0 4px rgba(9,170,131,.13); content: ""; }
  .ai-statement-main { margin: 0; color: #174b69; font-size: clamp(19px, 2vw, 27px); font-weight: 500; letter-spacing: -.03em; line-height: 1.52; }
  .ai-statement-main strong { color: #075c87; font-weight: 850; }
  .ai-statement-brand { color: #078172; font-weight: 900; letter-spacing: -.035em; }
  .ai-statement-emphasis { display: block; max-width: 895px; margin: 22px 0 18px; padding: 18px 0 18px 21px; border-left: 3px solid #0da782; color: #073f68; font-size: clamp(21px, 2.42vw, 34px); letter-spacing: -.04em; line-height: 1.3; text-shadow: none; }
  .ai-statement-emblem { position: absolute; z-index: 1; right: clamp(25px, 5vw, 78px); bottom: clamp(28px, 5vw, 59px); display: grid; width: 142px; height: 142px; place-items: center; border: 1px solid rgba(39,159,177,.4); border-radius: 50%; color: #087e89; background: radial-gradient(circle at 35% 25%, rgba(141,240,207,.64), rgba(97,205,226,.24)); box-shadow: inset 0 0 0 12px rgba(255,255,255,.23), 0 16px 28px rgba(29,126,154,.13); }
  .ai-statement-emblem::before, .ai-statement-emblem::after { position: absolute; inset: -11px; border: 1px solid rgba(35,154,172,.24); border-radius: 50%; content: ""; }
  .ai-statement-emblem::after { inset: 18px; border-style: dashed; }
  .ai-statement-emblem span { position: relative; z-index: 1; font-size: 40px; font-weight: 900; letter-spacing: -.09em; }
  .ai-statement-emblem svg { position: absolute; z-index: 1; right: 22px; bottom: 28px; width: 64px; height: 40px; color: #9af3c7; }

  .ai-lightbox { position: fixed; z-index: 2140; inset: var(--app-navbar-height, 32px) 0 0; display: none; align-items: center; justify-content: center; padding: 52px 18px 18px; background: rgba(1,20,38,.86); backdrop-filter: blur(8px); }
  .ai-lightbox.is-open { display: flex; }
  .ai-lightbox img { display: block; width: auto; height: auto; max-width: min(1100px, calc(100vw - 36px)); max-height: calc(100% - 60px); border: 1px solid rgba(255,255,255,.45); border-radius: 13px; box-shadow: 0 25px 70px rgba(0,0,0,.45); object-fit: contain; }
  .ai-lightbox-close { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 32px; height: 32px; color: #fff; background: rgba(15,23,42,.58); }
  .ai-lightbox-close svg { width: 17px; height: 17px; }
  .ai-lightbox-close:hover { color: #073b62; }
  .aimax-intro-footer { padding: 25px 24px 29px; border-top: 1px solid rgba(12,87,136,.12); color: #688097; background: rgba(255,255,255,.72); font-size: 13px; text-align: center; }

  @media (max-width: 820px) { .ai-wrap { width: min(100% - 32px, 680px); } .ai-hero { padding-bottom: 65px; } .ai-hero-grid, .ai-cards { grid-template-columns: 1fr; } .ai-hero-grid { gap: 34px; } .ai-insight { max-width: 610px; } .ai-heading { grid-template-columns: 1fr; gap: 19px; } .ai-heading-summary { max-width: 520px; } .ai-card { min-height: 0; } .ai-statement { min-height: 0; padding-right: clamp(34px, 5.2vw, 64px); } .ai-statement-emblem { top: 29px; right: 29px; bottom: auto; width: 105px; height: 105px; opacity: .46; } .ai-statement-emblem span { font-size: 31px; } .ai-statement-emblem svg { right: 15px; bottom: 19px; width: 48px; } }
  @media (max-width: 560px) { .ai-wrap { width: min(100% - 26px, 500px); } .ai-hero { padding-top: 47px; } .ai-hero::after { right: -250px; bottom: -365px; } .ai-brand { gap: 12px; } .ai-brand-mark { width: 59px; height: 59px; flex-basis: 59px; padding: 5px; border-radius: 18px; } .ai-brand-mark::before { inset: 3px; border-radius: 14px; } .ai-brand-mark img { border-width: 2px; border-radius: 50%; } .ai-brand-mark::after { width: 9px; height: 9px; top: -3px; right: -3px; } .ai-brand h1 { font-size: 32px; } .ai-brand > div > span { margin-top: 6px; font-size: 9px; letter-spacing: .11em; } .ai-hero-description { padding: 16px 18px; font-size: 16px; line-height: 1.64; } .ai-hero-description::before { top: 13px; bottom: 13px; } .ai-actions { align-items: stretch; flex-direction: column; margin-top: 27px; } .ai-button, .ai-trial-button { width: 100%; } .ai-insight { padding: 22px; border-radius: 19px; } .ai-showcase { padding-top: 27px; } .ai-heading { gap: 17px; padding: 23px 21px 24px 25px; border-radius: 17px; } .ai-heading-number { width: 28px; height: 22px; } .ai-heading h2 { font-size: 28px; line-height: 1.14; } .ai-heading-summary { padding: 15px 16px 15px 18px; border-radius: 12px; } .ai-heading-summary p { font-size: 13px; } .ai-slider-shell { border-radius: 18px; } .ai-slider { min-height: 235px; aspect-ratio: auto; } .ai-slider-controls { top: auto; right: 16px; bottom: 13px; left: auto; gap: 8px; transform: none; } .ai-arrow { width: 36px; height: 36px; } .ai-slider-bottom { right: 16px; bottom: 22px; left: 16px; padding-right: 87px; } .ai-slide-note { right: 16px; bottom: 66px; font-size: 11px; } .ai-statement-section { padding: 26px 0 30px; } .ai-statement { min-height: 0; padding: 29px 22px; border-radius: 19px; } .ai-statement-kicker { margin-bottom: 15px; padding: 6px 9px; font-size: 9px; letter-spacing: .09em; } .ai-statement-main { font-size: 18px; line-height: 1.58; } .ai-statement-emblem { top: auto; right: 17px; bottom: 17px; width: 72px; height: 72px; opacity: .22; } .ai-statement-emblem span { font-size: 24px; } .ai-statement-emblem svg { display: none; } }
  @media (max-width: 560px) { .ai-statement-emphasis { margin: 17px 0 15px; padding: 14px 0 14px 15px; font-size: 20px; } }
  @media (prefers-reduced-motion: reduce) { .aimax-intro *, .aimax-intro *::before, .aimax-intro *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

html body .migrated-inline-gioithieu-1.migrated-inline-gioithieu-1.migrated-inline-gioithieu-1 { background-image:url("../jpg/gioithieu/1.3d1b2a236a80.jpg") }
html body .migrated-inline-gioithieu-2.migrated-inline-gioithieu-2.migrated-inline-gioithieu-2 { background-image:url("../jpg/gioithieu/2.3aea0c4b1c38.jpg") }
html body .migrated-inline-gioithieu-3.migrated-inline-gioithieu-3.migrated-inline-gioithieu-3 { background-image:url("../jpg/gioithieu/3.49bbcb66b1cb.jpg") }
html body .migrated-inline-gioithieu-4.migrated-inline-gioithieu-4.migrated-inline-gioithieu-4 { background-image:url("../jpg/gioithieu/4.9431b4dc2a4a.jpg") }
html body .migrated-inline-gioithieu-5.migrated-inline-gioithieu-5.migrated-inline-gioithieu-5 { background-image:url("../jpg/gioithieu/5.3810ded21d8f.jpg") }
html body .migrated-inline-gioithieu-6.migrated-inline-gioithieu-6.migrated-inline-gioithieu-6 { background-image:url("../jpg/gioithieu/6.7f61bb047d75.jpg") }
html body .migrated-inline-gioithieu-7.migrated-inline-gioithieu-7.migrated-inline-gioithieu-7 { background-image:url("../jpg/gioithieu/7.07169c799a17.jpg") }
html body .migrated-inline-gioithieu-8.migrated-inline-gioithieu-8.migrated-inline-gioithieu-8 { background-image:url("../jpg/gioithieu/8.5cf3974e8d62.jpg") }

/* ===== Migrated from huong_dan_chuyen_id.html ===== */
.broker-transfer-guide {
        --btg-ink: #082f4d;
        --btg-muted: #58748a;
        --btg-blue: #087eb7;
        --btg-teal: #078773;
        --btg-line: rgba(36, 135, 179, .19);
        position: relative;
        isolation: isolate;
        min-height: calc(100dvh - var(--app-navbar-height, 32px));
        padding: 30px 0 58px;
        overflow: hidden;
        color: var(--btg-ink);
        background: radial-gradient(circle at 90% 4%, rgba(78, 213, 218, .19), transparent 27rem), radial-gradient(circle at 5% 91%, rgba(82, 184, 239, .13), transparent 24rem), linear-gradient(180deg, #f5fcff 0%, #fff 52%, #eefaff 100%);
    }
    .broker-transfer-guide::before, .broker-transfer-guide::after { position: absolute; z-index: -1; border: 1px solid rgba(37, 162, 188, .14); border-radius: 50%; content: ""; pointer-events: none; }
    .broker-transfer-guide::before { width: 490px; height: 490px; top: -320px; right: -128px; box-shadow: 0 0 0 54px rgba(68, 204, 204, .045), 0 0 0 120px rgba(68, 204, 204, .025); }
    .broker-transfer-guide::after { width: 330px; height: 330px; bottom: -232px; left: -148px; box-shadow: 0 0 0 38px rgba(68, 169, 231, .035); }
    .btg-shell { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }

    .btg-hero { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 47px); border: 1px solid rgba(50, 155, 193, .22); border-radius: 25px; color: #fff; background: linear-gradient(127deg, #075b83 0%, #087ca5 54%, #0a9a9b 100%); box-shadow: 0 24px 58px rgba(14, 84, 123, .17); }
    .btg-hero::before { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(218, 255, 253, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(218, 255, 253, .15) 1px, transparent 1px); background-size: 38px 38px; content: ""; mask-image: linear-gradient(150deg, #000, transparent 76%); }
    .btg-hero::after { position: absolute; width: 330px; height: 330px; right: -172px; bottom: -194px; border: 1px solid rgba(210, 255, 247, .36); border-radius: 50%; box-shadow: 0 0 0 37px rgba(183, 248, 238, .1), 0 0 0 85px rgba(183, 248, 238, .045); content: ""; }
    .btg-hero > * { position: relative; z-index: 1; }
    .btg-overline { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; color: rgba(229, 255, 251, .92); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
    .btg-overline::before { width: 8px; height: 8px; border-radius: 50%; background: #8df2c8; box-shadow: 0 0 0 5px rgba(141, 242, 200, .16); content: ""; }
    .btg-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 260px); align-items: end; gap: clamp(28px, 6vw, 82px); }
    .btg-hero h1 { max-width: 690px; margin: 0 0 11px; color: #fff; font-size: clamp(31px, 4.3vw, 48px); font-weight: 850; letter-spacing: -.055em; line-height: 1.08; }
    .btg-hero-copy { max-width: 630px; margin: 0; color: rgba(232, 252, 255, .9); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.62; }
    .btg-hero-panel { padding: 20px; border: 1px solid rgba(220, 255, 250, .28); border-radius: 18px; background: rgba(1, 56, 84, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13); backdrop-filter: blur(7px); }
    .btg-hero-count { display: block; color: #fff; font-size: 42px; font-weight: 900; letter-spacing: -.07em; line-height: .95; }
    .btg-hero-panel strong { display: block; margin: 7px 0 5px; color: #b4f4d3; font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
    .btg-hero-panel span:last-child { color: rgba(234, 255, 252, .84); font-size: 12px; line-height: 1.5; }

    .btg-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 20px 0 25px; padding: 8px; border: 1px solid rgba(42, 145, 184, .16); border-radius: 16px; background: rgba(255, 255, 255, .76); box-shadow: 0 9px 25px rgba(19, 88, 127, .05); }
    .btg-progress a { display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid transparent; border-radius: 10px; color: #54738a; background: transparent; font-size: 12px; font-weight: 800; text-decoration: none; transition: color .18s ease, background .18s ease, transform .18s ease; }
    .btg-progress a:hover, .btg-progress a:focus-visible { color: #087aad; background: #eaf9ff; border-color: #c7e8f3; transform: translateY(-1px); }
    .btg-progress a span { display: inline-grid; width: 20px; height: 20px; margin-right: 7px; place-items: center; border-radius: 50%; color: #087db8; background: #dff5fb; font-size: 10px; }

    .btg-steps { display: grid; gap: 20px; }
    .btg-step { position: relative; display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(25px, 4vw, 58px); padding: clamp(22px, 3.4vw, 39px); border: 1px solid var(--btg-line); border-radius: 23px; background: rgba(255, 255, 255, .9); box-shadow: 0 15px 38px rgba(15, 84, 122, .08); }
    .btg-step:nth-child(even) { grid-template-columns: minmax(0, 1.28fr) minmax(230px, .72fr); background: linear-gradient(121deg, rgba(242, 253, 255, .95), rgba(255, 255, 255, .92)); }
    .btg-step:nth-child(even) .btg-step-content { order: 2; }
    .btg-step:nth-child(even) .btg-image-panel { order: 1; }
    .btg-step-content { max-width: 330px; }
    .btg-step-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; color: var(--btg-teal); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
    .btg-step-tag::before { width: 20px; height: 2px; background: currentColor; content: ""; }
    .btg-step-number { display: block; margin-bottom: 9px; color: #d8eff8; font-size: 52px; font-weight: 900; letter-spacing: -.08em; line-height: .8; }
    .btg-step h2 { margin: 0 0 10px; color: var(--btg-ink); font-size: clamp(24px, 3vw, 31px); font-weight: 850; letter-spacing: -.045em; }
    .btg-step p { margin: 0; color: var(--btg-muted); font-size: 14px; line-height: 1.68; }
    .btg-step-hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 7px 10px; border: 1px solid #d5ebf2; border-radius: 9px; color: #36718e; background: #f2fbff; font-size: 11px; font-weight: 750; }
    .btg-step-hint::before { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: #0c9bc3; content: "↗"; font-size: 11px; }

    .btg-image-panel { position: relative; padding: 12px; border: 1px solid rgba(34, 123, 166, .22); border-radius: 18px; background: #082d4b; box-shadow: 0 16px 31px rgba(7, 54, 84, .18); }
    .btg-image-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; padding: 0 7px 9px; color: rgba(225, 249, 255, .8); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
    .btg-image-toolbar::before { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff7373; box-shadow: 16px 0 #ffcf63, 32px 0 #74df9c; content: ""; }
    .btg-image-toolbar span:first-child { margin-left: 37px; }
    .btg-image-toolbar span:last-child { color: #9cefc8; }
    .btg-image-button { display: flex; width: 100%; min-height: 286px; align-items: center; justify-content: center; padding: 10px; border: 0; border-radius: 11px; background: #021e34; cursor: zoom-in; }
    .btg-image-button:focus-visible { outline: 3px solid #88e8ca; outline-offset: 3px; }
    .btg-image-button img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(610px, calc(100dvh - 250px)); margin: 0 auto; border-radius: 5px; object-fit: contain; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
    .btg-image-zoom { position: absolute; right: 25px; bottom: 25px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 99px; color: #fff; background: rgba(2, 35, 57, .72); font-size: 10px; font-weight: 800; pointer-events: none; }

    .btg-footer-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 25px; padding: 14px 17px; border: 1px solid #d3e9f0; border-radius: 14px; color: #527188; background: rgba(255, 255, 255, .74); font-size: 12px; text-align: center; }
    .btg-footer-note strong { color: #087d9a; }
    .btg-footer-note::before { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; color: #087d9a; background: #dff7f2; content: "✓"; font-size: 13px; font-weight: 900; }

    .btg-lightbox { position: fixed; z-index: 100299; inset: var(--app-navbar-height, 32px) 0 0; display: none; align-items: center; justify-content: center; padding: 53px 18px 18px; background: rgba(1, 20, 38, .88); backdrop-filter: blur(8px); }
    .btg-lightbox.is-open { display: flex; }
    .btg-lightbox img { display: block; width: auto; height: auto; max-width: min(1120px, calc(100vw - 36px)); max-height: calc(100% - 32px); border: 1px solid rgba(255, 255, 255, .44); border-radius: 13px; box-shadow: 0 25px 70px rgba(0, 0, 0, .45); object-fit: contain; }
    .btg-lightbox-close { position: fixed; top: calc(var(--app-navbar-height, 32px) + 12px); right: max(12px, env(safe-area-inset-right)); display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .62); border-radius: 50%; color: #fff; background: rgba(15, 23, 42, .58); cursor: pointer; }
    .btg-lightbox-close:hover, .btg-lightbox-close:focus-visible { color: #073b62; background: #fff; }

    /* Desktop: toàn bộ 5 ảnh thành một hành trình theo hàng ngang và vừa
       trong viewport. Người dùng bấm một ảnh để xem toàn kích thước. */
    @media (min-width: 961px) {
        body.btg-desktop-guide { overflow: hidden; }
        .broker-transfer-guide { height: calc(100dvh - var(--app-navbar-height, 32px)); min-height: 0; padding: 12px 0; display: flex; overflow: hidden; }
        .btg-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
        .btg-hero { min-height: 0; padding: 13px 22px 14px; border-radius: 19px; }
        .btg-overline { margin-bottom: 5px; font-size: 9px; }
        .btg-hero-grid { display: block; }
        .btg-hero h1 { margin-bottom: 4px; font-size: clamp(25px, 2.3vw, 34px); letter-spacing: -.045em; }
        .btg-hero-copy { max-width: 760px; font-size: 13px; line-height: 1.45; }
        .btg-hero-panel { position: absolute; top: 13px; right: 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; min-width: 188px; padding: 9px 12px; border-radius: 12px; }
        .btg-hero-count { grid-row: 1 / span 2; font-size: 30px; }
        .btg-hero-panel strong { margin: 0; font-size: 9px; }
        .btg-hero-panel span:last-child { font-size: 10px; }
        .btg-progress { display: none; }
        .btg-steps { min-height: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
        .btg-step, .btg-step:nth-child(even) { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 9px; border-radius: 15px; background: rgba(255, 255, 255, .9); overflow: hidden; }
        .btg-step:nth-child(even) .btg-step-content, .btg-step:nth-child(even) .btg-image-panel { order: initial; }
        .btg-step-content { display: flex; align-items: center; gap: 7px; max-width: none; min-height: 25px; padding: 0 3px; }
        .btg-step-tag, .btg-step p, .btg-step-hint { display: none; }
        .btg-step-number { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; margin: 0; border-radius: 8px; color: #087db8; background: #e0f5fb; font-size: 11px; letter-spacing: 0; line-height: 1; }
        .btg-step h2 { margin: 0; color: #124f71; font-size: 13px; font-weight: 850; letter-spacing: -.02em; white-space: nowrap; }
        .btg-image-panel { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 8px; border-radius: 12px; }
        .btg-image-toolbar { min-height: 18px; padding: 0 3px 6px; font-size: 8px; letter-spacing: .06em; }
        .btg-image-toolbar::before { width: 6px; height: 6px; box-shadow: 11px 0 #ffcf63, 22px 0 #74df9c; }
        .btg-image-toolbar span:first-child { margin-left: 26px; }
        .btg-image-button { min-height: 0; flex: 1; padding: 7px; border-radius: 8px; }
        .btg-image-button img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
        .btg-image-zoom { right: 14px; bottom: 14px; padding: 4px 7px; font-size: 8px; }
        .btg-footer-note { display: none; }
    }

    @media (max-width: 960.98px) {
        .broker-transfer-guide { padding-top: 23px; }
        .btg-shell { width: min(calc(100% - 28px), 620px); }
        .btg-hero { padding: 26px 22px; border-radius: 20px; }
        .btg-hero-grid { grid-template-columns: 1fr; gap: 18px; }
        .btg-hero-panel { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center; padding: 14px; }
        .btg-hero-count { grid-row: 1 / span 2; font-size: 37px; }
        .btg-hero-panel strong { margin: 0 0 2px; }
        .btg-progress { gap: 5px; margin: 16px 0 21px; padding: 6px; }
        .btg-progress a { min-height: 37px; font-size: 0; }
        .btg-progress a span { width: 24px; height: 24px; margin: 0; font-size: 11px; }
        .btg-steps { gap: 16px; }
        .btg-step, .btg-step:nth-child(even) { grid-template-columns: 1fr; gap: 20px; padding: 21px 17px 17px; border-radius: 18px; }
        .btg-step:nth-child(even) .btg-step-content, .btg-step:nth-child(even) .btg-image-panel { order: initial; }
        .btg-step-content { max-width: none; padding: 0 4px; }
        .btg-step-number { margin-bottom: 5px; font-size: 43px; }
        .btg-step h2 { font-size: 26px; }
        .btg-step p { font-size: 13px; }
        .btg-image-button { min-height: 240px; padding: 8px; }
        .btg-image-button img { max-height: min(570px, calc(100dvh - 195px)); }
        .btg-image-zoom { right: 20px; bottom: 20px; }
    }
    @media (max-width: 420px) {
        .btg-shell { width: min(calc(100% - 22px), 520px); }
        .btg-hero h1 { font-size: 29px; }
        .btg-hero-copy { font-size: 14px; }
        .btg-image-toolbar { font-size: 9px; }
        .btg-image-button { min-height: 210px; }
        .btg-footer-note { align-items: flex-start; text-align: left; }
    }
    @media (prefers-reduced-motion: reduce) { .broker-transfer-guide *, .broker-transfer-guide *::before, .broker-transfer-guide *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }


/* ===== Migrated from login.html ===== */
.login-page {
        --login-ink: #082f4d;
        --login-blue: #087db8;
        --login-teal: #078271;
        position: relative;
        display: grid;
        min-height: calc(100vh - var(--app-navbar-height, 32px));
        padding: clamp(25px, 5vw, 64px) 22px;
        overflow: hidden;
        place-items: center;
        background:
            radial-gradient(circle at 92% 8%, rgba(75, 204, 213, .18), transparent 24rem),
            radial-gradient(circle at 5% 91%, rgba(59, 176, 235, .12), transparent 22rem),
            linear-gradient(180deg, #f6fcff 0%, #fff 58%, #effaff 100%);
    }

    .login-page::before,
    .login-page::after {
        position: absolute;
        z-index: 0;
        border: 1px solid rgba(41, 161, 183, .15);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

    .login-page::before { width: 410px; height: 410px; top: -240px; right: -116px; box-shadow: 0 0 0 46px rgba(60, 201, 204, .045), 0 0 0 107px rgba(60, 201, 204, .025); }
    .login-page::after { width: 300px; height: 300px; bottom: -210px; left: -120px; box-shadow: 0 0 0 37px rgba(58, 173, 229, .035); }

    .login-shell {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr);
        width: min(1000px, 100%);
        overflow: hidden;
        border: 1px solid rgba(45, 148, 183, .22);
        border-radius: 26px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 25px 62px rgba(14, 84, 123, .15);
    }

    .login-showcase {
        position: relative;
        display: flex;
        min-height: 548px;
        padding: clamp(31px, 4vw, 52px);
        overflow: hidden;
        color: #fff;
        background: linear-gradient(145deg, #07577f 0%, #087fa9 55%, #0b9e9d 100%);
        flex-direction: column;
        justify-content: space-between;
    }

    .login-showcase::before { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(213, 251, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(213, 251, 255, .16) 1px, transparent 1px); background-size: 38px 38px; content: ""; mask-image: linear-gradient(155deg, #000, transparent 78%); }
    .login-showcase::after { position: absolute; width: 310px; height: 310px; right: -152px; bottom: -117px; border: 1px solid rgba(202, 255, 246, .33); border-radius: 50%; box-shadow: 0 0 0 35px rgba(185, 248, 239, .09), 0 0 0 81px rgba(185, 248, 239, .045); content: ""; }
    .login-showcase > * { position: relative; z-index: 1; }

    .login-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; color: rgba(231, 255, 253, .9); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
    .login-eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: #8df2c8; box-shadow: 0 0 0 5px rgba(141, 242, 200, .16); content: ""; }
    .login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 27px; }
    .login-brand-mark { display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 15px; background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); font-size: 20px; font-weight: 900; letter-spacing: -.08em; }
    .login-brand h1 { margin: 0; color: #fff; font-size: 26px; font-weight: 900; letter-spacing: -.06em; }
    .login-brand p { margin: 4px 0 0; color: rgba(229, 252, 255, .76); font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
    .login-showcase h2 { max-width: 350px; margin: 0; color: #fff; font-size: clamp(26px, 3vw, 35px); font-weight: 850; letter-spacing: -.05em; line-height: 1.12; }
    .login-showcase-text { max-width: 330px; margin: 16px 0 0; color: rgba(232, 251, 255, .88); font-size: 14px; line-height: 1.65; }
    .login-benefits { display: grid; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
    .login-benefits li { position: relative; padding-left: 24px; color: rgba(239, 255, 255, .92); font-size: 13px; font-weight: 650; }
    .login-benefits li::before { position: absolute; top: .26em; left: 0; width: 14px; height: 14px; border: 1px solid rgba(211,255,244,.8); border-radius: 50%; content: ""; }
    .login-benefits li::after { position: absolute; top: .52em; left: 4px; width: 6px; height: 3px; border-bottom: 2px solid #93f0cb; border-left: 2px solid #93f0cb; content: ""; transform: rotate(-45deg); }
    .login-private-note { display: inline-flex; align-items: center; gap: 8px; margin: 34px 0 0; color: rgba(233, 255, 251, .84); font-size: 11px; font-weight: 650; }
    .login-private-note::before { width: 15px; height: 15px; border: 1px solid rgba(195, 255, 239, .75); border-radius: 5px; content: "✓"; color: #a9f5d4; font-size: 10px; font-weight: 900; line-height: 13px; text-align: center; }

    .login-card { position: relative; padding: clamp(31px, 5vw, 53px); overflow: hidden; background: linear-gradient(145deg, #fff 0%, #f8fdff 100%); }
    .login-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, #11a7c6, #087bb7 54%, #13aa85); content: ""; }
    .login-card::after { position: absolute; width: 210px; height: 210px; top: -136px; right: -118px; border: 1px solid rgba(52,173,194,.15); border-radius: 50%; box-shadow: 0 0 0 28px rgba(91,218,207,.05); content: ""; pointer-events: none; }
    .login-card > * { position: relative; z-index: 1; }
    .login-form-header { margin-bottom: 23px; padding-bottom: 18px; border-bottom: 1px solid rgba(32,126,167,.13); }
    .login-form-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--login-teal); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
    .login-form-kicker::before { width: 20px; height: 2px; background: currentColor; content: ""; }
    .login-form-header h3 { margin: 0 0 7px; color: var(--login-ink); font-size: 29px; font-weight: 850; letter-spacing: -.045em; }
    .login-form-header p { margin: 0; color: #647f94; font-size: 14px; line-height: 1.55; }
    .login-error { padding: 11px 13px; border: 1px solid #ffd2d0; border-radius: 11px; color: #b84545; background: #fff7f6; font-size: 12px; font-weight: 650; }
    .login-form { padding: 22px; border: 1px solid rgba(54,154,190,.24); border-radius: 17px; background: rgba(255,255,255,.82); box-shadow: 0 12px 26px rgba(20,101,142,.06), inset 0 1px 0 rgba(255,255,255,.78); }
    .login-form .login-field { margin-bottom: 17px; }
    .login-form .form-label { margin-bottom: 7px; color: #284f6a; font-size: 12px; font-weight: 750; }
    .login-form input { display: block; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #c7dfeb; border-radius: 11px; outline: 0; color: var(--login-ink); background: #fbfeff; font-size: 14px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
    .login-form input:focus { border-color: #38a9d2; background: #fff; box-shadow: 0 0 0 4px rgba(47,165,211,.13); }
    .login-options { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 16px; margin: 2px 0 23px; }
    .login-options a { color: #0879ac; font-size: 12px; font-weight: 750; text-decoration: none; }
    .login-options a:hover { color: #075a88; text-decoration: underline; text-underline-offset: 3px; }
    .login-options .login-activation-link { color: #bf6a34; }
    .login-submit { min-height: 49px; border: 0 !important; border-radius: 12px !important; color: #fff !important; background: linear-gradient(135deg, #0797c4 0%, #0877b5 55%, #075b9d 100%) !important; box-shadow: 0 12px 25px rgba(5,112,179,.23); font-size: 14px; font-weight: 850; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
    .login-submit:hover, .login-submit:focus-visible { filter: brightness(1.06); box-shadow: 0 16px 29px rgba(5,112,179,.3); transform: translateY(-1px); }
    .login-divider { margin: 20px 0 16px; border-color: rgba(30,113,157,.14); }
    .login-footer { color: #70869a; font-size: 12px; line-height: 1.7; }
    .login-footer a { color: #087db8; text-underline-offset: 3px; }
    .login-support { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 9px; border: 1px solid #d4e9f1; border-radius: 8px; color: #55728a; background: #f7fcff; font-size: 11px; font-weight: 700; }
    .login-support::before { width: 7px; height: 7px; border-radius: 50%; background: #18ad85; content: ""; }

    .login-modal .modal-content { border: 1px solid rgba(42,150,185,.24); border-radius: 18px; box-shadow: 0 22px 58px rgba(8,62,95,.24); }
    .login-modal .modal-body { padding: 25px; }
    .login-modal h5 { color: var(--login-ink); font-weight: 850; }
    .login-modal .form-control { min-height: 43px; border-color: #c7dfeb; border-radius: 10px; }
    .login-modal .btn-success, .login-modal .btn-primary { min-height: 42px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #0897c3, #0873b3); font-weight: 800; }

    /* Máy tính: giữ toàn bộ thẻ đăng nhập nằm gọn trong phần viewport còn lại
       bên dưới thanh điều hướng. Các khoảng cách được thu gọn theo chiều cao,
       thay vì làm khung bị tràn và tạo thanh cuộn dọc. */
    @media (min-width: 768px) {
        .login-page {
            min-height: calc(100dvh - var(--app-navbar-height, 48px));
            padding: clamp(18px, 3vh, 32px) clamp(22px, 4vw, 48px);
            box-sizing: border-box;
        }

        .login-shell { width: min(1000px, 100%); }
        .login-showcase { min-height: 0; padding: clamp(28px, 3.25vw, 42px); }
        .login-eyebrow { margin-bottom: 18px; }
        .login-brand { margin-bottom: 21px; }
        .login-benefits { gap: 10px; margin-top: 25px; }
        .login-private-note { margin-top: 25px; }

        .login-card { padding: clamp(28px, 3.25vw, 40px); }
        .login-form-header { margin-bottom: 17px; padding-bottom: 14px; }
        .login-form-header h3 { font-size: 27px; }
        .login-form { padding: 19px; }
        .login-form .login-field { margin-bottom: 13px; }
        .login-options { margin-bottom: 17px; }
        .login-divider { margin: 15px 0 13px; }
    }

    /* Laptop thấp hoặc cửa sổ được thu ngắn: vẫn hiển thị trọn nội dung,
       không cắt bớt thông tin và không tạo thanh cuộn không cần thiết. */
    @media (min-width: 768px) and (max-height: 800px) {
        .login-page { padding-top: 14px; padding-bottom: 14px; }
        .login-showcase { padding: 25px 32px; }
        .login-showcase h2 { font-size: 29px; }
        .login-showcase-text { margin-top: 12px; line-height: 1.48; }
        .login-benefits { gap: 8px; margin-top: 18px; }
        .login-private-note { margin-top: 18px; }
        .login-card { padding: 23px 31px; }
        .login-form-header { margin-bottom: 13px; padding-bottom: 11px; }
        .login-form-header h3 { margin-bottom: 4px; font-size: 25px; }
        .login-form-header p { font-size: 13px; }
        .login-form { padding: 16px; }
        .login-form .login-field { margin-bottom: 10px; }
        .login-form input { min-height: 42px; }
        .login-options { margin-bottom: 13px; }
        .login-submit { min-height: 44px; }
        .login-divider { margin: 11px 0 9px; }
        .login-support { margin-top: 4px; }
    }

    @media (max-width: 767.98px) {
        .login-page { display: block; padding: 20px 13px 34px; }
        .login-shell { grid-template-columns: 1fr; border-radius: 19px; }
        .login-showcase { min-height: auto; padding: 28px 24px; }
        .login-showcase h2 { max-width: 100%; font-size: 27px; }
        .login-benefits { display: none; }
        .login-private-note { margin-top: 20px; }
        .login-card { padding: 29px 23px; }
        .login-form-header { margin-bottom: 22px; }
        .login-form-header h3 { font-size: 26px; }
        /* iOS Safari chỉ tự zoom khi font ở input nhỏ hơn 16px. */
        .login-form input { min-height: 48px; font-size: 16px; }
        .login-form { padding: 18px; border-radius: 14px; }
    }

    @media (prefers-reduced-motion: reduce) { .login-page *, .login-page *::before, .login-page *::after { transition-duration: .01ms !important; } }


/* ===== Migrated from password_change_form.html ===== */
.change-page {
        --change-ink: #093451;
        --change-blue: #087eb8;
        --change-teal: #078371;
        position: relative;
        display: grid;
        min-height: calc(100vh - var(--app-navbar-height, 32px));
        padding: clamp(25px, 5vw, 62px) 22px;
        overflow: hidden;
        place-items: center;
        background:
            radial-gradient(circle at 92% 8%, rgba(76,208,215,.18), transparent 24rem),
            radial-gradient(circle at 7% 91%, rgba(59,178,233,.12), transparent 23rem),
            linear-gradient(180deg, #f6fcff 0%, #fff 57%, #effaff 100%);
    }

    .change-page::before,
    .change-page::after { position: absolute; z-index: 0; border: 1px solid rgba(43,161,183,.15); border-radius: 50%; content: ""; pointer-events: none; }
    .change-page::before { width: 390px; height: 390px; top: -240px; right: -112px; box-shadow: 0 0 0 44px rgba(62,201,204,.045), 0 0 0 102px rgba(62,201,204,.025); }
    .change-page::after { width: 286px; height: 286px; bottom: -204px; left: -116px; box-shadow: 0 0 0 36px rgba(60,178,230,.035); }

    .change-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(290px, .86fr) minmax(390px, 1.14fr); width: min(890px, 100%); overflow: hidden; border: 1px solid rgba(43,148,183,.23); border-radius: 25px; background: rgba(255,255,255,.94); box-shadow: 0 24px 58px rgba(15,85,123,.14); }
    .change-showcase { position: relative; display: flex; min-height: 495px; padding: clamp(31px, 4vw, 47px); overflow: hidden; color: #fff; background: linear-gradient(145deg, #07577f 0%, #087fa9 55%, #0b9e9d 100%); flex-direction: column; justify-content: space-between; }
    .change-showcase::before { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(216,255,253,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(216,255,253,.15) 1px, transparent 1px); background-size: 37px 37px; content: ""; mask-image: linear-gradient(155deg, #000, transparent 79%); }
    .change-showcase::after { position: absolute; width: 285px; height: 285px; right: -153px; bottom: -105px; border: 1px solid rgba(203,255,247,.34); border-radius: 50%; box-shadow: 0 0 0 33px rgba(186,248,239,.09), 0 0 0 76px rgba(186,248,239,.045); content: ""; }
    .change-showcase > * { position: relative; z-index: 1; }
    .change-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 25px; color: rgba(233,255,253,.9); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
    .change-eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: #8df2c8; box-shadow: 0 0 0 5px rgba(141,242,200,.16); content: ""; }
    .change-key { display: grid; width: 65px; height: 65px; margin-bottom: 24px; place-items: center; border: 1px solid rgba(255,255,255,.58); border-radius: 20px; color: #fff; background: rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
    .change-key svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
    .change-showcase h1 { max-width: 325px; margin: 0; color: #fff; font-size: clamp(27px, 3.3vw, 34px); font-weight: 850; letter-spacing: -.05em; line-height: 1.12; }
    .change-showcase-text { max-width: 315px; margin: 16px 0 0; color: rgba(233,252,255,.87); font-size: 13px; line-height: 1.65; }
    .change-safety-list { display: grid; gap: 11px; margin: 30px 0 0; padding: 0; list-style: none; }
    .change-safety-list li { position: relative; padding-left: 23px; color: rgba(240,255,255,.92); font-size: 12px; font-weight: 700; line-height: 1.5; }
    .change-safety-list li::before { position: absolute; top: .28em; left: 0; width: 14px; height: 14px; border: 1px solid rgba(213,255,246,.75); border-radius: 50%; content: ""; }
    .change-safety-list li::after { position: absolute; top: .54em; left: 4px; width: 6px; height: 3px; border-bottom: 2px solid #93f0cb; border-left: 2px solid #93f0cb; content: ""; transform: rotate(-45deg); }
    .change-private-note { display: inline-flex; align-items: center; gap: 8px; margin: 30px 0 0; color: rgba(234,255,251,.84); font-size: 11px; font-weight: 650; }
    .change-private-note::before { width: 15px; height: 15px; border: 1px solid rgba(195,255,239,.74); border-radius: 5px; color: #aaf6d5; content: "✓"; font-size: 10px; font-weight: 900; line-height: 13px; text-align: center; }

    .change-card { padding: clamp(32px, 5vw, 52px); background: rgba(255,255,255,.96); }
    .change-card-header { margin-bottom: 25px; }
    .change-card-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--change-teal); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
    .change-card-kicker::before { width: 20px; height: 2px; background: currentColor; content: ""; }
    .change-card h2 { margin: 0 0 7px; color: var(--change-ink); font-size: 29px; font-weight: 850; letter-spacing: -.045em; }
    .change-card-header p { margin: 0; color: #647f94; font-size: 14px; line-height: 1.58; }
    .change-error { padding: 11px 13px; border: 1px solid #ffd2d0; border-radius: 11px; color: #b84545; background: #fff7f6; font-size: 12px; font-weight: 650; }
    .change-form .change-field { margin-bottom: 15px; }
    .change-form .form-label { margin-bottom: 7px; color: #284f6a; font-size: 12px; font-weight: 750; }
    .change-form .form-control { min-height: 45px; padding: 10px 12px; border: 1px solid #c7dfeb; border-radius: 11px; color: var(--change-ink); background: #fbfeff; box-shadow: inset 0 1px 2px rgba(9,76,119,.02); font-size: 14px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
    .change-form .form-control:focus { border-color: #38a9d2; background: #fff; box-shadow: 0 0 0 4px rgba(47,165,211,.13); }
    .change-form .text-danger { color: #d74650 !important; font-size: 11px !important; }
    .change-security-note { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0 0; padding: 11px 12px; border: 1px solid #cfebf3; border-radius: 11px; color: #47718a; background: #f1fbff; font-size: 11px; line-height: 1.55; }
    .change-security-note::before { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; border-radius: 50%; color: #087eb8; background: #d9f3fc; content: "i"; font-size: 11px; font-weight: 900; }
    .change-submit { min-height: 49px; margin-top: 17px; border: 0 !important; border-radius: 12px !important; color: #fff !important; background: linear-gradient(135deg, #0797c4 0%, #0877b5 55%, #075b9d 100%) !important; box-shadow: 0 12px 25px rgba(5,112,179,.23); font-size: 14px; font-weight: 850; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
    .change-submit:hover, .change-submit:focus-visible { filter: brightness(1.06); box-shadow: 0 16px 29px rgba(5,112,179,.3); transform: translateY(-1px); }

    @media (max-width: 767.98px) {
        .change-page { display: block; padding: 20px 13px 34px; }
        .change-shell { grid-template-columns: 1fr; border-radius: 19px; }
        .change-showcase { min-height: auto; padding: 29px 24px; }
        .change-key { width: 55px; height: 55px; margin-bottom: 19px; border-radius: 17px; }
        .change-showcase h1 { font-size: 28px; }
        .change-safety-list { display: none; }
        .change-private-note { margin-top: 20px; }
        .change-card { padding: 29px 23px; }
        .change-card h2 { font-size: 26px; }
    }
    @media (prefers-reduced-motion: reduce) { .change-page *, .change-page *::before, .change-page *::after { transition-duration: .01ms !important; } }


/* ===== Migrated from profile.html ===== */
.profile-page {
        --profile-ink: #093553;
        --profile-blue: #087eb8;
        --profile-teal: #078371;
        position: relative;
        display: grid;
        min-height: calc(100vh - var(--app-navbar-height, 32px));
        padding: clamp(25px, 5vw, 62px) 22px;
        overflow: hidden;
        place-items: center;
        background:
            radial-gradient(circle at 91% 9%, rgba(82, 211, 217, .19), transparent 25rem),
            radial-gradient(circle at 8% 91%, rgba(63, 183, 234, .12), transparent 23rem),
            linear-gradient(180deg, #f6fcff 0%, #fff 55%, #effaff 100%);
    }

    .profile-page::before,
    .profile-page::after { position: absolute; z-index: 0; border: 1px solid rgba(43, 161, 183, .15); border-radius: 50%; content: ""; pointer-events: none; }
    .profile-page::before { width: 405px; height: 405px; top: -260px; right: -112px; box-shadow: 0 0 0 45px rgba(64, 202, 205, .045), 0 0 0 104px rgba(64, 202, 205, .025); }
    .profile-page::after { width: 300px; height: 300px; bottom: -213px; left: -120px; box-shadow: 0 0 0 38px rgba(65, 180, 230, .035); }

    .profile-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(290px, .82fr) minmax(0, 1.18fr); width: min(930px, 100%); overflow: hidden; border: 1px solid rgba(40, 145, 181, .23); border-radius: 25px; background: rgba(255,255,255,.94); box-shadow: 0 24px 58px rgba(15, 86, 124, .14); }
    .profile-overview { position: relative; display: flex; min-height: 500px; padding: clamp(30px, 4vw, 47px); overflow: hidden; color: #fff; background: linear-gradient(145deg, #07567e 0%, #087fa8 56%, #0a9d9a 100%); flex-direction: column; justify-content: space-between; }
    .profile-overview::before { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(220, 255, 254, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 255, 254, .15) 1px, transparent 1px); background-size: 37px 37px; content: ""; mask-image: linear-gradient(150deg, #000, transparent 80%); }
    .profile-overview::after { position: absolute; width: 285px; height: 285px; right: -151px; bottom: -102px; border: 1px solid rgba(204,255,247,.34); border-radius: 50%; box-shadow: 0 0 0 34px rgba(188,248,239,.09), 0 0 0 78px rgba(188,248,239,.045); content: ""; }
    .profile-overview > * { position: relative; z-index: 1; }

    .profile-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 25px; color: rgba(235,255,253,.9); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
    .profile-eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: #8df2c8; box-shadow: 0 0 0 5px rgba(141,242,200,.16); content: ""; }
    .profile-avatar { display: grid; width: 76px; height: 76px; margin-bottom: 19px; place-items: center; border: 1px solid rgba(255,255,255,.59); border-radius: 24px; color: #fff; background: rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); font-size: 30px; font-weight: 900; letter-spacing: -.06em; }
    .profile-overview h1 { margin: 0; color: #fff; font-size: clamp(28px, 3.6vw, 36px); font-weight: 850; letter-spacing: -.05em; line-height: 1.08; }
    .profile-email { margin: 9px 0 0; color: rgba(235,253,255,.8); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
    .profile-private-note { display: inline-flex; align-items: center; gap: 8px; margin: 33px 0 0; color: rgba(234,255,251,.85); font-size: 11px; font-weight: 650; }
    .profile-private-note::before { width: 15px; height: 15px; border: 1px solid rgba(195,255,239,.74); border-radius: 5px; color: #aaf6d5; content: "✓"; font-size: 10px; font-weight: 900; line-height: 13px; text-align: center; }

    .profile-content { padding: clamp(30px, 4.6vw, 48px); }
    .profile-content-header { margin-bottom: 26px; }
    .profile-content-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--profile-teal); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
    .profile-content-kicker::before { width: 20px; height: 2px; background: currentColor; content: ""; }
    .profile-content h2 { margin: 0 0 7px; color: var(--profile-ink); font-size: 28px; font-weight: 850; letter-spacing: -.045em; }
    .profile-content-header p { margin: 0; color: #647f94; font-size: 13px; line-height: 1.55; }

    .profile-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .profile-detail { min-height: 92px; padding: 15px; border: 1px solid #d7eaf1; border-radius: 14px; background: linear-gradient(145deg, #fff 0%, #f6fcff 100%); }
    .profile-detail--wide { grid-column: 1 / -1; min-height: auto; }
    .profile-detail-label { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: #6b8498; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .profile-detail-label::before { width: 8px; height: 8px; border: 1px solid #46acd0; border-radius: 50%; content: ""; }
    .profile-detail-value { color: var(--profile-ink); font-size: 15px; font-weight: 750; line-height: 1.42; overflow-wrap: anywhere; }
    .profile-detail-value--accent { color: #087c7c; }
    .profile-detail-value--danger { color: #d74650; }
    .profile-infinity { display: inline-flex; align-items: center; gap: 6px; color: #087b78; }
    .profile-infinity::before { width: 17px; height: 17px; border-radius: 50%; background: #dff9ec; color: #07836f; content: "∞"; font-size: 15px; font-weight: 850; line-height: 16px; text-align: center; }
    .profile-status-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
    .profile-status { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 850; }
    .profile-status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
    .profile-status--active { border-color: #bfead7; color: #087956; background: #edfcf4; }
    .profile-status--life { border-color: #c7e3f8; color: #0874b0; background: #eff9ff; }
    .profile-status--expired { border-color: #ffd2cf; color: #c9454e; background: #fff5f4; }
    .profile-status--suspended { border-color: #d7dce1; color: #53606d; background: #f4f6f8; }

    @media (max-width: 767.98px) {
        .profile-page { display: block; padding: 20px 13px 34px; }
        .profile-shell { grid-template-columns: 1fr; border-radius: 19px; }
        .profile-overview { min-height: auto; padding: 29px 24px; }
        .profile-avatar { width: 62px; height: 62px; margin-bottom: 15px; border-radius: 19px; font-size: 25px; }
        .profile-overview h1 { font-size: 29px; }
        .profile-private-note { margin-top: 20px; }
        .profile-content { padding: 29px 23px; }
        .profile-content h2 { font-size: 25px; }
        .profile-details { grid-template-columns: 1fr; }
        .profile-detail--wide { grid-column: auto; }
    }

    @media (prefers-reduced-motion: reduce) { .profile-page *, .profile-page *::before, .profile-page *::after { transition-duration: .01ms !important; } }


/* ===== Migrated from register.html ===== */
.register-page {
        --register-ink: #093453;
        --register-blue: #087eb7;
        --register-teal: #07836f;
        --register-line: rgba(38, 133, 177, .18);
        position: relative;
        min-height: calc(100vh - var(--app-navbar-height, 32px));
        overflow: hidden;
        padding: clamp(22px, 4vw, 50px) 0 clamp(42px, 6vw, 76px);
        color: var(--register-ink);
        background:
            radial-gradient(circle at 93% 7%, rgba(96, 220, 222, .2), transparent 25rem),
            radial-gradient(circle at 7% 88%, rgba(62, 184, 238, .12), transparent 24rem),
            linear-gradient(180deg, #f6fcff 0%, #fff 56%, #f2fbff 100%);
    }

    .register-page::before,
    .register-page::after {
        position: absolute;
        z-index: 0;
        border: 1px solid rgba(44, 172, 192, .13);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

    .register-page::before {
        width: 470px;
        height: 470px;
        top: -305px;
        right: -128px;
        box-shadow: 0 0 0 50px rgba(63, 194, 210, .04), 0 0 0 115px rgba(63, 194, 210, .025);
    }

    .register-page::after {
        width: 350px;
        height: 350px;
        bottom: -245px;
        left: -150px;
        box-shadow: 0 0 0 42px rgba(75, 179, 230, .035);
    }

    .register-shell { position: relative; z-index: 1; max-width: 1200px; }
    .register-layout { align-items: flex-start; }

    .register-page .register-card {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--register-line) !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, .93);
        box-shadow: 0 17px 40px rgba(19, 88, 127, .09) !important;
    }

    .register-form-column { position: sticky; top: calc(var(--app-navbar-height, 32px) + 18px); }
    .register-page .register-card--form {
        isolation: isolate;
        padding: 0 !important;
        border-color: rgba(17, 148, 190, .46) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f3fcff 100%);
        box-shadow: 0 24px 52px rgba(11, 116, 164, .19), 0 0 0 5px rgba(62, 190, 218, .08) !important;
    }

    .register-page .register-card--form::before {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        left: 0;
        height: 5px;
        background: linear-gradient(90deg, #099cc5 0%, #0b76b2 52%, #16ab88 100%);
        content: "";
    }

    .register-page .register-card--form::after {
        position: absolute;
        z-index: -1;
        width: 250px;
        height: 250px;
        right: -145px;
        bottom: -145px;
        border: 1px solid rgba(37, 173, 193, .16);
        border-radius: 50%;
        box-shadow: 0 0 0 34px rgba(91, 217, 206, .06), 0 0 0 78px rgba(91, 217, 206, .035);
        content: "";
        pointer-events: none;
    }

    .register-form-header {
        position: relative;
        padding: 27px 27px 22px;
        overflow: hidden;
        border-bottom: 1px solid rgba(32, 143, 178, .16);
        background: linear-gradient(135deg, #dff8ff 0%, #f2fffb 100%);
        text-align: left !important;
    }

    .register-form-header::after {
        position: absolute;
        width: 145px;
        height: 145px;
        top: -84px;
        right: -46px;
        border: 1px solid rgba(28, 162, 179, .2);
        border-radius: 50%;
        box-shadow: 0 0 0 24px rgba(91, 215, 206, .07);
        content: "";
    }

    .register-overline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        color: var(--register-teal);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .register-overline::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #0bb28c;
        box-shadow: 0 0 0 4px rgba(11, 178, 140, .13);
        content: "";
    }

    .register-form-header h4 { position: relative; z-index: 1; margin: 0 0 7px !important; color: var(--register-ink); font-size: 25px; font-weight: 850; letter-spacing: -.035em; }
    .register-form-header p { position: relative; z-index: 1; margin: 0; color: #587791 !important; font-size: 13px; line-height: 1.55; }

    .register-page .register-card--form form { position: relative; z-index: 1; padding: 23px 27px 7px; }
    .register-page .register-field { margin-bottom: 15px !important; }
    .register-page .register-field .register-label { display: block; margin-bottom: 6px !important; color: #284f6b; font-size: 12px; font-weight: 750 !important; }
    .register-page .register-field .required::after { margin-left: 4px; color: #e14c58; content: "*"; }
    .register-page .register-field input:not([type="checkbox"]):not([type="radio"]),
    .register-page .register-field select,
    .register-page .register-field textarea {
        display: block;
        width: 100%;
        min-height: 43px;
        padding: 10px 12px;
        border: 1px solid #c6dfeb;
        border-radius: 11px;
        outline: 0;
        color: var(--register-ink);
        background: #fbfeff;
        box-shadow: inset 0 1px 2px rgba(9, 76, 119, .02);
        font-size: 14px;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .register-page .register-field input:focus,
    .register-page .register-field select:focus,
    .register-page .register-field textarea:focus {
        border-color: #38a9d2;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(47, 165, 211, .13);
    }

    .register-page .register-field .text-danger { color: #d64353 !important; font-size: 11px !important; }
    .register-page .register-submit {
        min-height: 48px;
        margin-top: 7px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #058cbe 0%, #0873b4 55%, #0a5a98 100%) !important;
        box-shadow: 0 11px 23px rgba(4, 111, 180, .24);
        color: #fff;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .01em;
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    .register-page .register-submit:hover,
    .register-page .register-submit:focus-visible { filter: brightness(1.06); box-shadow: 0 15px 28px rgba(4, 111, 180, .31); transform: translateY(-1px); }
    .register-page .register-divider { position: relative; z-index: 1; margin: 16px 27px 14px; border-color: rgba(34, 118, 161, .13); }
    .register-page .register-login-copy { position: relative; z-index: 1; margin: 0 27px 24px !important; color: #698198 !important; font-size: 13px; }
    .register-page .register-login-copy a { color: #087eb7 !important; text-underline-offset: 3px; }

    .register-info-column { display: grid; gap: 16px; }
    .register-page .register-card .card-body { position: relative; z-index: 1; padding: 25px 28px; }
    .register-page .register-card-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 9px; color: #087a89; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
    .register-page .register-card-kicker::before { width: 18px; height: 2px; background: currentColor; content: ""; }
    .register-page .register-card h5 { margin: 0 0 10px; color: var(--register-ink) !important; font-size: 20px; font-weight: 850; letter-spacing: -.025em; }
    .register-page .register-card p { margin-bottom: 0; color: #55758f; font-size: 14px; line-height: 1.7; }
    .register-page .register-card p strong { color: #0b597e; font-weight: 850; }

    .register-page .register-card--trial { background: linear-gradient(112deg, #effcff 0%, #f4fffb 100%); }
    .register-page .register-card--trial::after { position: absolute; width: 220px; height: 220px; top: -145px; right: -43px; border: 1px solid rgba(27, 172, 175, .18); border-radius: 50%; box-shadow: 0 0 0 29px rgba(68, 211, 201, .055); content: ""; }
    .register-page .register-card--trial .card-body { height: 100%; }
    .register-trial-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 18px; min-height: 100%; }
    .register-trial-mark { display: grid; width: 92px; height: 104px; align-content: center; justify-items: center; border: 1px solid rgba(255,255,255,.52); border-radius: 20px; color: #fff; background: linear-gradient(145deg, #0a9cc3 0%, #087fae 55%, #08716f 100%); box-shadow: 0 12px 24px rgba(8, 127, 174, .2), inset 0 1px 0 rgba(255,255,255,.25); }
    .register-trial-mark strong { display: block; font-size: 45px; font-weight: 900; letter-spacing: -.09em; line-height: .9; }
    .register-trial-mark span { margin-top: 5px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .register-trial-content { min-width: 0; }
    .register-page .register-trial-content h5 { margin-bottom: 8px; }
    .register-trial-detail { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: #087b78; font-size: 11px; font-weight: 800; }
    .register-trial-detail::before { width: 8px; height: 8px; border-radius: 50%; background: #13ad86; box-shadow: 0 0 0 4px rgba(19,173,134,.12); content: ""; }

    .register-page .register-card--unlimited { position: relative; z-index: 6; overflow: visible; border-color: rgba(238, 125, 111, .34) !important; }
    .register-page .register-card--unlimited::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, #f0695e, #f4a63f, #efc451); content: ""; }
    .register-page .register-card--unlimited h5 { color: #a63e3a !important; }
    .register-page .register-benefit-list { display: grid; gap: 9px; margin: 17px 0 14px; padding: 0; list-style: none; }
    .register-page .register-benefit-list li { position: relative; padding-left: 25px; color: #4f6b82; font-size: 14px; line-height: 1.56; }
    .register-page .register-benefit-list li::before { position: absolute; top: .43em; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff0e8; box-shadow: inset 0 0 0 1px #f4ad91; content: ""; }
    .register-page .register-benefit-list li::after { position: absolute; top: .65em; left: 4px; width: 6px; height: 3px; border-bottom: 2px solid #d75e50; border-left: 2px solid #d75e50; content: ""; transform: rotate(-45deg); }
    .register-page .register-nav-note { display: inline-flex; margin: 0 0 16px !important; padding: 6px 10px; border: 1px solid #f7d9ce; border-radius: 8px; color: #bd5548 !important; background: #fff8f5; font-size: 11px !important; font-style: normal !important; font-weight: 750 !important; }
    .register-page .register-contact-toggle { min-height: 36px; padding: 0 13px; border: 1px solid #e78071 !important; border-radius: 9px; color: #bd4b42 !important; background: #fff !important; font-size: 12px; font-weight: 800; }
    .register-page .register-contact-toggle:hover,
    .register-page .register-contact-toggle:focus-visible { color: #fff !important; background: #d85d4f !important; box-shadow: 0 7px 15px rgba(216, 93, 79, .2); }
    .register-page .register-contact-dropdown { position: relative; z-index: 8; }
    .register-page .register-contact-menu { z-index: 1080; min-width: min(290px, calc(100vw - 44px)) !important; padding: 16px !important; border: 1px solid #d8e9ef !important; border-radius: 14px !important; box-shadow: 0 16px 34px rgba(19, 80, 115, .16) !important; color: #45667f; font-size: 12px !important; line-height: 1.65 !important; }
    .register-page .dropup .register-contact-menu[data-bs-popper] { top: auto; bottom: calc(100% + 8px); margin: 0; }
    .register-page .register-contact-menu a { color: #087eb7; font-weight: 750; text-decoration: none; }
    .register-page .register-contact-menu hr { border-color: #dcecf2; }

    .register-page .register-card--broker { border: 1px solid rgba(32, 144, 177, .26) !important; background: linear-gradient(130deg, #fff 0%, #f2fdff 100%); }
    .register-page .register-broker-head { display: flex; align-items: center; gap: 15px; margin-bottom: 23px; }
    .register-page .register-broker-icon { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #0a98c4, #0a6bae); box-shadow: 0 9px 18px rgba(6, 126, 182, .2); font-size: 22px; }
    .register-page .register-broker-head h4 { margin: 0 0 4px; color: var(--register-ink); font-size: 19px; font-weight: 850; letter-spacing: -.025em; }
    .register-page .register-broker-head p { color: #668198; font-size: 12px; }
    .register-page .register-qr-box { padding: 13px; border: 1px solid #d8e9ef; border-radius: 17px; background: #fff; box-shadow: 0 9px 18px rgba(34, 120, 153, .05); }
    .register-page .register-qr-box img { max-height: 240px; }
    .register-page .register-broker-label { margin-bottom: 4px; color: #6c8598; font-size: 11px; font-weight: 750; }
    .register-page .register-broker-name { margin-bottom: 14px; color: var(--register-ink); font-size: 19px; font-weight: 850; }
    .register-page .register-broker-id { color: #0b628b; font-size: 19px; font-weight: 850; }
    .register-page .btn-huongdan {
        min-height: 34px;
        border: 1px solid #2797bd !important;
        color: #0870a3 !important;
        background: #f6fdff !important;
        font-size: 11px;
        font-weight: 800;
    }
    .register-page .btn-huongdan:hover,
    .register-page .btn-huongdan:focus-visible {
        color: #fff !important;
        background: #087eb7 !important;
        box-shadow: 0 7px 15px rgba(8, 126, 183, .2);
        transform: translateY(-1px);
    }
    .register-page .register-guide-alert { padding: 14px 15px; border: 1px solid #cbeaf2; border-radius: 13px; color: #396a84; background: #edfaff; }
    .register-page .register-open-account { min-height: 48px; border: 1px solid rgba(255,255,255,.42) !important; border-radius: 12px !important; color: #fff !important; background: linear-gradient(135deg, #df1432 0%, #ed1839 54%, #f32746 100%) !important; font-size: 14px; font-weight: 850; box-shadow: 0 10px 20px rgba(218, 24, 57, .27), inset 0 1px 0 rgba(255,255,255,.22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
    .register-page .register-open-account:hover,
    .register-page .register-open-account:focus-visible { color: #fff !important; filter: brightness(1.06); box-shadow: 0 14px 27px rgba(218, 24, 57, .33), inset 0 1px 0 rgba(255,255,255,.28); transform: translateY(-1px); }

    /* Ảnh hướng dẫn có tỉ lệ dọc: modal hẹp vừa phải để cân đối với ảnh,
       đổi phần bề rộng thừa thành chiều cao hiển thị giúp ảnh rõ hơn. */
    /* Bootstrap modal mặc định phủ từ đỉnh viewport, trong khi navbar của hệ
       thống luôn nổi trên cùng. Neo modal này xuống dưới navbar để header,
       nút đóng và ảnh hướng dẫn không bị che. */
    #huongDanChuyenIDModal { top: calc(var(--app-navbar-height, 32px) + 8px); bottom: auto; height: calc(100dvh - var(--app-navbar-height, 32px) - 8px); overflow-y: auto; padding: 0 16px 10px; }
    #huongDanChuyenIDModal .register-guide-modal-dialog { width: min(700px, calc(100vw - 32px)) !important; max-width: min(700px, calc(100vw - 32px)) !important; min-height: 0; margin: 0 auto 10px; }
    #huongDanChuyenIDModal .modal-content { max-height: calc(100dvh - var(--app-navbar-height, 32px) - 18px); overflow: hidden; border: 1px solid rgba(58, 165, 196, .26) !important; border-radius: 19px !important; box-shadow: 0 24px 64px rgba(5, 44, 72, .32); }
    #huongDanChuyenIDModal .modal-header { padding: 18px 22px; border: 0; background: linear-gradient(135deg, #087eb7, #07588f) !important; }
    #huongDanChuyenIDModal .modal-body { background: #082a43 !important; }
    #huongDanChuyenIDModal .register-guide-slider { height: min(calc(100dvh - var(--app-navbar-height, 32px) - 136px), 660px); min-height: 0; background: #082a43; }
    #huongDanChuyenIDModal .register-guide-slider-button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.54); background: rgba(4, 44, 70, .72); font-size: 23px; transition: transform .18s ease, background .18s ease; }
    #huongDanChuyenIDModal .register-guide-slider-button:hover { background: #0c94be; transform: translateY(-50%) scale(1.06); }
    #huongDanChuyenIDModal .register-guide-step-text { margin: 8px 0 11px; padding: 6px 13px; border: 1px solid rgba(161, 232, 249, .36); color: #dff8ff; background: rgba(14, 134, 174, .23); font-size: 13px; }

    /* Desktop: gom các nhóm thông tin vào một viewport cân đối. Màn hình
       hẹp hơn sẽ chuyển sang bố cục một cột để vẫn đọc và thao tác an toàn. */
    @media (min-width: 992px) {
        /* app-page-content đã chừa khoảng cho navbar fixed. Đặt nó thành
           viewport border-box để phần padding navbar không bị cộng thêm vào
           chiều cao trang và tạo scrollbar thừa. */
        body.register-desktop-fit { overflow: hidden; }
        body.register-desktop-fit .app-page-content {
            height: 100dvh;
            min-height: 0;
            overflow: hidden;
            box-sizing: border-box;
        }
        .register-page {
            height: 100%;
            min-height: 0;
            padding: 10px 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
        }

        /* Không để container/row Bootstrap kéo cụm nội dung về mép trái.
           Lưới này có bề rộng cố định theo viewport và luôn nằm giữa. */
        .register-shell {
            width: 100% !important;
            max-width: none !important;
            height: 100%;
            margin: 0 !important;
            padding: 0 !important;
            display: flex;
            align-items: center;
        }

        .register-layout {
            display: grid;
            grid-template-columns: minmax(380px, .84fr) minmax(0, 1.52fr);
            align-items: center;
            width: min(1360px, calc(100vw - 64px));
            margin: 0 auto !important;
            gap: clamp(18px, 2vw, 30px);
        }

        .register-layout > .register-form-column,
        .register-layout > .register-info-column {
            width: auto;
            max-width: none;
            padding: 0;
        }

        .register-form-column { position: static; }
        .register-info-column { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 12px; }
        .register-page .register-card { border-radius: 18px !important; }
        .register-page .register-card .card-body { padding: 18px 22px; }

        .register-form-header { padding: 18px 22px 16px; }
        .register-form-header h4 { margin-bottom: 4px !important; font-size: 22px; }
        .register-form-header p { font-size: 12px; }
        .register-overline { margin-bottom: 7px; font-size: 9px; }
        .register-page .register-card--form form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px 12px;
            padding: 16px 22px 5px;
        }

        .register-page .register-field { margin: 0 !important; }
        .register-page .register-field .register-label { margin-bottom: 4px !important; font-size: 11px; }
        .register-page .register-field input:not([type="checkbox"]):not([type="radio"]),
        .register-page .register-field select,
        .register-page .register-field textarea { min-height: 37px; padding: 7px 10px; border-radius: 9px; font-size: 13px; }
        .register-page .register-card--form form > .alert,
        .register-page .register-submit { grid-column: 1 / -1; }
        /* Chỉ ở desktop: đổi thứ tự hiển thị của hai trường cuối. DOM giữ
           nguyên nên trên điện thoại vẫn là Nhập lại mật khẩu rồi đến Chú ý. */
        #registerForm .register-field--note { order: 7; }
        #registerForm .register-field--password-confirm { order: 8; }
        #registerForm .register-submit { order: 9; }
        .register-page .register-submit { min-height: 40px; margin-top: 2px !important; border-radius: 10px !important; font-size: 13px; }
        .register-page .register-divider { margin: 10px 22px 8px; }
        .register-page .register-login-copy { margin: 0 22px 15px !important; font-size: 12px; }

        .register-page .register-card h5 { margin-bottom: 7px; font-size: 17px; }
        .register-page .register-card p { font-size: 12px; line-height: 1.55; }
        .register-page .register-card-kicker { margin-bottom: 6px; font-size: 9px; }
        .register-trial-layout { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
        .register-trial-mark { width: 64px; height: 76px; border-radius: 15px; }
        .register-trial-mark strong { font-size: 34px; }
        .register-trial-mark span { margin-top: 3px; font-size: 8px; }
        .register-trial-detail { margin-top: 7px; font-size: 10px; }
        .register-page .register-card--unlimited { grid-column: 2; grid-row: 1; }
        .register-page .register-benefit-list { gap: 6px; margin: 11px 0 10px; }
        .register-page .register-benefit-list li { padding-left: 21px; font-size: 12px; line-height: 1.45; }
        .register-page .register-nav-note { margin-bottom: 9px !important; padding: 5px 8px; font-size: 10px !important; }
        .register-page .register-contact-toggle { min-height: 31px; font-size: 11px; }

        .register-page .register-card--broker { grid-column: 1 / -1; }
        .register-page .register-card--broker .card-body { padding: 17px 22px; }
        .register-page .register-broker-head { gap: 11px; margin-bottom: 12px; }
        .register-page .register-broker-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; font-size: 18px; }
        .register-page .register-broker-head h4 { margin-bottom: 2px; font-size: 16px; }
        .register-page .register-broker-head p { font-size: 11px; }
        .register-page .register-qr-box { padding: 8px; border-radius: 13px; }
        .register-page .register-qr-box img { max-height: 160px !important; }
        .register-page .register-broker-name { margin-bottom: 8px; font-size: 16px; }
        .register-page .register-broker-id { font-size: 16px; }
        .register-page .register-guide-alert { margin-bottom: 9px !important; padding: 9px 11px; font-size: 12px; }
        .register-page .register-open-account { min-height: 39px; font-size: 12px; }
    }

    /* Tablet và điện thoại: không dùng gutter âm của Bootstrap cho row.
       Các card vì vậy có cùng trục giữa màn hình, thay vì bị lệch theo
       padding của container/column. */
    @media (max-width: 991.98px) {
        .register-page { padding-right: 0; padding-left: 0; }
        .register-shell {
            width: min(calc(100% - 32px), 720px);
            margin: 0 auto !important;
            padding-right: 0 !important;
            padding-left: 0 !important;
        }
        .register-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            width: 100%;
            margin: 0 !important;
            gap: 18px;
        }
        .register-layout > .register-form-column,
        .register-layout > .register-info-column {
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 0;
        }
        .register-form-column { position: static; }
        .register-info-column { width: 100%; margin-top: 0; }
    }
    @media (max-width: 575.98px) {
        .register-page { padding: 18px 0 38px; }
        .register-shell { width: min(calc(100% - 24px), 540px); margin: 0 auto !important; }
        .register-page .register-card { border-radius: 17px !important; }
        .register-form-header, .register-page .register-card .card-body { padding: 22px 19px; }
        .register-page .register-card--form form { padding: 20px 19px 4px; }
        .register-page .register-divider { margin-right: 19px; margin-left: 19px; }
        .register-page .register-login-copy { margin-right: 19px !important; margin-left: 19px !important; }
        .register-form-header h4 { font-size: 23px; }
        .register-page .register-card h5 { font-size: 18px; }
        .register-page .register-broker-head { align-items: flex-start; }
        .register-page .register-broker-head h4 { font-size: 17px; }
        #huongDanChuyenIDModal .register-guide-modal-dialog { margin: 0 auto 10px; }
        #huongDanChuyenIDModal .register-guide-slider { min-height: 410px; }
        #huongDanChuyenIDModal .register-guide-slider-button { width: 35px; height: 35px; }
        #huongDanChuyenIDModal .register-guide-slider-button--previous { left: 9px; }
        #huongDanChuyenIDModal .register-guide-slider-button--next { right: 9px; }
    }

    @media (prefers-reduced-motion: reduce) { .register-page *, .register-page *::before, .register-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Giữ nguyên tỉ lệ ảnh hướng dẫn và luôn đặt vừa vùng modal. Việc ép
   width:100% trước đây khiến một số ảnh dọc bị phóng đại, che mất nội dung. */
#huongDanChuyenIDModal .register-guide-slider {
    position: relative;
    height: min(calc(100dvh - var(--app-navbar-height, 32px) - 136px), 660px);
    min-height: 0;
    overflow: hidden;
    background: #082a43;
}

#huongDanChuyenIDModal .register-guide-slide {
    display: none;
    height: 100%;
    padding: 12px 52px 43px;
    text-align: center;
    animation: slideIn 0.35s ease;
}

#huongDanChuyenIDModal .register-guide-slide--active {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#huongDanChuyenIDModal .register-guide-slide img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: calc(100% - 43px);
    margin: 0 auto;
    object-fit: contain;
}

#huongDanChuyenIDModal .register-guide-slider-button {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    font-size: 26px;
    cursor: pointer;
    transform: translateY(-50%);
}

#huongDanChuyenIDModal .register-guide-slider-button--previous { left: 15px; }
#huongDanChuyenIDModal .register-guide-slider-button--next { right: 15px; }

@keyframes slideIn{
    from{
        opacity:0;
        transform:translateX(60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}
#huongDanChuyenIDModal .register-guide-step-text {
    flex: 0 0 auto;
    display: inline-block;
    margin: 8px 0 0;
    padding: 5px 13px;
    border: 1px solid rgba(161, 232, 249, .36);
    border-radius: 999px;
    color: #dff8ff;
    background: rgba(14, 134, 174, .23);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
}

@media (max-width: 575.98px) {
    #huongDanChuyenIDModal { top: calc(var(--app-navbar-height, 32px) + 6px); bottom: auto; height: calc(100dvh - var(--app-navbar-height, 32px) - 6px); padding: 0 10px 8px; }
    #huongDanChuyenIDModal .register-guide-modal-dialog { width: auto !important; max-width: none !important; margin: 0 auto 8px; }
    #huongDanChuyenIDModal .modal-content { max-height: calc(100dvh - var(--app-navbar-height, 32px) - 14px); }
    #huongDanChuyenIDModal .register-guide-slider { height: min(62dvh, 430px); }
    #huongDanChuyenIDModal .register-guide-slide { padding: 10px 45px 38px; }
    #huongDanChuyenIDModal .register-guide-slide img { max-height: calc(100% - 37px); }
    #huongDanChuyenIDModal .register-guide-step-text { margin-top: 5px; padding: 4px 10px; font-size: 12px; }
}

html body .migrated-inline-register-1.migrated-inline-register-1.migrated-inline-register-1 { color:red; font-weight:bold; font-style:italic; font-size:10px; }
html body .migrated-inline-register-2.migrated-inline-register-2.migrated-inline-register-2 { min-width:260px; font-size:12px; line-height:1.6; }
html body .migrated-inline-register-3.migrated-inline-register-3.migrated-inline-register-3 { font-size:12px; }
html body .migrated-inline-register-4.migrated-inline-register-4.migrated-inline-register-4 { font-size:12px; }
html body .migrated-inline-register-5.migrated-inline-register-5.migrated-inline-register-5 { font-size:12px; }
html body .migrated-inline-register-6.migrated-inline-register-6.migrated-inline-register-6 { font-size:12px; }
html body .migrated-inline-register-7.migrated-inline-register-7.migrated-inline-register-7 { font-size:12px; }
html body .migrated-inline-register-8.migrated-inline-register-8.migrated-inline-register-8 { font-size:12px; }
html body .migrated-inline-register-9.migrated-inline-register-9.migrated-inline-register-9 { font-size:10px; }
html body .migrated-inline-register-10.migrated-inline-register-10.migrated-inline-register-10 { border-radius:20px; overflow:hidden; }
html body .migrated-inline-register-11.migrated-inline-register-11.migrated-inline-register-11 { max-height:240px; }
html body .migrated-inline-register-12.migrated-inline-register-12.migrated-inline-register-12 { font-size:20px; font-weight:700; color:#000; }
html body .migrated-inline-register-13.migrated-inline-register-13.migrated-inline-register-13 { font-size:12px;
                                                font-style:italic;
                                                margin-top:4px;
                                                color:#6c757d;
                                                text-decoration:none;
                                                text-align:center; }