/* =============================================================================
   Lớp giao diện mới cho trang tài khoản cũ (/account: admin + user) của flashbim.com.

   Cách hoạt động:
   - Site cũ (Next 14 pages router, template Phoenix trên Bootstrap 5.3, biến --phoenix-*)
     KHÔNG có mã nguồn => không sửa được component. nginx chèn file này + theme.js vào
     <head> của mọi trang /account (sub_filter). Dữ liệu, chức năng giữ nguyên 100%.
   - Mọi luật đều nằm dưới class "fbx" trên thẻ <html> (theme.js gắn đồng bộ trước khi
     vẽ trang) => tắt lớp giao diện chỉ cần bỏ class, không đụng gì tới site cũ.
   - Không phụ thuộc tên class có mã băm của CSS Modules (PnTable_xxx__HASH): dùng
     [class*="PnTable_"] để vẫn đúng nếu site cũ build lại.
   - Đồng bộ với trang chủ mới: đỏ #D12F10, cam #FD7E01, đen #0B0B0C, chữ Inter + Barlow.

   Hiệu năng: chỉ CSS thuần (không ảnh nền, không font icon), ~15 KB chưa nén;
   các hiệu ứng chỉ dùng transform/opacity/box-shadow ngắn => không gây reflow lớn.
   ============================================================================= */

/* ---------- 1. Biến màu: ghi đè biến của Phoenix + biến riêng (tiền tố --fbx-) ----------
   html:root.fbx có độ ưu tiên (0,2,1) > ":root.light" (0,2,0) của Phoenix => luôn thắng. */
