/* ─────────────────────────────────────────────────────────────
   tables.css — Kiểu bảng chung của giao diện mới (08/10/2026, bước 3)
   Dùng cho: Hôm nay mua gì (tin-hieu-ta), Bộ lọc FA, Danh mục mẫu, Khuyến nghị,
   khu thành viên (dashboard: bảng jr-table) và các bảng xem trước ở trang Bản tin.
   Nguyên tắc: tiêu đề bảng là đường kẻ mực (không còn băng đen), hàng ngăn bằng đường kẻ mảnh (không kẻ sọc),
   số căn phải + tabular-nums, trạng thái là chấm + chữ (không viên thuốc tô nền), lãi/lỗ là chữ + mũi tên.
   Muốn quay lại kiểu cũ: bỏ dòng <link> tới file này trong từng trang.
   ───────────────────────────────────────────────────────────── */

[hidden]{display:none!important;}

/* ── Đầu trang: vạch mực, nhãn nhỏ, tiêu đề lớn ── */
body.tv2 .page-head{border-top:2px solid var(--color-black);padding-top:14px;margin-bottom:22px;text-align:left;}
body.tv2 .page-head .pg-k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-gray-text);margin-bottom:4px;}
body.tv2 .page-head h1{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin-bottom:0;}
body.tv2 .page-head p{margin-top:8px;}

/* ── Khung bảng phẳng ── */
body.tv2 .card{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;}
html body .btp-wrap,html body .reco-wrap{border:0;border-radius:0;}
body.tv2 .toolbar{margin-bottom:12px;}
.scroll-hint{display:none;font-size:12px;color:var(--color-gray-text);margin:0 0 8px;}
.scroll-hint.on{display:block;}

/* ── Chỉ số tóm tắt (KPI) thành dải phẳng ── */
body.tv2 .stats{gap:0;margin:6px 0 20px;border-top:1px solid var(--color-border);border-bottom:0;}
body.tv2 .stat{background:none;border:0;border-left:1px solid var(--color-border);border-radius:0;padding:14px 22px 6px;}
body.tv2 .stat:first-child{border-left:0;padding-left:0;}
body.tv2 .stat .lbl{font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.07em;color:var(--color-gray-text);}
body.tv2 .stat .val{font-family:var(--font-body);font-size:34px;font-weight:700;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums;}
@media(max-width:1000px){
  body.tv2 .stats{grid-template-columns:repeat(3,1fr);}
  body.tv2 .stat:nth-child(3n+1){border-left:0;padding-left:0;}
  body.tv2 .stat:nth-child(n+4){border-top:1px solid var(--color-border);}
}
@media(max-width:560px){
  body.tv2 .stats{grid-template-columns:repeat(2,1fr);}
  body.tv2 .stat:nth-child(3n+1){border-left:1px solid var(--color-border);padding-left:22px;}
  body.tv2 .stat:nth-child(odd){border-left:0;padding-left:0;}
  body.tv2 .stat:nth-child(n+3){border-top:1px solid var(--color-border);}
  body.tv2 .stat .val{font-size:28px;}
}

/* ── Bảng ── */
html body :is(table.bt,table.fa,table.dm,table.rc,table.btp,table.reco,table.jr-table){font-size:14px;border-collapse:separate;border-spacing:0;}
html body table.bt{min-width:1080px;}
html body table.fa{min-width:1060px;}
html body table.btp{min-width:1080px;}
html body :is(table.bt,table.fa,table.dm,table.rc,table.btp,table.reco,table.jr-table) thead th{
  background:var(--color-white);color:var(--color-black);
  font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
  padding:14px 10px;border-top:2px solid var(--color-black);border-bottom:1px solid var(--color-black);white-space:normal;vertical-align:bottom;}
