/* TNT API layout-balance v1 — khuôn khổ cân bằng chung cho mọi trang.
   Mục tiêu: cùng một gutter ngang, cùng một nhịp dọc, cùng một cỡ card/gap,
   chữ không bị chèn ép, khoảng trống không thừa/thiếu cục bộ.
   File này nạp SAU styles/customer/admin/legal/black-ui nên chỉ căn chỉnh,
   không đổi màu sắc, thương hiệu hay logic. */
:root {
  --layout-max: 1200px;
  --layout-gutter: clamp(20px, 4vw, 48px);
  --layout-section-y: clamp(48px, 6vw, 72px);
  --layout-card-pad: 22px;
  --layout-gap: 18px;
  --layout-gap-sm: 12px;
  --layout-radius: 20px;
  --layout-text: 1.65;
}

html { scroll-padding-top: 84px; }

body {
  line-height: var(--layout-text);
  text-rendering: optimizeLegibility;
  /* V282 (P5): bo overflow-x:hidden — no CHE tran ngang that (ky thuat gia
     pass). Tran ngang se duoc sua tai nguyen candu va gate CDP kiem soat. */
}

/* Khung chứa chung: mọi section lớn cùng một độ rộng và gutter. */
.hero,
.section,
.providers,
.cta,
.legalShell,
.content,
.dashboard-section,
.docs-section,
.terms-section {
  box-sizing: border-box;
}

.hero,
.section,
.providers,
.cta {
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
  margin-left: auto;
  margin-right: auto;
  max-width: calc(var(--layout-max) + var(--layout-gutter) * 2);
  width: 100%;
}

/* Nhịp dọc thống nhất: hero, section, providers, cta không còn nhảy 30/44/54/88/90px. */
.hero {
  gap: 32px;
  padding-top: var(--layout-section-y);
  padding-bottom: 32px;
  align-items: center;
}

.section {
  padding-top: var(--layout-section-y);
  padding-bottom: var(--layout-section-y);
}

.providers {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 24px;
  padding-bottom: 24px;
}

.cta {
  margin-top: 0;
  margin-bottom: var(--layout-section-y);
  padding-top: 44px;
  padding-bottom: 44px;
}

