/* =========================================================================
   tuyendung.edu.vn — giao diện tông cam
   Không cần build (không Node/Tailwind). Mobile-first.
   ========================================================================= */
:root {
    --brand: #f25c05;
    --brand-600: #d94f00;
    --brand-700: #b34100;
    --brand-50: #fff5ee;
    --brand-100: #ffe6d5;
    --brand-200: #ffc9a6;
    --ink: #1c1917;
    --ink-2: #44403c;
    --muted: #78716c;
    --line: #e7e5e4;
    --line-2: #f0eeec;
    --bg: #f8f7f5;
    --white: #fff;
    --green: #15803d;
    --green-50: #ecfdf3;
    --red: #dc2626;
    --red-50: #fef2f2;
    --blue: #2563eb;
    --blue-50: #eff6ff;
    --yellow-50: #fffbeb;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 1px 3px rgba(28, 25, 23, .08);
    --shadow-lg: 0 10px 30px -10px rgba(28, 25, 23, .25);
    --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; font-weight: 700; color: var(--ink); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25rem; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 8px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }
.grid { display: grid; gap: 16px; }
.flex { display: flex; gap: 12px; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xs { font-size: .78rem; }
.bold { font-weight: 700; }
.text-brand { color: var(--brand); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.mt-0 { margin-top: 0 } .mt-1 { margin-top: 8px } .mt-2 { margin-top: 16px } .mt-3 { margin-top: 24px } .mt-4 { margin-top: 40px }
.mb-0 { margin-bottom: 0 } .mb-1 { margin-bottom: 8px } .mb-2 { margin-bottom: 16px } .mb-3 { margin-bottom: 24px }
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hidden { display: none !important; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: .95rem; cursor: pointer; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-600); color: #fff; }
.btn-outline { background: #fff; border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand-50); color: var(--brand-700); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { background: #fff; border-color: var(--brand-200); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-lg { padding: 14px 24px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.icon { width: 18px; height: 18px; flex: none; }
.icon-sm { width: 15px; height: 15px; flex: none; }

/* ---------- Header ---------- */
.topbar { background: var(--ink); color: #d6d3d1; font-size: .8rem; display: none; }
@media (min-width: 768px) { .topbar { display: block; } }
.topbar .container { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
.topbar a:hover { color: #fff; }
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header .container { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); }
.logo-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 1.1rem; letter-spacing: -.5px; }
.logo-text { line-height: 1.1; }
.logo-text small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }
.main-nav { display: none; gap: 4px; flex: 1; }
.main-nav a { padding: 8px 12px; border-radius: 8px; font-weight: 600; color: var(--ink-2); font-size: .93rem; }
.main-nav a:hover, .main-nav a.active { background: var(--brand-50); color: var(--brand); }
.header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.header-actions .btn { padding: 8px 14px; }
@media (max-width: 480px) { .site-header .container { gap: 8px; } .header-actions .btn-ghost { display: none; } .logo-mark { width: 34px; height: 34px; } .logo-text { font-size: .95rem; } .logo-text small { display: none; } .header-actions { gap: 6px; } .header-actions .btn { padding: 7px 10px; } .user-menu summary .truncate { display: none; } }
.menu-toggle { display: inline-flex; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px; cursor: pointer; }
.mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-2); font-weight: 600; }
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); }
.user-menu summary::-webkit-details-marker { display: none; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; overflow: hidden; }
.dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 220px; padding: 6px; z-index: 60; }
.dropdown a, .dropdown button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer; font-size: .92rem; }
.dropdown a:hover, .dropdown button:hover { background: var(--brand-50); color: var(--brand); }
@media (min-width: 992px) {
    .main-nav { display: flex; }
    .menu-toggle { display: none; }
}

