/* =============================================================================
 * "CHUYỂN ĐỔI THỰC TẾ" (khach nhap) + BAO CAO KHACH HANG ADS (noi bo) — 18/09/2026
 *
 * ⭐ Chi dung token cua 00-tokens.css. ⛔ Mot breakpoint duy nhat: 850px.
 * ⛔ BAY DA GAP (17/09): `.bang thead th {position:sticky; top:var(--header-height)}` nam trong
 *   `.bang-vo {overflow-x:auto}` ⇒ ghim THEO khung cuon, lech xuong va DE MAT dong dau.
 *   Moi bang o day `position: static` cho tieu de.
 * ============================================================================= */

/* --- Chon tai khoan + ngay ------------------------------------------------ */
.ttt-chon { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-5); }
.ttt-o { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.ttt-o .o { min-height: 44px; padding: 0 var(--space-3); }
.ttt-o select.o { max-width: 100%; }

.ttt-the { margin-bottom: var(--space-6); }
.ttt-cuon { position: relative; }
.ttt-ngay-tieu-de { margin: 0; }
.ttt-luu { margin-top: var(--space-4); }

/* --- Bang nhap: <=849 moi dong la mot the (theo `.bang`), o nhap gian het ------ */
/* ⚠ `.bang.ttt-bang` (0,2,2) de THANG ca `.bang thead th:first-child {position:sticky}` cua 30-bo-phan. */
.bang.ttt-bang thead th { position: static; }
/* ⚠ `.bang tbody td {text-align:left}` (0,1,2) de mat `td.so` ⇒ cot so lech tieu de (do tren anh chup 1440). */
.bang.ttt-bang tbody td.so { text-align: right; font-variant-numeric: tabular-nums; }
.ttt-bang tbody th { flex-direction: column; align-items: flex-start; gap: 2px; }
.ttt-loai { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ttt-ten { font-weight: 400; overflow-wrap: anywhere; }
.ttt-bang tbody td { align-items: center; }
.ttt-o-nhap { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; max-width: 220px; }
.ttt-o-nhap .o { min-height: 44px; }
.ttt-so { text-align: right; font-variant-numeric: tabular-nums; }
.ttt-loi { font: 600 13px/20px var(--font-body); color: var(--state-danger-text); }
.ttt-dong-loi { box-shadow: inset 4px 0 0 var(--state-danger-text); }
.ttt-dong-tong th, .ttt-dong-tong td { font-weight: 700; }
.ttt-tang { color: var(--state-success-text); }
.ttt-giam { color: var(--state-danger-text); }

/* --- Ngay gan day ------------------------------------------------------------ */
.ttt-phan { margin-bottom: var(--space-8); }
.ttt-ngay { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ttt-ngay-muc {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-field);
  background: var(--surface-raised); color: var(--text-primary); text-decoration: none;
  font: 500 14px/22px var(--font-body);
}
.ttt-ngay-muc[aria-current] { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.ttt-ngay-muc .chip { white-space: nowrap; }

/* --- Ky tom tat + the CPA --------------------------------------------------------- */
.ttt-ky { margin-bottom: var(--space-2); }
.ttt-ky-muc {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--border-field); border-radius: 999px; text-decoration: none; font: 500 14px/22px var(--font-body);
}
.ttt-ky-muc[aria-current] { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--surface-raised); }
.ttt-cpa { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-4) 0 0; }
.ttt-cpa dd { margin: 0; }

/* --- Bang noi bo: bang THAT o moi kho, cuon ngang trong khung ------------------- */
/* ⚠ `position: relative` BAT BUOC: `.an-thi-giac` (absolute) trong bang se thoat khung cuon va keo tran CA TRANG (do duoc o 320px). */
.bang-cuon { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-4); }
.bang-gon { width: 100%; border-collapse: collapse; font: 400 14px/22px var(--font-body); }
.bang-gon caption { text-align: left; font: 500 13px/20px var(--font-body); color: var(--text-muted); padding-bottom: var(--space-2); }
.bang-gon th, .bang-gon td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-hairline); text-align: left; vertical-align: top; }
.bang-gon thead th { position: static; background: var(--surface-sunken); font-weight: 600; white-space: nowrap; }
.bang-gon th.so, .bang-gon td.so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bang-gon tbody tr:hover { background: rgba(69, 135, 99, .06); }
.bang-gon .chua-nhap td, .bang-gon .chua-nhap th { color: var(--text-muted); background: var(--surface-sunken); }
.bang-gon .dong-tong th, .bang-gon .dong-tong td { font-weight: 700; background: var(--surface-sunken); }
.bang-gon .ngay-moi th, .bang-gon .ngay-moi td { border-top: 2px solid var(--border-field); }

/* --- Khung quan tri that (header Reporting gon) ------------------------------------ */
.qt-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-3) 25px; background: var(--surface-raised); border-bottom: 1px solid var(--border-hairline); }
.qt-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.qt-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font: 600 14px/22px var(--font-body); }
.qt-nav a[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--brand-primary); }
.qt-tim { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; margin-bottom: var(--space-4); }
.qt-tim .o { min-height: 44px; max-width: 320px; }
.qt-the-so { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); }
.qt-the-so dd { margin: 0; }

@media (min-width: 850px) {
  .ttt-ngay { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ttt-ngay-muc { flex-direction: column; align-items: flex-start; }
  .ttt-cpa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ttt-bang tbody th { display: table-cell; }
  .ttt-bang tbody td { vertical-align: middle; }
  .ttt-o-nhap { max-width: none; }
  .ttt-bang td:nth-child(3) { width: 150px; }
  .qt-the-so { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}