/* Tối ưu giao diện điện thoại (≤ 640px) — 12/10/2026. Nạp SAU các CSS khác. Cùng mobile-ui.js (các nút thu gọn / mở rộng).
   Nguyên tắc: giảm chiều cao "đầu trang" lặp lại ở mỗi tab (dải chỉ số, khối tóm tắt mã), thanh tab dính đầu màn hình, chữ không nhỏ hơn 10px,
   hàng tiêu đề + ghi chú tự xuống dòng thay vì bóp tiêu đề, nút Zalo nhỏ hơn để không che số liệu. */
.m-toggle { display: none; }
@media (max-width: 640px) {
  /* --- thanh trên cùng cuộn đi, thanh tab dính đầu màn hình --- */
  .topbar { position: static !important; }
  nav.stk-tabs { position: sticky; top: 0; z-index: 60; background: rgba(7, 13, 18, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }

  /* --- nút thu gọn / mở rộng (mobile-ui.js) --- */
  .m-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 8px 0 14px; padding: 9px 12px; border: 1px solid var(--line, #1d3a45);
    border-radius: 10px; background: var(--card, #111f27); color: var(--ink, #e8f4f5); font: 700 12px Manrope, sans-serif; cursor: pointer; }
  .m-toggle i { font-style: normal; color: #05f0dd; transition: transform .15s; }
  .m-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  #index-strip .m-toggle { margin: 0; border-width: 1px 0 0; border-radius: 0 0 14px 14px; background: rgba(0, 0, 0, .18); }
  /* dải chỉ số: mặc định chỉ hiện 4 thẻ, bảng chỉ số chi tiết mở bằng nút */
  body:not(.m-ixb-open) #index-strip .ixb-table-wrap { display: none; }
  /* trang Cổ phiếu: khối "Tín hiệu kỹ thuật" + "Định giá & cơ bản" (cao ~430px) mặc định thu gọn */
  body:not(.m-hero-open) #stk-hero .stk-hero-stats { display: none; }

  /* --- hàng tiêu đề bảng/khối + ghi chú/nút lựa chọn: xuống dòng, không bóp tiêu đề --- */
  .panel-head { flex-wrap: wrap; gap: 6px 12px; }
  .panel-head .periods, .panel-head .tabs { flex-wrap: wrap; max-width: 100%; }
  .panel-head > div:first-child { min-width: 0; }

  /* --- chữ quá nhỏ --- */
  main small, #stock-page small { font-size: 10px !important; }
  .table-wrap th, .stk-table-wrap th, .own-table th { font-size: 10px; }
  .aio-chg, .aio-signal, .aio-rs, .aio-x { font-size: 10.5px; }
  .ixb-time, .ixb-vol, .ixb-up, .ixb-down, .ixb-flat { font-size: 10px; }

  /* --- nút Zalo nổi nhỏ lại, mờ nhẹ --- */
  a.zalo-contact { width: 40px !important; height: 40px !important; right: 10px !important; bottom: 10px !important; opacity: .8; font-size: 10px !important; }
}

@media (max-width: 640px) {
  /* Phái sinh: tiêu đề "Sau trượt giá" bị bóp thành cột hẹp khi ghi chú dài đứng cạnh → xếp dọc */
  #deriv-slippage-panel .panel-head, .deriv-slippage-head { display: block; }
  #deriv-slippage-panel .panel-head > * + * { margin-top: 6px; }
}