/* ==========================================================================
   LTACV Admin — Theme (typography, màu, nhịp chữ). Tải SAU thẻ style của Tailwind CDN sinh ra khi chạy,
   nên các quy tắc đè lớp Tailwind dùng !important có chủ đích.
   ========================================================================== */
:root {
  --bg: #0B1120;
  --surface: #111827;
  --surface-2: #161F2E;
  --border: #243042;
  --text-primary: #E6EAF0;
  --text-secondary: #AAB3C2;
  --text-muted: #8B95A7;
  --accent: #34D399;
  --accent-soft: #6EE7B7;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Inter (variable, self-host): subset vietnamese + latin, weight 400–700 */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { font-size: 16px; }   /* giữ 16px: Tailwind dùng rem cho mọi khoảng cách */
html, body {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.5; font-weight: 400;
  font-feature-settings: "tnum" 1, "cv11" 1;   /* số đều chữ (tnum); cv11 chỉ có tác dụng nếu bản font có glyph này */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body { font-size: 14px; }
main, aside, nav { font-family: var(--font-sans); }
input, select, textarea, button { font-family: inherit; }
::placeholder { color: var(--text-muted) !important; opacity: 1; }

/* ---- Thang cỡ chữ: 20/600 · 14/600 · 14/400 · 13 · nhỏ nhất 12 ---- */
.page-title { font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; }
.text-\[9px\], .text-\[10px\], .text-\[11px\], [class*="text-[9"], [class*="text-[10"], [class*="text-[11"] { font-size: 12px !important; line-height: 1.5 !important; }
.text-xs { font-size: 13px !important; line-height: 1.5 !important; }
.text-sm { font-size: 14px !important; line-height: 1.5 !important; }
h1, h2, h3, h4 { line-height: 1.35; }

/* Nhãn viết HOA: 12px, giãn 0.04em, không xuống dòng */
.uppercase { font-size: 12px !important; letter-spacing: 0.04em !important; white-space: nowrap; }
.tracking-wider, .tracking-wide, .tracking-widest { letter-spacing: 0.04em !important; }

/* ---- Độ đậm: giảm còn 600 ---- */
.font-black, .font-extrabold, .font-bold { font-weight: 600 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }
.font-normal { font-weight: 400 !important; }

/* ---- Số & mã ---- */
.tabular-nums { font-feature-settings: "tnum" 1, "cv11" 1; font-variant-numeric: tabular-nums; }
.font-mono, code, kbd, pre {
  font-family: var(--font-mono) !important; font-size: 12px !important; font-weight: 400 !important;
  font-feature-settings: normal; letter-spacing: 0;
}

/* ---- Màu chữ (WCAG AA trên --bg/--surface/--surface-2) ---- */
.text-white { color: var(--text-primary) !important; }
.text-slate-100, .text-gray-100, .text-gray-200 { color: var(--text-primary) !important; }
.text-gray-300 { color: #C9D1DC !important; }
.text-gray-400 { color: var(--text-secondary) !important; }
.text-gray-500, .text-gray-600, .text-gray-700, .text-slate-500 { color: var(--text-muted) !important; }
/* nút/khối nền màu đậm: giữ chữ trắng cho đủ tương phản */
.text-white[class*="bg-emerald-"], .text-white[class*="bg-teal-"], .text-white[class*="bg-blue-"], .text-white[class*="bg-indigo-"],
.text-white[class*="bg-purple-"], .text-white[class*="bg-amber-"], .text-white[class*="bg-rose-"], .text-white[class*="bg-cyan-"] { color: #fff !important; }
/* nền nút đặc: dùng sắc độ 700 (chữ trắng ≥ 4.5:1) */
.bg-emerald-600 { background-color: #047857 !important; }
.bg-teal-600 { background-color: #0F766E !important; }
.bg-blue-600 { background-color: #1D4ED8 !important; }
.bg-purple-600 { background-color: #7E22CE !important; }
.bg-amber-600 { background-color: #B45309 !important; }
.bg-rose-600 { background-color: #BE123C !important; }
.hover\:bg-emerald-500:hover { background-color: #065F46 !important; }
.hover\:bg-teal-500:hover { background-color: #115E59 !important; }
.hover\:bg-blue-500:hover { background-color: #1E40AF !important; }
.hover\:bg-purple-500:hover { background-color: #6B21A8 !important; }
.hover\:bg-amber-500:hover { background-color: #92400E !important; }
.hover\:bg-rose-500:hover { background-color: #9F1239 !important; }

/* ---- Giảm glow / bóng phát sáng ---- */
[class*="shadow-"] { --tw-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important; --tw-shadow-colored: 0 1px 2px rgba(0, 0, 0, .35) !important; }
.backdrop-blur-xl, .backdrop-blur-lg { backdrop-filter: none !important; }

/* ---- Không ngắt dòng xấu ---- */
th, button, .btn-outline, label.uppercase { white-space: nowrap; }
span[class*="rounded-"][class*="px-"], span[class*="rounded-full"] { white-space: nowrap; }
th { font-weight: 600; }

/* ---- Thành phần dùng chung ---- */
.btn-outline {
  display: inline-flex; align-items: center; gap: .4rem; padding: .375rem .9rem; border-radius: .6rem;
  border: 1px solid var(--accent); color: var(--accent-soft); background: transparent;
  font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background-color .15s;
}
.btn-outline:hover { background: rgba(52, 211, 153, .12); }
.copy-btn { color: var(--text-muted); padding: 2px 4px; border-radius: 4px; line-height: 1; }
.copy-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, .08); }
.mono-id { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.sticky-head th { position: sticky; top: 0; z-index: 10; background: var(--surface-2) !important; box-shadow: 0 1px 0 var(--border); }
.row-hover:hover { background: rgba(255, 255, 255, .035); }
.grid-btn { color: var(--text-primary); border-color: var(--border); }

.grid-btn, .grid-btn span { font-size: 13px !important; }

/* ==========================================================================
   <select> chuẩn hóa — giống nhau trên Chrome/Edge/Firefox/Cốc Cốc/Safari.
   Dùng !important để đè các lớp Tailwind rời rạc (bg-gray-950, border, rounded-xl, px-3, min-h-10, text-xs…) trên từng select.
   ========================================================================== */
select {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 4px 28px 4px 10px !important;
  min-height: 0 !important;
  font: inherit; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23AAB3C2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
  cursor: pointer;
  box-shadow: none;
  text-overflow: ellipsis;
}
select::-ms-expand { display: none; }
select:hover, select.force-hover { border-color: var(--text-muted) !important; }
select:focus, select.force-focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important; }
select option { background-color: var(--surface); color: var(--text-primary); }
select:disabled { opacity: .5; cursor: not-allowed; }

/* Select trong chip bộ lọc: không viền riêng, hòa vào chip, chỉ giữ mũi tên SVG */
.filter-chip select {
  border: none !important; background-color: transparent !important; box-shadow: none !important;
  padding: 2px 22px 2px 4px !important; border-radius: 4px !important;
  background-position: right 4px center !important;
}
.filter-chip select:hover, .filter-chip select.force-hover { background-color: rgba(255, 255, 255, .06) !important; border: none !important; }
.filter-chip select:focus, .filter-chip select.force-focus { background-color: rgba(255, 255, 255, .06) !important; border: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent) !important; }

/* ==========================================================================
   Table kit (bảng kéo đổi độ rộng cột) + ngăn chi tiết
   ========================================================================== */
.tk-th { position: relative; overflow: hidden; text-overflow: ellipsis; }
.tk-label { display: block; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.tk-handle { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 2; user-select: none; }
.tk-handle::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 1px; background: var(--border); transition: background-color .15s, top .15s, bottom .15s; }
.tk-th:hover .tk-handle::after { background: var(--text-muted); }
.tk-handle:hover::after { background: var(--accent); width: 2px; top: 15%; bottom: 15%; }
body.tk-resizing, body.tk-resizing * { cursor: col-resize !important; user-select: none !important; }
.tk-td { overflow: hidden; }
.tk-ell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* đo độ rộng nội dung thật của cột (nhấp đúp mép cột) */
.tk-measure td, .tk-measure td * { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; -webkit-line-clamp: unset !important; display: revert; }
.tk-measure td { overflow: visible !important; }
.tk-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }