/* ============================================================================
   FBS DESIGN SYSTEM — token dùng chung cho bảy app của team DSM
   Dựng 27/08/2026.

   NGUỒN
   Lấy nền từ "Shopee Desktop Design System" và "[D&A Shopee] Design System"
   (thư mục Desktop/Workspaces/Design System). Giữ đúng ba thứ làm nên nhận diện
   Shopee: cam #EE4D2D, bán kính 2px/4px, và một mức đổ bóng duy nhất.

   FILE NÀY KHÔNG ĐỔI TEMPLATE.
   Nó chỉ khai TOKEN và vài lớp tiện ích. Bố cục, header, hàng tab, thanh lọc của
   bảy app giữ nguyên. Áp dụng bằng cách thay giá trị màu cứng trong app bằng
   var(--...) — làm dần từng app, không phải làm một lượt.

   VÌ SAO CẦN
   Đo ngày 27/08/2026: riêng RTS Assistant dùng 130 mã màu khác nhau trong bốn
   file. Ba sắc xanh lá cho cùng một nghĩa "xong", hai sắc đỏ cho cùng nghĩa
   "quá hạn", xám thì trộn ba thang (Tailwind, Flat UI, và màu tự chế). Không ai
   nhớ nổi nên mỗi lần thêm khối mới lại đẻ thêm một màu.

   CÁCH DÙNG
   <link rel="stylesheet" href="/fbs-design-system.css">  đặt TRƯỚC mọi CSS khác
   của app, để app còn ghi đè được khi cần.
   ============================================================================ */

