/* =========================================================
   1. BIẾN MÀU SẮC & CẤU HÌNH GỐC (ROOT)
   ========================================================= */
:root {
  color-scheme: light;
  --bg: #eef8fd;
  --panel: #ffffff;
  --text: #1d2433;
  --muted: #647085;
  --line: #d5e7f1;
  --brand: #28A6DE;
  --brand-dark: #167fb2;
  --brand-soft: #dff3fc;
  --brand-pale: #f4fbfe;
  --danger: #b42318;
  --warn: #9a6700;
  --ok: #0f7a4f;
  --theme-page-bg: #f7fafc;
  --theme-surface: #ffffff;
  --theme-surface-2: #f8fafc;
  --theme-surface-3: #eff6ff;
  --theme-border: #e2e8f0;
  --theme-border-strong: #cbd5e1;
  --theme-primary: #2563eb;
  --theme-primary-2: #0ea5e9;
  --theme-primary-dark: #1d4ed8;
  --theme-primary-deep: #1e3a8a;
  --theme-green: #10b981;
  --theme-green-dark: #047857;
  --theme-warn: #f59e0b;
  --theme-warn-dark: #92400e;
  --theme-danger: #ef4444;
  --theme-danger-dark: #b91c1c;
  --theme-text: #0f172a;
  --theme-muted: #64748b;
  --theme-shadow: 0 14px 34px rgba(15, 23, 42, .075);
  --theme-shadow-strong: 0 16px 38px rgba(37, 99, 235, .22);
  --theme-hero: linear-gradient(135deg, #0ea5e9 0%, #2563eb 52%, #1d4ed8 100%);
  --theme-hero-soft: linear-gradient(135deg, #f7fdff 0%, #e8f8ff 60%, #f8fafc 100%);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: linear-gradient(180deg, var(--brand-pale) 0, var(--bg) 260px, #f7fafc 100%);
  color: var(--text);
  font-family: "Be Vietnam Pro", Arial, Tahoma, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
}
a { color: var(--brand); text-decoration: none; transition: 0.2s; }
a:hover { color: var(--brand-dark); text-decoration: underline; }
.muted { color: var(--muted); }
body :where(p, span, small, label, input, select, textarea, td, li, a) {
  font-weight: 400;
}
body :where(strong, b) {
  font-weight: 500;
}
body :where(h1, h2, h3, h4, h5, h6, .brand, .page-title h1, .hero h1) {
  font-weight: 700;
}

/* =========================================================
   2. TOPBAR & BỐ CỤC CHÍNH (LAYOUT)
   ========================================================= */
.topbar {
  position: sticky; top: 0; z-index: 20; min-height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); box-shadow: 0 2px 14px rgba(40, 166, 222, 0.08);
}
.topbar-container { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--text); font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: 46px; height: 34px; object-fit: contain; }
.brand span { color: var(--brand-dark); line-height: 1.15; }
.topbar nav { display: flex; gap: 14px; margin-left: 30px; flex: 1; }
.topbar nav a { color: #436274; font-weight: 400; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; }
.topbar nav a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.topbar-user { display: flex; align-items: center; gap: 12px; }
.user-pill { border: 1px solid #b9ddeb; border-radius: 999px; padding: 6px 12px; color: var(--brand-dark); background: var(--brand-soft); display: flex; align-items: center; gap: 8px; font-size: 14px; }
.user-avatar { background: var(--brand); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; text-transform: uppercase; }
.logout-btn { color: var(--muted); font-size: 18px; padding: 4px; }
.logout-btn:hover { color: var(--danger); }

.container { width: min(1180px, calc(100% - 32px)); margin: 24px auto 48px; }
.page-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.page-title h1 { margin: 0 0 4px; color: var(--brand-dark); font-size: 26px; }
.panel, .card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(40, 166, 222, 0.05); }

/* =========================================================
   3. DASHBOARD CARDS
   ========================================================= */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.card strong { display: block; font-size: 28px; margin-top: 8px; color: var(--brand-dark); }

/* =========================================================
   4. BẢNG DỮ LIỆU CHUNG (TABLE) & BADGES
   ========================================================= */
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--brand-soft); font-size: 13px; color: var(--brand-dark); text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--brand-pale); }