/* Tiêu đề và đoạn văn cùng một nhịp, tránh khoảng trống thừa trên/dưới. */
h1, h2, h3 { text-wrap: balance; }
h1 { margin: 18px 0 14px; }
h2 { margin: 10px 0 10px; }
h3 { margin: 6px 0 8px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
.lead { max-width: 68ch; }
.section-title { margin-bottom: 28px; }
.section-title p { margin-bottom: 8px; }

/* Lưới và khoảng cách: cùng một gap, card cùng một padding. */
.grid,
.pricing,
.stats,
.dash-cards,
.metrics,
.usageGrid,
.usageMetrics,
.subscriptionPlanGrid,
.terms-grid,
.public-model-catalog-grid {
  gap: var(--layout-gap);
}

.cards article,
.plan,
.stats div,
.dash-cards div,
.key-box,
.metric,
.card,
.secret,
.doc-panel,
.code-card,
.terminal-card,
.dashboard,
.providers,
.customerModelBrandSummary,
.public-model-brand-card {
  border-radius: var(--layout-radius);
}

.cards article,
.plan,
.metric,
.card,
.secret {
  padding: var(--layout-card-pad);
}

/* Chữ không bị chèn ép: chiều cao dòng tối thiểu, bẻ từ dài, cột bảng co giãn. */
p, li, td, th, small, span, code {
  overflow-wrap: break-word;
  word-break: normal;
}
.providerKeyIdentity code, .providerKeyIdentity span, .providerKeyIdentity small, .providerRouteHealthIdentity b, .providerRouteHealthIdentity small {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

td, th { line-height: 1.55; }
.doc-notes, .steps span, .cards p, .plan p, .providers p { line-height: 1.65; }

/* Bảng luôn nằm trong khung cuộn, không đẩy vỡ layout. */
#providers,
#modelsTable,
#logsTable,
#subscriptionTable,
#transactionsTable,
#usersTable,
#keysTable,
.usageRecentPanel,
.doc-table,
/* V302-TABLE-SCROLL: #keys/#transactions/#usageByModel/#usageRecent (Customer)
   va cac bang Admin thao tac (duyet user, nap QR, anti-spam) truoc day khong
   nam trong selector nay -> tran ngang/bi bop tren man hinh hep. Cac div
   bar-chart (#usageByEndpoint/#usageCostTable) KHONG them vao: khong phai bang. */
#pendingUsersTable,
#registeredUsersTable,
#pendingQrTransactionsTable,
#confirmedBankTransactionsTable,
#antiSpamTable,
#antiSpamIpTable,
#keys,
#transactions,
#usageByModel,
#usageRecent {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

table { width: 100%; table-layout: auto; }
th, td { vertical-align: top; }

/* Cổng khách hàng và admin: sidebar + nội dung co giãn theo viewport.
   Sidebar dùng clamp theo vw nên kéo giãn trình duyệt không kẹt 250/260px. */
.app { grid-template-columns: clamp(200px, 22vw, 280px) minmax(0, 1fr); }
.app aside { padding: 20px 16px; gap: 8px; }
/* V306-SIDEBAR-SCROLL: admin.css/customer.css dat aside `position:sticky;
   height:100vh` nhung KHONG co overflow => logo + 19 nut admin (~1250px) vuot
   man hinh laptop (~700-900px), phan duoi (Nap tien, Logs, Dang xuat) bi cat,
   lan chuot khong toi. Sidebar tu cuon doc trong khung 100vh; overscroll
   contain de cuon het sidebar khong keo ca trang. */
.app aside { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* FULL-WIDTH-V4: nội dung admin/khách hàng full chiều rộng viewport trừ sidebar.
   Không co cụm giữa, không thừa hai bên; bảng có trọn chỗ nên hết bị che. */
.content {
  min-width: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 28px var(--layout-gutter) 48px;
}
header { margin-bottom: 18px; }
.metrics { margin-bottom: 16px; }

/* Form nhiều cột không dồn chữ: cùng một min cột và gap. */
.grid-form,
#providerForm,
#pricingPlansForm,
.subscriptionGrantForm,
.comboAddMember {
  gap: 14px;
  align-items: end;
}

label { min-width: 0; }
input, select, textarea { min-width: 0; max-width: 100%; }

/* Catalog model và usage: lưới co giãn theo khung nhìn, mobile xếp chồng có nhịp. */
.usageGrid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.usageHero { gap: 18px; padding: 20px 22px; }
.public-model-catalog-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* V292-SERVER-MODEL-VND: khung SERVER bao ngoài nhóm hãng. Mỗi server một
   khung riêng (tên + số model), bên trong vẫn là lưới brand card cũ; mount
   giữ class grid nên các khung server tự xếp hàng theo khung nhìn. */
.public-model-server-frame {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--layout-radius);
  background: rgba(15, 23, 42, 0.35);
}
.public-model-server-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.public-model-server-name { margin: 0; font-size: 1.02rem; letter-spacing: 0.04em; }
.public-model-server-count { font-size: 0.78rem; opacity: 0.75; }
.public-model-price { display: block; font-size: 0.78rem; opacity: 0.85; }

/* Cân bằng bảng usage khách hàng: chữ đủ chỗ, khung cuộn theo chiều rộng thật.
   Không cố định min-width px: bảng rộng đúng nội dung, container tự cuộn. */
.usagePanel { min-width: 0; overflow-x: auto; }
.usagePanel table { min-width: max(100%, 46rem); }
.usageRecentPanel table { min-width: max(100%, 62rem); }
.usageModelLayout { grid-template-columns: clamp(120px, 18vw, 160px) minmax(0, 1fr); gap: 20px; }
.usagePanelHead { gap: 14px; flex-wrap: wrap; }

/* Cân bằng bảng Models admin: cột co theo khung nhìn, không ép px cứng.
   min-width dùng rem theo nội dung để kéo giãn trình duyệt vẫn vừa chữ. */
#tab-models { display: grid; gap: var(--layout-gap); }
#tab-models .card { min-width: 0; }
#modelImportToolbar { align-items: end; }
#manualModelEntry { align-items: end; }
#modelsTable table { min-width: max(100%, 68rem); }
#modelsTable th, #modelsTable td { padding: 12px 10px; }
.modelTntKeyCard { margin-bottom: 0; }
.modelListHead { margin-bottom: 14px; }

/* Khung nội dung admin/khách hàng: full chiều rộng viewport trừ sidebar,
   không co cụm giữa, không thừa hai bên. Trang legal/đăng nhập giữ khung hẹp. */
.app { grid-template-columns: clamp(200px, 22vw, 280px) minmax(0, 1fr); }
.metrics { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.grid-form { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* Pháp lý và đăng nhập: cùng một khung hẹp cân giữa. */
.legalShell { width: min(960px, calc(100% - 32px)); padding-top: 32px; padding-bottom: 64px; }
.legalHero, .legalCard { padding: 24px; }
.auth, .login {
  gap: 32px;
  align-items: center;
  padding: 48px var(--layout-gutter);
  max-width: calc(var(--layout-max) + var(--layout-gutter) * 2);
  margin: 0 auto;
  width: 100%;
}

/* Điều hướng và footer cùng gutter với nội dung. */
.nav, footer {
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
}
footer { gap: 12px; align-items: center; flex-wrap: wrap; }

/* Điểm gãy thống nhất: lưới tự co theo container, dự phòng xếp chồng khi hẹp.
   Không ép số cột cứng: auto-fit tự giãn/thu theo độ rộng trình duyệt. */
@media (max-width: 1100px) {
  .grid, .pricing { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .metrics { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
  .usageMetrics { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
  .public-model-catalog-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .usageGrid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
  .app { grid-template-columns: clamp(180px, 24vw, 240px) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .hero, .split, .dashboard, .docs-layout, .docs-layout-full { grid-template-columns: minmax(0, 1fr); }
  .grid, .pricing, .dash-cards, .metrics, .terms-grid { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }
  .app aside { position: static; height: auto; }
  .auth, .login { grid-template-columns: 1fr; }
  .public-model-catalog-grid { grid-template-columns: 1fr; }
  .usageGrid { grid-template-columns: 1fr; }
  .usageModelLayout { grid-template-columns: 1fr; }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .hero { padding-top: 48px; }
}

@media (max-width: 640px) {
  :root { --layout-card-pad: 18px; --layout-gap: 14px; }
  h1 { line-height: 1.02; }
  .content { padding: 22px 18px 40px; }
  .cta { padding-top: 32px; padding-bottom: 32px; }
  .usageMetrics { grid-template-columns: 1fr; }
}

/* Fluid theo container: khi trình duyệt bị kéo hẹp, card tự co không vỡ chữ.
   Container query ưu tiên hơn media query vì đo đúng khung chứa thật. */
@supports (container-type: inline-size) {
  .content, .usagePanel, #tab-models .card { container-type: inline-size; }
  @container (max-width: 720px) {
    .usageModelLayout { grid-template-columns: 1fr; }
    .usagePanelHead { flex-direction: column; align-items: stretch; }
  }
}

/* FLUID-V2: ghi đè mọi lưới còn cố định px trong admin.css/customer.css.
   File này nạp sau cùng nên thắng mọi rule cứng: sidebar, metrics, form,
   provider key, pricing, subscription, uptime, bank QR, donut đều co giãn
   theo viewport/container, không kẹt số cột hay min-width px. */
.usageMetrics { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.usageDonut { width: clamp(96px, 12vw, 132px); height: clamp(96px, 12vw, 132px); }
.customerModelTest { min-width: 0; }
.uptimeChartPanel { min-width: 0; width: min(100%, 640px); max-width: 100%; }
.bankQrBox { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.bankQrBox img { width: min(220px, 100%); }
#providerForm { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
#pricingPlansForm { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.providerKeyRow { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.providerKeyInfo { grid-template-columns: minmax(0, 1fr); }
.providerKeyAdd { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.pricingPlanRow { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.subPlanGrid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.apiTestOverview { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.modelLimitGrid { grid-template-columns: repeat(auto-fit, minmax(min(90px, 100%), 1fr)); min-width: 0; }
.uptimeMetrics { grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
.providerHealthSummary { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.providerPricingGrid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
/* LAYOUT-FIX-V239: auto-fit o day tao track rong — providerHealthPanel span
   grid-column:1/-1 giu cho tat ca track song, nen 2 panel tren bi bop hẹp
   ~340px con phia phai trong hoenh. Giu intent 2 cot (khong auto-fit) va tu
   lo media query vi file nay load SAU admin.css. */
/* V291-PROVIDER-LAYOUT (ảnh #19): đổi tỉ lệ 1.25fr/.75fr lệch (panel Server
   ngắn chiếm cột rộng → trống trải; panel keys dài bị ép cột hẹp) sang 2 cột
   gần cân theo nhóm chức năng: trái = API KEY nguồn (providerCardColKeys),
   phải = Server + Thông tin + Giới hạn (providerCardColConfig); health và
   TEST MAX vẫn full-width 1/-1 như V239. */
.providerCardGrid { grid-template-columns: minmax(min(430px, 100%), 1.05fr) minmax(min(360px, 100%), .95fr); }
.providerCardCol { display: grid; gap: 16px; min-width: 0; align-content: start; }
@media(max-width:1400px) { .providerCardGrid { grid-template-columns: minmax(0, 1fr); } }
.providerRouteHealthRow { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.subscriptionGrantForm { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.modelImportAttempt { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.modelSearchTools .searchBox { flex: 1 1 min(360px, 100%); min-width: 0; }
.tableHead .searchBox, .subscriptionTableTools .searchBox { min-width: 0; }
.stickyLogsTable, #logsTable { min-width: 0; }
/* V267-DEAD-SELECTOR: `admin.js:2867` gan class `stickyLogsTable` LEN CHINH
   the `<table>` (`$("#logsTable table")?.classList.add(...)`) nen
   `.stickyLogsTable table` KHONG BAO GIO khop — rule nay chet suot tu truoc.
   Sua thanh selector dung: chinh the table la nguon cua min-width. */
.stickyLogsTable { min-width: max(100%, 80rem); }

/* TYPE-SYNC-V3: đồng bộ chữ và số theo kích thước khung.
   - Thẻ metric: nhãn và số cùng nhịp, cỡ số co theo vw nên không lệch hàng.
   - Số bảng: font tabular-nums để mọi chữ số rộng bằng nhau, căn phải thẳng cột.
   - Header bảng: một dòng, cỡ co theo khung, không bẻ vụn CACHE HIT/ĐỘ TRỄ TB.
   - Pill trạng thái: cùng một chiều cao, chữ không tràn khi khung hẹp. */
.metric { display: grid; gap: clamp(4px, 0.8vw, 10px); align-content: start; }
.metric span { font-size: clamp(10px, 1.1vw, 12px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric b { font-size: clamp(20px, 3vw, 30px); line-height: 1.1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usageMetrics .metric b, #usageMetrics .metric b { font-size: clamp(18px, 2.6vw, 28px); }
table { font-variant-numeric: tabular-nums; }
th { font-size: clamp(10px, 1.05vw, 12px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
td { font-size: clamp(11px, 1.25vw, 13px); line-height: 1.5; }
.usagePanel th:nth-child(n+4), .usagePanel td:nth-child(n+4),
#usageRecent th:nth-child(n+4), #usageRecent td:nth-child(n+4),
#logs th:nth-child(n+4), #logs td:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.usagePanel th:nth-child(-n+3), .usagePanel td:nth-child(-n+3),
#usageRecent th:nth-child(-n+3), #usageRecent td:nth-child(-n+3),
#logs th:nth-child(-n+3), #logs td:nth-child(-n+3) { text-align: left; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 4px 12px; font-size: clamp(10px, 1.1vw, 12px); font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.uptimeChartPanel b, .uptimeMetrics b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* V267-MOBILE-DRAWER: anh #10/#11 — tren dien thoai, `@media (max-width:900px)`
   chi doi `.app aside` sang `position:static; height:auto` nen 17-18 nut nav
   xep doc CHIEM TRON man hinh (admin 17 nut, customer 8 nut). Khong co nut
   nao de mo/dong. Nay sidebar thanh DRAWER truot tu trai, con `.content` chiem
   het man hinh; nut ☰ dinh o goc. Rule nay o CUOI FILE nen no thang moi
   rule `.app aside` trong admin.css/customer.css (nhung file do load truoc). */
.navToggle { display: none; }
.navScrim { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .app aside {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(86vw, 300px);
    height: 100dvh;
    padding-bottom: 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .6);
  }
  /* Khong co `hidden` o .navScrim mac dinh -> hien; toggle bat/tat. */
  .navScrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .62); }
  .app.navOpen aside { transform: translateX(0); }
  .navToggle {
    display: grid;
    place-items: center;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 70;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 12px;
    font-size: 20px;
    line-height: 1;
  }
  /* Nut che len tieu de -> day header xuong cho khop. */
  .content { padding-top: 64px; }
  .app.navOpen aside .brandWithLogo { padding-right: 46px; }
  .app.navOpen aside::after {
    content: "\00D7";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--line, rgba(255, 255, 255, .12));
    color: var(--text, #f4f7fb);
    font-size: 24px;
    line-height: 1;
  }
  /* V267-LOGS-MOBILE: bang logs 12 cot. `min-width:1500px` cu cua admin.css la
     TRAN, nen tren dien thoai moi thay chi thay 3 cot va ten model bi be tep
     ("qwen3.8-flash" xuong 2 dong — anh #10). Bo min-width, giu chu khong
     wrap trong o MODEL/KEY/STATUS, con lai cuộn ngang trong #logsTable. */
  #logsTable { overflow-x: auto; max-height: 70vh; }
  .stickyLogsTable { min-width: 0; width: 100%; }
  .stickyLogsTable td:nth-child(1), .stickyLogsTable th:nth-child(1),
  .stickyLogsTable td:nth-child(3), .stickyLogsTable th:nth-child(3),
  .stickyLogsTable td:nth-child(8), .stickyLogsTable th:nth-child(8) { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .app aside { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* V294-C8: khối chuyển đổi gói TOKEN sang VNĐ trong tab Gói đã mua.
   Form nhập đơn giá + 2 nút; report hiển thị từng dòng before/after và các
   gói bị chặn, lỗi stale-digest hiện đỏ. */
.subscriptionConvertCard { display: grid; gap: 14px; }
.subscriptionConvertForm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; align-items: end; }
.subscriptionConvertReport { display: grid; gap: 6px; }
.subscriptionConvertTotals { margin: 0; font-weight: 600; }
.subscriptionConvertRow { display: grid; gap: 2px; padding: 6px 10px; background: rgba(127, 127, 127, 0.08); border-radius: 8px; }
.subscriptionConvertRow span { color: var(--muted); }
.subscriptionConvertBlocked { padding: 4px 10px; border-radius: 8px; }
.subscriptionConvertBlocked span { color: var(--muted); }
.subscriptionConvertError { color: #ff8080; font-weight: 600; }

/* V311-PRICE-DISCOUNT: tag giam gia, gia cu gach ngang, gia moi noi bat. */
.priceDiscountTag { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 64, 64, 0.14); border: 1px solid rgba(255, 80, 80, 0.55); font-size: 12px; width: fit-content; }
.priceDiscountTag b { color: #fff; background: #e53935; border-radius: 999px; padding: 0 6px; font-weight: 800; }
.priceDiscountTag span { color: #ff9a9a; }
/* V316-MODEL-MIN-CHARGE: phi toi thieu / request tren tung model (cong khach + trang chu). */
.modelMinChargeTag { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 184, 0, 0.12); border: 1px solid rgba(255, 184, 0, 0.5); font-size: 12px; width: fit-content; color: #ffd27a; }
.modelMinChargeTag b { color: #ffe3a3; font-weight: 800; }
.priceDiscounted { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.priceDiscountOld, .public-model-price-old { color: var(--muted, #8a8a8a); text-decoration: line-through; opacity: 0.8; font-size: 0.85em; }
.tokenMultiplierBadge.priceDiscountNew { color: #ffd54f; border-color: rgba(255, 213, 79, 0.7); background: rgba(255, 213, 79, 0.14); font-weight: 800; }
.public-model-price.is-discounted { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.public-model-price-band { display: inline-flex; align-items: baseline; gap: 4px; }
.public-model-price-new { color: #ffd54f; font-weight: 800; }
.public-model-discount-tag { color: #fff; background: #e53935; border-radius: 999px; padding: 1px 8px; font-weight: 800; font-size: 12px; }
.priceDiscountEditor { margin-top: 4px; }
.priceDiscountEditor summary { cursor: pointer; font-size: 12px; color: var(--muted, #9a9a9a); }
.priceDiscountEditor summary.is-active { color: #ff8a80; font-weight: 700; }
.priceDiscountRow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.priceDiscountRow input { width: 72px; min-width: 0; }
.priceDiscountRow select { min-width: 0; }

/* ===== V317-UI-TIDY: sap xep lai bang Models (admin) =====
   Truoc: panel chi tiet test luon bung (moi hang cao 700-1000px), cot CTX
   rong 46px nhoi them phi toi thieu, nut Test tong to, cot lech nhau.
   Nay: 10 cot gon, chi tiet test thu vao <details>, nut thao tac xep luoi. */
#modelsTable table { min-width: 0; width: 100%; table-layout: auto; }
#modelsTable th, #modelsTable td { padding: 10px 8px; vertical-align: top; }
#modelsTable th { white-space: normal; line-height: 1.25; }
#modelsTable th:nth-child(1), #modelsTable td:nth-child(1) { width: 84px; }
#modelsTable th:nth-child(2), #modelsTable td:nth-child(2) { width: 190px; min-width: 170px; }
#modelsTable th:nth-child(3), #modelsTable td:nth-child(3),
#modelsTable th:nth-child(4), #modelsTable td:nth-child(4),
#modelsTable th:nth-child(5), #modelsTable td:nth-child(5),
#modelsTable th:nth-child(6), #modelsTable td:nth-child(6),
#modelsTable th:nth-child(7), #modelsTable td:nth-child(7) { width: 92px; min-width: 84px; }
#modelsTable td:nth-child(3) input, #modelsTable td:nth-child(4) input, #modelsTable td:nth-child(5) input { width: 100%; min-width: 0; height: 34px; padding: 7px 8px; font-size: 12px; }
#modelsTable th:nth-child(8), #modelsTable td:nth-child(8) { width: 128px; min-width: 110px; }
#modelsTable th:nth-child(9), #modelsTable td:nth-child(9) { min-width: 170px; }
#modelsTable th:nth-child(10), #modelsTable td:nth-child(10) { width: 132px; }
#modelsTable .modelLimitGrid { grid-template-columns: 1fr; min-width: 0; }
#modelsTable .modelLimitField > span { display: none; }
#modelsTable .modelMinChargeField > span { display: block; font-size: 10px; color: var(--muted, #8aa0b4); }
#modelsTable .modelAliasCell { display: grid; gap: 6px; min-width: 0; }
#modelsTable .modelAliasCell > input { width: 100%; min-width: 0; }
#modelsTable .modelAliasCell > small { line-height: 1.35; overflow-wrap: anywhere; }
.modelStateCell { display: grid; gap: 6px; }
#modelsTable .modelActiveBtn { min-width: 0; width: 100%; padding: 7px 8px; font-size: 11px; }
/* Review F3: td giu display table-cell (grid lam o khong gian theo chieu cao
   hang => duong ke lech); xep nut doc bang block + margin. */
#modelsTable td:nth-child(10) > button { display: block; width: 100%; min-width: 0; margin: 0 0 6px; padding: 7px 8px; font-size: 12px; white-space: normal; }
#modelsTable td:nth-child(10) > button:last-child { margin-bottom: 0; }
#modelsTable .modelTestHead { min-width: 0; justify-items: stretch; gap: 4px; }
#modelsTable .modelTestHead .testAllBtn { width: 100%; min-height: 32px; padding: 6px 10px; font-size: 13px; border-radius: 10px; }
#modelsTable .modelTestHead > span { justify-self: start; font-size: 10px; }
#modelsTable .modelTestParityOption { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0; white-space: normal; text-transform: none; }
#modelsTable .testStatus { display: grid; justify-items: start; align-items: start; min-width: 0; width: 100%; max-width: none; padding: 8px 10px; border-radius: 12px; text-align: left; letter-spacing: 0; font-size: 12px; gap: 4px; }
#modelsTable .testStatus > small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; color: var(--muted, #9fb3c8); }
.modelTestDetails { width: 100%; min-width: 0; }
.modelTestDetails > summary { cursor: pointer; font-size: 11px; font-weight: 800; color: #7dd3fc; letter-spacing: 0; list-style-position: inside; }
.modelTestDetails[open] > summary { margin-bottom: 6px; }
#modelsTable tr.modelTestDetailRow > td { width: auto; min-width: 0; padding: 0 8px 16px; border-top: 0; }
.modelTestDetailRow .modelTestDebug { margin-top: 0; max-height: 560px; overflow: auto; padding: 12px; border: 1px solid rgba(125, 211, 252, 0.25); border-radius: 12px; background: rgba(8, 18, 32, 0.6); }
.modelTestDetailRow .modelTestDebugRow { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px; align-items: start; overflow-wrap: anywhere; }
.modelTestDetailRow .modelTestDebugRow code { white-space: pre-wrap; word-break: break-word; }
.modelTestDetailRow table { min-width: 0; width: 100%; }
.modelTestDetailRow th, .modelTestDetailRow td { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) { .modelTestDetailRow .modelTestDebugRow { grid-template-columns: 1fr; gap: 2px; } }

/* V317-UI-TIDY: the thong ke (Tong quan, Van hanh, Goi da mua...) — nhan va so
   bi cat "..." (DOANH THU HOM ..., 999.010.009.027.21...). Cho xuong dong thay
   vi cat de admin doc duoc du nhan va so tien. */
.metric span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; overflow-wrap: anywhere; }
.metric b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.metrics { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.metric { container-type: inline-size; min-width: 0; }
.metric b { font-size: clamp(18px, 16cqi, 30px); }

/* V317-UI-TIDY: tab Cau hinh gom 3 nhom co tieu de, moi nhom 1 luoi rieng. */
#settingsForm { display: grid; grid-template-columns: 1fr; gap: 16px; }
#settingsForm > button { justify-self: start; min-width: 180px; }
.settingsGroup { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px 14px; align-items: start; margin: 0; padding: 14px 16px 16px; min-width: 0; border: 1px solid rgba(56, 214, 255, 0.16); border-radius: 14px; }
.settingsGroup > legend { padding: 0 8px; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #7dd3fc; }
.settingsGroup > label { min-width: 0; }
.settingsGroup > label.wideField { grid-column: span 2; }
@media (max-width: 560px) { .settingsGroup > label.wideField { grid-column: auto; } }

/* V317-UI-TIDY: bang User & so du tran ngang 1317px > 1163px (o Cong/tru 337px
   = input + 2 nut tren 1 dong). Xep input tren, 2 nut duoi => vua khung. */
#usersTable table { min-width: max(100%, 52rem); }
#usersTable .moneyAdjust { grid-template-columns: 1fr 1fr; gap: 6px; min-width: 170px; }
#usersTable .moneyAdjust input { grid-column: 1 / -1; }
#usersTable .moneyAdjust .miniBtn, #usersTable .moneyAdjust .dangerBtn { padding: 7px 8px; }
#usersTable td:nth-child(4) input { min-width: 0; width: 100%; max-width: 160px; }
#usersTable td:nth-child(6) input, #usersTable td:nth-child(6) select { max-width: 120px; }
#keysTable table { min-width: max(100%, 56rem); }
#keysTable td:nth-child(7) input { width: 100%; max-width: 96px; min-width: 0; }
#keysTable td:nth-child(3) input { min-width: 0; width: 100%; max-width: 160px; }

/* V319-UI-POLISH: bang Models gon lai. Truoc: hang cao 210px (o model co input
   45px + Giam gia + nut Uptime xep doc, cot Thao tac 4 nut doc), header Test 3
   dong, "PHI TOI THIEU" 2 dong, nhan "VND/request" lap lai o moi hang. */
#modelsTable th, #modelsTable td { padding: 8px 6px; }
#modelsTable th { white-space: nowrap; font-size: 10.5px; letter-spacing: .03em; vertical-align: middle; }
#modelsTable th:nth-child(1), #modelsTable td:nth-child(1) { width: 80px; }
#modelsTable th:nth-child(2), #modelsTable td:nth-child(2) { width: 210px; min-width: 180px; }
#modelsTable th:nth-child(3), #modelsTable td:nth-child(3),
#modelsTable th:nth-child(4), #modelsTable td:nth-child(4),
#modelsTable th:nth-child(5), #modelsTable td:nth-child(5),
#modelsTable th:nth-child(6), #modelsTable td:nth-child(6) { width: 88px; min-width: 84px; }
#modelsTable th:nth-child(7), #modelsTable td:nth-child(7) { width: 104px; min-width: 100px; }
#modelsTable th:nth-child(8), #modelsTable td:nth-child(8) { width: 120px; min-width: 116px; }
#modelsTable th:nth-child(9), #modelsTable td:nth-child(9) { min-width: 190px; }
#modelsTable th:nth-child(10), #modelsTable td:nth-child(10) { width: 150px; min-width: 150px; }
@media (min-width: 1800px) { #modelsTable th:nth-child(2), #modelsTable td:nth-child(2) { width: 280px; } }
#modelsTable td:nth-child(n) input, #modelsTable td:nth-child(n) select { height: 32px; min-height: 32px; padding: 6px 8px; font-size: 12px; }
#modelsTable td:nth-child(n) input { padding: 6px 5px; }
#modelsTable td input::placeholder { font-size: 11px; }
#modelsTable .modelMinChargeField > span { display: none; }
/* O model: input + mo ta tren, [Giam gia] [Uptime] cung 1 hang; mo ra thi chiem ca hang */
#modelsTable .modelAliasCell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
#modelsTable .modelAliasCell > input, #modelsTable .modelAliasCell > small, #modelsTable .modelAliasCell > .modelComboBadge { flex: 1 1 100%; }
#modelsTable .modelAliasCell > small { font-size: 11px; line-height: 1.35; color: var(--muted, #8b949e); }
#modelsTable .modelAliasCell > .priceDiscountEditor { flex: 0 0 auto; margin: 0; }
#modelsTable .modelAliasCell > .priceDiscountEditor[open] { flex-basis: 100%; }
#modelsTable .modelAliasCell > .uptimeChartPanel.compact { width: auto; margin: 0; }
#modelsTable .modelAliasCell > .uptimeChartPanel:not(.compact) { flex-basis: 100%; }
#modelsTable .priceDiscountSummary { display: inline-flex; align-items: center; height: 26px; padding: 0 6px; border-radius: 6px; font-size: 11px; list-style: none; white-space: nowrap; }
#modelsTable .priceDiscountSummary::-webkit-details-marker { display: none; }
#modelsTable .uptimeToggleBtn { height: 26px; min-height: 26px; padding: 0 6px; font-size: 11px; }
/* Cot Trang thai: 2 nut 1 dong moi nut */
#modelsTable .modelStateCell { gap: 4px; }
#modelsTable .modelActiveBtn { height: 28px; padding: 0 6px; font-size: 11px; white-space: nowrap; }
/* Header cot Test: "TEST" + nut Test tong cung dong, o doi chieu cache dong 2 */
#modelsTable .modelTestHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 8px; min-width: 0; }
#modelsTable .modelTestHead > span { order: -1; justify-self: auto; font-size: inherit; }
#modelsTable .modelTestHead .testAllBtn { width: auto; height: 24px; min-height: 24px; padding: 0 8px; font-size: 11px; border-radius: 6px; }
#modelsTable .modelTestParityOption { flex: 0 1 auto; justify-self: auto; font-size: 10px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
#modelsTable .modelTestParityOption .modelTestParityCheckbox { width: 13px; height: 13px; }
/* O ket qua Test */
#modelsTable .testStatus { padding: 6px 8px; border-radius: 8px; font-weight: 600; gap: 3px; }
#modelsTable .testStatus > b { font-size: 11.5px; line-height: 1.35; }
#modelsTable .testStatus > small { -webkit-line-clamp: 2; font-weight: 400; }
/* Cot Thao tac: [Test | Xoa] tren 1 dong, 2 nut dai ben duoi */
.modelActionGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 0; }
.modelActionGrid > button { order: 2; grid-column: 1 / -1; min-width: 0; width: 100%; height: 28px; margin: 0; padding: 0 6px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modelActionGrid > .modelTestActionBtn { order: 0; grid-column: auto; }
.modelActionGrid > .dangerBtn { order: 1; grid-column: auto; }
/* Nut flex khong ve dau "..." => block + line-height de text-overflow co tac dung;
   khi dang test nhan "Dang test..." dai hon o 65px => nut Test chiem ca hang. */
.modelActionGrid > button { display: block; line-height: 26px; text-align: center; }
.modelActionGrid > .modelTestActionBtn.is-loading { grid-column: 1 / -1; }
/* O tim kiem cao 54px (input padding 12px) -> bang chieu cao nut */
.modelSearchTools .searchBox { min-height: 36px; }
.modelSearchTools .searchBox input { height: 34px; padding: 0; }
/* The thong ke: so lon (999.010.009.027.217) bi bat giua chu so o 3 dong vi
   overflow-wrap:anywhere + co 30px. JS chen <wbr> sau dau cham phan nhom
   (metricValueNodes) => chi xuong dong o ranh gioi nhom; co chu nho lai 1 nac. */
.metric b { font-size: clamp(18px, 13cqi, 28px); overflow-wrap: break-word; }
/* Kich co nut kieu editor: muc sidebar 16px/52px (19 muc = 988px, phai cuon moi
   thay het) va nut chinh 16px/52px lech han nut phu 13px. :where() giu do dac
   thu bang the `button` => moi rule co class (pill, miniBtn...) van thang. */
.app aside button { min-height: 36px; padding: 8px 12px; font-size: 13.5px; }
:where(.app .content) button { padding: 9px 14px; font-size: 13.5px; }
/* Chu trong o nhap ke thua font-weight 800/900 cua label bao quanh => moi gia
   tri nhap deu dam. Dua ve 500 (rule co class van thang). */
:where(.app .content) input, :where(.app .content) select, :where(.app .content) textarea { font-weight: 500; }
/* Thuoc tinh `hidden` bi .miniBtn{display:inline-flex} (admin.css) thang => nut
   "Xoa tim kiem", "Ap dung theo ban xem truoc", "Tai them" hien ca khi JS da an. */
[hidden] { display: none !important; }
/* V320: select Provider canh o tim kiem model + ten provider phu cua model gop. */
.modelProviderFilterBox select { max-width: 260px; }
.modelProviderAlso { color: var(--ct-muted, #8b949e); font-size: 12px; }
/* V320: o doi ten provider ngay tren tieu de card. */
.providerRenameRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; flex: 1 1 320px; }
.providerRenameRow .providerRenameInput { flex: 1 1 220px; min-width: 0; max-width: 420px; height: 36px; font-size: 15px; font-weight: 600; }
.providerRenameRow small { flex-basis: 100%; color: var(--ct-muted, #8b949e); overflow-wrap: anywhere; }
/* V328: modal COMBO admin. Truoc: h2 nam SAU luoi gia (header lon xon), checkbox
   "Dang hoat dong" khong co CSS o admin (chi customer.css) => rong 699px chu roi
   xuong duoi, nhan "Phi toi thieu" xuong dong lam lech hang o nhap, va nut
   Huy / Luu COMBO nam cuoi form cuon (phai cuon het moi thay). */
.adminComboEditorHead > div { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }
.adminComboEditorHead > div > .eyebrow { order: -2; margin: 0; }
.adminComboEditorHead > div > h2 { order: -1; margin: 0; font-size: 22px; line-height: 1.25; }
.adminComboEditorHead .comboClose { flex: 0 0 auto; }
.adminComboEditor .adminComboBillingGrid { align-items: end; }
.adminComboEditor .adminComboBillingGrid .comboField > span { line-height: 1.3; }
.adminComboEditor .priceDiscountRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 0; }
.adminComboEditor .priceDiscountRow input, .adminComboEditor .priceDiscountRow select { width: 100%; min-width: 0; }
.adminComboEditor .comboActiveField { display: inline-flex; align-items: center; gap: 10px; width: auto; justify-self: start; margin: 0; font-weight: 600; cursor: pointer; }
.adminComboEditor .comboActiveField input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--ct-accent, #d97757); }
.adminComboEditorActions { position: sticky; bottom: -22px; z-index: 3; margin: 0 -22px -22px; padding: 12px 22px 16px; background: var(--ct-panel, #161b22); border-top: 1px solid var(--ct-line, #30363d); box-shadow: 0 -10px 24px rgba(1, 4, 9, .45); }
@media (max-width: 700px) {
  .adminComboEditorActions { bottom: -16px; margin: 0 -16px -16px; padding: 10px 16px 14px; }
  .adminComboEditorActions { grid-template-columns: 1fr 1fr; }
}
/* V328: bo goc khung cong khach = 8px nhu admin (2 khung con sot 14/16px). */
.comboStrategyChoice, .approvalPopup .telegramBtn { border-radius: 8px !important; }
/* V328 review: modal thong bao nap tien / khuyen mai (10px code-theme, 12-20px
   black-ui) + banner khuyen mai cung ve 8px. */
.topupNoticeOverlay .topupNotice, .topupNoticeOverlay .noticeActions button, .promoBanner { border-radius: 8px !important; }
/* V328: nut lien he noi Telegram / Zalo (doi hop dong V325-6 theo yeu cau nguoi
   dung: to hon 52px icon-only / 58px co nhan, NOI len khi re chuot / focus, icon
   SVG dung logo tren dia mau hang Telegram #229ed9, Zalo #0068ff). Vo nut van la
   kieu nut phu cua theme (code-theme muc 6). */
.telegramFloat,.telegramFloat.zaloFloat{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
.telegramFloat:hover,.telegramFloat.zaloFloat:hover,.telegramFloat:focus-visible{background:#262c36!important;border-color:var(--ct-accent)!important;box-shadow:0 16px 34px rgba(1,4,9,.72),0 0 0 3px rgba(217,119,87,.22)!important;transform:translateY(-4px) scale(1.06)!important}
.telegramFloat:active{transform:translateY(-1px) scale(1.02)!important}
.telegramFloat{min-height:58px!important}
.telegramFloat.iconOnly{width:52px!important;height:52px!important;min-height:52px!important;padding:0!important}
.telegramFloat.zaloFloat.iconOnly{bottom:78px!important}
.telegramFloat .telegramFloatIcon{width:38px!important;height:38px!important;background:#229ed9!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.telegramFloat.iconOnly .telegramFloatIcon{width:42px!important;height:42px!important}
.telegramFloat.zaloFloat .telegramFloatIcon{background:#0068ff!important;color:#fff!important}
.telegramFloatIcon svg,.telegramLogo svg{display:block;width:62%;height:62%;overflow:visible}
.telegramFloat.zaloFloat .telegramFloatIcon svg,.telegramLogo.zaloLogo svg{width:78%;height:78%}
@media (prefers-reduced-motion:reduce){.telegramFloat,.telegramFloat:hover,.telegramFloat:focus-visible,.telegramFloat:active{transform:none!important;transition:none!important}}
/* V328: nut lien he trong popup cho duyet - chu "Zalo" mau trang tren bong bong xanh. */
.telegramLogo.zaloLogo svg text { fill: #fff; }
.approvalIconWarn { background: var(--ct-warn, #d29922) !important; color: #0d1117 !important; }
/* V328: chuyen server provider = ban nhap + nut "Luu server" (truoc: doi select
   la PATCH ngay, nhung live refresh ve lai card khi dropdown dang mo => mat su kien). */
.providerServerMove { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; min-width: 0; }
.providerServerMove label { flex: 1 1 180px; min-width: 0; }
.providerServerSave { white-space: nowrap; }
.providerServerSave.is-dirty { background: var(--ct-accent-btn, #b5552f) !important; border-color: var(--ct-accent, #d97757) !important; color: #fff !important; }
.serverRowActions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.serverRowActions button[disabled] { opacity: .45; cursor: not-allowed; }
/* V328: kiem soat IP dang ky (tab Duyet user). */
.ipRegistrationForm { margin-bottom: 16px; }
.ipRegistrationForm .wideField { grid-column: 1 / -1; display: grid; gap: 4px; }
.ipRegistrationForm small { color: var(--ct-muted, #8b949e); }
.registrationIpCell { display: grid; gap: 4px; min-width: 0; }
.registrationIpCell code { overflow-wrap: anywhere; }
.registrationIpDup { background: var(--ct-panel2, #1c2128) !important; border-color: var(--ct-warn, #d29922) !important; color: var(--ct-warn, #d29922) !important; }
/* V330-TEMP-LOCK-UI: thanh chon thoi gian khoa tam + nut khoa theo dong */
.tempLockBar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.tempLockBar label { display: flex; align-items: center; gap: 8px; }
.tempLockBar small { color: var(--ct-muted, #8b949e); }
.tempLockActions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 240px; }
.tempLockActions button { white-space: nowrap; }
.tempLockPill { white-space: nowrap; }
/* V331-USER-DETAILS: panel chi tiet user (bang Danh sach user). Panel width:0 +
   min-width de KHONG lam bang ngoai rong ra; bang con tu cuon ngang. Bang user
   rong hon khung (mobile) => panel dinh trai, rong = khung nhin (--user-detail-w). */
#usersTable tr.userRowExpanded > td { border-bottom-color: transparent !important; }
#usersTable tr.userDetailRow > td.userDetailCell { padding: 0 0 14px !important; background: transparent !important; }
.userDetailToggle.active { border-color: var(--ct-accent, #d97757) !important; color: var(--ct-accent, #d97757) !important; }
.userDetailPanel { position: sticky; left: 0; width: 0; min-width: min(100%, var(--user-detail-w, 100%)); box-sizing: border-box; display: grid; gap: 12px; padding: 12px; border: 1px solid var(--ct-line, #30363d); border-radius: 8px; background: var(--ct-panel2, #1c2128); white-space: normal; }
/* V331-F1: o panel la td:last-child cua dong => an `#usersTable td:last-child
   { white-space: nowrap }` (admin.css). white-space: normal tren panel cho chu xuong dong. */
.userDetailToolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.userDetailToolbar > b { margin-right: auto; overflow-wrap: anywhere; }
.userDetailToolbar small { color: var(--ct-muted, #8b949e); }
.userDetailWindows { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.userDetailWindows .miniBtn.active { border-color: var(--ct-accent, #d97757) !important; color: var(--ct-accent, #d97757) !important; }
.userDetailSection { display: grid; gap: 8px; min-width: 0; }
.userDetailSection h4 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.userDetailSection h4 small { color: var(--ct-muted, #8b949e); text-transform: none; letter-spacing: 0; font-weight: 400; }
.userDetailFacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin: 0; }
.userDetailFacts dt { color: var(--ct-muted, #8b949e); font-size: 12px; }
.userDetailFacts dd { margin: 0 0 4px; overflow-wrap: anywhere; }
.userDetailStats { display: flex; flex-wrap: wrap; gap: 8px; }
.userDetailStats > span { display: grid; gap: 2px; min-width: 96px; padding: 6px 10px; border: 1px solid var(--ct-line, #30363d); border-radius: 6px; background: var(--ct-panel, #161b22); }
.userDetailStats small { color: var(--ct-muted, #8b949e); font-size: 11px; }
.userDetailTableWrap { overflow-x: auto; max-width: 100%; }
.userDetailTable { width: 100%; min-width: 640px; border-collapse: collapse; }
.userDetailTable th, .userDetailTable td { padding: 6px 8px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ct-line-soft, #21262d); }
.userDetailTable td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 140px; }
.userDetailSub { display: block; color: var(--ct-muted, #8b949e); font-size: 11px; }
.userDetailEmpty { margin: 0; color: var(--ct-muted, #8b949e); }
.userDetailError { margin: 0; color: var(--ct-bad, #f85149); }
/* V332-USER-DETAILS-LIVE: moi cap nhan/gia tri 1 o luoi (truoc V332 dt/dd la 2 o
   rieng => nhan va gia tri lech hang); bang request cao co cuon doc + tieu de
   dinh; to sang request moi; trang thai truc tiep; xem truoc so tien 10k. */
.userDetailFact { display: grid; gap: 2px; min-width: 0; padding: 4px 0; border-bottom: 1px solid var(--ct-line-soft, #21262d); }
.userDetailFact dd { margin: 0; }
.userDetailTableWrap.userDetailTall { max-height: 560px; overflow-y: auto; }
.userDetailTall thead th { position: sticky; top: 0; z-index: 1; background: var(--ct-panel2, #1c2128); }
.userDetailTable tr.userDetailFresh > td { background: rgba(63, 185, 80, .14); }
.userDetailStatus.live { color: var(--ct-good, #3fb950) !important; }
.userDetailLive.active { border-color: var(--ct-good, #3fb950) !important; color: var(--ct-good, #3fb950) !important; }
.userDetailMono { font-size: 11px; color: var(--ct-muted, #8b949e); overflow-wrap: anywhere; }
.userDetailSub.userDetailBad { color: var(--ct-bad, #f85149); }
.moneyShortcutPreview { display: block; grid-column: 1 / -1; min-height: 1em; font-size: 11px; color: var(--ct-muted, #8b949e); white-space: normal; }
.moneyShortcutPreview.invalid { color: var(--ct-bad, #f85149); }
/* V338-IP-ACCOUNTS: bang chi tiet tung tai khoan cung IP (tab Duyet user). */
button.registrationIpDup.ipAccountsBtn { cursor: pointer; font: inherit; justify-self: start; }
button.registrationIpDup.ipAccountsBtn:hover { filter: brightness(1.2); text-decoration: underline; }
.ipAccountsPanel .ipAccountsTools { display: flex; gap: 6px; flex-wrap: wrap; }
.ipAccountsSummary p { margin: 2px 0; overflow-wrap: anywhere; }
.ipAccountsTable { max-height: 70vh; overflow: auto; }
.ipAccountsTable td { white-space: nowrap; }
.ipAccountGap.fast { color: var(--ct-bad, #f85149); font-weight: 600; }
/* V341-HOME-CATALOG: trang chu vo layout khi co >= 3 server - khung server xep
   NGANG (moi khung ~297px) long luoi brand card (259px), dong model la flex 1 hang
   4 phan tu (ten + badge + gia + phi toi thieu) => ten bi bop 37px, 1 ky tu/dong,
   section cao 11k px; luoi trong bi keo gian bang cot dai nhat => khoang trong.
   Sua: khung server xep CHONG full rong, brand card trong khung tu chia cot,
   dong model la luoi 2 hang (ten | badge, gia + phi toi thieu xuong duoi). */
#publicModelCatalog.public-model-catalog-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
.public-model-server-frame { align-content: start; }
.public-model-server-frame > .public-model-catalog-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.public-model-list > .public-model-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 12px; }
.public-model-list > .public-model-item > .public-model-name-wrap { grid-column: 1; grid-row: 1; }
.public-model-list > .public-model-item > .public-model-health { grid-column: 2; grid-row: 1; justify-self: end; }
.public-model-list > .public-model-item > :not(.public-model-name-wrap):not(.public-model-health) { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 520px) {
  .public-model-list > .public-model-item { grid-template-columns: minmax(0, 1fr); }
  .public-model-list > .public-model-item > .public-model-health { grid-column: 1; grid-row: 2; justify-self: start; }
}
/* V341-HOME-NAV: da dang nhap, 901..1180px: chip tai khoan (nhan + email + so du)
   chiem ~285px => ten menu be 2 dong ("Tinh / nang"), 901px tran ngang. Giu menu 1
   dong + chua lai le phai (do that: 901px con 3px, 1181px con 13px truoc khi nan);
   <=1280 an nhan "Tai khoan", <=1180 an email, <=1024 thu khoang cach. <=900 menu
   tha xuong giu du chip. */
.navlinks a, .nav .userNav > span { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1280px) {
  .nav .userNav > span { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .navlinks { gap: 16px; }
  .nav .userNav b { display: none; }
}
@media (min-width: 901px) and (max-width: 1024px) {
  .nav { gap: 14px; }
  .navlinks { gap: 12px; }
}
/* <=900 menu tha xuong: styles.css dat CA .navlinks lan .nav-actions absolute
   top:74px => nut Dang nhap / chip tai khoan DE len "Tinh nang / Bang gia"; chip
   max-width 42vw (~157px) bop email ve 0. Xep 2 khoi noi tiep trong luong. */
@media (max-width: 900px) {
  .nav.open { flex-wrap: wrap; }
  .nav.open .navlinks, .nav.open .nav-actions { position: static; flex: 1 1 100%; order: 3; margin: 0; min-width: 0; }
  .nav.open .nav-actions { order: 4; justify-content: center; }
  .nav.open .userNav { max-width: 100%; min-width: 0; }
  .nav.open .userNav b { min-width: 0; max-width: none; }
}