:root {
  /* ══ 1. THƯƠNG HIỆU ══════════════════════════════════════════════════════
     Cam Shopee là màu DẪN, không phải màu trang trí. Dùng cho: hành động
     chính, trạng thái đang chọn, số liệu cần mắt bắt trước. Một màn hình có
     quá ba vùng cam là không còn vùng nào dẫn nữa. */
  --fbs-cam:          #ee4d2d;   /* Shopee Orange - hành động chính */
  --fbs-cam-sang:     #fb6445;   /* hover */
  --fbs-cam-dam:      #d73211;   /* :active */
  --fbs-cam-nen:      #fff5f2;   /* nền nhạt, dải nhắc */
  --fbs-cam-vien:     #fcede7;   /* viền nút phụ đang chọn */

  /* ══ 2. TRẠNG THÁI ═══════════════════════════════════════════════════════
     Bốn nghĩa, mỗi nghĩa MỘT màu. Trước bản này "xong" có ba sắc xanh khác
     nhau tuỳ người viết khối đó là ai. */
  --fbs-xanh:         #187842;   /* tốt, đạt; đủ đậm cho chữ trên nền trắng */
  --fbs-xanh-nen:     #eafaf1;
  --fbs-xanh-vien:    #cdeedd;

  --fbs-do:           #c5223b;   /* xấu, lỗi, quá hạn */
  --fbs-do-nen:       #fff4f4;
  --fbs-do-vien:      #f7d4cf;

  --fbs-vang:         #9a5900;   /* cần chú ý, chờ duyệt, sắp tới hạn */
  --fbs-vang-nen:     #fff8e4;
  --fbs-vang-vien:    #f3e0b0;

  --fbs-lam:          #1f74e0;   /* thông tin */
  --fbs-lam-nen:      #eaf1fe;

  /* Xanh dương của LIÊN KẾT. Đo trên FBS portal ngày 27/08/2026: portal dùng xanh
     dương cho MỌI thứ bấm được - mã Shop ID, tên vendor, nút Detail, nút Collapse -
     và để dành cam cho đúng hai chỗ: nút hành động chính và tab đang chọn.
     Nhờ vậy nhìn vào bảng là biết ngay chỗ nào bấm được. */
  --fbs-lien-ket:     #1f74e0;
  --fbs-lien-ket-dam: #0d5bbd;

  /* Tím: dành riêng cho khâu Ops KAM (thông tin 3PL, bước cho_3pl).
     Không dùng tím cho nghĩa khác - nó là mã màu của một VAI, không phải
     một trạng thái. */
  --fbs-tim:          #7d3c98;
  --fbs-tim-nen:      #f6eefb;
  --fbs-tim-vien:     #e5d4f0;

  /* ══ 3. CHỮ ══════════════════════════════════════════════════════════════
     Ba mức, đúng như Shopee DS. Thêm mức thứ tư là người đọc hết phân biệt
     được cái nào quan trọng hơn cái nào. */
  --fbs-chu-1:        #1f2937;   /* tiêu đề, số liệu chính */
  --fbs-chu-2:        #4b5563;   /* nội dung thường */
  --fbs-chu-3:        #6b7280;   /* chú thích, nhãn cột */
  --fbs-chu-mo:       #9ca3af;   /* chưa có số liệu, dấu gạch */
  --fbs-chu-tren-mau: #ffffff;   /* chữ trên nền cam/đỏ/xanh */

  /* ══ 4. NỀN VÀ ĐƯỜNG KẺ ══════════════════════════════════════════════════ */
  --fbs-nen-trang:    #f5f5f5;   /* nền trang */
  --fbs-nen-the:      #ffffff;   /* mặt thẻ, hộp */
  --fbs-nen-nhat:     #f9fafb;   /* hàng tiêu đề bảng, khối chìm */
  --fbs-nen-xam:      #f3f4f6;   /* chip không hoạt động */
  --fbs-ke:           #e5e7eb;   /* đường kẻ chính */
  --fbs-ke-nhat:      #f1f3f5;   /* kẻ giữa các dòng trong một khối */
  --fbs-ke-dam:       #d1d5db;   /* viền ô nhập, nút phụ */

  /* ══ 5. CHỮ VIẾT ═════════════════════════════════════════════════════════
     Inter là mặt chữ chung của bảy dashboard. Mã đơn hàng dùng mặt chữ đều để các ký tự
     thẳng cột - đọc mã 25 ký tự bằng mặt chữ thường là dễ nhảy dòng. */
  --fbs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              Helvetica, Arial, sans-serif;
  --fbs-font-ma: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Thang cỡ chữ. Sáu bậc, không hơn. */
  --fbs-co-tieu-de:   20px;   /* tiêu đề trang */
  --fbs-co-khoi:      15px;   /* tiêu đề khối */
  --fbs-co-lon:       16px;   /* số liệu nổi trong ô KPI */
  --fbs-co-thuong:    13px;   /* nội dung bảng */
  --fbs-co-nho:       12px;   /* nhãn, chip */
  --fbs-co-rat-nho:   11px;   /* chú thích, mã đơn */

  --fbs-dam-thuong:   400;
  --fbs-dam-vua:      600;
  --fbs-dam-manh:     700;

  /* ══ 6. KHOẢNG CÁCH ══════════════════════════════════════════════════════
     Bậc 4px. Mọi lề, khe, đệm lấy từ thang này. */
  --fbs-cach-1:       4px;
  --fbs-cach-2:       8px;
  --fbs-cach-3:       12px;
  --fbs-cach-4:       16px;
  --fbs-cach-5:       20px;
  --fbs-cach-6:       24px;

  /* ══ 7. BÁN KÍNH ═════════════════════════════════════════════════════════
     Shopee dùng 2px và 4px. Dashboard nội bộ nới lên một chút cho mềm, nhưng
     vẫn giữ đúng HAI bậc - ba bậc trở lên là mỗi khối một kiểu bo. */
  --fbs-bo-nho:       7px;    /* chip, badge, ô nhập */
  --fbs-bo-vua:       10px;   /* nút, khối nhỏ */
  --fbs-bo-lon:       14px;   /* thẻ, hộp phủ */
  --fbs-bo-tron:      999px;  /* nút dạng viên */

  /* Bo góc KIỂU PORTAL. FBS portal và Shopee gốc dùng 2px/4px - vuông vức, dứt khoát.
     Dashboard đang bo mềm hơn. Muốn theo đúng portal thì thêm dòng này vào CSS của
     app, không phải sửa file này:
         :root { --fbs-bo-nho: 2px; --fbs-bo-vua: 2px; --fbs-bo-lon: 4px; }
     Để sẵn ở đây để đổi được bằng MỘT dòng, và lùi lại cũng bằng một dòng. */

  /* ══ 8. ĐỔ BÓNG ══════════════════════════════════════════════════════════
     Shopee chỉ có MỘT mức bóng. Giữ đúng một mức cho lớp nổi, và một mức đậm
     hơn cho hộp phủ - vì hộp phủ phải tách hẳn khỏi nền. */
  --fbs-bong:         0 0 9px rgba(0, 0, 0, .12);
  --fbs-bong-phu:     0 14px 44px rgba(0, 0, 0, .26);

  /* ══ 9. CHUYỂN ĐỘNG ══════════════════════════════════════════════════════ */
  --fbs-nhip:         .15s;
  --fbs-nhip-cham:    .4s;
}

