/* ===================================================
   AAuJob - Main Site Styles | TopCV-inspired Modern UI
   Bootstrap 5.3 + Inter + Font Awesome 6
   =================================================== */

/* ─── CSS VARIABLES ────────────────────────────────── */
:root {
  /* Override Bootstrap primary to brand color */
  --bs-primary:        #A11D21;
  --bs-primary-rgb:    161, 29, 33;
  --bs-link-color:     #A11D21;
  --bs-link-color-rgb: 161, 29, 33;
  --brand:          #A11D21;
  /* Legacy aliases (used by views.css) */
  --border-radius-xl: 14px;
  --border-radius-lg: 10px;
  --border-radius-md: 8px;
  --border-radius-sm: 6px;
  --brand-dark:     #7f1417;
  --brand-light:    #fff0f0;
  --brand-mid:      #fecaca;
  --primary:        #A11D21;
  --primary-dark:   #7f1417;
  --primary-light:  #fff0f0;
  --secondary:      #f97316;
  --success:        #16a34a;
  --text-main:      #111827;
  --text-body:      #374151;
  --text-muted:     #6b7280;
  --text-light:     #9ca3af;
  --bg-body:        #f5f5f5;
  --bg-white:       #ffffff;
  --bg-section:     #f9fafb;
  --border-color:   #e5e7eb;
  --border-light:   #f3f4f6;
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:      0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.10);
  --shadow-xl:      0 16px 48px rgba(0,0,0,0.12);
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
  --radius-xl:      20px;
  --transition:     all 0.22s ease;
  --font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* KHOÁ kéo ngang mobile (giống TopCV) + tắt double-tap zoom.
   - overflow-x:hidden CHỈ trên HTML: đủ để khoá kéo ngang, hỗ trợ mọi trình duyệt.
     KHÔNG đặt overflow lên BODY vì iOS Safari sẽ cắt (clip) các panel position:fixed
     bên trong → dropdown bộ lọc (bottom-sheet) không hiện.
   - touch-action:manipulation: tắt zoom khi nhấp đúp (double-tap) — giữ pinch-zoom cho a11y. */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; touch-action: manipulation; }
body { max-width: 100%; }

/* Chặn tràn ngang TẠI GỐC (không dựa vào clip của html — iOS Safari không tin cậy):
   - .main-footer: .row.g-5 có margin gutter âm (-24px) > padding container (12px) → tràn 12px/cạnh.
     Cắt tại footer (footer không có panel fixed nên an toàn), vẫn giữ khoảng cách dọc g-5.
   - .mobile-bottom-nav: cho các item co lại (min-width:0) + cắt tràn nội dung. */
.main-footer { overflow-x: hidden; }
.mobile-bottom-nav { overflow: hidden; }
.mobile-bottom-nav-item { min-width: 0; }

/* ─── Admin quick-access chip (floating, frontend pages) ── */
.admin-quick-btn {
    position: fixed; bottom: 72px; right: 14px; z-index: 9990;
    background: #A11D21; color: #fff !important;
    padding: 5px 11px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(161,29,33,.4);
    display: flex; align-items: center; gap: 5px;
    transition: background .15s, transform .15s;
}
.admin-quick-btn:hover { background: #8b181c; transform: translateY(-1px); }

body {
  font-family: var(--font);
  background-color: var(--bg-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  font-size: 0.9375rem;
}

a { color: inherit; text-decoration: none; transition: var(--transition); }
img { max-width: 100%; }

/* ─── SCROLLBAR (thinner, modern like Vaesa) ──────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ─── TYPOGRAPHY ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--text-main); font-weight: 700; line-height: 1.35; }

.section-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.section-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 1.2em;
  background: var(--brand);
  border-radius: 3px;
  flex-shrink: 0;
}
.section-title span { color: var(--brand); }
.section-title .sub {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* Section header view-all link */
.view-all {
  font-size: 0.8rem; font-weight: 600; color: var(--brand);
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; transition: opacity 0.15s;
}
.view-all:hover { opacity: 0.75; color: var(--brand); }
.hp-section-hd .view-all { font-size: 0.8rem; font-weight: 600; color: var(--brand); text-decoration: none; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.hp-section-hd .view-all:hover { opacity: .75; }

/* ─── PAGE HEADER / BREADCRUMB ──────────────────────── */
.page-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
  margin-bottom: 0;
}
.page-header h1, .page-header .h4 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.breadcrumb { margin: 0; padding: 0; font-size: 0.8125rem; }
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item a:hover { color: var(--brand); }
.breadcrumb-item.active { color: var(--text-body); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--border-color); }

/* ─── NAVBAR / HEADER ───────────────────────────────── */
.main-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.95);
}

.logo img { height: 44px; transition: var(--transition); }
.logo:hover img { opacity: 0.88; }

.navbar-nav .nav-link {
  color: var(--text-body) !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.45rem 0.65rem !important;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
  /* Khong cho chu trong mot muc menu tu xuong dong. Thieu dong nay thi o dai 992-1399px
     "Tim viec" bi be thanh "Tim" / "viec", lam ca thanh menu cao gap doi (77px thay vi 60px).
     Van de KHONG phai thieu be ngang — do duoc con du 229px — ma la chu tu ngat dong. */
  white-space: nowrap;
}
.navbar-nav .nav-link i { font-size: 0.8rem; color: var(--text-light); transition: var(--transition); }
.navbar-nav .nav-link:hover { color: var(--brand) !important; background: var(--brand-light); }
.navbar-nav .nav-link:hover i { color: var(--brand); }

/* Dropdown menus */
.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  min-width: 220px;
  margin-top: 0.5rem !important;
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,0.98);
}
.dropdown-item {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
}
.dropdown-item:hover { background: var(--bg-section); color: var(--brand); }
.dropdown-item i { width: 18px; text-align: center; color: var(--text-light); }
.dropdown-item:hover i { color: var(--brand); }

/* Menu chính trên thanh điều hướng — mở submenu khi hover (desktop).
   Trước đây CHỈ "Dịch vụ AAuJob" mở bằng hover, còn "Công cụ" mở bằng click của Bootstrap.
   Hai cơ chế khác nhau nên không biết đến nhau: click mở "Công cụ" rồi rê sang "Dịch vụ AAuJob"
   là CẢ HAI cùng mở và đè lên nhau. Nay dùng chung một cơ chế, cộng thêm đoạn JS ở _Layout
   đóng menu còn lại khi rê chuột sang menu khác. */
@media (min-width: 992px) {
  .navbar .dropdown-svc:hover > .dropdown-menu,
  .navbar .dropdown-hover:hover > .dropdown-menu { display: block; margin-top: 0 !important; }
}
.dropdown-divider { border-color: var(--border-color); margin: 0.3rem 0; }

/* User avatar in navbar */
.user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-mid);
  transition: all 0.2s;
}
.user-avatar:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(161,29,33,0.12); }
.user-avatar-placeholder {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #f97316);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
  border: 2px solid var(--brand-mid);
  transition: all 0.2s;
}
.user-avatar-placeholder:hover { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(161,29,33,0.12); }

/* Employer navbar adjustments */
.navbar-employer .navbar-nav { flex-wrap: nowrap; }
.navbar-employer .navbar-nav.ms-auto { flex-wrap: nowrap; gap: 0.1rem; }

/* ── Employer sub-nav bar ── */
.employer-subnav {
    background: #fff;
    border-bottom: 1px solid #f0f2f5;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.employer-subnav .container { display:flex; align-items:center; gap:4px; padding-top:4px; padding-bottom:4px; }
.esn-link {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 14px; border-radius:20px;
    font-size:.82rem; font-weight:600; color:#64748b;
    text-decoration:none; transition:.15s;
    border:1.5px solid transparent;
}
.esn-link i { font-size:.78rem; }
.esn-link:hover { color:#A11D21; background:#fff0f0; border-color:#fecaca; }
.esn-link.active { color:#A11D21; background:#fff0f0; border-color:#fca5a5; font-weight:700; }
@media (min-width: 992px) and (max-width: 1280px) {
  .navbar-employer .navbar-nav .nav-link { padding: 0.4rem 0.4rem !important; font-size: 0.82rem; }
  .navbar-employer .employer-utility-menu .dropdown-menu { min-width: 240px; }
}

/* Navbar toggler */
.navbar-toggler { border: 1.5px solid var(--border-color); padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); }
.navbar-toggler:focus { box-shadow: none; }

/* ─── BUTTONS ───────────────────────────────────────── */
.btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(161,29,33,0.25);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(161,29,33,0.35);
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--brand);
  border: 2px solid var(--brand);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-employer {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(249,115,22,0.2);
}
.btn-employer:hover {
  background: #ea580c;
  border-color: #ea580c;
  color: #fff;
  transform: translateY(-1px);
}

.btn-light-primary {
  background: var(--brand-light);
  color: var(--brand);
  border: 1px solid var(--brand-mid);
}
.btn-light-primary:hover { background: var(--brand-mid); color: var(--brand-dark); }

.btn-primary-soft {
  background: var(--brand-light);
  color: var(--brand);
  border: none;
}
.btn-primary-soft:hover { background: var(--brand-mid); color: var(--brand-dark); transform: translateY(-1px); }

.btn-search {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(161,29,33,0.25);
}
.btn-search:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* Icon-only save button */
.btn-save {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-section);
  color: var(--text-light);
  border: 1.5px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  font-size: 0.9rem;
  cursor: pointer;
}
.btn-save:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; transform: scale(1.08); }
.btn-save.saved { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }

/* ─── FORMS ─────────────────────────────────────────── */
.form-control, .form-select {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  background: var(--bg-white);
  color: var(--text-main);
  transition: var(--transition);
}
.form-control::placeholder { color: var(--text-light); font-weight: 400; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(161,29,33,0.10);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-body);
  margin-bottom: 0.4rem;
}
.form-text { font-size: 0.8rem; color: var(--text-muted); }

.input-group .input-group-text {
  background: var(--bg-white);
  border: 1.5px solid var(--border-color);
  color: var(--text-light);
  font-size: 0.875rem;
}
.input-group .form-control:focus ~ .input-group-text,
.input-group .input-group-text:has(+ .form-control:focus) {
  border-color: var(--brand);
}

/* ─── CARDS ─────────────────────────────────────────── */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card-body { padding: 1.5rem; }
.card-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  padding: 0.9rem 1.5rem;
  font-weight: 700;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* ─── JOB CARDS (TopCV-inspired + Vaesa smoothness) ───── */
.job-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
}
.job-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.2s;
  border-radius: 3px 0 0 3px;
}
.job-card:hover {
  border-color: #fca5a5;
  box-shadow: 0 3px 12px rgba(161,29,33,0.08);
  transform: translateY(-1px);
}
.job-card:hover::before { background: var(--brand); }
.job-card--featured {
  background: linear-gradient(to right, #fff8f8 0%, #fff 60%);
}
.job-card--featured::before { background: var(--brand); }

/* Card body layout */
.jc-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
}

/* Logo */
.jc-logo-wrap {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.2s;
  text-decoration: none;
}
.job-card:hover .jc-logo-wrap { border-color: #fca5a5; }
.jc-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jc-logo-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #A11D21, #0f172a);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}

/* Content */
.jc-content { flex: 1; min-width: 0; }

/* Title row */
.jc-title-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.jc-badges { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.jc-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.jc-badge--hot { background: var(--brand); color: #fff; }
.jc-badge--urgent { background: #f59e0b; color: #fff; }
/* Tin ghim cố định trang chủ (dịch vụ Ví điểm "pin_home") */
.jc-badge--pinned { background: #0B1628; color: #fff; }

/* ── Tin GHIM cố định hiển thị TRONG rail "Tin tài trợ" bên phải trang chủ ──
   Rail (.hp-sponsored-rail ở views.css) là position:fixed, rộng 220px → mọi thứ ở đây
   phải vừa khung đó. Dùng specificity .hp-sponsored-rail ... để thắng views.css
   (views.css nạp SAU site.css trong _Layout). */
.hp-sponsored-rail .hp-sponsored-rail-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.hp-sponsored-rail .hp-sponsored-rail-title { color: #c41e2a; }
.hp-spj-note { font-size: 10px; color: #9ca3af; flex-shrink: 0; font-weight: 500; }

.hp-spj-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px; border-radius: 10px; background: #fff;
  border: 1px solid #f1f5f9; text-decoration: none;
  scroll-snap-align: start; flex-shrink: 0;
  transition: border-color .15s, box-shadow .15s;
}
.hp-spj-item:hover { border-color: #f3c9cc; box-shadow: 0 4px 12px rgba(196, 30, 42, .1); }

.hp-spj-logo { flex-shrink: 0; }
.hp-spj-logo img {
  display: block; width: 38px; height: 38px; object-fit: contain;
  border: 1px solid #eef0f3; border-radius: 8px; background: #fff; padding: 2px;
}
.hp-spj-logo-ph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  background: #f1f5f9; color: #64748b; font-weight: 800; font-size: 15px;
}

.hp-spj-body { min-width: 0; flex: 1; }
.hp-spj-tag {
  display: inline-block; margin-bottom: 3px;
  background: #fff2e0; color: #d97706;
  font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  padding: 1px 5px; border-radius: 3px; line-height: 1.5;
}
.hp-spj-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 11.5px; font-weight: 700; color: #1f2937; line-height: 1.35; margin-bottom: 1px;
}
.hp-spj-item:hover .hp-spj-name { color: #c41e2a; }
.hp-spj-com {
  display: block; font-size: 10.5px; color: #6b7280; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-spj-meta {
  display: block; font-size: 10px; color: #9ca3af; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hp-spj-more {
  display: block; text-align: center;
  padding: 9px 12px; border-top: 1px solid #f1f5f9;
  font-size: 11.5px; font-weight: 700; color: #c41e2a; text-decoration: none;
}
.hp-spj-more:hover { background: #fff5f5; color: #a01722; }
.hp-spj-more i { font-size: 10px; margin-left: 2px; }

.jc-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.18s;
  text-decoration: none;
}
.jc-title:hover { color: var(--brand); }

/* Save button */
.jc-save-btn {
  width: 28px; height: 28px;
  border-radius: 50%; border: 1.5px solid var(--border-color);
  background: var(--bg-white);
  color: var(--text-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
}
.jc-save-btn:hover { border-color: #fca5a5; color: #ef4444; background: #fef2f2; }
.jc-save-btn.saved { border-color: #fca5a5; color: #ef4444; background: #fef2f2; }

/* Company name */
.jc-company {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jc-company i { font-size: 0.65rem; flex-shrink: 0; }
.jc-company a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.jc-company a:hover { color: var(--brand); }

/* Tags row */
.jc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}
.jc-tag {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.7rem; font-weight: 600;
  padding: 1px 7px;
  border-radius: 3px;
  line-height: 1.4;
  white-space: nowrap;
}
.jc-tag i { font-size: 0.6rem; }
.jc-tag--salary { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.jc-tag--location { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; }
.jc-tag--type { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
.jc-tag--views { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
.jc-tag--date { background: transparent; color: var(--text-light); border: none; padding-left: 2px; margin-left: auto; }

/* Legacy aliases (backward compat with Detail/other views) */
.company-logo-container {
  width: 68px; height: 68px; flex-shrink: 0;
  border-radius: var(--radius-md); border: 1px solid var(--border-light);
  background: var(--bg-white); padding: 6px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
}
.company-logo { width: 100%; height: 100%; object-fit: contain; }
.company-logo-placeholder {
  width: 100%; height: 100%;
  background: var(--brand-light); color: var(--brand);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.4rem;
}
.job-title {
  font-weight: 700; font-size: 1rem; color: var(--text-main);
  display: block; line-height: 1.4; margin-bottom: 0.3rem;
  transition: var(--transition);
}
.job-title:hover { color: var(--brand); }
.company-name {
  font-size: 0.875rem; font-weight: 500; color: var(--text-muted);
  display: flex; align-items: center; gap: 0.35rem;
}
.company-name a { color: var(--text-muted); }
.company-name a:hover { color: var(--brand); }
.job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.job-tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.775rem; font-weight: 600; padding: 0.25rem 0.7rem;
  border-radius: 20px; line-height: 1.4;
}
.job-tag-location { background: #f0fdf4; color: #15803d; }
.job-tag-type { background: #f3f4f6; color: #374151; }
.job-tag-salary { background: #f0fdf4; color: #16a34a; font-weight: 700; }
.job-tag-date { background: transparent; color: var(--text-light); padding-left: 0; margin-left: auto; }
.badge-hot { background: var(--brand); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 4px; }
.badge-urgent { background: #f59e0b; color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 4px; }
.btn-save {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-white);
  color: var(--text-light); border: 1.5px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; cursor: pointer; transition: var(--transition);
}
.btn-save:hover { background: #fef2f2; color: #ef4444; border-color: #fca5a5; }
.btn-save.saved { background: #fef2f2; color: #ef4444; border-color: #fca5a5; }

/* Salary text */
.salary { color: var(--success); font-weight: 700; }

/* ─── CATEGORY CARDS ────────────────────────────────── */
.category-card {
  background: var(--bg-white);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 1.1rem 0.75rem;
  text-align: center;
  text-decoration: none;
  color: var(--text-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.category-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform 0.2s;
  border-radius: 0 0 12px 12px;
}
.category-card:hover {
  border-color: #fca5a5;
  box-shadow: 0 6px 20px rgba(161,29,33,0.10);
  transform: translateY(-3px);
  color: var(--text-main);
}
.category-card:hover::after { transform: scaleX(1); }
.category-icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem;
  background: var(--cat-bg, #f1f5f9);
  color: var(--cat-c, #64748b);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);
  transition: transform 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s;
}
.category-card:hover .category-icon {
  transform: translateY(-2px) scale(1.06);
  background: var(--cat-c, #64748b);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,0.18);
}
/* Ảnh 3D minh họa theo ngành — nền trong suốt, hòa thẳng với nền card trắng (như ảnh gốc) */
.category-img {
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  transition: transform 0.25s;
}
.category-img img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.category-card:hover .category-img { transform: translateY(-3px) scale(1.06); }
.category-card h6 { font-size: 0.82rem; font-weight: 600; margin: 0; line-height: 1.3; }
.category-card small { color: var(--text-light); font-size: 0.73rem; }

/* ─── STAT CARDS ────────────────────────────────────── */
.stat-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.2;
}
.stat-label { color: var(--text-muted); font-size: 0.875rem; font-weight: 500; }

/* ─── HERO / SEARCH SECTION ─────────────────────────── */
.search-section {
  background: linear-gradient(145deg, #A11D21 0%, #0f0f10 100%);
  padding: 80px 0;
  color: #fff;
}
.search-box {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

/* ─── FILTER SIDEBAR ────────────────────────────────── */
.filter-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.filter-card .filter-header {
  background: var(--bg-section);
  border-bottom: 1px solid var(--border-color);
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.filter-card .filter-body { padding: 1.25rem; }
.filter-card .form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.4rem; }

/* ─── PAGINATION ────────────────────────────────────── */
.pagination { gap: 0.25rem; }
.page-link {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm) !important;
  color: var(--text-body);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.45rem 0.8rem;
  transition: var(--transition);
  background: var(--bg-white);
}
.page-link:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(161,29,33,0.25);
}
.page-item.disabled .page-link { opacity: 0.5; }

/* ─── ALERTS ────────────────────────────────────────── */
.alert {
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.85rem 1.1rem;
  animation: fadeUp 0.3s ease;
}
.alert-success { background: #f0fdf4; color: #15803d; border-left: 4px solid #22c55e; }
.alert-danger { background: #fef2f2; color: #dc2626; border-left: 4px solid #ef4444; }
.alert-warning { background: #fffbeb; color: #d97706; border-left: 4px solid #f59e0b; }
.alert-info { background: #eff6ff; color: #1d4ed8; border-left: 4px solid #3b82f6; }

/* ─── BADGES ────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: 0.2px; }

/* ─── TABLES ────────────────────────────────────────── */
.table { font-size: 0.875rem; }
.table th { font-weight: 700; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-section); border-bottom: 2px solid var(--border-color); }
.table td { vertical-align: middle; border-color: var(--border-light); }
.table-hover tbody tr:hover { background: var(--bg-section); }

/* ─── FOOTER ────────────────────────────────────────── */
.main-footer {
  background: radial-gradient(1100px 380px at 18% -10%, rgba(161,29,33,0.10), transparent 60%),
              linear-gradient(180deg, #0e1422 0%, #0a0d14 100%);
  color: #9aa3ad;
  padding: 60px 0 0;
  margin-top: 0;
  position: relative;
}
/* top accent bar */
.main-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #A11D21 0%, #c0282d 40%, #f97316 75%, #fbbf24 100%);
}
/* section headings — gạch chân ngắn accent (phong cách Vuexy) */
.main-footer h5,
.main-footer h6 {
  color: #f0f6fc;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.15rem;
  padding-bottom: 0.6rem;
  position: relative;
  border-bottom: none;
}
.main-footer h5::after,
.main-footer h6::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 30px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #A11D21, #f97316);
}
/* links */
.main-footer a {
  color: #9aa3ad;
  font-size: 0.85rem;
  line-height: 2.05;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, gap .15s, transform .15s;
  text-decoration: none;
}
.main-footer a:hover { color: #fff; gap: 10px; }
.main-footer a:hover::before { content: '›'; color: #f97316; font-weight: 700; margin-right: -2px; }
/* brand logo */
.main-footer .footer-brand img { height: 34px; filter: brightness(0) invert(1); opacity: 0.88; }
/* description */
.main-footer .footer-desc {
  color: #8b929c;
  font-size: 0.84rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
  max-width: 340px;
}
/* contact rows */
.main-footer .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: #9aa3ad;
  margin-bottom: 0.7rem;
  line-height: 1.5;
}
.main-footer .contact-item i {
  color: #A11D21;
  flex-shrink: 0;
  width: 14px;
  margin-top: 0.15rem;
  font-size: 0.8rem;
}
/* social icons */
.footer-social { display: flex; gap: 8px; margin-top: 1.25rem; flex-wrap: wrap; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #8b949e;
  font-size: 0.85rem;
  transition: all 0.2s;
  padding: 0;
  gap: 0;
}
.footer-social a::before { display: none; }
.footer-social a:hover {
  background: #A11D21;
  border-color: #A11D21;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(161,29,33,0.35);
}
/* divider */
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 2.75rem 0 0;
}
/* bottom bar */
.footer-bottom {
  padding: 1.15rem 0 1.35rem;
  font-size: 0.8rem;
  color: #6e7681;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-bottom-links a { color: #484f58; font-size: 0.76rem; line-height: 1; gap: 0; }
.footer-bottom-links a:hover { color: #8b949e; gap: 0; }
.footer-bottom-links a:hover::before { display: none; }

/* ─── FAB SUPPORT (TopCV style — trigger + panel) ────── */
.fab-support-wrap {
  position: fixed; right: 16px; bottom: 24px;
  z-index: 9990;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px;
}
/* ── Popup panel ── */
.fsw-panel {
  display: none;
  width: 290px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 2px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  transform-origin: bottom right;
}
.fsw-panel.open {
  display: block;
  animation: fswSlideUp .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fswSlideUp {
  from { opacity:0; transform:translateY(14px) scale(.95); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
.fsw-panel-hd {
  background: linear-gradient(135deg, #A11D21 0%, #c92428 100%);
  color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.fsw-panel-hd i { font-size: 20px; flex-shrink: 0; }
.fsw-panel-hd-text { flex: 1; }
.fsw-panel-hd-text strong { display: block; font-size: 13.5px; font-weight: 700; }
.fsw-panel-hd-text span { font-size: 11px; opacity: .82; }
.fsw-panel-close {
  background: rgba(255,255,255,.18); border: none; color: #fff;
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.fsw-panel-close:hover { background: rgba(255,255,255,.32); }
.fsw-panel-body { padding: 6px 0 8px; }
.fsw-panel-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; width: 100%;
  border: none; background: none; text-align: left;
  cursor: pointer; text-decoration: none; color: #1e293b;
  transition: background .14s;
}
.fsw-panel-item:hover { background: #f8fafc; color: #1e293b; text-decoration: none; }
.fsw-panel-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.fsw-panel-item-title { font-size: 13px; font-weight: 600; color: #1e293b; line-height: 1.3; }
.fsw-panel-item-sub   { font-size: 11px; color: #64748b; margin-top: 1px; }
/* ── Trigger button ── */
.fsw-trigger {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #A11D21 0%, #c92428 100%);
  color: #fff; border: none;
  border-radius: 50px;
  padding: 11px 20px 11px 15px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(161,29,33,.45);
  transition: all .2s;
}
.fsw-trigger:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(161,29,33,.55); }
.fsw-trigger i { font-size: 18px; }
.fsw-trigger-close { display: none; }
.fab-support-wrap.open .fsw-trigger-open  { display: none; }
.fab-support-wrap.open .fsw-trigger-close { display: inline; }

/* ─── ADMIN TOPBAR (in main layout) ─────────────────── */
.admin-topbar {
  background: #0f172a;
  color: #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 1031;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.admin-topbar .admin-brand {
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.admin-topbar .admin-brand .brand-badge {
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.admin-nav-link {
  color: #94a3b8 !important;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 0.65rem !important;
  border-radius: 6px;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.admin-nav-link:hover, .admin-nav-link.active { background: rgba(255,255,255,0.08); color: #fff !important; }
.admin-nav-link i { font-size: 0.75rem; }
.admin-nav-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.12); margin: 0 4px; }
.admin-topbar .dropdown-menu {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
}
.admin-topbar .dropdown-item {
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 6px;
  padding: 7px 12px;
  display: flex; align-items: center; gap: 8px;
}
.admin-topbar .dropdown-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-topbar .dropdown-item i { width: 16px; text-align: center; }
.admin-topbar .dropdown-divider { border-color: rgba(255,255,255,0.1); }
.admin-user-chip {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 30px;
  background: rgba(255,255,255,0.07);
  transition: background 0.15s;
}
.admin-user-chip:hover { background: rgba(255,255,255,0.13); }
.admin-user-chip .name { font-size: 0.82rem; font-weight: 600; color: #fff; }
.admin-user-chip .avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,255,255,0.25); }
.admin-user-chip .avatar-sm-ph { width: 28px; height: 28px; border-radius: 50%; background: #ef4444; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; border: 1.5px solid rgba(255,255,255,0.25); }

/* ─── ACTION GROUPS ─────────────────────────────────── */
.admin-action-group { display: flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap; }
.admin-action-group .btn { white-space: nowrap; }
@media (max-width: 576px) { .admin-action-group { flex-wrap: wrap; } }

/* ─── MODAL ─────────────────────────────────────────── */
.modal-content { border: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); animation: popIn 0.25s ease; }
.modal-header { border-bottom: 1px solid var(--border-light); padding: 1.25rem 1.5rem; }
.modal-footer { border-top: 1px solid var(--border-light); padding: 1rem 1.5rem; }
.modal-title { font-weight: 700; font-size: 1.05rem; }

/* ─── MISC UTILITIES ─────────────────────────────────── */
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; }
.bg-brand-light { background: var(--brand-light) !important; }
.border-brand { border-color: var(--brand) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

/* Branch modal items */
.branch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-section);
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* Nut tren header khong duoc tu xuong dong. Bootstrap 5 da BO white-space:nowrap khoi .btn
   (ban 4 con co), nen o dai 992-1199px nut "Nha tuyen dung" bi be thanh hai dong va keo
   ca thanh header cao len 76px thay vi 60px. */
.main-header .btn,
.main-header .btn-employer { white-space: nowrap; }

/* ─── RESPONSIVE ─────────────────────────────────────── */

/* Menu ngang bi day xuong HAI DONG o dai 992-1399px: tu 992px Bootstrap da bung menu ra
   (navbar-expand-lg) nhung .container luc do chi rong 960/1140px, khong du cho 6 muc menu
   cong nhom nut ben phai. Loi nay co san, khong lien quan hai cot quang cao — do duoc:
   navbar cao 77px o 1366px so voi 60px o 1440px.
   Thu gon chu, padding va khoang cach icon trong dung dai do de menu ve mot dong. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .main-header .navbar-nav .nav-link { font-size: 0.8rem; padding: 0.45rem 0.4rem !important; gap: 4px; }
  .main-header .navbar-nav .nav-link i { font-size: 0.72rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-header .navbar-nav .nav-link { padding: 0.45rem 0.3rem !important; }
}
@media (max-width: 991px) {
  .main-header .navbar-collapse {
    border-top: 1px solid var(--border-light);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
  }
  .main-header .navbar-nav .nav-link { padding: 0.6rem 0.5rem !important; }
  .main-footer { padding-top: 40px; margin-top: 0; }
}

@media (max-width: 767px) {
  .section-title { font-size: 1.25rem; }
  .stat-number { font-size: 1.5rem; }
  .search-box { padding: 1.5rem; }
}

/* ─── HERO BANNER LINK ───────────────────────────────── */
.hero-banner-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; }

/* ─── PAGE-SPECIFIC: Branch Map Modal ─────────────────── */
.btn-primary-soft { background: var(--brand-light); color: var(--brand); border: none; transition: var(--transition); }
.btn-primary-soft:hover { background: var(--brand-mid); color: var(--brand-dark); transform: translateY(-1px); }

/* ─── SMOOTH TRANSITIONS ─────────────────────────────── */
.fade-in { animation: fadeIn 0.35s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Vaesa-inspired micro-animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(161,29,33,0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(161,29,33,0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Apply fadeUp to main content sections */
main section,
main .card,
.job-card,
.category-card,
.stat-card {
  animation: fadeUp 0.4s ease both;
}

/* Staggered animation for lists */
.job-card:nth-child(1) { animation-delay: 0s; }
.job-card:nth-child(2) { animation-delay: 0.04s; }
.job-card:nth-child(3) { animation-delay: 0.08s; }
.job-card:nth-child(4) { animation-delay: 0.12s; }
.job-card:nth-child(5) { animation-delay: 0.16s; }
.job-card:nth-child(6) { animation-delay: 0.2s; }
.job-card:nth-child(7) { animation-delay: 0.24s; }
.job-card:nth-child(8) { animation-delay: 0.28s; }

.category-card:nth-child(1) { animation-delay: 0s; }
.category-card:nth-child(2) { animation-delay: 0.03s; }
.category-card:nth-child(3) { animation-delay: 0.06s; }
.category-card:nth-child(4) { animation-delay: 0.09s; }
.category-card:nth-child(5) { animation-delay: 0.12s; }
.category-card:nth-child(6) { animation-delay: 0.15s; }
.category-card:nth-child(7) { animation-delay: 0.18s; }
.category-card:nth-child(8) { animation-delay: 0.21s; }

/* Dropdown popIn animation (like Vaesa filter popups) */
.dropdown-menu.show {
  animation: popIn 0.18s ease forwards;
}

/* Smooth page transitions */
main { animation: fadeUp 0.3s ease; }

/* ─── UTILITY CLASSES ────────────────────────────────── */
.sz-48 { width: 48px !important; height: 48px !important; }
.sz-56 { width: 56px !important; height: 56px !important; }
.sz-64 { width: 64px !important; height: 64px !important; }
.sz-72 { width: 72px !important; height: 72px !important; }
.sz-80 { width: 80px !important; height: 80px !important; }
.fs-xs { font-size: 0.75rem; }
.fs-sm { font-size: 0.875rem; }
.fs-13 { font-size: 13px; }
.hover-primary:hover { color: var(--brand) !important; }
.min-w-0 { min-width: 0; }
.obj-cover { object-fit: cover; }

/* Text color utilities */
.text-brand { color: var(--brand) !important; }
.text-brand-muted { color: rgba(161,29,33,0.6) !important; }

/* ─── CATEGORY ICON BACKGROUNDS ─────────────────────────── */
.category-icon-bg-1 { --cat-bg: #fff0f0; --cat-c: #A11D21; }
.category-icon-bg-2 { --cat-bg: #eff6ff; --cat-c: #2563eb; }
.category-icon-bg-3 { --cat-bg: #f0fdf4; --cat-c: #16a34a; }
.category-icon-bg-4 { --cat-bg: #fefce8; --cat-c: #b45309; }
.category-icon-bg-5 { --cat-bg: #fdf4ff; --cat-c: #9333ea; }
.category-icon-bg-6 { --cat-bg: #fff7ed; --cat-c: #ea580c; }
.category-icon-bg-7 { --cat-bg: #f0f9ff; --cat-c: #0284c7; }
.category-icon-bg-8 { --cat-bg: #ecfdf5; --cat-c: #059669; }

/* ─── LIST GROUP MODERN ──────────────────────────────── */
.list-group-item {
  border-color: var(--border-light);
  font-size: 0.9rem;
  transition: var(--transition);
}
.list-group-item-action:hover { background: var(--bg-section); }
.list-group-item.fw-semibold { background: var(--brand-light); border-left: 3px solid var(--brand); }

/* ─── NOTIFICATION ITEMS ─────────────────────────────── */
.notif-item { border-radius: var(--radius-md); margin-bottom: 0.25rem; }
.notif-item:not(.is-read) { background: #fffdf0; border-left: 3px solid #f59e0b; }

/* ─── EMPTY STATE ────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state .empty-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--bg-section); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem; color: var(--text-light); }
.empty-state h5 { font-weight: 700; color: var(--text-main); margin-bottom: 0.5rem; }
.empty-state p { color: var(--text-muted); font-size: 0.9rem; }

/* ─── VAESA-INSPIRED POLISH ──────────────────────────── */

/* Custom text selection */
::selection { background: rgba(161,29,33,0.15); color: var(--text-main); }
::-moz-selection { background: rgba(161,29,33,0.15); color: var(--text-main); }

/* Better focus-visible for accessibility + beauty */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Smooth image loading */
img {
  transition: opacity 0.3s ease;
}
img[loading="lazy"] {
  opacity: 0;
}
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
  opacity: 1;
}

/* Enhanced nav-link active indicator */
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.show .nav-link {
  color: var(--brand) !important;
  background: var(--brand-light);
}

/* Smooth link underline animation (Vaesa-style) */
.main-footer a {
  position: relative;
}
.main-footer a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: #fff;
  transition: width 0.25s ease;
}
.main-footer a:hover::after { width: 100%; }

/* Loading skeleton shimmer (for future use) */
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, #e5e7eb 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* Smooth badge pulse for notifications */
.badge.bg-danger {
  animation: pulseGlow 2s infinite;
}

/* Interactive list items (Vaesa conv-item style) */
.list-group-item-action {
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}
.list-group-item-action:hover {
  border-left-color: var(--brand);
  padding-left: calc(1rem + 2px);
}

/* Smooth tooltip appearance */
.tooltip .tooltip-inner {
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  animation: popIn 0.15s ease;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE  –  Complete Overhaul
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile Menu Section headers inside hamburger ── */
.mobile-menu-section {
  padding: 0.3rem 1rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  opacity: 0.75;
  border-top: 1px solid var(--border-light);
  margin-top: 0.4rem;
}
.mobile-menu-section:first-child {
  border-top: none;
  margin-top: 0;
}

/* ── Mobile Nav Grouped Grid (app-style shortcut grid) ── */
.mobile-nav-groups {
  padding: 0.5rem 0.75rem 0.25rem;
  border-top: 1px solid var(--border-light);
  margin-top: 0.25rem;
}
.mobile-nav-group {
  margin-bottom: 0.6rem;
}
.mobile-nav-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
  padding: 0 0.25rem 0.35rem;
}
.mobile-nav-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.mobile-nav-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.25rem;
  border-radius: var(--radius-md);
  text-decoration: none !important;
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
  transition: background 0.15s ease;
  line-height: 1.2;
}
.mobile-nav-grid-item:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}
.mobile-nav-grid-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  font-size: 1rem;
}
.mobile-nav-vip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mobile-nav-vip-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,152,0,0.35);
}

/* ── Mobile Bottom Navigation Bar ── */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: #fff;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  z-index: 1050;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-decoration: none !important;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 500;
  gap: 2px;
  transition: color 0.15s ease;
  position: relative;
}
.mobile-bottom-nav-item i {
  font-size: 1.15rem;
  line-height: 1;
}
.mobile-bottom-nav-item.active,
.mobile-bottom-nav-item:hover {
  color: var(--brand);
}
.mobile-bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2.5px;
  background: var(--brand);
  border-radius: 0 0 4px 4px;
}
/* Center "Đăng tin" floating plus */
.mobile-bottom-nav-center .mobile-bottom-nav-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-size: 1.3rem;
  margin-top: -18px;
  box-shadow: 0 4px 14px rgba(161,29,33,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mobile-bottom-nav-center:hover .mobile-bottom-nav-plus {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(161,29,33,0.45);
}
.mobile-bottom-nav-center span:last-child {
  margin-top: 2px;
}
/* Notification badge on mobile nav */
.mobile-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  font-size: 0.55rem;
  padding: 1px 4px;
  min-width: 16px;
  line-height: 1.2;
}

/* ── Tablet & below (≤ 991px) ── */
@media (max-width: 991.98px) {
  /* Add bottom padding when bottom nav is present */
  body {
    padding-bottom: 66px;
  }

  /* Navbar collapse improvements */
  .navbar-collapse {
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-light);
  }
  .navbar-collapse .nav-link {
    padding: 0.55rem 1rem !important;
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
  }
  .navbar-collapse .nav-link:hover {
    background: var(--bg-soft);
  }

  /* Hamburger animation */
  .navbar-toggler {
    border: none;
    padding: 0.35rem 0.5rem;
    font-size: 1.2rem;
    color: var(--text-primary);
    box-shadow: none !important;
  }

  /* Fix brand logo size */
  .navbar-brand img {
    max-height: 32px !important;
  }

  /* User dropdown on mobile */
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    border: none;
    box-shadow: none;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    margin: 0.25rem 0.5rem;
  }

  /* Hero section mobile */
  .hp-hero {
    padding: 1.5rem 0 !important;
    min-height: auto !important;
  }
  .hp-search-card {
    border-radius: var(--radius-md) !important;
    padding: 1rem !important;
  }

  /* Cards grid to single column on tablet-ish */
  .card {
    margin-bottom: 0.75rem;
  }

  /* Table responsive overflow */
  .table-responsive {
    font-size: 0.82rem;
  }

  /* Lift FAB above mobile bottom nav (nav = 60px) */
  .fab-support-wrap { bottom: 68px !important; right: 12px !important; }
  .scroll-top-btn { bottom: 132px !important; right: 12px !important; }
  .fsw-panel { max-height: 70vh; overflow-y: auto; }
  #chatBotWidget .chatbot-toggle { bottom: 132px !important; }

  /* ══ Footer mobile — kiểu danh sách dọc (mỗi mục 1 dòng, ▸ đỏ, có kẻ ngăn) ══ */
  .main-footer {
    padding: 2.5rem 0 0 !important;
    text-align: left;
  }
  .main-footer .row.g-5 { --bs-gutter-y: 1.75rem; }
  .main-footer .col-lg-4 > .mb-3 img { height: 34px !important; }

  /* Liên hệ: mỗi dòng có icon + đường kẻ ngăn cách, căn trái */
  .main-footer .contact-item {
    justify-content: flex-start;
    text-align: left;
    padding: 11px 2px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* Social + badge căn trái */
  .footer-social { justify-content: flex-start; margin-top: 1.25rem; }

  /* Tiêu đề mục căn trái (accent trái mặc định) */
  .main-footer h5,
  .main-footer h6 { text-align: left; }

  /* Mỗi link = 1 hàng đầy đủ: mũi tên ▸ đỏ + đường kẻ ngăn cách */
  .main-footer .col-lg-8 ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 2px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .main-footer .col-lg-8 ul li a::before {
    content: '';
    flex-shrink: 0;
    width: 0; height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #A11D21;
    transition: border-left-color .15s;
  }
  .main-footer .col-lg-8 ul li a::after { display: none; }
  .main-footer .col-lg-8 ul li a:hover { gap: 10px; transform: none; color: #fff; }
  .main-footer .col-lg-8 ul li a:hover::before { content: ''; border-left-color: #f97316; }

  /* Nút "Hệ thống chi nhánh" căn trái */
  .main-footer .col-lg-8 ul .btn,
  .main-footer .col-lg-8 ul button { margin-top: 0.9rem; }

  /* Footer bottom gọn, căn giữa */
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1rem 0;
  }
  .footer-bottom-links { justify-content: center; }

  /* Modals full width */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  /* Admin topbar mobile improvements */
  .admin-topbar .navbar {
    padding: 0.5rem 0.75rem;
  }
  .admin-topbar .admin-search-form {
    display: none;
  }

  /* Portal sidebar hide */
  .portal-sidebar {
    display: none;
  }
}

/* ── Phone landscape & small tablets (≤ 767px) ── */
@media (max-width: 767.98px) {
  /* Section titles */
  .section-title h2,
  .section-title .h2 {
    font-size: 1.35rem;
  }

  /* Hero search fields stacking */
  .hp-search-card .row > div {
    margin-bottom: 0.5rem;
  }
  .hp-search-card .btn {
    width: 100%;
  }

  /* Hot keywords */
  .hp-hot-keywords {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
  }

  /* Job cards */
  .job-card .card-body {
    padding: 0.85rem;
  }
  .job-card h5, .job-card .h5 {
    font-size: 0.95rem;
  }

  /* Stat boxes */
  .hp-stat-box {
    padding: 1rem 0.75rem;
    font-size: 0.85rem;
  }
  .hp-stat-box h3 {
    font-size: 1.3rem;
  }

  /* Two-column grids to single */
  .row-cols-md-2 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Auth page panels */
  .auth-left-panel {
    display: none;
  }
  .auth-right-panel {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 1.5rem 1rem;
  }

  /* Company detail page */
  .company-cover {
    height: 140px !important;
  }
}

/* ── Phone portrait (≤ 575px) ── */
@media (max-width: 575.98px) {
  /* Tighter body spacing */
  .container, .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Even smaller section titles */
  .section-title h2,
  .section-title .h2 {
    font-size: 1.15rem;
  }

  /* Hero */
  .hp-hero h1, .hp-hero .h1 {
    font-size: 1.4rem !important;
    line-height: 1.3;
  }
  .hp-hero p.lead {
    font-size: 0.85rem !important;
  }

  /* Cards: tighter */
  .card-body {
    padding: 0.75rem;
  }

  /* Tables: hide less important columns */
  .table th:nth-child(n+4),
  .table td:nth-child(n+4) {
    display: none;
  }

  /* Buttons side by side */
  .btn-group-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .btn-group-mobile .btn {
    flex: 1;
    min-width: 0;
  }

  /* Pricing cards */
  .pricing-card {
    margin-bottom: 1rem;
  }

  /* Footer: các mục link xếp dọc 1 cột, căn giữa (không lưới 2 cột) */
  .main-footer .col-lg-8 > .row { --bs-gutter-y: 1.75rem; }
  .main-footer .col-lg-8 > .row > .col-sm-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* Tighten brand col spacing on phone */
  .main-footer .footer-desc { font-size: 0.82rem; margin-bottom: 1rem; }
  .main-footer .contact-item { font-size: 0.82rem; margin-bottom: 0; }
  .footer-social { margin-top: 1rem; }

  /* Chat window */
  .chat-window,
  .chatbot-window {
    width: calc(100vw - 20px) !important;
    right: 10px !important;
    bottom: 76px !important;
  }

  /* Feed post */
  .feed-post .card-body {
    padding: 0.75rem 0.65rem;
  }

  /* CV template previews */
  .cv-template-card img {
    border-radius: var(--radius-sm);
  }
}

/* ── Tiny phones (≤ 400px) ── */
@media (max-width: 400px) {
  /* Footer chữ nhỏ gọn trên màn hình rất nhỏ */
  .main-footer .col-lg-8 ul li a { font-size: 0.84rem; line-height: 1.4; }
  .main-footer h5, .main-footer h6 { font-size: 0.78rem; }
  /* Bottom nav */
  .mobile-bottom-nav {
    height: 54px;
  }
  .mobile-bottom-nav-item {
    font-size: 0.56rem;
  }
  .mobile-bottom-nav-item i {
    font-size: 1rem;
  }
  body {
    padding-bottom: 60px;
  }
  .mobile-bottom-nav-center .mobile-bottom-nav-plus {
    width: 38px; height: 38px;
    margin-top: -14px;
    font-size: 1.1rem;
  }
}

/* Hide bottom nav on desktop (safety) */
@media (min-width: 992px) {
  .mobile-bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
}
/* Beautiful Action Buttons for Admin and Company Views */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: transparent;
    color: #64748b;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: none;
    outline: none;
}
.btn-action:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}
.btn-action-primary { color: #3b82f6; }
.btn-action-primary:hover { background-color: #eff6ff; color: #1d4ed8; }
.btn-action-success { color: #10b981; }
.btn-action-success:hover { background-color: #ecfdf5; color: #047857; }
.btn-action-danger { color: #ef4444; }
.btn-action-danger:hover { background-color: #fef2f2; color: #b91c1c; }
.btn-action-warning { color: #f59e0b; }
.btn-action-warning:hover { background-color: #fffbeb; color: #b45309; }
.btn-action-info { color: #06b6d4; }
.btn-action-info:hover { background-color: #ecfeff; color: #0e7490; }
.btn-action-secondary { color: #475569; }
.btn-action-secondary:hover { background-color: #e2e8f0; color: #1e293b; }

/* Remove ugly button borders in the whole table */
.table td button {
    outline: none;
}

/* ─── Popup Overlay ─── */
.sa-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100000;display:flex;align-items:center;justify-content:center;animation:saFadeIn .3s ease;backdrop-filter:blur(4px);}
.sa-popup{background:#fff;border-radius:16px;max-width:620px;width:94%;max-height:90vh;display:flex;flex-direction:column;position:relative;box-shadow:0 12px 60px rgba(0,0,0,.3);animation:saZoomIn .35s cubic-bezier(.17,.67,.3,1.2);}
.sa-popup-close{position:absolute;top:10px;right:12px;background:rgba(0,0,0,.45);color:#fff;border:none;width:32px;height:32px;border-radius:50%;font-size:.9rem;display:flex;align-items:center;justify-content:center;z-index:5;cursor:pointer;transition:all .2s;}
.sa-popup-close:hover{background:rgba(0,0,0,.7);transform:scale(1.1);}
.sa-popup-img{width:100%;display:block;cursor:pointer;border-radius:16px 16px 0 0;flex-shrink:0;}
.sa-popup-scroll{overflow-y:auto;flex:1;min-height:0;}
.sa-popup-body{padding:28px 32px;}
.sa-popup-body h4{color:#0f172a;font-weight:700;margin-bottom:14px;font-size:1.15rem;border-bottom:2px solid #f1f5f9;padding-bottom:12px;}
.sa-popup-body .sa-popup-content{color:#374151;font-size:.92rem;line-height:1.8;}
.sa-popup-body .sa-popup-content h1,.sa-popup-body .sa-popup-content h2,.sa-popup-body .sa-popup-content h3{color:#0f172a;font-weight:700;margin:16px 0 8px;}
.sa-popup-body .sa-popup-content h3{font-size:1.05rem;}
.sa-popup-body .sa-popup-content p{margin-bottom:10px;}
.sa-popup-body .sa-popup-content b,.sa-popup-body .sa-popup-content strong{font-weight:700;color:#0f172a;}
.sa-popup-body .sa-popup-content ul,.sa-popup-body .sa-popup-content ol{margin:8px 0;padding-left:22px;}
.sa-popup-body .sa-popup-content li{margin-bottom:4px;}
.sa-popup-body .sa-popup-content a{color:#A11D21;text-decoration:underline;}
.sa-popup-cta{display:block;width:100%;text-align:center;padding:14px;background:linear-gradient(135deg,#A11D21,#c92428);color:#fff;font-weight:700;font-size:.95rem;border:none;border-radius:0 0 16px 16px;cursor:pointer;transition:all .2s;text-decoration:none;flex-shrink:0;}
.sa-popup-cta:hover{background:linear-gradient(135deg,#8b1619,#a51f22);color:#fff;}
@keyframes saFadeIn{from{opacity:0}to{opacity:1}}
@keyframes saZoomIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}

/* ─── Banner ─── */
.sa-banner{display:flex;align-items:center;gap:10px;padding:11px 20px;font-size:.84rem;position:relative;animation:saSlideDown .35s ease;}
.sa-banner+.sa-banner{border-top:1px solid rgba(0,0,0,.06);}
.sa-banner--Info{background:linear-gradient(135deg,#dbeafe,#eff6ff);color:#1e40af;}
.sa-banner--Warning{background:linear-gradient(135deg,#fef3c7,#fefce8);color:#92400e;}
.sa-banner--Maintenance{background:linear-gradient(135deg,#fee2e2,#fef2f2);color:#991b1b;}
.sa-banner--Celebration{background:linear-gradient(135deg,#d1fae5,#ecfdf5);color:#065f46;}
.sa-banner--Promotion{background:linear-gradient(135deg,#ede9fe,#f5f3ff);color:#5b21b6;}
.sa-icon{font-size:1rem;flex-shrink:0;}
.sa-text{flex:1;line-height:1.4;}
.sa-text strong{margin-right:5px;}
.sa-link{font-weight:600;text-decoration:underline;white-space:nowrap;flex-shrink:0;}
.sa-banner--Info .sa-link{color:#1d4ed8;}
.sa-banner--Warning .sa-link{color:#b45309;}
.sa-banner--Maintenance .sa-link{color:#dc2626;}
.sa-banner--Celebration .sa-link{color:#047857;}
.sa-banner--Promotion .sa-link{color:#7c3aed;}
.sa-close{background:none;border:none;font-size:.8rem;opacity:.4;cursor:pointer;padding:6px;flex-shrink:0;transition:opacity .2s;}
.sa-close:hover{opacity:1;}
@keyframes saSlideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

/* ─── Scroll-to-Top Button ─── */
.scroll-top-btn{position:fixed;bottom:88px;right:16px;z-index:9500;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#A11D21,#c92428);color:#fff;border:none;box-shadow:0 4px 16px rgba(161,29,33,.35);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:1rem;transition:opacity .3s ease,transform .3s ease;opacity:0;transform:translateY(20px);}
.scroll-top-btn.show{display:flex;opacity:1;transform:translateY(0);}
.scroll-top-btn:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(161,29,33,.45);background:linear-gradient(135deg,#8b1619,#a51f22);}

/* ─── Employer "preview as candidate" bar ─── */
.emp-preview-bar{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;position:sticky;top:64px;z-index:1020;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.emp-preview-bar .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:9px 20px;}
.emp-preview-bar .epb-text{font-size:.84rem;color:rgba(255,255,255,.88);display:flex;align-items:center;gap:8px;}
.emp-preview-bar .epb-text i{color:#fbbf24;}
.emp-preview-bar .epb-back{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#0f172a;font-weight:700;font-size:.82rem;border-radius:8px;padding:7px 16px;text-decoration:none;transition:all .15s;flex-shrink:0;}
.emp-preview-bar .epb-back:hover{background:#A11D21;color:#fff;}
@media(max-width:991px){.emp-preview-bar{top:58px;}.emp-preview-bar .epb-text{font-size:.78rem;}}