/* ---------- Hero / search ---------- */
.hero { background: radial-gradient(1200px 400px at 85% -10%, #ffb37a55, transparent 60%), linear-gradient(135deg, #f25c05 0%, #ff7a1a 55%, #ff9a3c 100%); color: #fff; padding: 36px 0 48px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; border: 50px solid rgba(255, 255, 255, .08); }
.hero h1 { color: #fff; font-size: 1.65rem; margin-bottom: 6px; }
.hero p.lead { color: #fff3ea; margin-bottom: 20px; }
.hero-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; color: #fff7f0; margin-top: 14px; }
.hero-stats b { color: #fff; font-size: 1.05rem; }
.search-box { background: #fff; border-radius: 14px; padding: 8px; display: grid; gap: 8px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35); position: relative; z-index: 1; }
.search-box .field { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: var(--bg); color: var(--ink); }
.search-box .field svg { color: var(--muted); }
.search-box input, .search-box select { border: 0; background: transparent; padding: 12px 0; width: 100%; outline: none; color: var(--ink); }
.quick-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.quick-tags a { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff; padding: 5px 12px; border-radius: 999px; font-size: .85rem; }
.quick-tags a:hover { background: #fff; color: var(--brand); }
@media (min-width: 768px) {
    .hero { padding: 56px 0 64px; }
    .hero h1 { font-size: 2.2rem; }
    .search-box { grid-template-columns: 1.6fr 1fr 1fr auto; }
}

/* ---------- Sections ---------- */
.section { padding: 28px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-head h2 { margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.section-head h2::before { content: ""; width: 5px; height: 22px; border-radius: 3px; background: var(--brand); }
.section-head a { color: var(--brand); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.card-body { padding: 18px; }
.card-title { font-size: 1.05rem; margin-bottom: 12px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }

/* ---------- Job card ---------- */
.job-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .job-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.job-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; gap: 12px; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; }
.job-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.job-card.is-hot { border-color: #ffd0b3; background: linear-gradient(180deg, #fff 0%, #fffaf6 100%); }
.job-logo { width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--line); background: #fff; flex: none; display: grid; place-items: center; overflow: hidden; }
.job-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.job-info { min-width: 0; flex: 1; }
.job-title { font-weight: 700; font-size: .98rem; line-height: 1.35; margin: 0 0 2px; }
.job-title a:hover { color: var(--brand); }
.is-hot .job-title a { color: var(--red); }
.job-company { color: var(--muted); font-size: .86rem; margin-bottom: 8px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--ink-2); font-size: .8rem; white-space: nowrap; }
.chip-salary { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.chip-green { background: var(--green-50); color: var(--green); }
.badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; vertical-align: 2px; margin-right: 4px; }
.badge-hot { background: var(--red); color: #fff; }
.badge-urgent { background: var(--brand); color: #fff; }
.badge-new { background: var(--green); color: #fff; }
.badge-vip { background: linear-gradient(90deg, #f59e0b, #f25c05); color: #fff; }
.badge-gray { background: var(--line); color: var(--ink-2); }
.badge-blue { background: var(--blue-50); color: var(--blue); }
.badge-green { background: var(--green-50); color: var(--green); }
.badge-red { background: var(--red-50); color: var(--red); }
.badge-orange { background: var(--brand-50); color: var(--brand-700); }
.save-btn { position: absolute; top: 10px; right: 10px; background: #fff; border: 1px solid var(--line); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.save-btn:hover, .save-btn.saved { color: var(--brand); border-color: var(--brand-200); }
.save-btn.saved svg { fill: currentColor; }

/* ---------- Category / location tiles ---------- */
.tile-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; align-items: center; gap: 12px; }
.tile:hover { border-color: var(--brand); color: inherit; }
.tile-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; flex: none; font-weight: 800; }
.tile b { display: block; font-size: .93rem; line-height: 1.3; }
.tile span { font-size: .8rem; color: var(--muted); }
.link-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.link-cloud a { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .88rem; }
.link-cloud a:hover { border-color: var(--brand); }
.link-cloud a small { color: var(--muted); }

/* ---------- Company ---------- */
.company-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .company-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .company-grid.cols-6 { grid-template-columns: repeat(6, 1fr); } }
.company-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.company-card:hover { border-color: var(--brand); }
.company-card .job-logo { width: 72px; height: 72px; }
.company-card b { font-size: .88rem; line-height: 1.35; }
.company-cover { height: 180px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg, var(--brand), #ff9a3c) center/cover; }
.company-head { display: flex; gap: 16px; align-items: flex-end; margin-top: -48px; padding: 0 20px 20px; flex-wrap: wrap; }
.company-head .job-logo { width: 104px; height: 104px; border-width: 3px; border-color: #fff; box-shadow: var(--shadow); }

/* ---------- CTA banners ---------- */
.cta-grid { display: grid; gap: 14px; }
@media (min-width: 768px) { .cta-grid { grid-template-columns: 1fr 1fr; } }
.cta { border-radius: var(--radius); padding: 22px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.cta h3 { margin: 0 0 4px; }
.cta p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.cta-seeker { background: var(--brand-50); border: 1px solid var(--brand-100); }
.cta-employer { background: #1c1917; color: #fff; }
.cta-employer h3 { color: #fff; }
.cta-employer p { color: #d6d3d1; }

/* ---------- Listing layout ---------- */
.layout { display: grid; gap: 20px; padding: 20px 0 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .layout { grid-template-columns: 280px minmax(0, 1fr); } .layout.right { grid-template-columns: minmax(0, 1fr) 340px; } }
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; height: fit-content; }
@media (min-width: 992px) { .filters { position: sticky; top: 80px; } }
.filters h3 { font-size: .95rem; margin: 14px 0 8px; }
.filters h3:first-child { margin-top: 0; }
.list-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.list-head h1 { font-size: 1.3rem; margin: 0; }
.job-list { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--muted); padding: 14px 0 0; margin: 0; list-style: none; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #a8a29e; }
.breadcrumb a:hover { color: var(--brand); }
.seo-content { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-top: 20px; }
.prose { overflow-wrap: anywhere; }
.prose h2, .prose h3 { margin-top: 1.2em; }
.prose ul, .prose ol { margin: 0 0 1em; }
.prose li { margin-bottom: .25em; }
.prose img { border-radius: 8px; margin: 1em 0; }
.prose a { color: var(--brand); text-decoration: underline; }
.prose table { border-collapse: collapse; width: 100%; margin-bottom: 1em; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 6px 10px; }

/* ---------- Job detail ---------- */
.job-hero { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.job-hero h1 { font-size: 1.35rem; margin-bottom: 6px; }
.job-facts { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: 16px 0; }
@media (min-width: 768px) { .job-facts { grid-template-columns: repeat(4, 1fr); } }
.fact { display: flex; gap: 10px; align-items: center; }
.fact .tile-icon { width: 38px; height: 38px; }
.fact small { display: block; color: var(--muted); font-size: .76rem; }
.fact b { font-size: .92rem; }
.job-section { margin-top: 20px; }
.job-section h2 { font-size: 1.08rem; padding-left: 12px; border-left: 4px solid var(--brand); }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.info-list li span:first-child { color: var(--muted); }
.info-list li span:last-child { text-align: right; font-weight: 600; }
.sticky-apply { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 10px; z-index: 40; box-shadow: 0 -6px 20px -10px rgba(0,0,0,.2); }
@media (min-width: 992px) { .sticky-apply { display: none; } }
body.has-sticky { padding-bottom: 70px; }
@media (min-width: 992px) { body.has-sticky { padding-bottom: 0; } }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 14px; }
@media (min-width: 768px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .span-2 { grid-column: span 2; } .span-3 { grid-column: 1 / -1; } }
.form-group label, .label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--ink-2); }
.req { color: var(--red); }
.input, .select, .textarea { width: 100%; padding: 10px 12px; border: 1px solid #d6d3d1; border-radius: var(--radius-sm); background: #fff; transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); outline: none; }
.textarea { min-height: 120px; resize: vertical; }
.select[multiple] { min-height: 120px; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--red); }
.error { color: var(--red); font-size: .82rem; margin-top: 4px; }
.hint { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--brand); width: 16px; height: 16px; }
.check-list { display: grid; gap: 6px; max-height: 240px; overflow: auto; padding-right: 4px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; background: #fff; }
legend { font-weight: 700; padding: 0 6px; }
.repeat-row { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; position: relative; background: var(--bg); }
.repeat-row .remove-row { position: absolute; top: 8px; right: 8px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

/* Rich text editor (không phụ thuộc thư viện) */
.rte { border: 1px solid #d6d3d1; border-radius: var(--radius-sm); background: #fff; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--bg); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.rte-toolbar button { border: 0; background: none; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: .85rem; }
.rte-toolbar button:hover { background: #fff; color: var(--brand); }
.rte-area { min-height: 180px; padding: 12px; outline: none; max-height: 520px; overflow: auto; }
.rte-area:focus { box-shadow: inset 0 0 0 2px var(--brand-100); }

/* ---------- Alerts ---------- */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; border: 1px solid; font-size: .92rem; }
.alert-success { background: var(--green-50); border-color: #bbf7d0; color: #14532d; }
.alert-error { background: var(--red-50); border-color: #fecaca; color: #7f1d1d; }
.alert-info { background: var(--blue-50); border-color: #bfdbfe; color: #1e3a8a; }
.alert-warning { background: var(--yellow-50); border-color: #fde68a; color: #78350f; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th { text-align: left; background: var(--bg); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table tr:hover td { background: #fffcfa; }
.table .actions { white-space: nowrap; text-align: right; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 24px 0 8px; list-style: none; padding: 0; }
.pagination a, .pagination span { min-width: 38px; height: 38px; padding: 0 10px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: .9rem; }
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .active span { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .disabled span { color: #a8a29e; }

/* ---------- Dashboard (UV / NTD / Admin) ---------- */
.dash { display: grid; gap: 20px; padding: 20px 0 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .dash { grid-template-columns: 250px minmax(0, 1fr); } }
.side-nav { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; height: fit-content; }
@media (min-width: 992px) { .side-nav { position: sticky; top: 80px; } }
.side-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-weight: 500; font-size: .92rem; color: var(--ink-2); }
.side-nav a:hover { background: var(--bg); }
.side-nav a.active { background: var(--brand-50); color: var(--brand); font-weight: 700; }
.side-nav .group { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #a8a29e; padding: 14px 12px 4px; }
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat small { color: var(--muted); display: block; font-size: .82rem; }
.stat b { font-size: 1.6rem; color: var(--ink); }
.stat.accent { background: var(--brand); border-color: var(--brand); color: #fff; }
.stat.accent small, .stat.accent b { color: #fff; }
.page-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.page-head h1 { font-size: 1.35rem; margin: 0; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.filter-bar .input, .filter-bar .select { width: auto; flex: 1 1 160px; padding: 8px 10px; }
.bar { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: 99px; }

/* Admin shell */
.admin-body { background: #f4f3f1; }
.admin-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .admin-shell { grid-template-columns: 230px minmax(0, 1fr); } }
.admin-side { background: #1c1917; color: #d6d3d1; padding: 14px 10px; }
@media (min-width: 1100px) { .admin-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.admin-side .logo { color: #fff; padding: 4px 8px 14px; }
.admin-side .logo-text small { color: #a8a29e; }
.admin-side a { display: block; padding: 8px 12px; border-radius: 8px; font-size: .9rem; color: #d6d3d1; }
.admin-side a:hover { background: #292524; color: #fff; }
.admin-side a.active { background: var(--brand); color: #fff; }
.admin-side .group { font-size: .7rem; text-transform: uppercase; letter-spacing: .7px; color: #78716c; padding: 14px 12px 4px; font-weight: 800; }
.admin-main { padding: 18px; min-width: 0; }
.admin-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }

/* ---------- Footer ---------- */
.site-footer { background: #1c1917; color: #a8a29e; margin-top: 32px; font-size: .9rem; }
.site-footer .container { padding-top: 36px; padding-bottom: 20px; }
.footer-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.3fr repeat(4, 1fr); } }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a:hover { color: #fff; }
.site-footer .logo { color: #fff; margin-bottom: 12px; }
.footer-bottom { border-top: 1px solid #292524; margin-top: 24px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; font-size: .82rem; }
.social { display: flex; gap: 8px; margin-top: 12px; }
.social a { width: 36px; height: 36px; border-radius: 50%; background: #292524; display: grid; place-items: center; color: #fff; }
.social a:hover { background: var(--brand); }

/* ---------- Auth ---------- */
.auth-wrap { display: grid; min-height: calc(100vh - 64px); }
@media (min-width: 992px) { .auth-wrap { grid-template-columns: 1fr 1fr; } }
.auth-aside { display: none; background: linear-gradient(150deg, var(--brand) 0%, #ff8a2b 100%); color: #fff; padding: 56px; }
.auth-aside h2 { color: #fff; font-size: 1.8rem; }
.auth-aside li { margin-bottom: 10px; }
@media (min-width: 992px) { .auth-aside { display: flex; flex-direction: column; justify-content: center; } }
.auth-card { width: 100%; max-width: 460px; margin: 32px auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; align-self: center; }
.auth-card h1 { font-size: 1.4rem; }
.tabs { display: flex; gap: 4px; background: var(--bg); padding: 4px; border-radius: 10px; margin-bottom: 18px; }
.tabs a { flex: 1; text-align: center; padding: 8px; border-radius: 8px; font-weight: 600; font-size: .9rem; color: var(--muted); }
.tabs a.active { background: #fff; color: var(--brand); box-shadow: var(--shadow); }

/* ---------- Pricing ---------- */
.price-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.price-card.highlight { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); position: relative; }
.price-card.highlight::before { content: "Phổ biến"; position: absolute; top: -12px; left: 24px; background: var(--brand); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.price { font-size: 1.8rem; font-weight: 800; color: var(--brand); }
.price-card ul { list-style: none; padding: 0; margin: 16px 0; flex: 1; }
.price-card li { padding: 6px 0 6px 26px; position: relative; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

/* ---------- Misc ---------- */
.empty { text-align: center; padding: 40px 20px; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid var(--line); z-index: 45; }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: .72rem; color: var(--ink-2); }
.mobile-bar a.active, .mobile-bar a:hover { color: var(--brand); }
body.has-mobile-bar { padding-bottom: 64px; }
@media (min-width: 992px) { .mobile-bar { display: none; } body.has-mobile-bar { padding-bottom: 0; } }
body.has-sticky .mobile-bar { display: none; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.post-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: var(--bg); }
.post-card .card-body { flex: 1; }
.post-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .post-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.cv-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cv-head .avatar { width: 84px; height: 84px; font-size: 1.6rem; }
.timeline { border-left: 2px solid var(--brand-100); padding-left: 16px; margin-left: 4px; }
.timeline > div { position: relative; margin-bottom: 14px; }
.timeline > div::before { content: ""; position: absolute; left: -23px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; }
.masked { filter: blur(0); letter-spacing: 1px; color: var(--muted); }
.modal { position: fixed; inset: 0; background: rgba(28, 25, 23, .55); display: none; place-items: center; z-index: 80; padding: 16px; }
.modal.open { display: grid; }
.modal-box { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; padding: 22px; max-height: 90vh; overflow: auto; }
@media print { .site-header, .site-footer, .mobile-bar, .side-nav, .no-print { display: none !important; } body { background: #fff; } }

.table td:nth-child(4) { min-width: 140px; }
html, body { overflow-x: hidden; }

/* =========================================================================
   KHU VỰC SAU ĐĂNG NHẬP (Admin / Nhà tuyển dụng / Ứng viên)
   Tông xanh dương giống trang quản lý vieclamtphcm.vn (Atlantis) cho dễ nhìn
   ========================================================================= */
body.panel-body {
    --brand: #1572e8;
    --brand-600: #1269db;
    --brand-700: #06418e;
    --brand-50: #eef5fe;
    --brand-100: #d6e6fc;
    --brand-200: #a9c9f7;
    --ink: #2a2f5b;
    --ink-2: #3d4166;
    --muted: #8d9498;
    --line: #ebedf2;
    --line-2: #f1f2f6;
    --bg: #f9fbfd;
    --purple: #6861ce;
    --font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --radius: 5px;
    --radius-sm: 4px;
    --shadow: 2px 6px 15px 0 rgba(69, 65, 78, .1);
    background: var(--bg);
    font-size: 14px;
    color: var(--ink);
}
.panel-body .pn-top { position: sticky; top: 0; z-index: 60; display: flex; height: 62px; box-shadow: 0 0 5px rgba(18, 23, 39, .5); }
.panel-body .pn-logo { background: #1572e8; width: 250px; flex: none; display: flex; align-items: center; padding: 0 20px; }
.panel-body .pn-logo .logo { color: #fff; }
.panel-body .pn-logo .logo-mark { background: #fff; color: #1572e8; }
.panel-body .pn-logo .logo-text { font-size: .95rem; }
.panel-body .pn-nav { background: #1269db; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 20px; min-width: 0; }
.panel-body .pn-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.panel-body .pn-search { display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .14); border-radius: 5px; padding: 0 12px; color: #fff; width: 100%; max-width: 360px; }
.panel-body .pn-search input { background: transparent; border: 0; outline: none; color: #fff; padding: 9px 0; width: 100%; }
.panel-body .pn-search input::placeholder { color: rgba(255, 255, 255, .75); }
.panel-body .pn-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.panel-body .pn-link { color: #fff; font-size: .85rem; white-space: nowrap; }
.panel-body .pn-link:hover { color: #fff; text-decoration: underline; }
.panel-body .pn-user summary { border-color: rgba(255, 255, 255, .4); padding: 3px; }
.panel-body .pn-user .avatar { background: #fff; color: #1572e8; width: 34px; height: 34px; }
.panel-body .pn-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 62px); }
.panel-body .pn-side { background: #fff; box-shadow: 4px 4px 10px rgba(69, 65, 78, .06); padding: 16px 14px 30px; position: sticky; top: 62px; height: calc(100vh - 62px); overflow-y: auto; }
.panel-body .pn-profile { display: flex; gap: 10px; align-items: center; padding: 4px 6px 16px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.panel-body .pn-profile .avatar { width: 44px; height: 44px; background: var(--brand-50); color: var(--brand); font-size: 1rem; }
.panel-body .pn-profile b { font-weight: 500; color: var(--ink); }
.panel-body .pn-profile .xs { color: var(--muted); }
.panel-body .pn-role { display: inline-block; margin-top: 3px; font-size: .7rem; background: var(--brand-50); color: var(--brand); padding: 1px 8px; border-radius: 10px; }
.panel-body .pn-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: #b9babf; font-weight: 600; padding: 14px 10px 6px; }
.panel-body .pn-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 5px; color: #575962; font-size: .9rem; margin-bottom: 1px; }
.panel-body .pn-item svg { color: #8d9498; }
.panel-body .pn-item:hover { background: rgba(199, 199, 199, .2); color: #575962; }
.panel-body .pn-item.active { background: #1572e8; color: #fff; box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .1), 4px 4px 15px -5px rgba(21, 114, 232, .4); }
.panel-body .pn-item.active svg { color: #fff; }
.panel-body .pn-main { min-width: 0; display: flex; flex-direction: column; }
.panel-body .pn-content { padding: 24px; flex: 1; }
.panel-body .pn-footer { background: #fff; border-top: 1px solid var(--line); padding: 14px 24px; display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); }
/* Tiêu đề trang dạng "Danh sách việc làm | 🏠 > ..." */
.panel-body .page-head { background: linear-gradient(-45deg, #06418e, #1572e8); margin: -24px -24px 24px; padding: 26px 24px 30px; }
.panel-body .page-head h1 { color: #fff; font-weight: 500; font-size: 1.45rem; }
.panel-body .page-head h1 .muted, .panel-body .page-head .muted { color: rgba(255, 255, 255, .75) !important; }
.panel-body .page-head .btn-primary { background: var(--purple); }
.panel-body .page-head .btn-primary:hover { background: #5c55bf; }
.panel-body .page-head .btn-outline, .panel-body .page-head .btn-ghost { background: transparent; border-color: #fff; color: #fff; }
.panel-body .page-head .btn-outline:hover, .panel-body .page-head .btn-ghost:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.panel-body .page-head .chip { background: rgba(255, 255, 255, .2); color: #fff; }
.panel-body .page-head a:not(.btn) { color: #fff; }
/* Thẻ & bảng */
.panel-body .panel, .panel-body .stat, .panel-body .table-wrap, .panel-body .filter-bar, .panel-body fieldset, .panel-body .job-card, .panel-body .empty { border: 0; border-radius: 5px; box-shadow: var(--shadow); background: #fff; }
.panel-body .card-title { font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.panel-body .stat b { font-weight: 500; }
.panel-body .stat.accent { background: linear-gradient(-45deg, #06418e, #1572e8); }
.panel-body .table th { background: #fff; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); padding: 14px 12px; }
.panel-body .table td { border-bottom: 0; padding: 12px; }
.panel-body .table tr:nth-child(even) td { background: #f2f2f2; }
.panel-body .table tr:hover td { background: #eef5fe; }
.panel-body .btn { border-radius: 5px; font-weight: 500; }
.panel-body .btn-outline { border-radius: 100px; }
.panel-body .btn-primary { background: #1572e8; }
.panel-body .btn-primary:hover { background: #1269db; }
.panel-body .input, .panel-body .select, .panel-body .textarea { border-color: #ebedf2; border-width: 2px; padding: 8px 10px; }
.panel-body .input:focus, .panel-body .select:focus, .panel-body .textarea:focus { border-color: #3e93ff; box-shadow: none; }
.panel-body legend { font-weight: 500; color: var(--brand); }
.panel-body .section-head h2::before { background: var(--brand); }
.panel-body .badge-orange { background: #fff4e5; color: #c25e00; }
.panel-body .job-card.is-hot { background: #fff; }
.panel-body .tabs a.active { color: var(--brand); }
/* Di động: menu trái trượt ra */
@media (max-width: 991px) {
    .panel-body .pn-logo { width: auto; padding: 0 12px; }
    .panel-body .pn-logo .logo-text { display: none; }
    .panel-body .pn-toggle { display: inline-flex; }
    .panel-body .pn-search { display: none; }
    .panel-body .pn-shell { grid-template-columns: minmax(0, 1fr); }
    .panel-body .pn-side { position: fixed; left: 0; top: 62px; width: 270px; z-index: 55; transform: translateX(-105%); transition: transform .2s; }
    .panel-body .pn-side.open { transform: none; }
    .panel-body .pn-content { padding: 16px; }
    .panel-body .page-head { margin: -16px -16px 16px; padding: 20px 16px; }
}
@media (max-width: 767px) { .panel-body .table { min-width: 680px; } }
.btn-google { gap: 10px; border-color: #d6d3d1; background: #fff; color: var(--ink); }
.btn-google:hover { border-color: #a8a29e; background: #fafafa; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; margin: 14px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Hero kiểu TopCV: thanh tìm kiếm + ngành nghề / gợi ý ---------- */
.hero-tc { padding: 32px 0 36px; }
.hero-tc h1 { text-align: center; margin-bottom: 18px; }
.tc-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35); max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }
.tc-search label { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 0 14px; }
.tc-search input, .tc-search select { border: 0; outline: none; background: transparent; color: var(--ink); padding: 12px 0; width: 100%; font-size: .97rem; }
.tc-q { flex: 1 1 320px; }
.tc-loc { flex: 0 1 260px; border-left: 1px solid var(--line); }
.tc-search .btn { border-radius: 999px; padding: 12px 24px; }
.tc-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 22px auto 0; max-width: 1140px; position: relative; z-index: 1; }
@media (min-width: 900px) { .tc-panel { grid-template-columns: 320px minmax(0, 1fr); } }
.tc-cats, .tc-detail { background: #fff; border-radius: 14px; color: var(--ink); }
.tc-cats { display: flex; flex-direction: column; padding: 10px 8px 0; }
.tc-cat-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.tc-cat-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 8px; font-weight: 600; font-size: .93rem; color: var(--ink-2); }
.tc-cat-list a:hover, .tc-cat-list a.active { color: var(--brand); background: var(--brand-50); }
.tc-arrow { color: #a8a29e; font-size: 1.2rem; line-height: 1; }
.tc-cat-list a.active .tc-arrow { color: var(--brand); }
.tc-pager { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 10px 12px; font-size: .85rem; color: var(--muted); }
.tc-nav { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--muted); }
.tc-nav:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
.tc-nav[disabled] { opacity: .4; cursor: default; }
.tc-detail { padding: 6px 20px; max-height: 340px; overflow-y: auto; display: none; }
@media (min-width: 900px) { .tc-detail { display: block; } }
.tc-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.tc-row:last-child { border-bottom: 0; }
.tc-label { font-weight: 700; font-size: .9rem; padding-top: 4px; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); }
.tc-chip:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.tc-chip.hot { background: #fff1f0; border-color: #ffd1cc; color: #b42318; }
.tc-chip.hot svg { color: #f04438; }
.hero-tc .hero-stats { justify-content: center; margin-top: 18px; }
@media (max-width: 640px) {
    .tc-search { border-radius: 14px; }
    .tc-loc { border-left: 0; border-top: 1px solid var(--line); flex: 1 1 100%; }
    .tc-search .btn { width: 100%; border-radius: 10px; }
}

/* Nền hero nhẹ nhàng (cam pastel) thay cho cam đậm */
.hero.hero-tc { background: radial-gradient(900px 320px at 90% -20%, #ffd9bf80, transparent 60%), linear-gradient(180deg, #fff6ef 0%, #ffefe3 100%); color: var(--ink); border-bottom: 1px solid #ffe2cf; }
.hero.hero-tc::after { border-color: rgba(242, 92, 5, .06); }
.hero.hero-tc h1 { color: var(--ink); }
.hero.hero-tc h1 span { color: var(--brand); }
.hero-tc .tc-search { box-shadow: 0 10px 28px -14px rgba(242, 92, 5, .45); border: 1px solid #ffd9bf; }
.hero-tc .tc-cats, .hero-tc .tc-detail { border: 1px solid #ffe2cf; box-shadow: 0 6px 20px -12px rgba(28, 25, 23, .18); }
.hero-tc .hero-stats { color: var(--ink-2); }
.hero-tc .hero-stats b { color: var(--brand); }

/* Tool reup */
.reup-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .reup-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.reup-steps { list-style: none; padding: 0; margin: 0 0 16px; counter-reset: s; }
.reup-steps li { counter-increment: s; position: relative; padding: 4px 0 10px 38px; }
.reup-steps li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
/* Thông báo (alert) hiển thị bên dưới dải tiêu đề trang */
.panel-body .pn-content { display: flex; flex-direction: column; }
.panel-body .pn-content > .page-head { order: -1; }
.panel-body .pn-content > * { min-width: 0; }
.reup-jobs { margin-top: 6px; min-width: 260px; }
.reup-jobs summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: .85rem; }
.reup-jobs ol { margin: 8px 0 0; padding-left: 22px; max-height: 260px; overflow-y: auto; font-size: .86rem; }
.reup-jobs li { margin-bottom: 3px; }
.reup-jobs a { color: var(--brand); }
.reup-jobs a:hover { text-decoration: underline; }
.reup-runs td:last-child { min-width: 200px; }

/* ---------- Slider banner trang chủ ---------- */
.hslider { position: relative; margin: 20px 0 4px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #fff1e8, #ffe3d1); box-shadow: 0 10px 30px -12px rgba(242, 92, 5, .35), 0 2px 6px rgba(15, 23, 42, .06); isolation: isolate; }
.hslider-track { display: flex; transition: transform .7s cubic-bezier(.22, .8, .24, 1); will-change: transform; touch-action: pan-y; }
.hslider-slide { flex: 0 0 100%; aspect-ratio: 1200 / 320; position: relative; }
.hslider-slide a, .hslider-slide img { display: block; width: 100%; height: 100%; }
.hslider-slide img { object-fit: cover; user-select: none; -webkit-user-drag: none; }
.hslider-slide::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(0, 0, 0, .22), transparent); pointer-events: none; }
.hslider-nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #1f2937; background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); cursor: pointer; opacity: 0; transition: opacity .25s, transform .25s, background .2s, color .2s; }
.hslider-nav.prev { left: 14px; transform: translateX(-8px); }
.hslider-nav.next { right: 14px; transform: translateX(8px); }
.hslider:hover .hslider-nav, .hslider-nav:focus-visible { opacity: 1; transform: none; }
.hslider-nav:hover { background: var(--brand, #F25C05); color: #fff; }
.hslider-dots { position: absolute; z-index: 2; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .28); backdrop-filter: blur(4px); }
.hslider-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); cursor: pointer; overflow: hidden; transition: width .35s, background .2s; }
.hslider-dots button span { display: block; height: 100%; width: 0; background: #fff; border-radius: inherit; }
.hslider-dots button[aria-selected="true"] { width: 30px; background: rgba(255, 255, 255, .4); }
.hslider-dots button[aria-selected="true"] span { animation: hslider-progress var(--hs-interval, 5s) linear forwards; }
.hslider.paused .hslider-dots button[aria-selected="true"] span { animation-play-state: paused; }
.hslider.static .hslider-dots button[aria-selected="true"] span { animation: none; width: 100%; }
@keyframes hslider-progress { from { width: 0 } to { width: 100% } }
@media (max-width: 767px) {
  .hslider { margin-top: 14px; border-radius: 12px; }
  .hslider-slide { aspect-ratio: 1200 / 400; }
  .hslider-nav { display: none; }
  .hslider-dots { bottom: 8px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) { .hslider-track { transition: none; } }
.panel h2.h3 { font-size: 1.05rem; font-weight: 700; }

/* ---------- Khối việc làm dạng slide ---------- */
.section-tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.jslider-ctrl { display: inline-flex; align-items: center; gap: 6px; }
.jslider-count { font-size: .85rem; color: var(--muted, #6b7280); min-width: 34px; text-align: center; }
.jslider-count b { color: var(--brand, #F25C05); }
.jslider-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border, #e5e7eb); background: #fff; color: #374151; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.jslider-btn:hover:not(:disabled) { background: var(--brand, #F25C05); border-color: var(--brand, #F25C05); color: #fff; }
.jslider-btn:disabled { opacity: .4; cursor: default; }
.jslider { overflow: hidden; }
.jslider-track { display: flex; align-items: flex-start; transition: transform .55s cubic-bezier(.22, .8, .24, 1); touch-action: pan-y; }
.jslider-page { flex: 0 0 100%; min-width: 0; padding: 2px; }
.jslider-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.jslider-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d1d5db; cursor: pointer; transition: width .3s, background .2s; }
.jslider-dots button[aria-selected="true"] { width: 24px; background: var(--brand, #F25C05); }
@media (max-width: 767px) { .section-tools > a { display: none; } .section-head { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .jslider-track { transition: none; } }

/* ---------- Thanh cuộn mảnh, bo tròn, tông cam nhạt ---------- */
.tc-detail { scrollbar-width: thin; scrollbar-color: #f6b48c transparent; scrollbar-gutter: stable; }
.tc-detail::-webkit-scrollbar { width: 6px; }
.tc-detail::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.tc-detail::-webkit-scrollbar-thumb { background: #f9cbb0; border-radius: 999px; }
.tc-detail:hover::-webkit-scrollbar-thumb { background: #f6a06c; }
.tc-detail::-webkit-scrollbar-thumb:active { background: var(--brand, #F25C05); }
.tc-detail::-webkit-scrollbar-button { display: none; height: 0; }

/* ---------- Ô chọn tuỳ biến (thay <select data-nice>) ---------- */
.tc-search { z-index: 3; }
.nice-select { position: relative; flex: 1; min-width: 0; }
.nice-select > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.nice-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .97rem; padding: 12px 0; cursor: pointer; text-align: left; }
.nice-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nice-btn svg { flex-shrink: 0; color: var(--muted); transition: transform .2s; }
.nice-select.open .nice-btn svg { transform: rotate(180deg); color: var(--brand); }
.nice-pop { position: absolute; top: calc(100% + 10px); left: -44px; right: -14px; min-width: 240px; background: #fff; border: 1px solid #ffe2cf; border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(28, 25, 23, .3); padding: 8px; display: none; z-index: 20; animation: nice-in .16s ease-out; }
.nice-select.open .nice-pop { display: block; }
@keyframes nice-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nice-find { width: 100%; border: 1px solid var(--line, #e5e7eb) !important; border-radius: 10px; padding: 9px 12px !important; font-size: .9rem !important; margin-bottom: 6px; outline: none; }
.nice-find:focus { border-color: var(--brand, #F25C05) !important; box-shadow: 0 0 0 3px rgba(242, 92, 5, .12); }
.nice-list { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #f6b48c transparent; }
.nice-list::-webkit-scrollbar { width: 6px; }
.nice-list::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.nice-list::-webkit-scrollbar-thumb { background: #f9cbb0; border-radius: 999px; }
.nice-list:hover::-webkit-scrollbar-thumb { background: #f6a06c; }
.nice-list::-webkit-scrollbar-button { display: none; height: 0; }
.nice-list li { padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--ink-2, #374151); font-size: .93rem; display: flex; justify-content: space-between; align-items: center; }
.nice-list li.active { background: #fff3ea; color: var(--brand, #F25C05); }
.nice-list li[aria-selected="true"] { font-weight: 700; color: var(--brand, #F25C05); }
.nice-list li[aria-selected="true"]::after { content: "✓"; font-size: .85rem; }
.nice-list li[hidden] { display: none; }
.nice-empty { padding: 10px 12px; color: var(--muted); font-size: .9rem; }
@media (max-width: 767px) { .nice-pop { left: -14px; right: -14px; } }

/* ---------- Trang Lưu trữ file (MinIO) ---------- */
.storage-state { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; background: rgba(255, 255, 255, .18); color: #fff; white-space: nowrap; }
.storage-state.on { background: #dcfce7; color: #15803d; }
.storage-state.off { background: rgba(255, 255, 255, .2); color: #fff; }
.switch-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { flex-shrink: 0; width: 44px; height: 24px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .2s; margin-top: 2px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch-row input:checked + .switch { background: var(--brand); }
.switch-row input:checked + .switch::after { transform: translateX(20px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--brand); outline-offset: 2px; }
.storage-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: .9rem; color: var(--ink-2); }
.img-field { display: flex; gap: 10px; align-items: flex-start; }
.img-field-preview { width: 84px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }
.img-field-inputs { display: grid; gap: 6px; flex: 1; min-width: 0; }

/* ---------- Nút lên đầu trang ---------- */
.to-top { position: fixed; right: 20px; bottom: 24px; z-index: 900; width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: var(--brand, #F25C05); box-shadow: 0 10px 24px -8px rgba(242, 92, 5, .6); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity .25s, transform .25s, visibility .25s, box-shadow .2s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -8px rgba(242, 92, 5, .7); }
.to-top:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 5px var(--brand, #F25C05); }
.to-top svg { position: relative; z-index: 1; }
.to-top .to-top-ring { position: absolute; inset: -3px; width: 52px; height: 52px; transform: rotate(-90deg); }
.to-top .to-top-ring circle { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-linecap: round; }
@media (max-width: 767px) { .to-top { right: 14px; bottom: 16px; width: 42px; height: 42px; } .to-top .to-top-ring { width: 48px; height: 48px; } }
@media print { .to-top { display: none !important; } }

/* ---------- Menu quản trị: nhóm (menu cha) nổi bật, thu gọn được ---------- */
.panel-body .pn-sec { margin-top: 8px; }
.panel-body .pn-sec > summary { list-style: none; }
.panel-body .pn-sec > summary::-webkit-details-marker { display: none; }
.panel-body .pn-group { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; user-select: none;
    font-size: .8rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #1a2035; background: #f1f5fc; border-left: 3px solid #1572e8; transition: background .15s, color .15s; }
.panel-body .pn-group svg.icon-sm { color: #1572e8; flex-shrink: 0; }
.panel-body .pn-group span { flex: 1; min-width: 0; }
.panel-body .pn-group:hover { background: #e4edfb; }
.panel-body .pn-caret { color: #8d9bb5; transition: transform .2s; flex-shrink: 0; }
.panel-body .pn-sec:not([open]) .pn-caret { transform: rotate(-90deg); }
.panel-body .pn-sec.has-active > .pn-group { background: #e1ecfd; color: #0b4fb3; }
.panel-body .pn-sub { margin: 4px 0 2px 14px; padding-left: 8px; border-left: 1px dashed #d5deee; }
.panel-body .pn-sub .pn-item { font-size: .88rem; padding: 8px 10px; }
.panel-body .pn-sub form { margin: 0; }

/* ---------- Get công ty ---------- */
.grab-bar { display: flex; gap: 10px; }
.grab-bar .input { flex: 1; min-width: 0; }
.grab-table th { vertical-align: top; text-align: left; font-weight: 600; color: var(--ink); background: #f8fafc; }
.grab-table td { vertical-align: top; word-break: break-word; }
.grab-table tr.is-error th { color: #dc2626; }
.grab-ok { color: #15803d; font-size: .85rem; font-weight: 600; }
.grab-warn { color: #b45309; font-size: .85rem; font-weight: 600; }
.grab-logo { width: 90px; height: 90px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 4px; }
.grab-cover { width: 100%; max-width: 320px; aspect-ratio: 16 / 5; object-fit: cover; border-radius: 8px; }
.grab-desc { max-height: 260px; overflow: auto; padding-right: 6px; }
@media (max-width: 767px) { .grab-bar { flex-direction: column; } }
.grab-src { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #fff; background: #64748b; }
.grab-src-careerlink { background: #0b6bcb; }
.grab-src-topcv { background: #00b14f; }

/* ---------- Xoá lịch sử reup ---------- */
.btn-danger-outline { background: #fff; color: #dc2626; border: 1px solid #fca5a5; }
.btn-danger-outline:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.reup-del { color: #9ca3af; padding: 6px 8px; }
.reup-del:hover { color: #dc2626; background: #fef2f2; }

/* ---------- Chuyển giao dữ liệu ---------- */
.nice-select.nice-boxed { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0 12px; }
.nice-select.nice-boxed .nice-btn { padding: 10px 0; font-size: .93rem; }
.nice-select.nice-boxed.open { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(21, 114, 232, .12); }
.nice-select.nice-boxed .nice-pop { left: -1px; right: -1px; top: calc(100% + 6px); border-color: var(--line); z-index: 40; }
.panel-body .nice-list li.active { background: #eef4ff; color: var(--brand); }
.panel-body .nice-list li[aria-selected="true"] { color: var(--brand); }
.panel-body .nice-find:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(21, 114, 232, .12); }
.tf-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
@media (min-width: 768px) { .tf-pick { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.tf-swap { margin-top: 30px; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--brand); display: grid; place-items: center; cursor: pointer; justify-self: center; transition: background .15s, transform .2s; }
.tf-swap:hover { background: var(--brand-50); transform: rotate(180deg); }
.tf-matrix th, .tf-matrix td { text-align: center; vertical-align: middle; }
.tf-matrix tbody th { text-align: left; font-weight: 600; }
.tf-matrix thead th { background: #f8fafc; }
.tf-cell { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 1rem; }
.tf-cell input { width: 18px; height: 18px; accent-color: var(--brand); }
.tf-cell b { min-width: 24px; color: var(--brand); }
.tf-cell b.zero { color: var(--muted); }
.tf-save { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 12px; font-size: 1rem; }
.tf-note { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; font-size: .88rem; color: #7c2d12; }
.tf-note ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.tf-matrix tbody tr > * { background: #fff !important; }

/* ================= Trang Tổng quan (quản trị) ================= */
.panel-body .btn-light { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.panel-body .btn-light:hover { background: #fff; color: #1572e8; }
.text-success { color: #16a34a; } .text-danger { color: #dc2626; }
/* Việc cần xử lý */
.db-actions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.db-action { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: transform .15s, box-shadow .15s; }
.db-action:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .25); color: var(--ink); }
.db-action-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.db-action.hot .db-action-icon { background: #fff1e8; color: #f25c05; }
.db-action.ok .db-action-icon { background: #ecfdf5; color: #16a34a; }
.db-action-text b { display: block; font-size: 1.25rem; line-height: 1.1; }
.db-action.hot b { color: #f25c05; }
.db-action.ok b { color: #16a34a; }
.db-action-text small { color: var(--muted); font-size: .8rem; }
/* KPI */
.db-kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 16px; }
.db-kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; overflow: hidden; }
.db-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #1572e8, #60a5fa); }
.db-kpi-label { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.db-kpi-value { font-size: 1.75rem; line-height: 1.2; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-kpi-sub { font-size: .78rem; color: var(--muted); }
.db-kpi-foot { margin-top: auto; padding-top: 8px; }
.db-spark { width: 100%; height: 34px; margin-top: 6px; display: block; }
.db-delta { font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.db-delta.up { background: #dcfce7; color: #15803d; } .db-delta.down { background: #fee2e2; color: #b91c1c; } .db-delta.flat { background: #f1f5f9; color: #64748b; }
.db-pill { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.db-pill.blue { background: #e8f1fd; color: #0b5ac2; } .db-pill.green { background: #dcfce7; color: #15803d; } .db-pill.amber { background: #fef3c7; color: #a16207; }
.db-pill.red { background: #fee2e2; color: #b91c1c; } .db-pill.slate { background: #f1f5f9; color: #64748b; }
/* Thanh điều hướng nhóm */
.db-nav { position: sticky; top: 62px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 8px; margin: 0 0 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px; scrollbar-width: none; }
.db-nav::-webkit-scrollbar { display: none; }
.db-nav a { white-space: nowrap; padding: 7px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600; color: #475569; }
.db-nav a:hover { background: #e8f1fd; color: #1572e8; }
/* Nhóm */
.db-sec { margin-bottom: 18px; scroll-margin-top: 130px; }
.db-sec-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.db-sec-head h2 { font-size: 1.12rem; margin: 0; }
.db-sec-head p { margin: 2px 0 0; color: var(--muted); font-size: .86rem; }
.db-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #1572e8, #06418e); }
.db-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; background: #fff; }
.db-box h3 { font-size: .92rem; margin: 0 0 12px; color: var(--ink); }
.db-grid-21, .db-grid-11, .db-grid-12 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .db-grid-21 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .db-grid-11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .db-grid-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}
.db-note { font-size: .8rem; color: var(--muted); margin: 10px 0 0; }
/* Ô màu */
.db-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.db-tile { --c: #1572e8; --bg: #f5f9ff; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border-left: 4px solid var(--c); color: var(--ink); transition: transform .15s, box-shadow .15s; }
a.db-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .3); color: var(--ink); }
.db-tile-label { font-size: .8rem; color: #475569; font-weight: 600; }
.db-tile-value { font-size: 1.45rem; color: var(--c); line-height: 1.2; }
.db-tile-hint { font-size: .74rem; color: var(--muted); }
.tone-green { --c: #16a34a; --bg: #f0fdf4; } .tone-amber { --c: #d97706; --bg: #fffbeb; } .tone-orange { --c: #f25c05; --bg: #fff7ed; }
.tone-slate { --c: #64748b; --bg: #f8fafc; } .tone-red { --c: #dc2626; --bg: #fef2f2; } .tone-violet { --c: #7c3aed; --bg: #f5f3ff; } .tone-blue { --c: #1572e8; --bg: #f5f9ff; }
/* Thanh trạng thái xếp chồng */
.db-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #f1f5f9; gap: 2px; }
.db-stack span { display: block; height: 100%; }
.db-stack-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 16px; font-size: .82rem; color: #475569; }
.db-stack-legend i, .db-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.db-stack-legend small { color: var(--muted); }
/* Biểu đồ */
.db-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.db-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: #475569; margin-bottom: 6px; }
.db-legend i.line { height: 3px; width: 14px; border-radius: 2px; vertical-align: 3px; }
.db-grid { stroke: #eef2f7; stroke-width: 1; }
.db-axis { font-size: 10px; fill: #94a3b8; }
.db-hover { fill: transparent; }
.db-col:hover .db-hover { fill: rgba(21, 114, 232, .06); }
/* Thanh ngang */
.db-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.db-hbars li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: .84rem; }
.db-hbars.compact { gap: 7px; }
.db-hbar-label { color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-hbar { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.db-hbar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1572e8, #60a5fa); min-width: 2px; }
.db-hbars b { text-align: right; }
.db-more { margin-top: 10px; }
.db-more > summary { cursor: pointer; font-size: .84rem; color: #1572e8; font-weight: 600; }
.db-more[open] > summary { margin-bottom: 10px; }
/* Bảng xếp hạng */
.db-rank { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.db-rank li { counter-increment: r; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "n t v" "n s v"; column-gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed #eef2f7; }
.db-rank li:last-child { border-bottom: 0; }
.db-rank li::before { content: counter(r); grid-area: n; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: #f1f5f9; color: #64748b; }
.db-rank li:nth-child(-n+3)::before { background: #e8f1fd; color: #1572e8; }
.db-rank a { grid-area: t; font-size: .87rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-rank a:hover { color: #1572e8; }
.db-rank small { grid-area: s; font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-rank b { grid-area: v; font-size: .9rem; text-align: right; }
.db-rank b span { font-size: .72rem; color: var(--muted); font-weight: 400; }
.db-rank.logos li { grid-template-columns: 26px 34px minmax(0, 1fr) auto; grid-template-areas: "n l t v"; }
.db-logo { grid-area: l; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; background: #fff; font-weight: 700; color: #1572e8; font-size: .85rem; }
.db-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Bảng */
.db-table-scroll { max-height: 420px; overflow: auto; scrollbar-width: thin; }
.db-table th { position: sticky; top: 0; background: #f8fafc; z-index: 1; font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; color: #64748b; }
.db-table .r { text-align: right; }
.db-table td { font-size: .86rem; }
/* Tình trạng hệ thống */
.db-status { list-style: none; margin: 0; padding: 0; }
.db-status li { display: grid; grid-template-columns: 12px 140px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed #eef2f7; font-size: .86rem; }
.db-status li:last-child { border-bottom: 0; }
.db-status li > span:nth-child(2) { color: #64748b; }
.db-status b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-status a { font-size: .8rem; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.ok { background: #16a34a; box-shadow: 0 0 0 3px #dcfce7; } .dot.warn { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; } .dot.bad { background: #dc2626; box-shadow: 0 0 0 3px #fee2e2; }
.db-log { list-style: none; margin: 0; padding: 0; }
.db-log li { display: grid; grid-template-columns: 110px 130px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed #eef2f7; font-size: .84rem; align-items: center; }
.db-log li:last-child { border-bottom: 0; }
.db-log-time { color: var(--muted); font-size: .78rem; }
.db-log-user { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-log code { font-size: .76rem; background: #f1f5f9; padding: 2px 6px; border-radius: 6px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: start; max-width: 100%; }
@media (max-width: 767px) {
  .db-hbars li { grid-template-columns: 90px minmax(0, 1fr) 44px; }
  .db-status li { grid-template-columns: 12px 100px minmax(0, 1fr); } .db-status li > a, .db-status li > span:last-child:empty { display: none; }
  .db-log li { grid-template-columns: 1fr; gap: 2px; }
  .db-nav { top: 56px; }
}
@media (max-width: 767px) {
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .db-kpi { padding: 12px 12px 10px; }
  .db-kpi-value { font-size: 1.35rem; }
  .db-kpi-label { font-size: .7rem; }
  .db-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .db-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Nhập tin tự động ---------- */
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 16px; border: 2px dashed #bfd4f6; border-radius: 14px; background: #f7faff; color: #1572e8; cursor: pointer; transition: background .15s, border-color .15s; position: relative; }
.imp-drop:hover, .imp-drop.drag { background: #eef4ff; border-color: #1572e8; }
.imp-drop b { color: var(--ink); }
.imp-drop span { font-size: .82rem; color: var(--muted); }
.imp-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.imp-files { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.imp-files em { font-style: normal; font-size: .78rem; background: #fff; border: 1px solid #bfd4f6; color: #0b5ac2; padding: 3px 10px; border-radius: 999px; }
.imp-loading { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: .88rem; color: #1572e8; }
.imp-spinner { width: 18px; height: 18px; border: 3px solid #bfd4f6; border-top-color: #1572e8; border-radius: 50%; animation: imp-spin .8s linear infinite; }
@keyframes imp-spin { to { transform: rotate(360deg); } }
.imp-choices { display: grid; gap: 8px; }
.imp-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.imp-choice:hover { border-color: #93b8ef; }
.imp-choice:has(input:checked) { border-color: #1572e8; background: #f5f9ff; box-shadow: 0 0 0 3px rgba(21, 114, 232, .1); }
.imp-choice input { width: 18px; height: 18px; accent-color: #1572e8; flex-shrink: 0; }
.imp-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.imp-choice-new { margin-top: 8px; border-style: dashed; }
.imp-newco { margin-top: 12px; padding: 14px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--line); }
.imp-title { font-size: 1.15rem; margin: 0 0 12px; color: #0b5ac2; }
.imp-dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: .88rem; }
.imp-dl dt { color: var(--muted); }
.imp-dl dd { margin: 0; font-weight: 600; }
.imp-missing { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: .85rem; }
.imp-h4 { font-size: .85rem; margin: 12px 0 4px; color: #0b5ac2; }
.imp-pre { white-space: pre-wrap; font-size: .8rem; max-height: 300px; overflow: auto; background: #f8fafc; padding: 10px; border-radius: 8px; border: 1px solid var(--line); }
.imp-banner { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #eef4ff, #f5f3ff); border: 1px solid #c7d7f7; font-size: .9rem; }
.imp-note { margin-top: 6px; font-size: .85rem; color: #475569; }
.text-ink { color: var(--ink); }
.imp-loading[hidden], .imp-newco[hidden] { display: none; }

/* ---------- Cấu hình AI: 2 nhà cung cấp ---------- */
.ai-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ai-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ai-card { border: 2px solid transparent; transition: border-color .15s, box-shadow .15s; }
.ai-card:has(input[name="ai_provider"]:checked) { border-color: #1572e8; box-shadow: 0 10px 24px -14px rgba(21, 114, 232, .5); }
.ai-card-head { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ai-card-head input { width: 20px; height: 20px; accent-color: #1572e8; }
.ai-card-head span { flex: 1; display: flex; flex-direction: column; }
.ai-card-head b { font-size: 1.05rem; }
.ai-card-head small { color: var(--muted); font-size: .8rem; }
.ai-badge { font-style: normal; font-size: .72rem; font-weight: 700; color: #fff; background: #1572e8; padding: 3px 10px; border-radius: 999px; visibility: hidden; }
.ai-card:has(input[name="ai_provider"]:checked) .ai-badge { visibility: visible; }

/* ---------- Chọn công ty (form đăng tin) ---------- */
.cpk { position: relative; }
.cpk-selected { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #c7d7f7; background: #f5f9ff; border-radius: 10px; flex-wrap: wrap; }
.cpk-logo { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; font-weight: 700; color: #1572e8; }
.cpk-logo img { width: 100%; height: 100%; object-fit: contain; }
.cpk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cpk-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpk-info small { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpk-input { position: relative; }
.cpk-input svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cpk-input .input { padding-left: 38px; }
.cpk-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(15, 23, 42, .3); padding: 6px; }
.cpk-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.cpk-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.cpk-list li.active { background: #eef4ff; }
.cpk-jobs { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #64748b; white-space: nowrap; }
.cpk-jobs.on { background: #dcfce7; color: #15803d; }
.cpk-badge { font-size: .7rem; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #a16207; }
.cpk-status { font-size: .84rem; color: var(--muted); padding: 6px 10px; }
.cpk-status:empty { display: none; }
.cpk-new-btn { width: 100%; text-align: left; margin-top: 4px; padding: 10px 12px; border: 1px dashed #93b8ef; border-radius: 8px; background: #f7faff; color: #0b5ac2; font-weight: 600; cursor: pointer; }
.cpk-new-btn:hover { background: #eef4ff; }
.cpk-create { margin-top: 10px; padding: 14px; border: 1px solid #c7d7f7; border-radius: 10px; background: #f8fbff; }
.cpk-create-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cpk-create-msg { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; font-size: .85rem; color: #92400e; }
.cpk [hidden] { display: none !important; }