/* ============================================================================
   LỚP TIỆN ÍCH
   Chỉ khai những thứ BẢY APP đều dùng. Thứ riêng của một app thì để trong app
   đó - đưa vào đây là bắt sáu app kia mang theo mã không dùng tới.
   ============================================================================ */

/* ── Chip trạng thái ─────────────────────────────────────────────────────────
   Một chữ trên nền nhạt. Dùng cho bước hiện tại, kết quả đối chiếu, nhãn ngắn. */
.fbs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fbs-co-nho); font-weight: var(--fbs-dam-vua);
  padding: 2px 8px; border-radius: var(--fbs-bo-nho);
  border: 1px solid transparent; white-space: nowrap; line-height: 1.45;
}
.fbs-chip-xanh { background: var(--fbs-xanh-nen); color: var(--fbs-xanh); border-color: var(--fbs-xanh-vien); }
.fbs-chip-do   { background: var(--fbs-do-nen);   color: var(--fbs-do);   border-color: var(--fbs-do-vien); }
.fbs-chip-vang { background: var(--fbs-vang-nen);  color: #b45309;        border-color: var(--fbs-vang-vien); }
.fbs-chip-tim  { background: var(--fbs-tim-nen);   color: var(--fbs-tim); border-color: var(--fbs-tim-vien); }
.fbs-chip-xam  { background: var(--fbs-nen-xam);   color: var(--fbs-chu-3); border-color: var(--fbs-ke); }

/* ── Nút ─────────────────────────────────────────────────────────────────────
   Chiều cao CỐ ĐỊNH, không phải min-height: min-height cho nút cao lên khi chữ
   dài xuống dòng, và cả hàng nút thành so le. */
.fbs-nut {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--fbs-cam); background: var(--fbs-nen-the); color: var(--fbs-cam);
  border-radius: var(--fbs-bo-vua); font-size: var(--fbs-co-nho);
  font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap;
  font-family: inherit; text-decoration: none;
  transition: background var(--fbs-nhip), border-color var(--fbs-nhip), color var(--fbs-nhip);
}
.fbs-nut:hover:not(:disabled) { background: var(--fbs-cam-nen); }
.fbs-nut:active:not(:disabled) { border-color: var(--fbs-cam-dam); color: var(--fbs-cam-dam); }
.fbs-nut:disabled { opacity: .6; cursor: not-allowed; }
/* Nút HÀNH ĐỘNG CHÍNH: nền cam đặc, chữ trắng. Đo trên FBS portal: nút Search là
   nền đặc, còn Reset và Create Request là nền trắng. Một màn hình chỉ nên có MỘT nút
   đặc - đó là việc chính người ta vào đây để làm. */
.fbs-nut-dac {
  background: var(--fbs-cam); color: var(--fbs-chu-tren-mau); border-color: var(--fbs-cam);
}
.fbs-nut-dac:hover:not(:disabled) { background: var(--fbs-cam-sang); border-color: var(--fbs-cam-sang); }
.fbs-nut-dac:active:not(:disabled) { background: var(--fbs-cam-dam); border-color: var(--fbs-cam-dam); color: var(--fbs-chu-tren-mau); }

/* Nút phụ: cùng kích thước để hàng nút không so le, nhưng nhạt hơn nên mắt vẫn
   bắt đúng nút phải bấm. */