html:root.fbx {
  --fbx-red: #d12f10;
  --fbx-red-dark: #a82208;
  --fbx-orange: #fd7e01;
  --fbx-grad: linear-gradient(120deg, #d12f10 0%, #f05a08 55%, #fd7e01 100%);
  --fbx-ink: #0b0b0c;
  --fbx-side: #101217; /* nền thanh menu trái */
  --fbx-side-2: #0b0c10;
  --fbx-bg: #f4f5f8; /* nền trang */
  --fbx-surface: #fff; /* nền thẻ, bảng */
  --fbx-soft: #f8f9fb; /* nền đầu bảng, ô nhập bị khoá */
  --fbx-tint: #fff6f1; /* nền hàng khi rê chuột */
  --fbx-line: #e7e9ee;
  --fbx-line-2: #f0f1f4;
  --fbx-text: #22252c;
  --fbx-muted: #646a77;
  --fbx-input-line: #d9dce3;
  --fbx-ring: 0 0 0 4px rgba(253, 126, 1, 0.16);
  --fbx-shadow-sm: 0 1px 2px rgba(16, 18, 23, 0.04), 0 4px 14px -6px rgba(16, 18, 23, 0.08);
  --fbx-shadow: 0 1px 2px rgba(16, 18, 23, 0.05), 0 18px 40px -18px rgba(16, 18, 23, 0.18);
  --fbx-glow: 0 8px 20px -8px rgba(209, 47, 16, 0.55);
  --fbx-radius: 14px;
  --fbx-display: 'Barlow', 'Inter', system-ui, sans-serif;
  --fbx-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Biến gốc của Phoenix: màu chủ đạo xanh #3874ff => đỏ thương hiệu */
  --phoenix-primary: #d12f10;
  --phoenix-primary-rgb: 209, 47, 16;
  --phoenix-primary-100: #fde9e3;
  --phoenix-primary-200: #f8c2b4;
  --phoenix-primary-300: #f09a83;
  --phoenix-primary-500: #b8280c;
  --phoenix-primary-600: #a82208;
  --phoenix-primary-soft: #fff5f1;
  --phoenix-primary-bg-subtle: #fff1ea;
  --phoenix-primary-text-emphasis: #a82208;
  --phoenix-link-color: #d12f10;
  --phoenix-link-color-rgb: 209, 47, 16;
  --phoenix-link-hover-color: #a82208;
  --phoenix-link-hover-color-rgb: 168, 34, 8;
  --phoenix-body-bg: var(--fbx-bg);
  --phoenix-body-color: var(--fbx-text);
  --phoenix-font-sans-serif: var(--fbx-body);
  --phoenix-body-font-family: var(--fbx-body);
  --phoenix-border-color: var(--fbx-line);
  --phoenix-border-radius: 0.625rem;
  --phoenix-border-radius-sm: 0.5rem;
  --phoenix-border-radius-lg: 0.875rem;
  --phoenix-input-border-color: var(--fbx-input-line);
  --phoenix-avatar-name-color: #d12f10;
  --phoenix-theme-control-toggle-color: #fd7e01;
  --phoenix-theme-control-toggle-bg: rgba(253, 126, 1, 0.14);

  /* Thanh menu trái tối: biến của Phoenix (dùng cho cả bản thu gọn / màn nhỏ) */
  --phoenix-navbar-vertical-bg-color: var(--fbx-side);
  --phoenix-navbar-vertical-border-color: transparent;
  --phoenix-navbar-vertical-label-color: #6f7480;
  --phoenix-navbar-vertical-hr-color: rgba(255, 255, 255, 0.06);
  --phoenix-navbar-vertical-link-color: #b9bdc7;
  --phoenix-navbar-vertical-link-hover-color: #fff;
  --phoenix-navbar-vertical-link-hover-bg: rgba(255, 255, 255, 0.06);
  --phoenix-navbar-vertical-link-active-color: #fff;
  --phoenix-navbar-vertical-link-icon-color: #8c919d;
  --phoenix-navbar-vertical-dropdown-indicator-color: #6f7480;
  --phoenix-navbar-vertical-collapsed-menu-bg: var(--fbx-side);
  --phoenix-navbar-vertical-collapsed-menu-color: #e6e8ec;
  --phoenix-navbar-top-border-color: var(--fbx-line);
  --phoenix-navbar-footer-border-color: rgba(255, 255, 255, 0.06);
}

/* Chế độ tối của Phoenix (class .dark trên <html>) */
html:root.fbx.dark {
  --fbx-bg: #0b0c10;
  --fbx-surface: #14161c;
  --fbx-soft: #181b22;
  --fbx-tint: rgba(253, 126, 1, 0.07);
  --fbx-line: #252830;
  --fbx-line-2: #1e2128;
  --fbx-text: #e3e5ea;
  --fbx-muted: #9298a5;
  --fbx-input-line: #2c3039;
  --fbx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --fbx-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  --fbx-side: #0e1014;
  --fbx-side-2: #08090c;
}

/* ---------- 2. Nền chung, chữ ---------- */
.fbx body {
  background: var(--fbx-bg);
  color: var(--fbx-text);
  font-family: var(--fbx-body);
  -webkit-font-smoothing: antialiased;
}
.fbx h1,
.fbx h2,
.fbx h3,
.fbx h4,
.fbx h5,
.fbx .h1,
.fbx .h2,
.fbx .h3,
.fbx .h4 {
  font-family: var(--fbx-display);
  letter-spacing: -0.01em;
}
.fbx .content a:not(.btn),
.fbx .breadcrumb a {
  text-decoration: none;
}
.fbx ::selection {
  background: rgba(253, 126, 1, 0.25);
}

/* ---------- 3. Thanh menu trái ---------- */
.fbx .navbar-vertical,
.fbx .navbar-vertical .navbar-collapse {
  background: linear-gradient(180deg, var(--fbx-side) 0%, var(--fbx-side-2) 100%) !important;
  border-right: 0 !important;
}
.fbx .navbar-vertical {
  /* Vệt sáng cam rất nhẹ ở góc trên => thanh menu có chiều sâu, không phẳng lì */
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}
.fbx .navbar-vertical .navbar-collapse {
  background:
    radial-gradient(120% 40% at 0% 0%, rgba(253, 126, 1, 0.1), transparent 70%),
    linear-gradient(180deg, var(--fbx-side) 0%, var(--fbx-side-2) 100%) !important;
}
.fbx .navbar-vertical .navbar-vertical-content {
  padding: 0.75rem 0.75rem 1.5rem !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.fbx .navbar-vertical .navbar-vertical-content::-webkit-scrollbar {
  width: 6px;
}
.fbx .navbar-vertical .navbar-vertical-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 6px;
}
.fbx .navbar-vertical .nav-item {
  list-style: none;
}
/* Tên nhóm (MANAGE, HELP...) — CSS Module cũ đặt font-size !important nên phải !important */
.fbx .navbar-vertical .navbar-vertical-label {
  color: #6f7480 !important;
  font-family: var(--fbx-body);
  font-size: 0.6875rem !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 1.1rem 0 0.35rem 0.75rem;
  opacity: 1;
}
.fbx .navbar-vertical .navbar-vertical-line {
  display: none; /* thay đường kẻ bằng khoảng trắng + tên nhóm => gọn hơn */
}
.fbx .navbar-vertical .nav-link {
  position: relative;
  display: block;
  color: #b9bdc7 !important;
  font-family: var(--fbx-body);
  font-weight: 500;
  border-radius: 10px;
  padding: 0.55rem 0.75rem !important;
  margin: 1px 0;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.fbx .navbar-vertical .nav-link [class*='Menu_menu-item-text'] {
  font-size: 0.875rem;
}
.fbx .navbar-vertical .nav-link .nav-link-icon,
.fbx .navbar-vertical .nav-link .nav-link-icon svg {
  color: #8c919d;
  transition: color 0.15s ease;
}
.fbx .navbar-vertical .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff !important;
}
.fbx .navbar-vertical .nav-link:hover .nav-link-icon,
.fbx .navbar-vertical .nav-link:hover .nav-link-icon svg {
  color: #fd7e01;
}
/* Mục đang mở: nền chuyển màu đỏ → cam, chữ trắng, có quầng sáng */
.fbx .navbar-vertical .nav-link.active {
  background: var(--fbx-grad) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: var(--fbx-glow);
}
.fbx .navbar-vertical .nav-link.active .nav-link-icon,
.fbx .navbar-vertical .nav-link.active .nav-link-icon svg {
  color: #fff !important;
}
/* Mục "AI Credits" do theme.js chèn thêm: nhãn "NEW" nhỏ.
   Luật gốc KHÔNG có .fbx: mục này luôn hiện (kể cả khi chưa bật giao diện mới). */
.navbar-vertical .fbx-new {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(253, 126, 1, 0.14);
  color: #c25400;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.fbx .navbar-vertical .fbx-new {
  background: rgba(253, 126, 1, 0.18);
  color: #ffb066;
}
.fbx .navbar-vertical .nav-link.active .fbx-new {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
/* Nút thu gọn menu ở chân thanh trái (nếu có) */
.fbx .navbar-vertical .navbar-vertical-footer {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fbx .navbar-vertical .navbar-vertical-footer .btn,
.fbx .navbar-vertical .navbar-vertical-footer .navbar-vertical-toggle {
  color: #8c919d;
}

/* ---------- 4. Thanh trên cùng ---------- */
.fbx .navbar-top {
  background: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--fbx-line) !important;
  box-shadow: 0 1px 0 rgba(16, 18, 23, 0.02);
}
.fbx.dark .navbar-top {
  background: rgba(14, 16, 20, 0.86) !important;
}
.fbx .navbar-top .navbar-brand img {
  max-height: 34px;
  width: auto;
}
.fbx .navbar-top .navbar-toggle-icon .toggle-line {
  background-color: var(--fbx-text);
}
.fbx .navbar-top .search-box .search-input {
  background: #eef0f4;
  border: 1px solid transparent;
  border-radius: 999px !important;
  color: var(--fbx-text);
  min-width: 18rem;
  padding-left: 2.5rem;
}
.fbx.dark .navbar-top .search-box .search-input {
  background: var(--fbx-soft);
}
.fbx .navbar-top .search-box .search-input:focus {
  background: var(--fbx-surface);
  border-color: #fd7e01;
  box-shadow: var(--fbx-ring);
}
.fbx .navbar-top .navbar-nav-icons .nav-link {
  border-radius: 10px;
  color: var(--fbx-muted);
}
.fbx .navbar-top .navbar-nav-icons .nav-link:hover {
  color: var(--fbx-red);
}
/* Ảnh đại diện: viền chuyển màu thương hiệu */
.fbx .navbar-top .avatar img,
.fbx .dropdown-profile .avatar img {
  box-shadow:
    0 0 0 2px var(--fbx-surface),
    0 0 0 4px #fd7e01;
}
.fbx .dropdown-profile {
  min-width: 17rem;
}
.fbx .dropdown-profile h6 {
  font-family: var(--fbx-display);
  font-size: 1.05rem;
  font-weight: 700;
}
/* Giỏ hàng: chấm đếm cũ màu đỏ tươi => đỏ thương hiệu */
.fbx [class*='Navbar_cart-btn-noti'] {
  background: var(--fbx-grad) !important;
  font-weight: 700;
}

/* ---------- 5. Khung nội dung, breadcrumb, tiêu đề trang ---------- */
.fbx .content {
  position: relative;
}
/* Quầng sáng cam rất nhẹ phía sau tiêu đề trang (vẽ bằng gradient, không có ảnh) */
.fbx .content::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 260px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(253, 126, 1, 0.1), transparent 70%),
    radial-gradient(40% 80% at 100% 0%, rgba(209, 47, 16, 0.06), transparent 70%);
}
.fbx .breadcrumb {
  --phoenix-breadcrumb-divider-color: #b5bac4;
  font-size: 0.8125rem;
  font-weight: 500;
}
.fbx .breadcrumb .breadcrumb-item,
.fbx .breadcrumb .breadcrumb-item a {
  color: var(--fbx-muted);
}
.fbx .breadcrumb .breadcrumb-item a:hover {
  color: var(--fbx-red);
}
.fbx .breadcrumb .breadcrumb-item.active {
  color: var(--fbx-red);
  font-weight: 600;
}
.fbx .breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  font-size: 1.05em;
  line-height: 1;
}
/* Tiêu đề trang (h2.text-bold.text-1100.mb-5): chữ Barlow đậm + vạch nhấn chuyển màu */
.fbx .content h2.text-1100 {
  font-family: var(--fbx-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.15;
  color: var(--fbx-ink) !important;
  margin-bottom: 1.75rem !important;
}
.fbx.dark .content h2.text-1100 {
  color: #fff !important;
}
.fbx .content h2.text-1100::after {
  content: '';
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 0.6rem;
  border-radius: 4px;
  background: var(--fbx-grad);
}
.fbx .footer {
  color: var(--fbx-muted);
  font-size: 0.8125rem;
}
.fbx .footer .text-900 {
  color: var(--fbx-muted) !important;
}

/* ---------- 6. Nút ---------- */
.fbx .btn {
  font-family: var(--fbx-body);
  font-weight: 600;
  border-radius: 10px;
  letter-spacing: 0;
  text-transform: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.fbx .btn:focus-visible {
  box-shadow: var(--fbx-ring) !important;
}
.fbx .btn-primary,
.fbx .btn-phoenix-primary {
  --phoenix-btn-color: #fff;
  --phoenix-btn-bg: #d12f10;
  --phoenix-btn-border-color: transparent;
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: #b8280c;
  --phoenix-btn-active-bg: #a82208;
  --phoenix-btn-disabled-bg: #d12f10;
  --phoenix-btn-disabled-border-color: transparent;
  background: var(--fbx-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--fbx-glow);
}
.fbx .btn-primary:hover,
.fbx .btn-phoenix-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(209, 47, 16, 0.65);
  filter: saturate(1.08);
}
.fbx .btn-primary:active {
  transform: translateY(0);
}
.fbx .btn-primary:disabled,
.fbx .btn-primary.disabled {
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}
/* Nút phụ: nền trắng viền mảnh, chữ đậm */
.fbx .btn-secondary,
.fbx .btn-phoenix-secondary,
.fbx .btn-outline-primary,
.fbx .btn-outline-secondary,
.fbx .btn-light {
  background: var(--fbx-surface) !important;
  border: 1px solid var(--fbx-input-line) !important;
  color: var(--fbx-text) !important;
  box-shadow: var(--fbx-shadow-sm);
}
.fbx .btn-secondary:hover,
.fbx .btn-phoenix-secondary:hover,
.fbx .btn-outline-primary:hover,
.fbx .btn-outline-secondary:hover,
.fbx .btn-light:hover {
  border-color: #fd7e01 !important;
  color: var(--fbx-red) !important;
  transform: translateY(-1px);
}
.fbx .btn-danger,
.fbx .btn-phoenix-danger {
  background: #fff1ef !important;
  border: 1px solid #f6c9c0 !important;
  color: #c0280d !important;
}
.fbx .btn-danger:hover,
.fbx .btn-phoenix-danger:hover {
  background: #d12f10 !important;
  border-color: #d12f10 !important;
  color: #fff !important;
}
.fbx .btn-success,
.fbx .btn-phoenix-success {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
.fbx .btn-link {
  color: var(--fbx-text);
  text-decoration: none;
  box-shadow: none !important;
}
.fbx .btn-link:hover {
  color: var(--fbx-red) !important;
}
/* Biểu tượng trong nút của site cũ (PnButton) */
.fbx [class*='PnButton_icon-size'] {
  margin-top: 0 !important;
}

/* ---------- 7. Ô tìm kiếm của trang danh sách ---------- */
.fbx .content .search-box .search-input {
  background: var(--fbx-surface);
  border: 1px solid var(--fbx-input-line);
  border-radius: 999px;
  min-width: min(22rem, 100%);
  padding-left: 2.6rem;
  box-shadow: var(--fbx-shadow-sm);
}
.fbx .content .search-box .search-box-icon {
  color: var(--fbx-muted);
}

/* ---------- 8. Ô nhập, chọn, checkbox (form) ---------- */
.fbx .form-label,
.fbx .col-form-label,
.fbx label.form-label {
  font-family: var(--fbx-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fbx-text);
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 0.4rem;
}
.fbx .form-control,
.fbx .form-select {
  background-color: var(--fbx-surface);
  border: 1px solid var(--fbx-input-line);
  border-radius: 10px;
  color: var(--fbx-text);
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.fbx .form-control:hover,
.fbx .form-select:hover {
  border-color: #c3c7d0;
}
.fbx .form-control:focus,
.fbx .form-select:focus {
  border-color: #fd7e01;
  box-shadow: var(--fbx-ring);
  outline: 0;
}
.fbx .form-control::placeholder {
  color: #9da2ad;
}
.fbx .form-control:disabled,
.fbx .form-control[readonly],
.fbx .form-select:disabled {
  background-color: var(--fbx-soft);
  color: var(--fbx-muted);
}
.fbx .form-control.is-invalid,
.fbx .was-validated .form-control:invalid {
  border-color: #e0422a;
}
.fbx .invalid-feedback,
.fbx .text-danger {
  color: #d12f10 !important;
}
.fbx .form-text {
  color: var(--fbx-muted);
}
.fbx .input-group-text {
  background: var(--fbx-soft);
  border-color: var(--fbx-input-line);
  color: var(--fbx-muted);
  border-radius: 10px;
}
.fbx .form-check-input {
  border-color: #c3c7d0;
  border-radius: 5px;
}
.fbx .form-check-input[type='radio'] {
  border-radius: 50%;
}
.fbx .form-check-input:focus {
  border-color: #fd7e01;
  box-shadow: var(--fbx-ring);
}
.fbx .form-check-input:checked,
.fbx [class*='Checkbox_cusCheckboxIndeterminate'] {
  background-color: #d12f10 !important;
  border-color: #d12f10 !important;
}
.fbx .form-switch .form-check-input {
  border-radius: 2em;
}
/* Ô số điện thoại (react-phone-input-2) */
.fbx .react-tel-input .form-control {
  width: 100%;
  min-height: 42px;
  padding-left: 52px;
  border-radius: 10px;
}
.fbx .react-tel-input .flag-dropdown {
  background: var(--fbx-soft);
  border-color: var(--fbx-input-line);
  border-radius: 10px 0 0 10px;
}

/* ---------- 9. Thẻ (card), khối nội dung ---------- */
.fbx .content .card {
  background: var(--fbx-surface);
  border: 1px solid var(--fbx-line);
  border-radius: var(--fbx-radius);
  box-shadow: var(--fbx-shadow-sm);
}
.fbx .content .card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--fbx-line);
  padding: 1rem 1.25rem;
  border-radius: var(--fbx-radius) var(--fbx-radius) 0 0;
}
.fbx .content .card > .card-header h4,
.fbx .content .card > .card-header h5,
.fbx .content .card .card-title {
  font-family: var(--fbx-display);
  font-weight: 700;
}
.fbx .content .card > .card-footer {
  background: var(--fbx-soft);
  border-top: 1px solid var(--fbx-line);
  border-radius: 0 0 var(--fbx-radius) var(--fbx-radius);
}

/* ---------- 10. Bảng (PnTable của site cũ + bảng Bootstrap) ----------
   Bảng thành "thẻ" bo góc: border-collapse: separate để bo góc được. */
.fbx .content .table {
  --phoenix-table-bg: var(--fbx-surface);
  --phoenix-table-border-color: var(--fbx-line-2);
  --phoenix-table-color: var(--fbx-text);
  --phoenix-table-hover-bg: var(--fbx-tint);
  --phoenix-table-hover-color: var(--fbx-text);
  --phoenix-table-striped-bg: var(--fbx-soft);
  background: var(--fbx-surface);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--fbx-line);
  border-radius: var(--fbx-radius);
  box-shadow: var(--fbx-shadow-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}
.fbx .content .table > thead > tr > th,
.fbx .content .table > thead > tr > td {
  background: var(--fbx-soft) !important;
  color: var(--fbx-muted) !important;
  font-family: var(--fbx-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--fbx-line) !important;
  padding: 0.8rem 1rem !important;
  vertical-align: middle;
}
/* Ô đầu bảng của PnTable tự đặt cỡ chữ .95rem => về theo đầu bảng mới */
.fbx .content .table > thead [class*='PnTable_column'] {
  font-size: inherit !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.fbx .content .table [class*='PnTable_checkboxHead'] {
  background: var(--fbx-soft) !important;
}
.fbx .content .table [class*='PnTable_sort'] {
  color: #b5bac4;
}
.fbx .content .table > tbody > tr > td,
.fbx .content .table > tbody > tr > th {
  background: var(--fbx-surface);
  color: var(--fbx-text);
  border-bottom: 1px solid var(--fbx-line-2) !important;
  border-top: 0 !important;
  padding: 0.85rem 1rem !important;
  vertical-align: middle;
  font-size: 0.875rem;
  transition: background-color 0.12s ease;
}
.fbx .content .table > tbody > tr:last-child > td,
.fbx .content .table > tbody > tr:last-child > th {
  border-bottom: 0 !important;
}
.fbx .content .table > tbody > tr:hover > td,
.fbx .content .table > tbody > tr:hover > th {
  background: var(--fbx-tint);
}
.fbx .content .table > tbody a:not(.btn) {
  color: var(--fbx-text);
  font-weight: 600;
}
.fbx .content .table > tbody a:not(.btn):hover {
  color: var(--fbx-red);
}
.fbx .content .table img {
  border-radius: 8px;
}
/* Mã license, mã đơn: nền cam nhạt thay vì chữ hồng mặc định của Bootstrap */
.fbx .content code {
  color: #a82208;
  background: #fff1ea;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.8em;
}
.fbx.dark .content code {
  color: #ffb489;
  background: rgba(253, 126, 1, 0.1);
}
/* Ô trống "No data" */
.fbx .content [class*='PnTable_empty'] {
  color: var(--fbx-muted);
  padding: 2rem 0;
}
/* Lớp phủ khi đang tải: mờ trắng => kính mờ nhẹ */
.fbx .content [class*='PnTable_parent'] {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.fbx .spinner-border {
  color: #fd7e01;
}
/* Bảng nằm trong khung cuộn ngang (màn nhỏ) */
.fbx .content .table-responsive {
  border-radius: var(--fbx-radius);
}

/* ---------- 11. Phân trang ---------- */
.fbx .pagination {
  gap: 4px;
}
.fbx .pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px !important;
  background: transparent;
  color: var(--fbx-muted);
  font-weight: 600;
  font-size: 0.85rem;
}
.fbx .pagination .page-link:hover {
  background: var(--fbx-surface);
  border-color: var(--fbx-line);
  color: var(--fbx-red);
}
.fbx .pagination .active > .page-link,
.fbx .pagination .page-link.active {
  background: var(--fbx-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--fbx-glow);
}

/* ---------- 12. Nhãn trạng thái (badge) ---------- */
.fbx .badge {
  border-radius: 999px;
  padding: 0.38em 0.75em;
  font-family: var(--fbx-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}
.fbx .badge-phoenix-success,
.fbx .badge.bg-success {
  background: #e8f8ee !important;
  color: #15803d !important;
  border: 1px solid #c6ecd3 !important;
}
.fbx .badge-phoenix-warning,
.fbx .badge.bg-warning {
  background: #fff4e5 !important;
  color: #b45309 !important;
  border: 1px solid #fde1b8 !important;
}
.fbx .badge-phoenix-danger,
.fbx .badge.bg-danger {
  background: #fff0ed !important;
  color: #c0280d !important;
  border: 1px solid #f9cfc6 !important;
}
.fbx .badge-phoenix-info,
.fbx .badge.bg-info {
  background: #eaf4ff !important;
  color: #1d5fbf !important;
  border: 1px solid #cfe3fb !important;
}
.fbx .badge-phoenix-primary,
.fbx .badge.bg-primary {
  background: #fff1ea !important;
  color: #a82208 !important;
  border: 1px solid #fbd3c2 !important;
}
.fbx .badge-phoenix-secondary,
.fbx .badge.bg-secondary {
  background: var(--fbx-soft) !important;
  color: var(--fbx-muted) !important;
  border: 1px solid var(--fbx-line) !important;
}

/* ---------- 13. Tab, menu thả xuống, hộp thoại ---------- */
.fbx .nav-tabs {
  border-bottom: 1px solid var(--fbx-line);
  gap: 0.25rem;
}
.fbx .nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fbx-muted);
  font-weight: 600;
  background: transparent;
}
.fbx .nav-tabs .nav-link:hover {
  color: var(--fbx-text);
}
.fbx .nav-tabs .nav-link.active {
  color: var(--fbx-red);
  border-bottom-color: var(--fbx-red);
  background: transparent;
}
.fbx .nav-pills .nav-link.active {
  background: var(--fbx-grad);
  color: #fff;
}
.fbx .dropdown-menu {
  border: 1px solid var(--fbx-line) !important;
  border-radius: 14px;
  box-shadow: var(--fbx-shadow) !important;
  padding: 0.4rem;
  overflow: hidden;
}
.fbx .dropdown-item {
  border-radius: 8px;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}
.fbx .dropdown-item:hover,
.fbx .dropdown-item:focus {
  background: var(--fbx-tint);
  color: var(--fbx-red);
}
.fbx .dropdown-item.active,
.fbx .dropdown-item:active {
  background: var(--fbx-grad);
  color: #fff;
}
.fbx .modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 30px 80px -24px rgba(11, 11, 12, 0.4);
  background: var(--fbx-surface);
}
.fbx .modal-header {
  border-bottom: 1px solid var(--fbx-line);
  padding: 1.1rem 1.5rem;
}
.fbx .modal-title {
  font-family: var(--fbx-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.fbx .modal-body {
  padding: 1.25rem 1.5rem;
}
.fbx .modal-footer {
  border-top: 1px solid var(--fbx-line);
  background: var(--fbx-soft);
  border-radius: 0 0 18px 18px;
  padding: 0.85rem 1.5rem;
}
.fbx .modal-backdrop.show {
  opacity: 0.45;
  background: #0b0b0c;
}
.fbx .alert {
  border-radius: 12px;
}

/* ---------- 14. Widget antd (DatePicker, Select, Upload, Tree, Modal) ----------
   antd 5 dùng selector :where() độ ưu tiên thấp => chỉ cần .fbx là thắng. */
.fbx .ant-select:not(.ant-select-customize-input) .ant-select-selector,
.fbx .ant-picker,
.fbx .ant-input,
.fbx .ant-input-affix-wrapper,
.fbx .ant-input-number {
  border-radius: 10px;
  border-color: var(--fbx-input-line);
  font-family: var(--fbx-body);
}
.fbx .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.fbx .ant-picker:hover,
.fbx .ant-input:hover,
.fbx .ant-input-affix-wrapper:hover {
  border-color: #fd7e01;
}
.fbx .ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
.fbx .ant-picker-focused,
.fbx .ant-input:focus,
.fbx .ant-input-affix-wrapper-focused {
  border-color: #fd7e01 !important;
  box-shadow: var(--fbx-ring) !important;
}
.fbx .ant-select-dropdown,
.fbx .ant-picker-dropdown .ant-picker-panel-container {
  border-radius: 14px;
  box-shadow: var(--fbx-shadow);
}
.fbx .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background: #fff1ea;
  color: #a82208;
}
.fbx .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
.fbx .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
.fbx .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background: #d12f10;
}
.fbx .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
  border-color: #d12f10;
}
.fbx .ant-picker-today-btn,
.fbx .ant-picker-now-btn {
  color: #d12f10;
}
.fbx .ant-btn-primary {
  background: var(--fbx-grad);
  border: 0;
  box-shadow: var(--fbx-glow);
}
.fbx .ant-btn-primary:not(:disabled):hover {
  background: var(--fbx-grad);
  filter: saturate(1.1) brightness(1.03);
}
.fbx .ant-btn-default:not(:disabled):hover {
  color: #d12f10;
  border-color: #fd7e01;
}
.fbx .ant-upload.ant-upload-select,
.fbx .ant-upload-wrapper .ant-upload-drag {
  border-radius: 14px;
}
.fbx .ant-upload-wrapper .ant-upload-drag:not(.ant-upload-disabled):hover,
.fbx .ant-upload.ant-upload-select:hover {
  border-color: #fd7e01 !important;
}
.fbx .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background: #fff1ea;
}
.fbx .ant-tree-checkbox-checked .ant-tree-checkbox-inner,
.fbx .ant-checkbox-checked .ant-checkbox-inner {
  background: #d12f10;
  border-color: #d12f10;
}
.fbx .ant-modal .ant-modal-content {
  border-radius: 18px;
}
.fbx .ant-modal .ant-modal-title {
  font-family: var(--fbx-display);
  font-weight: 700;
  font-size: 1.2rem;
}