html body :is(table.bt,table.fa,table.dm,table.rc,table.btp,table.reco,table.jr-table) thead th:hover{background:var(--color-white);}
html body :is(table.bt,table.fa) thead th .arw{color:var(--color-gray-text);opacity:.55;font-size:8px;}
html body :is(table.bt,table.fa) thead th.sorted .arw{color:var(--color-black);opacity:1;}
html body :is(table.bt,table.fa,table.dm,table.rc,table.btp,table.reco,table.jr-table) td{
  padding:14px 10px;border-bottom:1px solid var(--color-border);font-size:14px;
  font-variant-numeric:tabular-nums;vertical-align:middle;}
html body :is(table.bt,table.fa,table.dm,table.btp,table.rc,table.reco) tbody tr:nth-child(even) td{background:transparent;}
html body :is(table.bt,table.fa,table.dm,table.btp,table.rc,table.reco,table.jr-table) tbody tr:hover td{background:rgba(21,24,27,.04);}
html body :is(table.bt,table.fa,table.dm,table.rc,table.btp,table.reco,table.jr-table) td .muted{color:var(--color-gray-text);}

/* mã cổ phiếu: xanh (cùng màu với % tăng), đậm, sàn nhỏ bên dưới */
html body :is(table.bt,table.fa,table.dm,table.rc,table.btp,table.reco,table.jr-table) strong.up,
html body :is(table.reco,table.btp,table.jr-table) td > strong{color:var(--color-green-text);font-weight:800;letter-spacing:.02em;font-size:14.5px;}
.tk-ex{display:block;margin-top:2px;font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--color-gray-text);}