.fbs-nut-nhe { border-color: var(--fbs-ke-dam); color: var(--fbs-chu-2); }
.fbs-nut-nhe:hover:not(:disabled) { background: var(--fbs-nen-nhat); border-color: #9ca3af; }
/* Nút chỉ có ký hiệu: vuông đúng 30x30 để đứng thẳng hàng với nút chữ. */
.fbs-nut-vuong { width: 30px; padding: 0; }

/* ── Liên kết ────────────────────────────────────────────────────────────────
   Hành động PHỤ trong bảng (Chi tiết, Log, Xem thêm) là chữ xanh dương, không viền,
   không nền. Portal làm vậy, và đúng: một bảng mười dòng mà mỗi dòng hai nút viền
   là hai mươi khung chữ nhật tranh nhau. */
.fbs-link {
  color: var(--fbs-lien-ket); font-size: var(--fbs-co-nho); font-weight: var(--fbs-dam-vua);
  text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0;
  font-family: inherit;
}
.fbs-link:hover { color: var(--fbs-lien-ket-dam); text-decoration: underline; }

/* ── Hàng nút ────────────────────────────────────────────────────────────── */
.fbs-hang-nut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fbs-cach-2); }

/* ── Thẻ ─────────────────────────────────────────────────────────────────── */
.fbs-the {
  background: var(--fbs-nen-the); border: 1px solid var(--fbs-ke);
  border-radius: var(--fbs-bo-lon); padding: var(--fbs-cach-5);
}
.fbs-the-dau {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--fbs-cach-3); margin-bottom: var(--fbs-cach-4);
}
.fbs-the-ten { font-size: var(--fbs-co-khoi); font-weight: var(--fbs-dam-manh); color: var(--fbs-chu-1); }
.fbs-the-mo  { font-size: var(--fbs-co-nho); color: var(--fbs-chu-3); margin-top: 3px; line-height: 1.5; }

/* ── Bảng ────────────────────────────────────────────────────────────────────
   Bảng dashboard nào cũng phải cuộn ngang được: màn 1280px không chứa nổi
   tám cột mà không bóp chữ. */
.fbs-cuon-ngang { overflow-x: auto; }
.fbs-bang { width: 100%; border-collapse: collapse; font-size: var(--fbs-co-thuong); }
.fbs-bang th {
  text-align: left; font-size: var(--fbs-co-rat-nho); font-weight: var(--fbs-dam-vua);
  color: var(--fbs-chu-3); padding: var(--fbs-cach-2) var(--fbs-cach-3);
  border-bottom: 1px solid var(--fbs-ke); white-space: nowrap;
}
.fbs-bang td {
  padding: var(--fbs-cach-3); border-bottom: 1px solid var(--fbs-ke-nhat);
  color: var(--fbs-chu-1); vertical-align: top;
}
.fbs-bang tbody tr:hover { background: var(--fbs-cam-nen); }
.fbs-bang tbody tr:last-child td { border-bottom: 0; }

/* ── Mã định danh ────────────────────────────────────────────────────────────
   Mã đơn, mã card, biển số. Mặt chữ đều để ký tự thẳng cột. */
.fbs-ma { font-family: var(--fbs-font-ma); font-size: var(--fbs-co-rat-nho); color: var(--fbs-chu-2); }
.fbs-ma-chinh { color: var(--fbs-cam); font-weight: 700; }
/* Mã bấm được: gạch chân đứt nói "bấm được" mà không ồn như một nút thật -
   một cột có thể có tới chín dòng mã. */
.fbs-ma-lien-ket {
  color: var(--fbs-lien-ket); text-decoration: none;
  border-bottom: 1px dashed rgba(31, 116, 224, .35); cursor: pointer;
}
.fbs-ma-lien-ket:hover { color: var(--fbs-lien-ket-dam); border-bottom-color: currentColor; }

/* ── Ô số liệu ───────────────────────────────────────────────────────────── */
.fbs-o-so {
  background: var(--fbs-nen-the); border: 1px solid var(--fbs-ke);
  border-radius: var(--fbs-bo-vua); padding: var(--fbs-cach-3) var(--fbs-cach-4);
}
.fbs-o-so-nhan { font-size: 9.5px; font-weight: var(--fbs-dam-manh); letter-spacing: .3px; color: var(--fbs-chu-3); text-transform: uppercase; }
.fbs-o-so-gt   { font-size: 22px; font-weight: var(--fbs-dam-manh); color: var(--fbs-chu-1); line-height: 1.2; margin-top: 2px; }
.fbs-o-so-phu  { font-size: var(--fbs-co-rat-nho); color: var(--fbs-chu-mo); margin-top: 2px; }