/* ---------- 15. Thông báo nổi (react-toastify) ---------- */
.fbx .Toastify__toast {
  border-radius: 14px;
  font-family: var(--fbx-body);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--fbx-shadow);
}
.fbx .Toastify__progress-bar--success {
  background: #16a34a;
}

/* ---------- 17. Trang form (thêm / sửa / cài đặt / hồ sơ) và hộp thoại ----------
   Site cũ: mỗi ô = div.mb-4.text-start > label.form-label.label-cus + input.form-control.form-icon-input;
   form antd dùng lưới *_form-add-item (nhãn | ô nhập). Hộp thoại = react-bootstrap Modal. */

/* Mọi form có nhãn => thành một thẻ trắng bo góc (form tìm kiếm không có nhãn nên không bị ảnh hưởng) */
.fbx .content form:has(.form-label, .ant-form-item, [class*='form-add-item']) {
  background: var(--fbx-surface);
  border: 1px solid var(--fbx-line);
  border-radius: var(--fbx-radius);
  box-shadow: var(--fbx-shadow-sm);
  padding: 1.75rem 1.75rem 1.25rem;
}
/* Form nằm sẵn trong card / modal thì không lồng thêm khung */
.fbx .content .card form,
.fbx .modal form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.fbx .label-cus,
.fbx [class*='form-label-cus'],
.fbx .ant-form-item-label > label {
  font-family: var(--fbx-body);
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--fbx-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding-left: 0 !important;
}
/* Ô có icon (Phoenix .form-icon-container): giữ chỗ cho icon bên trái */
.fbx .form-icon-container .form-icon-input,
.fbx .form-icon-container .form-control {
  padding-left: 2.6rem;
}
.fbx .form-icon-container .form-icon {
  color: var(--fbx-muted);
}
.fbx .form-select {
  padding-right: 2.4rem; /* chừa chỗ mũi tên */
}
.fbx textarea.form-control {
  min-height: 110px;
}
/* Nút hiện mật khẩu đứng cạnh ô */
.fbx .btn-show-password {
  border-radius: 10px;
}
.fbx .btn-warning {
  background: #fff4e5 !important;
  border: 1px solid #fde1b8 !important;
  color: #b45309 !important;
}
.fbx .btn-warning:hover {
  background: #fd7e01 !important;
  border-color: #fd7e01 !important;
  color: #fff !important;
}
/* Nhóm nút chọn (vd 6 / 12 tháng ở trang mua) */
.fbx .btn-check:checked + .btn-outline-primary,
.fbx .btn-outline-primary.active,
.fbx .btn-group > .btn-outline-primary.active {
  background: var(--fbx-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Tab gạch chân (nav-underline) ở Cài đặt mail / thanh toán / hồ sơ */
.fbx .nav-underline {
  gap: 0.25rem;
  border-bottom: 1px solid var(--fbx-line);
}
.fbx .nav-underline .nav-link {
  color: var(--fbx-muted);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem !important;
  border-bottom: 2px solid transparent;
}
.fbx .nav-underline .nav-link:hover {
  color: var(--fbx-text);
  border-bottom-color: var(--fbx-line);
}
.fbx .nav-underline .nav-link.active {
  color: var(--fbx-red);
  border-bottom-color: var(--fbx-red);
}
.fbx [class*='Profile_border-tab'] {
  border-bottom-color: var(--fbx-line) !important;
}

/* Ô chọn / ngày của antd: cao bằng ô nhập Bootstrap, bo góc, viền cam khi chọn.
   CSS cũ có !important nên ở đây cũng cần !important. */
.fbx .ant-select-single:not(.ant-select-sm):not(.ant-select-customize-input) {
  min-height: 42px;
}
.fbx .ant-select:not(.ant-select-customize-input) .ant-select-selector {
  border-radius: 10px !important;
  border-color: var(--fbx-input-line) !important;
  background-color: var(--fbx-surface) !important;
  min-height: 42px;
  align-items: center;
}
.fbx .ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
.fbx .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
  border-color: #fd7e01 !important;
}
.fbx .ant-select-focused:not(.ant-select-disabled) .ant-select-selector {
  box-shadow: var(--fbx-ring) !important;
}
.fbx .ant-picker {
  min-height: 42px;
  border-radius: 10px !important;
  border-color: var(--fbx-input-line) !important;
  background-color: var(--fbx-surface) !important;
}
.fbx .ant-picker:hover {
  border-color: #fd7e01 !important;
}
.fbx .ant-select-multiple .ant-select-selection-item {
  background: #fff1ea;
  border: 1px solid #fbd3c2;
  border-radius: 6px;
  color: #a82208;
}
.fbx .ant-form-item-explain-error {
  color: #d12f10 !important;
  font-size: 0.8rem;
}
/* Ô tải ảnh / tệp */
.fbx .ant-upload.ant-upload-select {
  border-radius: 14px !important;
  border: 1.5px dashed var(--fbx-input-line) !important;
  background: var(--fbx-soft) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.fbx .ant-upload.ant-upload-select:hover {
  border-color: #fd7e01 !important;
  background: var(--fbx-tint) !important;
}
/* Phân trang antd (CSS cũ ép màu xanh #3874ff !important) */
html.fbx .ant-pagination .ant-pagination-item-active,
html.fbx .ant-pagination-item-active {
  background: var(--fbx-grad) !important;
  border-color: transparent !important;
}
html.fbx .ant-pagination-item-active a {
  color: #fff !important;
}
.fbx .ant-pagination .ant-pagination-item {
  border-radius: 9px;
}
/* Trình soạn thảo (TinyMCE / Jodit) */
.fbx .tox-tinymce,
.fbx .jodit-container {
  border-radius: 12px !important;
  border-color: var(--fbx-input-line) !important;
  overflow: hidden;
}

/* Hộp thoại react-bootstrap: đầu hộp có vạch nhấn, nền mờ */
.fbx .modal-header {
  position: relative;
}
.fbx .modal-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: var(--fbx-grad);
}
.fbx .modal-header .btn-close {
  border-radius: 8px;
}
.fbx .modal .form-label {
  margin-bottom: 0.35rem;
}
.fbx .modal-backdrop.show {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* Thẻ thông báo cảnh báo ở Cài đặt thanh toán (CSS cũ: chữ trắng trên nền vàng) */
.fbx .alert-warning {
  background: #fff4e5;
  border: 1px solid #fde1b8;
  color: #92400e !important;
}
.fbx .alert-warning.text-white,
.fbx .alert-warning .text-white {
  color: #92400e !important;
}
/* Thẻ gói giá ở trang mua (user/pricing) */
.fbx [class*='Pricing_pricingCard'],
.fbx .content .card.h-100 {
  border-radius: 18px !important;
}

/* ---------- Nút EN | VI (theme.js chèn vào thanh trên). Không có .fbx: luôn hiện ---------- */
.fbx-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin: 0 6px;
  border: 1px solid #d9dce3;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.fbx-lang span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #646a77;
}
.fbx-lang span.on {
  background: linear-gradient(120deg, #d12f10, #fd7e01);
  color: #fff;
}
.fbx-lang:hover {
  border-color: #fd7e01;
}
.fbx.dark .fbx-lang {
  background: transparent;
  border-color: #2c3039;
}

/* ---------- 16. Màn hình nhỏ ---------- */
@media (max-width: 991.98px) {
  /* Menu trái mở dạng thả xuống dưới thanh trên: bo góc dưới + đổ bóng */
  .fbx .navbar-vertical .navbar-collapse.show {
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 16px 16px;
  }
  .fbx .navbar-top .search-box .search-input {
    min-width: 0;
  }
}
@media (max-width: 767.98px) {
  /* Bảng cuộn ngang thay vì bẻ chữ thành nhiều dòng khó đọc */
  .fbx .content .table > tbody > tr > td {
    white-space: nowrap;
  }
}
@media (max-width: 575.98px) {
  .fbx .content .search-box .search-input {
    min-width: 0;
  }
  .fbx .content .table > tbody > tr > td,
  .fbx .content .table > thead > tr > th {
    padding: 0.7rem 0.75rem !important;
  }
}

/* Người dùng bật "giảm chuyển động" => tắt hiệu ứng nhấc nút */
@media (prefers-reduced-motion: reduce) {
  .fbx .btn,
  .fbx .navbar-vertical .nav-link {
    transition: none;
  }
  .fbx .btn:hover {
    transform: none !important;
  }
}