.max-h-\[80vh\] {
    max-height: 80vh;
}

.max-h-\[85vh\] {
    max-height: 85vh;
}

.max-h-\[90vh\] {
    max-height: 90vh;
}

/* =====================================================================
   Extended color palette — Tailwind v2 purge không include tự động.
   Thêm thủ công ở đây để dùng bất cứ lúc nào cần.
   ===================================================================== */

/* ------------------------------------------------------------------
   ROSE — hoàn hàng, cảnh báo đỏ nhẹ
   ------------------------------------------------------------------ */
.bg-rose-50  { background-color: #fff1f2; }
.bg-rose-100 { background-color: #ffe4e6; }
.bg-rose-200 { background-color: #fecdd3; }
.bg-rose-300 { background-color: #fda4af; }
.bg-rose-400 { background-color: #fb7185; }
.bg-rose-500 { background-color: #f43f5e; }
.bg-rose-600 { background-color: #e11d48; }
.bg-rose-700 { background-color: #be123c; }
.text-rose-400 { color: #fb7185; }
.text-rose-500 { color: #f43f5e; }
.text-rose-600 { color: #e11d48; }
.text-rose-700 { color: #be123c; }
.text-rose-800 { color: #9f1239; }
.border-rose-200 { border-color: #fecdd3; }
.border-rose-300 { border-color: #fda4af; }
.border-rose-400 { border-color: #fb7185; }
.hover\:bg-rose-100:hover { background-color: #ffe4e6; }
.hover\:bg-rose-200:hover { background-color: #fecdd3; }
.hover\:bg-rose-600:hover { background-color: #e11d48; }
.hover\:bg-rose-700:hover { background-color: #be123c; }
.focus\:ring-rose-400:focus { --tw-ring-color: #fb7185; box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),0 0 0 3px var(--tw-ring-color); }

/* ------------------------------------------------------------------
   AMBER — cảnh báo vàng, đang chờ, nháp
   ------------------------------------------------------------------ */
.bg-amber-50  { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-200 { background-color: #fde68a; }
.bg-amber-300 { background-color: #fcd34d; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-amber-600 { background-color: #d97706; }
.bg-amber-700 { background-color: #b45309; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.border-amber-200 { border-color: #fde68a; }
.border-amber-300 { border-color: #fcd34d; }
.border-amber-400 { border-color: #fbbf24; }
.hover\:bg-amber-100:hover { background-color: #fef3c7; }
.hover\:bg-amber-200:hover { background-color: #fde68a; }
.hover\:bg-amber-600:hover { background-color: #d97706; }
.hover\:bg-amber-700:hover { background-color: #b45309; }

/* ------------------------------------------------------------------
   ORANGE — hành động phụ, nhập hàng, giao vận
   ------------------------------------------------------------------ */
.bg-orange-50  { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-200 { background-color: #fed7aa; }
.bg-orange-400 { background-color: #fb923c; }
.bg-orange-500 { background-color: #f97316; }
.bg-orange-600 { background-color: #ea580c; }
.bg-orange-700 { background-color: #c2410c; }
.text-orange-500 { color: #f97316; }
.text-orange-600 { color: #ea580c; }
.text-orange-700 { color: #c2410c; }
.border-orange-200 { border-color: #fed7aa; }
.border-orange-400 { border-color: #fb923c; }
.hover\:bg-orange-100:hover { background-color: #ffedd5; }
.hover\:bg-orange-600:hover { background-color: #ea580c; }

/* ------------------------------------------------------------------
   EMERALD — xác nhận, nhận tiền, trạng thái tốt
   ------------------------------------------------------------------ */
.bg-emerald-50  { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-200 { background-color: #a7f3d0; }
.bg-emerald-300 { background-color: #6ee7b7; }
.bg-emerald-400 { background-color: #34d399; }
.bg-emerald-500 { background-color: #10b981; }
.bg-emerald-600 { background-color: #059669; }
.bg-emerald-700 { background-color: #047857; }
.text-emerald-500 { color: #10b981; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.border-emerald-200 { border-color: #a7f3d0; }
.border-emerald-300 { border-color: #6ee7b7; }
.border-emerald-400 { border-color: #34d399; }
.hover\:bg-emerald-100:hover { background-color: #d1fae5; }
.hover\:bg-emerald-200:hover { background-color: #a7f3d0; }
.hover\:bg-emerald-600:hover { background-color: #059669; }
.hover\:bg-emerald-700:hover { background-color: #047857; }
.focus\:ring-emerald-400:focus { --tw-ring-color: #34d399; box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),0 0 0 3px var(--tw-ring-color); }

/* ------------------------------------------------------------------
   TEAL — trạng thái hoàn thành, đã giao, xác nhận
   ------------------------------------------------------------------ */
.bg-teal-50  { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-200 { background-color: #99f6e4; }
.bg-teal-400 { background-color: #2dd4bf; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-teal-600 { background-color: #0d9488; }
.bg-teal-700 { background-color: #0f766e; }
.text-teal-500 { color: #14b8a6; }
.text-teal-600 { color: #0d9488; }
.text-teal-700 { color: #0f766e; }
.border-teal-200 { border-color: #99f6e4; }
.border-teal-400 { border-color: #2dd4bf; }
.hover\:bg-teal-100:hover { background-color: #ccfbf1; }
.hover\:bg-teal-600:hover { background-color: #0d9488; }

/* ------------------------------------------------------------------
   CYAN — thông tin, liên kết, badge phụ
   ------------------------------------------------------------------ */
.bg-cyan-50  { background-color: #ecfeff; }
.bg-cyan-100 { background-color: #cffafe; }
.bg-cyan-400 { background-color: #22d3ee; }
.bg-cyan-500 { background-color: #06b6d4; }
.bg-cyan-600 { background-color: #0891b2; }
.text-cyan-500 { color: #06b6d4; }
.text-cyan-600 { color: #0891b2; }
.text-cyan-700 { color: #0e7490; }
.border-cyan-200 { border-color: #a5f3fc; }
.border-cyan-400 { border-color: #22d3ee; }
.hover\:bg-cyan-100:hover { background-color: #cffafe; }
.hover\:bg-cyan-600:hover { background-color: #0891b2; }

/* ------------------------------------------------------------------
   VIOLET — tag, nhãn, category
   ------------------------------------------------------------------ */
.bg-violet-50  { background-color: #f5f3ff; }
.bg-violet-100 { background-color: #ede9fe; }
.bg-violet-200 { background-color: #ddd6fe; }
.bg-violet-400 { background-color: #a78bfa; }
.bg-violet-500 { background-color: #8b5cf6; }
.bg-violet-600 { background-color: #7c3aed; }
.bg-violet-700 { background-color: #6d28d9; }
.text-violet-500 { color: #8b5cf6; }
.text-violet-600 { color: #7c3aed; }
.text-violet-700 { color: #6d28d9; }
.border-violet-200 { border-color: #ddd6fe; }
.border-violet-400 { border-color: #a78bfa; }
.hover\:bg-violet-100:hover { background-color: #ede9fe; }
.hover\:bg-violet-600:hover { background-color: #7c3aed; }

/* ------------------------------------------------------------------
   FUCHSIA — promotion, khuyến mãi
   ------------------------------------------------------------------ */
.bg-fuchsia-50  { background-color: #fdf4ff; }
.bg-fuchsia-100 { background-color: #fae8ff; }
.bg-fuchsia-400 { background-color: #e879f9; }
.bg-fuchsia-500 { background-color: #d946ef; }
.bg-fuchsia-600 { background-color: #c026d3; }
.text-fuchsia-500 { color: #d946ef; }
.text-fuchsia-600 { color: #c026d3; }
.text-fuchsia-700 { color: #a21caf; }
.border-fuchsia-200 { border-color: #f0abfc; }
.hover\:bg-fuchsia-100:hover { background-color: #fae8ff; }
.hover\:bg-fuchsia-600:hover { background-color: #c026d3; }

/* ------------------------------------------------------------------
   SKY — link, info light
   ------------------------------------------------------------------ */
.bg-sky-50  { background-color: #f0f9ff; }
.bg-sky-100 { background-color: #e0f2fe; }
.bg-sky-200 { background-color: #bae6fd; }
.bg-sky-400 { background-color: #38bdf8; }
.bg-sky-500 { background-color: #0ea5e9; }
.bg-sky-600 { background-color: #0284c7; }
.text-sky-500 { color: #0ea5e9; }
.text-sky-600 { color: #0284c7; }
.text-sky-700 { color: #0369a1; }
.border-sky-200 { border-color: #bae6fd; }
.border-sky-400 { border-color: #38bdf8; }
.hover\:bg-sky-100:hover { background-color: #e0f2fe; }
.hover\:bg-sky-600:hover { background-color: #0284c7; }

/* ------------------------------------------------------------------
   LIME — số dương, tồn kho tốt, OK
   ------------------------------------------------------------------ */
.bg-lime-50  { background-color: #f7fee7; }
.bg-lime-100 { background-color: #ecfccb; }
.bg-lime-200 { background-color: #d9f99d; }
.bg-lime-400 { background-color: #a3e635; }
.bg-lime-500 { background-color: #84cc16; }
.bg-lime-600 { background-color: #65a30d; }
.text-lime-500 { color: #84cc16; }
.text-lime-600 { color: #65a30d; }
.text-lime-700 { color: #4d7c0f; }
.border-lime-200 { border-color: #d9f99d; }
.border-lime-400 { border-color: #a3e635; }
.hover\:bg-lime-100:hover { background-color: #ecfccb; }
.hover\:bg-lime-600:hover { background-color: #65a30d; }

/* ------------------------------------------------------------------
   SLATE — neutral, secondary text, dividers
   ------------------------------------------------------------------ */
.bg-slate-50  { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-200 { background-color: #e2e8f0; }
.bg-slate-300 { background-color: #cbd5e1; }
.bg-slate-400 { background-color: #94a3b8; }
.bg-slate-500 { background-color: #64748b; }
.bg-slate-600 { background-color: #475569; }
.bg-slate-700 { background-color: #334155; }
.bg-slate-800 { background-color: #1e293b; }
.bg-slate-900 { background-color: #0f172a; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.border-slate-200 { border-color: #e2e8f0; }
.border-slate-300 { border-color: #cbd5e1; }
.hover\:bg-slate-100:hover { background-color: #f1f5f9; }
.hover\:bg-slate-200:hover { background-color: #e2e8f0; }
.hover\:bg-slate-700:hover { background-color: #334155; }

/* =====================================================================
   Lớp giá trị tuỳ ý dùng trong màn thu tiền / lịch sử thanh toán / bill
   (08-2026)

   Tailwind ở đây là BẢN BUILD SẴN, không phải JIT: viết class kiểu
   text-[11px] mà quên khai ở file này thì trình duyệt bỏ qua, giao diện
   lệch mà không có lỗi nào báo. Đã dính đúng lỗi này hai lần:
     z-[60]       → modal không có z-index, bị màn xem bill đè lên
     max-h-[92vh] → modal cao quá màn hình, cắt mất nút Xác nhận
   ===================================================================== */
.text-\[10px\] {
    font-size: 10px;
    line-height: 1.4;
}

.text-\[11px\] {
    font-size: 11px;
    line-height: 1.45;
}

.min-w-\[110px\] {
    min-width: 110px;
}

.max-w-\[180px\] {
    max-width: 180px;
}

.max-w-\[200px\] {
    max-width: 200px;
}

/* =====================================================================
   Bậc khoảng cách .5 (0.125rem) — bản Tailwind build sẵn ở đây KHÔNG có
   (kiểm tra: .py-1\.5, .p-2\.5, .gap-1\.5 đều không tồn tại trong
   tailwind.min.css). Viết p-2.5 mà thiếu khai ở đây thì padding = 0,
   giao diện co dúm lại mà không có lỗi nào báo.
   ===================================================================== */
.p-2\.5 { padding: 0.625rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.pt-0\.5 { padding-top: 0.125rem; }
.pb-0\.5 { padding-bottom: 0.125rem; }
.pt-1\.5 { padding-top: 0.375rem; }
.pb-1\.5 { padding-bottom: 0.375rem; }
.pb-2\.5 { padding-bottom: 0.625rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.ml-1\.5 { margin-left: 0.375rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.h-1\.5 { height: 0.375rem; }
.w-1\.5 { width: 0.375rem; }
.h-3\.5 { height: 0.875rem; }
.w-3\.5 { width: 0.875rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }

/* ------------------------------------------------------------------
   BILL Z — phân biệt dòng hệ thống tự tách với dòng nhân viên chuyển

   Màn "Kiểm tra hàng trước khi gửi thuế" tô nền tím cho dòng mã Z (khoá,
   không đưa lại bill chính được) và nền trắng cho dòng nhân viên tự chuyển
   xuống. Tailwind v2 purge không giữ mấy class hover này nên khai tay.
   Xem tgs_pos/docs/bill-z-va-hang-tang.md
   ------------------------------------------------------------------ */
.hover\:bg-purple-100:hover { background-color: #f3e8ff; }
.hover\:bg-gray-50:hover    { background-color: #f9fafb; }