/* cột đầu (Mã) đứng yên khi kéo ngang */
html body :is(table.bt,table.fa,table.dm,table.btp,table.rc,table.reco) :is(th,td):first-child{position:sticky;left:0;z-index:2;background:var(--color-white);}
html body :is(table.bt,table.fa,table.dm,table.btp,table.rc,table.reco) thead th:first-child{z-index:4;}
html body :is(table.bt,table.fa,table.dm,table.btp,table.rc,table.reco) tbody tr:hover td:first-child{background:#EEEBE3;}

/* lãi / lỗ: chữ màu + mũi tên (không tô nền) */
html body table.bt td.up,html body table.bt td.down,html body table.btp td.up,html body table.btp td.down{font-weight:700;}
html body table.bt td.flat,html body table.btp td.flat{color:var(--color-black);}
.pl-ar{display:inline-block;font-size:.72em;margin-right:5px;vertical-align:.08em;}
html body table.reco td.pl,html body table.reco td.pl.pl-neg{background:transparent;font-weight:700;}
html body table.reco td.pl.pl-neg{color:var(--color-red-text);}
html body table.rc .pl,html body table.jr-table .pl{font-weight:700;}
html body table.reco .why,html body table.rc .why{color:var(--color-gray-text);font-size:13.5px;line-height:1.55;}
html body .yn-yes{font-weight:700;}
html body .yn-yes::after{content:" ✓";}
html body .yn-no::after{content:" ✗";}

/* trạng thái: chấm + chữ */
html body :is(.st-badge,.cf-badge,.pri-badge,.rc-badge,.reco-badge){
  display:inline-flex;align-items:center;gap:7px;padding:0!important;border:0!important;border-radius:0!important;background:none!important;
  font-family:var(--font-body);font-size:13.5px;font-weight:700;line-height:1.3;color:var(--color-black)!important;white-space:nowrap;}
html body :is(.st-badge,.cf-badge,.pri-badge,.rc-badge,.reco-badge)::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot,#8A8F94);}
html body :is(.st-badge.hold,.cf-badge.hi,.pri-badge.p1,.rc-badge--hold,.reco-badge){--dot:var(--color-green-text);}
html body :is(.cf-badge.mid,.pri-badge.p2,.rc-badge--watch){--dot:var(--color-amber-text);}
html body .rc-badge--sell{--dot:var(--color-red-text);}
html body :is(.st-badge.closed,.cf-badge.lo,.pri-badge.p3,.rc-badge--closed){--dot:#8A8F94;color:var(--color-gray-text)!important;}
html body table.dm .type-badge{padding:2px 8px;border:1px solid var(--color-border);border-radius:2px;background:none;font-size:12.5px;font-weight:600;color:var(--color-black);}

/* hàng tổng / chuẩn so sánh (Danh mục mẫu) */
html body table.dm tr.dm-sum td{background:var(--color-gray-bg)!important;border-top:2px solid var(--color-black);font-weight:700;}
html body table.dm tr.dm-bench td{background:transparent!important;color:var(--color-gray-text);font-style:italic;}

/* phần che mờ cho khách + khung mời đăng nhập */
html body .gate,html body .dm-gate{border:1px solid var(--color-black);border-radius:0;margin-top:14px;padding:18px 22px;
  background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(21,24,27,.05) 8px 9px);}
html body .gate p,html body .dm-gate p{font-family:var(--font-body);font-size:14px;color:var(--color-black);}
html body .reco-gate{background:linear-gradient(180deg,rgba(246,244,238,0),var(--color-white) 55%);}

/* tìm kiếm / phân trang */
html body .pager button{border-radius:2px;font-family:var(--font-body);}
html body .toolbar .count{font-family:var(--font-body);font-size:13px;}

/* ── Chữ trong bảng: đậm và sắc hơn (TT Commons Regular 400 mảnh ở cỡ 14px) ── */
html body :is(table.bt,table.fa,table.dm,table.rc,table.btp,table.reco,table.jr-table) td{font-weight:500;font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;}
html body :is(table.rc,table.reco,table.jr-table) td.muted{font-size:14px!important;font-weight:500;color:var(--color-gray-text);line-height:1.5;max-width:420px!important;}

/* ── Lý do mua: gọn 2 dòng + "Xem thêm" (như bản demo) ── */
html body :is(table.rc,table.reco,table.reco-table) td.why{min-width:300px;max-width:440px;font-size:14px;font-weight:500;color:var(--color-gray-text);line-height:1.55;white-space:normal;}
html body :is(table.rc,table.reco,table.reco-table) td.why .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.why-more{background:none;border:0;padding:0;margin-top:4px;font:700 12.5px var(--font-body);text-decoration:underline;text-underline-offset:3px;color:var(--color-black);cursor:pointer;}
.why-more[hidden]{display:none!important;}

/* ── Khu thành viên: trạng thái chấm + chữ, lãi/lỗ có mũi tên, bảng vừa khung ── */
html body table.reco-table{min-width:0!important;}
html body table.jr-table .badge{display:inline-flex;align-items:center;gap:7px;padding:0;border-radius:0;background:none;
  font-family:var(--font-body);font-size:13.5px;font-weight:700;color:var(--color-black);white-space:nowrap;}
html body table.jr-table .badge::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot,#8A8F94);}
html body table.jr-table .badge-active{--dot:var(--color-green-text);}
html body table.jr-table .badge-trial{--dot:var(--color-amber-text);}
html body table.jr-table .badge-expired{--dot:var(--color-red-text);}
html body table.jr-table .badge-suspended{--dot:#8A8F94;color:var(--color-gray-text);}
html body table.jr-table td.up::before,html body table.jr-table td.down::before{font-size:.72em;margin-right:5px;vertical-align:.08em;}
html body table.jr-table td.up::before{content:"▲";}
html body table.jr-table td.down::before{content:"▼";}
html body table.jr-table td.muted.up::before,html body table.jr-table td.muted.down::before{content:none;}

/* ── Khuyến nghị (khu thành viên): các cột gọn lại để vừa khung, không cần kéo ngang ── */
html body table.reco-table{table-layout:auto;width:100%;}
html body table.reco-table th,html body table.reco-table td{padding-left:8px;padding-right:8px;}
html body table.reco-table th{font-size:11.5px;letter-spacing:.06em;}
html body table.reco-table td.why{min-width:240px;max-width:none;width:34%;}
html body table.reco-table td{font-size:14px;}
html body table.reco-table td.mono{font-family:var(--font-body);}
@media(max-width:1100px){
  html body table.reco-table th,html body table.reco-table td{padding-left:6px;padding-right:6px;}
  html body table.reco-table td.why{min-width:200px;}
}

/* ── Điện thoại (≤760px): bảng Khuyến nghị giữ nguyên dạng bảng như máy tính (không còn dạng thẻ): cột Mã đứng yên, vuốt ngang xem tiếp ── */
@media(max-width:760px){
  html body #rcTableWrap table.rc{min-width:800px;}
  html body table.reco-table{min-width:800px!important;}
  html body table.reco-table :is(th,td):first-child{position:sticky;left:0;z-index:2;background:var(--color-white);}
  html body table.reco-table thead th:first-child{z-index:4;}
  html body :is(table.rc,table.reco-table) td.why{min-width:230px;}
  html body table.reco-table th,html body table.reco-table td{padding-left:8px;padding-right:8px;}
  html body #rcTableWrap table.rc th,html body #rcTableWrap table.rc td{padding-left:8px;padding-right:8px;}

  /* Hiệu suất đầu tư: 6 ô chỉ số xếp 3 cột × 2 hàng như máy tính */
  .modal-overlay{padding:10px;}
  html body :is(.modal--xl,.modal-xl){padding:18px 14px 20px;max-width:100%;}
  html body :is(.modal--xl .stat-row,.modal-xl .grid-3){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-bottom:16px!important;}
  html body :is(.modal--xl,.modal-xl) .stat-card{padding:10px 9px;border-radius:var(--radius);}
  html body :is(.modal--xl,.modal-xl) .stat-card .lbl{font-size:11px;line-height:1.3;margin:0 0 4px!important;min-height:2.6em;}
  html body :is(.modal--xl,.modal-xl) .stat-card .num{font-size:20px;line-height:1.15;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px;}
  html body :is(.modal--xl,.modal-xl) .stat-card .num span{font-size:12px!important;}
  html body :is(.modal--xl,.modal-xl) .stat-card .num span.up,html body :is(.modal--xl,.modal-xl) .stat-card .num span.down{font-size:inherit!important;}
  html body :is(.modal--xl,.modal-xl) .modal-head h3{font-size:18px;}
}

/* ── Điện thoại: ô nhập chữ ≥16px để iPhone KHÔNG tự phóng to trang khi bấm vào (trang bị zoom nên cửa sổ như "Hiệu suất đầu tư" hiện quá to);
      cửa sổ (modal) luôn nằm trong chiều rộng màn hình ── */
@media(max-width:760px){
  html body :is(input,select,textarea){font-size:16px!important;}
}
html body .modal-overlay{overflow-x:hidden;}
html body :is(.modal,.modal--xl,.modal-xl){min-width:0;box-sizing:border-box;}
html body .modal .table-scroll{min-width:0;max-width:100%;}

/* ── Danh mục mẫu · "Hiệu suất đầu tư" (lịch) và "Hiệu suất so với VN-Index" (biểu đồ): đồng bộ kiểu chung (phẳng, vạch mực, góc vuông, chữ đậm) ── */
html body .pf-grid{gap:44px;margin-top:30px;}
@media(max-width:980px){ html body .pf-grid{gap:34px;} }
html body .pf-grid > .card{background:none;border:0;border-top:2px solid var(--color-black);border-radius:0;box-shadow:none;padding:14px 0 0;}
html body .pf-h{font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0 0 16px;}
html body .pf-cal-head{margin-bottom:12px;}
html body .pf-cal-title{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
html body .pf-nav{border:1.5px solid var(--color-black);border-radius:50%;width:34px;height:34px;padding:0;font-size:20px;display:inline-flex;align-items:center;justify-content:center;}
html body .pf-nav:disabled{border-color:var(--color-border);}
html body .pf-stats{background:none;border-radius:0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-black);padding:12px 0;gap:0;margin-bottom:16px;}
html body .pf-stats div{flex:1;padding-right:14px;}
html body .pf-stats div + div{padding-left:18px;border-left:1px solid var(--color-border);}
html body .pf-stats span{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--color-gray-text);}
html body .pf-stats b{font-family:var(--font-body);font-size:28px;font-weight:700;letter-spacing:-.03em;}
html body .pf-wd span{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
html body .pf-days,html body .pf-wd{gap:4px;}
html body .pf-day{border-radius:2px;font-size:13px;font-weight:500;}
html body .pf-day b{font-family:var(--font-body);font-size:11px;font-weight:700;}
html body .pf-day--none{background:none;}
html body .pf-day--flat{background:none;}
@media(max-width:480px){ html body .pf-day{font-size:11.5px;border-radius:2px;} html body .pf-day b{font-size:9.5px;} html body .pf-h{font-size:21px;} html body .pf-stats b{font-size:24px;} }

html body .pf-chart{--pf-vni:#BF8A0B;--pf-port:#0B7A45;}
html body .pf-seg{background:none;border:1px solid var(--color-black);border-radius:2px;padding:0;gap:0;margin-bottom:14px;}
html body .pf-seg button{border-radius:0;padding:9px 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-black);}
html body .pf-seg button + button{border-left:1px solid var(--color-black);}
html body .pf-seg button.on{background:var(--color-black);color:var(--color-white);box-shadow:none;}
html body .pf-legend{gap:8px 26px;font-size:14px;font-weight:600;margin-bottom:10px;}
html body .pf-key::before{width:10px;height:10px;border-radius:0;}
html body .pf-key b{font-size:14.5px;font-weight:700;}
html body .pf-ax{font-family:var(--font-body);font-size:11.5px;font-weight:500;}
html body .pf-end{font-family:var(--font-body);font-size:12px;}
html body .pf-line{stroke-width:2.4;}
html body .pf-tip{border-radius:0;border:1px solid var(--color-black);box-shadow:5px 5px 0 rgba(21,24,27,.13);font-weight:500;}
html body .pf-tip b{font-family:var(--font-body);}
html body .pf-note{font-size:13px;color:var(--color-gray-text);}

/* ── 08/10/2026 · Hôm nay mua gì / Danh mục mẫu: nhãn FA có biểu tượng (bỏ chấm tròn), tiêu đề cột gọn, cột đếm/Có-Không căn giữa ── */
html body .fa-tags{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
html body .fa-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:13.5px;font-weight:700;line-height:1.35;color:var(--color-black);white-space:nowrap;}
/* mũi tên sắp xếp: nằm ở góc trên bên phải ô tiêu đề (vùng đệm), không chiếm chỗ trong dòng chữ → tiêu đề các cột thẳng hàng với số liệu */
html body table.jr-table thead th{position:relative;}
html body table.jr-table thead th .jr-sort{position:absolute;right:4px;top:3px;margin:0;font-size:7.5px;letter-spacing:-1px;color:var(--color-gray-text);opacity:.5;}
html body table.jr-table thead th.is-sorted .jr-sort{color:var(--color-black);opacity:1;}
/* căn giữa: STT, Số phiên nắm giữ, Đồng thuận ngành, ADX, Mẫu nến đảo */
html body table.jr-table th.ctr,html body table.jr-table td.ctr{text-align:center;padding-left:8px;padding-right:8px;}
html body table.jr-table th.stt,html body table.jr-table td.stt{width:46px;min-width:46px;padding-left:6px;padding-right:6px;}
html body table.jr-table td.ctr .badge,html body table.jr-table td.ctr .yn-yes{justify-content:center;}