/* ── Dải nhắc ────────────────────────────────────────────────────────────────
   Một dòng thông tin gắn dưới nội dung chính: đối chiếu số, thông tin xe, lời
   nhắn của bên kia. Không phải cảnh báo, nên đừng dùng nền đỏ. */
.fbs-dai {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px;
  margin-top: var(--fbs-cach-1); padding: 4px 8px;
  border-radius: var(--fbs-bo-nho); font-size: var(--fbs-co-rat-nho); line-height: 1.35;
  border: 1px solid var(--fbs-ke);
}
.fbs-dai-nhan {
  font-size: 9px; font-weight: var(--fbs-dam-manh); letter-spacing: .4px;
  background: var(--fbs-nen-the); border: 1px solid currentColor;
  border-radius: 4px; padding: 1px 4px; opacity: .85;
}
.fbs-dai-tim  { background: var(--fbs-tim-nen);  border-color: var(--fbs-tim-vien);  color: var(--fbs-chu-2); }
.fbs-dai-vang { background: var(--fbs-vang-nen); border-color: var(--fbs-vang-vien); color: #7a5a12; }
.fbs-dai-xanh { background: var(--fbs-xanh-nen); border-color: var(--fbs-xanh-vien); color: #14603a; }

/* ── Hộp phủ ─────────────────────────────────────────────────────────────── */
.fbs-phu {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(17, 24, 39, .45);
  display: flex; align-items: center; justify-content: center; padding: var(--fbs-cach-4);
}
.fbs-hop {
  background: var(--fbs-nen-the); border-radius: var(--fbs-bo-lon);
  width: 100%; max-height: 88vh; overflow: auto; box-shadow: var(--fbs-bong-phu);
}
.fbs-hop-dau {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fbs-cach-3);
  padding: var(--fbs-cach-3) var(--fbs-cach-4);
  border-bottom: 1px solid var(--fbs-ke); background: var(--fbs-nen-nhat);
  position: sticky; top: 0; z-index: 1;
}

/* ── Hàng nhãn - giá trị ─────────────────────────────────────────────────────
   Dùng khi trình bày MỘT bản ghi. Một bản ghi là một hồ sơ để đọc kỹ, không
   phải một hàng trong danh sách để quét, nên đừng dựng nó bằng bảng. */
.fbs-hang { display: flex; gap: var(--fbs-cach-3); padding: var(--fbs-cach-2) 0; border-bottom: 1px solid var(--fbs-ke-nhat); align-items: flex-start; }
.fbs-hang:last-child { border-bottom: 0; }
.fbs-hang-nhan { flex: 0 0 128px; font-size: 11.5px; font-weight: 700; color: var(--fbs-chu-mo); letter-spacing: .2px; padding-top: 1px; }
.fbs-hang-gt   { flex: 1 1 auto; min-width: 0; font-size: var(--fbs-co-thuong); color: var(--fbs-chu-1); }

/* ── Trạng thái rỗng ─────────────────────────────────────────────────────────
   Nói RÕ vì sao rỗng. "Không có dữ liệu" khiến người đọc không biết là lọc quá
   tay hay là hệ thống hỏng. */
.fbs-rong { padding: 32px 16px; text-align: center; color: var(--fbs-chu-mo); font-size: var(--fbs-co-thuong); }

/* ============================================================================
   MÀN HẸP
   Ngưỡng 640px, khớp với ngưỡng bảy app đang dùng. Cỡ chữ ô nhập giữ 16px:
   dưới 16px là iOS tự phóng to cả trang khi đặt con trỏ vào ô.
   ============================================================================ */
@media (max-width: 640px) {
  :root {
    --fbs-cach-5: 14px;
    --fbs-cach-6: 16px;
  }
  .fbs-the { padding: var(--fbs-cach-3); border-radius: var(--fbs-bo-vua); }
  .fbs-bang th, .fbs-bang td { padding: var(--fbs-cach-2); }
  .fbs-hang { flex-direction: column; gap: 2px; }
  .fbs-hang-nhan { flex: none; }
  .fbs-hop { max-height: 92vh; }
  input.fbs-o-nhap, select.fbs-o-nhap { font-size: 16px; }
}