.status { display: inline-block; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 500; background: #eef2f6; text-transform: uppercase; }
.status.approved { color: var(--ok); background: #e8f5ef; border: 1px solid #a7f3d0; }
.status.rejected { color: var(--danger); background: #fff0ed; border: 1px solid #fecaca; }
.status.pending { color: var(--warn); background: #fff7db; border: 1px solid #fde68a; }
.form-alert {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--text);
  font-weight: 400;
  line-height: 1.45;
}
.form-alert.error {
  border-color: #fecaca;
  background: #fff1f2;
  color: #991b1b;
}

/* =========================================================
   5. FORM, NÚT BẤM & TOAST
   ========================================================= */
form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { margin-bottom: 16px; }
label { display: block; font-weight: 400; margin-bottom: 6px; color: var(--text); }
input, select, textarea { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; background: #fff; color: var(--text); font: inherit; transition: 0.2s; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(40, 166, 222, 0.16); outline: none; }
.bg-readonly { background-color: #f1f5f9 !important; color: #64748b; cursor: not-allowed; }
textarea { min-height: 96px; resize: vertical; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.button, button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 1px solid var(--brand); border-radius: 6px; padding: 8px 16px; background: var(--brand); color: #fff; cursor: pointer; font-weight: 500; font-size: 14px; transition: 0.2s; }
.button:disabled, button:disabled { cursor: not-allowed; opacity: 0.6; }
.button:hover, button:hover { background: var(--brand-dark); border-color: var(--brand-dark); text-decoration: none; transform: translateY(-1px); }
.button.secondary, button.secondary { background: #fff; color: var(--brand); border-color: var(--line); }
.button.secondary:hover, button.secondary:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.button.danger, button.danger { border-color: var(--danger); background: var(--danger); }
.button.danger:hover, button.danger:hover { background: #8f1d14; border-color: #8f1d14; }
.bg-success { background-color: var(--ok) !important; border-color: var(--ok) !important; }
.bg-success:hover { background-color: #059669 !important; }

/* Custom Toastify */
.toastify { padding: 12px 20px; border-radius: 8px; font-family:Arial,Tahoma,sans-serif; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.toast-success { background: white; border-left: 4px solid var(--ok); color: var(--text); }
.toast-success .toast-icon { color: var(--ok); font-size: 20px; }
.toast-error { background: white; border-left: 4px solid var(--danger); color: var(--text); }
.toast-error .toast-icon { color: var(--danger); font-size: 20px; }

/* =========================================================
   6. MODULE BÁO CÁO (WIZARD, AUTOCOMPLETE, CAMERA, LIGHTBOX)
   ========================================================= */
/* Trình hướng dẫn các bước (Wizard) */
.wizard-indicator { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding: 0 10%; }
.step-dot { width: 40px; height: 40px; border-radius: 50%; background: #f1f5f9; color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 16px; border: 2px solid var(--line); transition: all 0.3s; z-index: 2; position: relative; }
.step-dot.active { background: var(--brand); color: white; border-color: var(--brand); box-shadow: 0 0 10px rgba(40, 166, 222, 0.4); }
.step-dot.completed { background: var(--ok); color: white; border-color: var(--ok); }
.step-line { flex: 1; height: 3px; background: var(--line); margin: 0 -10px; z-index: 1; transition: all 0.3s; }
.step-line.completed { background: var(--ok); }
.wizard-slide { display: none; animation: slideIn 0.3s forwards; }
.wizard-slide.active { display: block; }
@keyframes slideIn { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } }
.wizard-actions { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Autocomplete Textbox */
.search-box { position: relative; }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box input { padding-left: 44px; }
.autocomplete-container { position: relative; }
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 10px 15px rgba(0,0,0,0.1); z-index: 100; max-height: 250px; overflow-y: auto; margin-top: 4px; }
.autocomplete-list.hidden { display: none; }
.autocomplete-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: 0.2s; }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background-color: var(--brand-pale); color: var(--brand-dark); }

/* Camera UI 50vh & Lưới Preview */
.camera-panel { border: 2px dashed var(--line); border-radius: 8px; background: var(--brand-pale); padding: 16px; margin-bottom: 16px; }
.camera-meta { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.camera-meta span { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.camera-stage-wrapper { position: relative; width: 100%; height: 50vh; min-height: 350px; background: #000; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.camera-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.camera-stage video { width: 100%; height: 100%; object-fit: cover; } 
.camera-placeholder { display: flex; flex-direction: column; align-items: center; color: #64748b; font-weight: 500; }
.camera-start-action { display: flex; justify-content: center; margin-top: 16px; }
.btn-camera-start { font-size: 16px; padding: 14px 28px; width: 100%; max-width: 300px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.camera-overlay-actions { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 30px; z-index: 10; }
.btn-overlay-circle { width: 50px; height: 50px; border-radius: 50%; border: none; color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); }
.btn-overlay-capture { width: 70px; height: 70px; border-radius: 50%; border: 4px solid white; background: var(--ok); color: white; font-size: 28px; cursor: pointer; transition: 0.1s; }
.btn-overlay-capture:active { transform: scale(0.9); }
.upload-alternative { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Xem trước ảnh (Lightbox) */
.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; margin-top: 16px; }
.preview-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item:hover { border-color: var(--brand); transform: scale(1.05); }
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; transition: 0.2s; padding: 20px; }
.lightbox-overlay.hidden { opacity: 0; pointer-events: none; }
.lightbox-content { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lightbox-close { position: absolute; top: -45px; right: 0; background: none; border: none; color: white; font-size: 32px; cursor: pointer; }
.lightbox-content img { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: 8px; }
.lightbox-actions { margin-top: 20px; }

/* Danh sách ảnh cũ (Chỉnh sửa báo cáo) */
.existing-pictures { margin-top: 16px; }
.editable-picture-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.editable-picture-list li { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; text-align: center; }
.editable-picture-list img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
.saved-actions { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.inline-check { margin: 0; color: var(--danger); font-weight: 400; cursor: pointer; display: flex; align-items: center; gap: 4px; }

/* =========================================================
   7. MODULE QUẢN TRỊ HỆ THỐNG (MANAGEMENT)
   ========================================================= */
.mgmt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 10px; }
.mgmt-card { background: white; border-radius: 12px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 2px solid transparent; }
.mgmt-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-color: var(--brand); background: var(--brand-pale); }
.mgmt-card i { font-size: 50px; color: var(--brand); margin-bottom: 20px; display: block; }
.mgmt-card h3 { font-size: 22px; margin-bottom: 8px; color: var(--text); font-weight: 700; }
.mgmt-card p { font-size: 15px; color: var(--muted); font-weight: 400; margin: 0; }

/* Modals Đặc thù Management */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 1; transition: 0.3s; z-index: 99998 !important; padding: 24px !important; }
.modal-overlay.hidden { opacity: 0; pointer-events: none; }
.modal-content { background: white; border-radius: 12px; padding: 24px; width: 100%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); max-height: 90vh; display: flex; flex-direction: column; margin: auto !important; }
.modal-xl { max-width: 950px !important; }
.modal-lg { max-width: 650px !important; } /* Form Ngang */

.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; flex-shrink: 0; }
.modal-header h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.modal-header .close-modal { background: none; border: none; font-size: 24px; color: var(--muted); cursor: pointer; transition: 0.2s; padding: 0; }
.modal-header .close-modal:hover { color: var(--danger); }

/* Toolbar & Tìm kiếm Modal */
.modal-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; flex-shrink: 0; }
.modal-toolbar::-webkit-scrollbar { height: 4px; }
.modal-toolbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.modal-toolbar .search-box { flex: 1; min-width: 200px; max-width: 350px; position: relative; }
.toolbar-actions { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 8px; }
.limit-select { min-height: 38px; border-radius: 6px; border: 1px solid var(--line); padding: 0 30px 0 12px; font-size: 13px; background: #fff; cursor: pointer; font-weight: 500; }
.vr-line { width: 1px; background: var(--line); margin: 0 4px; height: 38px; }

/* Bảng Dữ Liệu Management (Compact) */
.table-container { flex: 1; overflow-y: auto; min-height: 200px; background: white; border: 1px solid var(--line); border-radius: 6px; }
.compact-table { width: 100%; border-collapse: collapse; margin: 0; border: none; }
.compact-table th, .compact-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compact-table th { background: #f8fafc; color: var(--muted); position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 var(--line); }
.compact-table input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; accent-color: var(--brand); margin: 0; display: block; }
.btn-text { background: none; border: none; color: var(--brand); font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px; }
.btn-text:hover { color: var(--brand-dark); text-decoration: underline; }

/* Thanh Phân Trang */
.pagination-bar { display: flex; justify-content: center; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); flex-shrink: 0; }
.pagination-container { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; width: 100%; }
.page-btn { min-width: 32px; height: 32px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: 0.2s; }
.page-btn:hover { background: var(--brand-soft); color: var(--brand-dark); }
.page-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-dots { color: var(--muted); padding: 0 4px; font-weight: 400; }

/* Form Ngang (Horizontal Form) */
.form-container-scroll { flex: 1; overflow-y: auto; padding-right: 8px; }
.mgmt-form.hidden { display: none; }
.mgmt-form { padding: 10px 0; }
.mgmt-form .field { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.mgmt-form .field label { flex: 0 0 160px; text-align: right; margin-bottom: 0; font-size: 14px; font-weight: 400; color: #436274; }
.mgmt-form .field input, .mgmt-form .field select { flex: 1; min-width: 0; margin-bottom: 0; }
/* --- BỔ SUNG WRAPPER CHO AUTOCOMPLETE TRONG FORM NGANG --- */
.mgmt-form .autocomplete-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
}
.mgmt-form .autocomplete-wrapper input[type="text"] {
    width: 100%;
    margin-bottom: 0;
}
/* =========================================================
   8. RESPONSIVE MOBILE (SMARTPHONE)
   ========================================================= */
.mobile-bottom-nav { display: none !important; }
.mobile-empty-state { display: none; }

@media (max-width: 768px) {
  body { font-size: 14px; }
  .container { width: min(100% - 20px, 1180px); margin-top: 14px; padding-bottom: 85px !important; }
  
  /* Topbar & Bottom Nav */
  .desktop-only { display: none !important; }
  .topbar-container { min-height: 56px; padding: 10px 16px; justify-content: space-between; }
  .brand-text { display: none; } 
  .brand img { height: 32px; }
  .topbar-user { margin-left: auto; }
  .user-info { display: none; }
  
  .mobile-bottom-nav { display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -4px 10px rgba(0,0,0,0.05); z-index: 1000; height: 65px; justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom); }
  .mobile-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-decoration: none; flex: 1; height: 100%; font-size: 11px; font-weight: 500; gap: 4px; transition: color 0.2s; }
  .mobile-bottom-nav a i { font-size: 20px; }
  .mobile-bottom-nav a:hover, .mobile-bottom-nav a.active { color: var(--brand); }

  /* Bố cục Form & Bảng chung */
  .page-title, form .row { display: block; }
  .page-title .button { width: 100%; margin-top: 10px; }
  table, thead, tbody, tr, th, td { display: block; }
  table { border: 0; background: transparent; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-bottom: 12px; overflow: hidden; }
  td { display: grid; grid-template-columns: 42% 1fr; gap: 10px; border-bottom: 1px solid var(--line); padding: 12px; }
  td::before { content: attr(data-label); color: var(--muted); font-weight: 400; }
  td:last-child { border-bottom: 0; }

  /* Form Ngang gập dọc lại */
  .mgmt-form .field { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
  .mgmt-form .field label { flex: none; width: 100%; text-align: left; }
  
  /* Management Mobile State */
  .mgmt-grid { grid-template-columns: 1fr; }
  .modal-overlay { padding: 10px !important; }
  .modal-content { padding: 16px; }
  
  .mobile-hide-list .table-container,
  .mobile-hide-list .pagination-bar,
  .mobile-hide-list .limit-select,
  .mobile-hide-list #btnShowAll { display: none !important; }
  
  .mobile-hide-list .mobile-empty-state { display: block !important; text-align: center; padding: 40px 20px; color: var(--muted); background: #f8fafc; border-radius: 8px; margin-top: 10px; border: 2px dashed var(--line); }
  .mobile-empty-state i { font-size: 32px; margin-bottom: 12px; color: #cbd5e1; }
}

/* =========================================================
   9. AUTH (LOGIN) SPECIFIC
   ========================================================= */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, rgba(40, 166, 222, 0.18), transparent 35%), linear-gradient(180deg, #f6fcff 0%, #e8f6fc 100%); }
.auth-card { width: min(420px, 100%); padding: 32px; box-shadow: 0 20px 60px rgba(22, 127, 178, 0.14); border-radius: 12px; }
.auth-card h1 { margin: 0 0 8px; font-size: 24px; color: var(--brand-dark); text-align: center; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }
.auth-brand img { width: min(140px, 60%); height: auto; }
.auth-brand strong { color: var(--brand-dark); font-size: 20px; }
.auth-card .muted { text-align: center; margin-bottom: 20px; }
.auth-card button { width: 100%; margin-top: 10px; height: 46px; font-size: 16px; }
/* --- SỬA LỖI GIAO DIỆN CHECKBOX VÀ MODAL CHỌN NHÓM --- */

/* 1. Ngăn chặn Checkbox bị ảnh hưởng bởi thẻ input 100% */
input[type="checkbox"], 
input[type="radio"] {
    width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
    accent-color: var(--brand);
}

/* 2. Class dùng chung cho các Label chứa Checkbox */
.inline-check {
    display: inline-flex;
    align-items: flex-start; /* Căn trên cùng để nếu text dài rớt dòng vẫn đẹp */
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text);
    line-height: 1.3;
    margin: 0;
}

/* 3. Lưới danh sách Chi nhánh / Vùng trong Modal */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Tự động chia cột */
    gap: 14px 16px;
    background: var(--brand-pale);
    border: 1px solid var(--line);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    max-height: 300px;
    overflow-y: auto; /* Cuộn riệng bên trong khung nếu quá nhiều chi nhánh */
}

/* Scrollbar mỏng cho checkbox-grid */
.checkbox-grid::-webkit-scrollbar { width: 5px; }
.checkbox-grid::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }

/* =========================================================
   10. MODAL CHỌN NHÓM (TABS & AUTO-SORT)
   ========================================================= */
.modal-tabs {
    display: flex;
    border-bottom: 2px solid var(--line);
    margin-bottom: 16px;
    flex-shrink: 0;
}
.modal-tabs button {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
    box-shadow: none;
    min-height: 48px;
}
.modal-tabs button:hover {
    color: var(--brand-dark);
    background: var(--brand-pale);
}
.modal-tabs button.active {
    color: var(--brand-dark);
    border-bottom-color: var(--brand-dark);
    background: #fff;
}
.modal-tabs button span.badge {
    background: #eef2f6;
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 13px;
    margin-left: 6px;
}
.modal-tabs button.active span.badge {
    background: var(--brand);
    color: #fff;
}

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.3s; }

/* Ô tìm kiếm Live Filter */
.live-filter {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 20px;
    padding: 8px 16px 8px 40px;
    background: #f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23647085" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>') no-repeat 14px center;
    border: 1px solid var(--line);
    transition: 0.2s;
}
.live-filter:focus { background-color: #fff; border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(40,166,222,0.1); }

/* Hiệu ứng Auto-sort (Đẩy lên đầu) cho Grid Item */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    background: var(--brand-pale);
    border: 1px solid var(--line);
    padding: 16px;
    border-radius: 8px;
    max-height: 350px;
    overflow-y: auto;
    align-content: start; /* Ép items dồn lên trên */
}
.grid-item {
    order: 1; /* Mặc định nằm dưới */
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.2s, box-shadow 0.2s;
}
.grid-item:hover {
    background: #fff;
    border-color: var(--line);
}
.grid-item.checked-item {
    order: 0; /* Thuật toán đẩy lên đầu */
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 2px 6px rgba(40,166,222,0.15);
}
/* =========================================================
   11. BỐ CỤC FORM CHIẾN DỊCH (2 CỘT TÓM TẮT BÊN PHẢI)
   ========================================================= */
.campaign-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px; /* Cột trái linh hoạt, cột phải 350px */
    gap: 24px;
    align-items: start;
    max-width: none !important; /* Bỏ max-width cũ để dàn trang */
}

.campaign-summary-side {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    min-height: 250px;
}

.campaign-summary-side h3 {
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--brand-dark);
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-group { margin-bottom: 16px; }
.summary-group strong { font-size: 13px; color: var(--muted); display: block; margin-bottom: 8px; text-transform: uppercase; }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.target-tag { font-size: 13px; padding: 6px 10px; border-radius: 6px; font-weight: 400; line-height: 1.2; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Màu sắc phân biệt Vùng và Chi nhánh */
.region-tag { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
.branch-tag { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

@media (max-width: 850px) {
    .campaign-layout { grid-template-columns: 1fr; }
    .campaign-summary-side { min-height: auto; }
}

/* =========================================================
   12. ĐỒNG BỘ PHÊ DUYỆT / NGHIỆM THU MARCOM & SCHOOL EVENT
   Giữ nguyên cấu trúc trang, chỉ thống nhất font, màu và menu chuột phải.
   ========================================================= */
.pa-page,
.era-page,
.sea,
.sga,
.sac,
.approved-stock-page,
.pa-page *,
.era-page *,
.sea *,
.sga *,
.sac *,
.approved-stock-page * {
    font-family: Arial, Tahoma, Helvetica, sans-serif !important;
    letter-spacing: 0 !important;
}

.pa-page :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
.era-page :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
.sea :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
.sga :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
.sac :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
.approved-stock-page :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
#contextMenu :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
.pa-context-menu :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
.era-context-menu :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
.sea-context-menu :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands),
.sac-context-menu :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands) {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}

.pa-page :is(.fas, .fa-solid),
.era-page :is(.fas, .fa-solid),
.sea :is(.fas, .fa-solid),
.sga :is(.fas, .fa-solid),
.sac :is(.fas, .fa-solid),
.approved-stock-page :is(.fas, .fa-solid),
#contextMenu :is(.fas, .fa-solid),
.pa-context-menu :is(.fas, .fa-solid),
.era-context-menu :is(.fas, .fa-solid),
.sea-context-menu :is(.fas, .fa-solid),
.sac-context-menu :is(.fas, .fa-solid) {
    font-weight: 900 !important;
}

.pa-page :is(.far, .fa-regular),
.era-page :is(.far, .fa-regular),
.sea :is(.far, .fa-regular),
.sga :is(.far, .fa-regular),
.sac :is(.far, .fa-regular),
.approved-stock-page :is(.far, .fa-regular),
#contextMenu :is(.far, .fa-regular),
.pa-context-menu :is(.far, .fa-regular),
.era-context-menu :is(.far, .fa-regular),
.sea-context-menu :is(.far, .fa-regular),
.sac-context-menu :is(.far, .fa-regular),
.pa-page :is(.fab, .fa-brands),
.era-page :is(.fab, .fa-brands),
.sea :is(.fab, .fa-brands),
.sga :is(.fab, .fa-brands),
.sac :is(.fab, .fa-brands),
.approved-stock-page :is(.fab, .fa-brands),
#contextMenu :is(.fab, .fa-brands),
.pa-context-menu :is(.fab, .fa-brands),
.era-context-menu :is(.fab, .fa-brands),
.sea-context-menu :is(.fab, .fa-brands),
.sac-context-menu :is(.fab, .fa-brands) {
    font-weight: 400 !important;
}

.pa-page :is(.fab, .fa-brands),
.era-page :is(.fab, .fa-brands),
.sea :is(.fab, .fa-brands),
.sga :is(.fab, .fa-brands),
.sac :is(.fab, .fa-brands),
.approved-stock-page :is(.fab, .fa-brands),
#contextMenu :is(.fab, .fa-brands),
.pa-context-menu :is(.fab, .fa-brands),
.era-context-menu :is(.fab, .fa-brands),
.sea-context-menu :is(.fab, .fa-brands),
.sac-context-menu :is(.fab, .fa-brands) {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}

.pa-page,
.era-page,
.sea,
.sga,
.sac,
.approved-stock-page {
    --approval-blue: #0ea5e9;
    --approval-blue-dark: #0369a1;
    --approval-blue-deep: #1d4ed8;
    --approval-ink: #0f172a;
    --approval-muted: #64748b;
    --approval-line: #dbeafe;
    --approval-panel: rgba(255, 255, 255, .88);
    --approval-soft: #f8fbff;
    --approval-good: #16a34a;
    --approval-warn: #f59e0b;
    --approval-danger: #dc2626;
    color: var(--approval-ink) !important;
}

.pa-hero,
.era-hero,
.sea-hero,
.sga-hero,
.sac-hero,
.sr-hero {
    background: linear-gradient(135deg, var(--approval-blue) 0%, var(--approval-blue-deep) 58%, #0f766e 100%) !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 54px rgba(37, 99, 235, .18) !important;
}

.pa-hero h1,
.era-hero h1,
.sea-hero h1,
.sga-hero h1,
.sac-hero h1,
.sr-hero h1 {
    color: #fff !important;
    font-size: clamp(24px, 2vw, 30px) !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
}

.pa-hero p,
.era-hero p,
.sea-hero p,
.sga-hero p,
.sac-hero p,
.sr-hero p {
    color: rgba(255, 255, 255, .9) !important;
    font-weight: 400 !important;
}

.pa-panel,
.era-panel,
.sea-card,
.sga-card,
.sac-card,
.sr-panel {
    background: var(--approval-panel) !important;
    border: 1px solid var(--approval-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 34px rgba(15, 72, 108, .08) !important;
}

.pa-input,
.pa-select,
.pa-textarea,
.era-input,
.era-select,
.sea-field input,
.sea-field select,
.sea-line-input,
.sga-field input,
.sga-field select,
.sac-field input,
.sac-field select,
.sac-actions input,
.sr-input,
.sr-select {
    border-color: #c7d8e8 !important;
    border-radius: 10px !important;
    color: var(--approval-ink) !important;
    font-weight: 400 !important;
}

.pa-input:focus,
.pa-select:focus,
.pa-textarea:focus,
.era-input:focus,
.era-select:focus,
.sea-field input:focus,
.sea-field select:focus,
.sea-line-input:focus,
.sga-field input:focus,
.sga-field select:focus,
.sac-field input:focus,
.sac-field select:focus,
.sac-actions input:focus,
.sr-input:focus,
.sr-select:focus {
    border-color: var(--approval-blue) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .16) !important;
    outline: 0 !important;
}

.pa-btn,
.era-btn,
.sea-btn,
.sga-btn,
.sac-btn,
.sr-btn {
    border-radius: 10px !important;
    font-weight: 500 !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}

.pa-btn:hover,
.era-btn:hover,
.sea-btn:hover,
.sga-btn:hover,
.sac-btn:hover,
.sr-btn:hover {
    transform: translateY(-1px) !important;
}

.pa-btn.good,
.pa-line-action-btn.approve,
.era-btn.good,
.sea-btn.approve,
.sac-btn.good,
.sr-btn.good {
    background: var(--approval-good) !important;
    color: #fff !important;
}

.pa-btn.warn,
.pa-line-action-btn.warn,
.era-btn.warn,
.sea-btn.warn,
.sga-btn.warn,
.sac-btn.warn,
.sr-btn.warn {
    background: var(--approval-warn) !important;
    color: #fff !important;
}

.pa-btn.bad,
.pa-btn.danger,
.pa-line-action-btn.danger,
.era-btn.danger,
.sea-btn.danger,
.sga-btn.danger,
.sac-btn.danger,
.sr-btn.danger {
    background: var(--approval-danger) !important;
    color: #fff !important;
}

.pa-table th,
.pa-cost-table th,
.era-table th,
.era-cost-table th,
.sea-line-table th,
.sga-table th,
.sac-table th,
.sac-proposal-table th,
.sac-accept-table th {
    background: #eef6fb !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

.pa-table td,
.pa-cost-table td,
.era-table td,
.era-cost-table td,
.sea-line-table td,
.sga-table td,
.sac-table td,
.sac-proposal-table td,
.sac-accept-table td {
    border-bottom-color: #dce8f2 !important;
    color: #334155 !important;
    font-weight: 400 !important;
}

.pa-money,
.pa-money *,
.pa-row-cost,
.pa-row-cost *,
.pa-cost-table .pa-money,
.pa-cost-table .pa-money *,
.era-money,
.era-money *,
.era-cost-table .era-money,
.era-cost-table .era-money *,
.sea-line-table td,
.sea-line-table td strong,
.sea-total-grid .sea-info strong,
.sga-table td,
.sga-table td strong,
.sac-money,
.sac-money *,
.sac-money-cell,
.sac-money-cell strong,
.sac-proposal-table td,
.sac-proposal-table td strong,
.sac-accept-table td,
.sac-accept-table td strong,
.sac-summary-table .sac-money-cell strong,
.approved-stock-page table td,
.approved-stock-page table td strong {
    font-weight: 400 !important;
}

.pa-status.approved,
.pa-line-status-badge-approved,
.era-status.approved,
.era-line-status.approved,
.sea-status-badge-approved,
.sac-badge.line-approved {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.pa-status.partial_approval,
.pa-line-status-badge-partial,
.era-status.partial_approval,
.era-line-status.partial,
.sea-status-badge-partial_approval,
.sac-badge.line-partial {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.pa-status.rejected,
.pa-line-status-badge-rejected,
.era-status.rejected,
.era-line-status.rejected,
.sea-status-badge-rejected,
.sac-badge.line-rejected {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.pa-status.submitted,
.pa-status.pending,
.pa-line-status-badge-pending,
.era-status.pending,
.era-line-status.pending,
.sea-status-badge-pending,
.sea-status-badge-draft,
.sea-status-badge-needs_revision,
.sac-badge.line-pending,
.sea-badge,
.sga-badge,
.sac-badge {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

#contextMenu,
.pa-context-menu,
.era-context-menu,
.sea-context-menu,
.sac-context-menu {
    min-width: 224px !important;
    padding: 7px !important;
    border: 1px solid rgba(148, 163, 184, .42) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .24) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#contextMenu ul {
    display: grid !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#contextMenu li,
.pa-context-menu button,
.era-context-menu button,
.sea-context-menu button,
.sac-context-menu button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 11px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--approval-ink) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .16s ease, color .16s ease, transform .16s ease !important;
}

#contextMenu li:hover,
.pa-context-menu button:hover,
.era-context-menu button:hover,
.sea-context-menu button:hover,
.sac-context-menu button:hover {
    background: #eff6ff !important;
    color: var(--approval-blue-dark) !important;
    transform: translateX(1px) !important;
}

#contextMenu li i,
.pa-context-menu button i,
.era-context-menu button i,
.sea-context-menu button i,
.sac-context-menu button i {
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
    opacity: .95 !important;
}

#contextMenu li.menu-success,
.pa-context-menu button[data-action="approved"],
.pa-context-menu button[data-action="approve"],
.era-context-menu button.good,
.sea-context-menu button.approve,
.sac-context-menu [data-sac-menu-action="approve"] {
    color: #15803d !important;
}

#contextMenu li.menu-success:hover,
.pa-context-menu button[data-action="approved"]:hover,
.pa-context-menu button[data-action="approve"]:hover,
.era-context-menu button.good:hover,
.sea-context-menu button.approve:hover,
.sac-context-menu [data-sac-menu-action="approve"]:hover {
    background: #dcfce7 !important;
    color: #166534 !important;
}

#contextMenu li.menu-warning,
.pa-context-menu button[data-action="partial"],
.pa-context-menu button[data-action="pending"],
.era-context-menu button.warn,
.era-context-menu button.pending,
.sea-context-menu button.warn,
.sea-context-menu button.pending,
.sac-context-menu [data-sac-menu-action="partial"],
.sac-context-menu [data-sac-menu-action="toggle"] {
    color: #b45309 !important;
}

#contextMenu li.menu-warning:hover,
.pa-context-menu button[data-action="partial"]:hover,
.pa-context-menu button[data-action="pending"]:hover,
.era-context-menu button.warn:hover,
.era-context-menu button.pending:hover,
.sea-context-menu button.warn:hover,
.sea-context-menu button.pending:hover,
.sac-context-menu [data-sac-menu-action="partial"]:hover,
.sac-context-menu [data-sac-menu-action="toggle"]:hover {
    background: #fef3c7 !important;
    color: #92400e !important;
}

#contextMenu li.menu-danger,
.pa-context-menu button[data-action="rejected"],
.era-context-menu button.danger,
.sea-context-menu button.danger,
.sac-context-menu [data-sac-menu-action="reject"] {
    color: #b91c1c !important;
}

#contextMenu li.menu-danger:hover,
.pa-context-menu button[data-action="rejected"]:hover,
.era-context-menu button.danger:hover,
.sea-context-menu button.danger:hover,
.sac-context-menu [data-sac-menu-action="reject"]:hover {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

/* 13. 1366x768 + lighter typography pass
   System operators mostly work on 1366 x 768 screens. Keep the old page
   structure, but make shared approval surfaces denser and less bold. */
.pa-page,
.era-page,
.sea,
.sga,
.sac,
.approved-stock-page {
    font-size: 13px !important;
    line-height: 1.38 !important;
}

.pa-page :is(p, span, small, label, input, select, textarea, td, li, a),
.era-page :is(p, span, small, label, input, select, textarea, td, li, a),
.sea :is(p, span, small, label, input, select, textarea, td, li, a),
.sga :is(p, span, small, label, input, select, textarea, td, li, a),
.sac :is(p, span, small, label, input, select, textarea, td, li, a),
.approved-stock-page :is(p, span, small, label, input, select, textarea, td, li, a) {
    font-weight: 400 !important;
}

.pa-page :is(strong, b),
.era-page :is(strong, b),
.sea :is(strong, b),
.sga :is(strong, b),
.sac :is(strong, b),
.approved-stock-page :is(strong, b) {
    font-weight: 500 !important;
}

.pa-page :is(h1, h2, h3, .pa-hero *, .dash-hero *, .report-hero *),
.era-page :is(h1, h2, h3, .era-hero *),
.sea :is(h1, h2, h3, .sea-hero *),
.sga :is(h1, h2, h3, .sga-hero *),
.sac :is(h1, h2, h3, .sac-hero *),
.approved-stock-page :is(h1, h2, h3, .stock-hero *) {
    font-weight: 700 !important;
}

.pa-page :is(.pa-btn, .pa-line-action-btn),
.era-page .era-btn,
.sea .sea-btn,
.sga .sga-btn,
.sac .sac-btn,
.approved-stock-page :is(.button, button) {
    font-weight: 500 !important;
}

.pa-page :is(.pa-status, .pa-line-status-badge, .record-count-chip),
.era-page :is(.era-status, .era-line-status),
.sea :is(.sea-badge, .sea-warn, [class*="sea-status-badge"]),
.sga :is(.sga-badge),
.sac :is(.sac-badge, .sac-pending-pill, .sac-cost) {
    font-weight: 500 !important;
}

.pa-table th,
.pa-cost-table th,
.era-table th,
.era-cost-table th,
.sea-line-table th,
.sga-table th,
.sac-table th,
.sac-proposal-table th,
.sac-accept-table th {
    font-weight: 500 !important;
}

#contextMenu li,
.pa-context-menu button,
.era-context-menu button,
.sea-context-menu button,
.sac-context-menu button {
    font-weight: 400 !important;
}

@media (min-width: 1200px) and (max-width: 1400px) and (max-height: 820px) {
    body { font-size: 14px; line-height: 1.38; }
    .container {
        width: min(1288px, calc(100% - 28px));
        margin-top: 14px;
        margin-bottom: 28px;
    }
    .panel,
    .card {
        padding: 16px;
        margin-bottom: 12px;
    }
    .page-title {
        margin-bottom: 14px;
    }
    .page-title h1 {
        font-size: 23px;
    }
    th,
    td {
        padding: 9px 11px;
    }
    .pa-page,
    .era-page,
    .sea,
    .sga,
    .sac,
    .approved-stock-page {
        gap: 12px !important;
    }
    .pa-hero,
    .era-hero,
    .sea-hero,
    .sga-hero,
    .sac-hero,
    .sr-hero {
        padding: 17px 20px !important;
        border-radius: 16px !important;
    }
    .pa-hero h1,
    .era-hero h1,
    .sea-hero h1,
    .sga-hero h1,
    .sac-hero h1,
    .sr-hero h1 {
        font-size: 24px !important;
    }
    .pa-panel,
    .era-panel,
    .sea-card,
    .sga-card,
    .sac-card,
    .sr-panel {
        border-radius: 13px !important;
    }
    .pa-table th,
    .pa-cost-table th,
    .pa-table td,
    .pa-cost-table td,
    .era-table th,
    .era-cost-table th,
    .era-table td,
    .era-cost-table td,
    .sea-line-table th,
    .sea-line-table td,
    .sga-table th,
    .sga-table td,
    .sac-table th,
    .sac-table td,
    .sac-proposal-table th,
    .sac-proposal-table td,
    .sac-accept-table th,
    .sac-accept-table td {
        padding: 8px 9px !important;
        font-size: 12px !important;
    }
    .pa-btn,
    .era-btn,
    .sea-btn,
    .sga-btn,
    .sac-btn,
    .sr-btn {
        min-height: 32px !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
    }
}


/* =========================================================
   MARCOMRS LOCAL FONT NORMALIZATION
   - Force all UI text to the bundled Be Vietnam Pro font.
   - Keep Font Awesome elements on their icon font.
   ========================================================= */
:root {
  --mrs-font-text: "Be Vietnam Pro", Arial, Tahoma, Helvetica, sans-serif;
}

html, body,
input, button, select, textarea {
  font-family: var(--mrs-font-text) !important;
}

body *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-classic):not(.fa-sharp) {
  font-family: var(--mrs-font-text) !important;
}

body :is(.fa,.fas,.far,.fal,.fa-solid,.fa-regular,.fa-classic,.fa-sharp) {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}

body :is(.fab,.fa-brands) {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", FontAwesome !important;
}