/* JobBecome — สไตล์เฉพาะหน้า job board สาธารณะ วางต่อจาก AD.Theme (design-system/base.css + ธีม)
   ใช้ตัวแปรสีของธีมเท่านั้น ห้าม hardcode สี เพื่อให้สลับธีม/โหมดมืดได้ */

h1:focus { outline: none; }

.blazor-error-boundary {
    background: var(--err);
    padding: 1rem 1.25rem;
    color: #fff;
}
.blazor-error-boundary::after { content: "เกิดข้อผิดพลาด"; }

.jb-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 18px; }
.jb-nav a { color: inherit; text-decoration: none; font-weight: 600; white-space: nowrap; }
.jb-nav a:hover { text-decoration: underline; }

/* ---------- กล่องค้นหา ---------- */
.jb-hero { padding: 28px 0 8px; }
.jb-hero h1 { font-size: 30px; margin: 0; }

.jb-searchbar {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0 0 18px;
}
.jb-searchbar input, .jb-searchbar select { min-width: 0; padding: 10px 12px; }

/* ---------- ผลค้นหา ---------- */
.jb-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.jb-filters { position: sticky; top: 12px; }
.jb-filters .field { margin-bottom: 12px; }
.jb-fieldset { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.jb-fieldset legend { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }
.jb-fieldset label { font-size: 13.5px; display: flex; gap: 6px; align-items: center; }
.jb-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-top: 6px; }
.jb-range input { min-width: 0; }

.jb-results-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.jb-results-title { font-size: 22px; margin: 0; }
.jb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.jb-chips .chip { text-decoration: none; color: inherit; }
.jb-toolbar { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; flex-wrap: wrap; }
.jb-sort { display: flex; gap: 14px; font-size: 13.5px; }
.jb-sort a { color: var(--accent); text-decoration: none; }

/* ---------- การ์ดงาน ---------- */
.jb-list { display: flex; flex-direction: column; gap: 12px; }
.jb-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.jb-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.jb-card:hover { border-color: var(--accent); }
.jb-card-featured { border-left: 4px solid var(--accent); }
.jb-card-head { display: flex; gap: 10px; align-items: flex-start; }
.jb-card-titles { flex: 1; min-width: 0; }
.jb-card-title { font-size: 17px; margin: 0; line-height: 1.35; }
.jb-card-title a { color: var(--ink); text-decoration: none; }
.jb-card-title a:hover { color: var(--accent); text-decoration: underline; }
.jb-company { color: var(--ink-2); font-size: 14px; }

.jb-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--ink-2); }
.jb-salary { color: var(--ok); font-weight: 600; }
.jb-highlights { margin: 0; padding-left: 18px; font-size: 13.5px; }
.jb-card-foot { display: flex; align-items: center; gap: 8px; }
.jb-card-foot form { margin: 0; }

/* ---------- หน้ารายละเอียด ---------- */
.jb-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.jb-detail-title { font-size: 26px; margin: 0 0 4px; }
.jb-detail-salary { font-size: 18px; margin: 12px 0; }
.jb-description { white-space: pre-line; line-height: 1.75; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; max-width: 70ch; }

/* ── หน้ารายละเอียดงาน: การ์ดหลักให้อ่านง่ายและเข้ากับธีม (แต่ง 26 ก.ย. 2569, theme tokens ล้วน) ── */
.jb-detail-main { padding: 22px 26px; }
.jb-detail-main .jb-company { font-size: 15px; margin-bottom: 14px; }
.jb-detail-main .jb-company a { font-weight: 600; }

/* meta เป็นชิปกลมมีไอคอน (ไอคอนใช้ mask จึงเปลี่ยนสีตามธีม/ดาร์กโหมดอัตโนมัติ) */
.jb-meta-chips { gap: 8px; margin: 8px 0 2px; }
.jb-meta-chips li {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--line-soft); border-radius: 999px;
    padding: 5px 12px; font-size: 13px; line-height: 1.35;
}
.jb-meta-chips li::before {
    content: ""; width: 14px; height: 14px; flex: none; background: var(--accent);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.jb-meta-chips li.i-pin::before   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.jb-meta-chips li.i-cat::before   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.jb-meta-chips li.i-type::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3C/svg%3E"); }
.jb-meta-chips li.i-place::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18'/%3E%3Cpath d='M2 22h20'/%3E%3Cpath d='M10 6h.01M14 6h.01M10 10h.01M14 10h.01M10 14h.01M14 14h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18'/%3E%3Cpath d='M2 22h20'/%3E%3Cpath d='M10 6h.01M14 6h.01M10 10h.01M14 10h.01M10 14h.01M14 14h.01'/%3E%3C/svg%3E"); }

/* เงินเดือนเป็นแถบเด่น */
.jb-detail-salary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ok-soft); color: var(--ok);
    border-radius: 10px; padding: 8px 16px; font-size: 18px; font-weight: 700; margin: 14px 0 2px;
}
.jb-detail-salary::before {
    content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 6v2m0 8v2'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 6v2m0 8v2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.jb-detail-salary.jb-salary-none { background: var(--surface-2); color: var(--muted); font-size: 15px; font-weight: 600; }

/* ไฮไลต์งานเป็นเช็กลิสต์ */
.jb-detail-main .jb-highlights { list-style: none; padding: 0; margin: 16px 0 2px; display: grid; gap: 8px; }
.jb-detail-main .jb-highlights li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.jb-detail-main .jb-highlights li::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.8 10.1V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.8 10.1V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* หัวข้อ "รายละเอียดงาน" เป็นหัวข้อจริง มีแถบ accent (แทนหัวข้อจิ๋วตัวใหญ่) */
.jb-detail-main > .card-title {
    font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700;
    margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--line-soft);
    display: flex; align-items: center; gap: 10px;
}
.jb-detail-main > .card-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--accent); flex: none; }
.jb-detail-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.jb-detail-side form { margin: 0; }
.jb-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.jb-facts dt { color: var(--muted); }
.jb-facts dd { margin: 0; }

/* ---------- หน้าแรก ---------- */
.jb-section { margin: 28px 0; }
.jb-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.jb-section-head h2 { font-size: 20px; margin: 0; }
.jb-categories { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.jb-categories a {
    display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface); color: var(--ink); text-decoration: none;
}
.jb-categories a:hover { border-color: var(--accent); color: var(--accent); }
.jb-employer-cta h2 { margin-top: 0; }

/* ---------- ตัวเลือก radio / checkbox ----------
   base.css ตั้ง input{width:100%; padding; border} ให้ทุก input — radio/checkbox จึงยืดเต็มแถวและบีบข้อความป้ายจนขึ้นบรรทัดทีละคำ */
input[type=radio], input[type=checkbox] {
    width: auto;
    padding: 0;
    margin: 0;
    flex: none;
    box-shadow: none;
    accent-color: var(--accent);
}
.jb-fieldset label { display: flex; gap: 8px; align-items: center; text-align: left; line-height: 1.4; cursor: pointer; }

/* ---------- สมัครสมาชิก / เข้าสู่ระบบ ---------- */
.jb-social { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.jb-social .btn-block { margin-top: 0; }
/* สีแบรนด์ของผู้ให้บริการ (ข้อกำหนดแนวทางแบรนด์ของ Google/LINE/Facebook) — ข้อยกเว้นเดียวของกติกา "ห้าม hardcode สี" */
.jb-social-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.jb-social-google:hover { background: #f8f9fa; border-color: #dadce0; }
.jb-social-line { background: #06c755; border-color: #06c755; }
.jb-social-line:hover { background: #05b34c; border-color: #05b34c; }
.jb-social-facebook { background: #1877f2; border-color: #1877f2; }
.jb-social-facebook:hover { background: #166fe5; border-color: #166fe5; }
.jb-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; margin: 18px 0 6px; }
.jb-divider::before, .jb-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.jb-alt-register summary { cursor: pointer; color: var(--accent); font-size: 13.5px; margin-top: 16px; }

/* ---------- ข้อมูลบริษัท ---------- */
.jb-item-list { list-style: none; margin: 0 0 12px; padding: 0; }
.jb-item-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.jb-item-list li form { margin: 0; }
.jb-subform { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.card + .card { margin-top: 14px; }

/* ---------- หน้าบริษัทสาธารณะ ---------- */
.jb-company a { color: inherit; text-decoration: none; }
.jb-company a:hover { color: var(--accent); text-decoration: underline; }
.jb-avatar {
    flex: none; width: 56px; height: 56px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;
}
.jb-avatar-sm { width: 40px; height: 40px; border-radius: 8px; font-size: 18px; }
.jb-company-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.jb-company-head h1 { font-size: 24px; margin: 0; }
.jb-company-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.jb-company-search input[type=search] { flex: 1; min-width: 220px; }
.jb-company-search .jb-check { display: flex; gap: 6px; align-items: center; white-space: nowrap; font-size: 13.5px; }
.jb-company-grid { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.jb-company-card {
    display: flex; gap: 12px; align-items: flex-start; height: 100%;
    padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.jb-company-card:hover { border-color: var(--accent); }
.jb-company-card h2 { font-size: 15px; margin: 0 0 2px; line-height: 1.35; }
.jb-company-card h2 a { color: var(--ink); text-decoration: none; }
.jb-company-card h2 a:hover { color: var(--accent); text-decoration: underline; }
.jb-open-jobs { color: var(--ok); font-weight: 600; font-size: 13px; margin-top: 4px; }

/* ---------- นายจ้าง / admin ---------- */
.jb-field-wide { grid-column: 1 / -1; }
.jb-field-wide textarea { min-height: 260px; }
.jb-check { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.jb-check input { width: auto; }
.jb-note-err { color: var(--err); font-size: 12.5px; }
.row-actions { white-space: nowrap; }
.row-actions form, .jb-inline { display: inline; margin: 0; }
.jb-review { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.jb-review details summary { cursor: pointer; color: var(--accent); }
.jb-review-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.jb-review-actions form { margin: 0; }
.jb-reject { display: flex; gap: 6px; flex: 1; min-width: 260px; }
.jb-reject input { flex: 1; min-width: 0; }
.jb-risk { font-size: 12.5px; padding: 3px 8px; border-radius: 4px; background: var(--ok-soft); color: var(--ok); white-space: nowrap; }
.jb-risk-high { background: var(--err-soft); color: var(--err); }
.jb-status-nav { display: flex; gap: 14px; margin: 0 0 12px; font-size: 13.5px; }
.jb-status-nav a { color: var(--accent); text-decoration: none; }

@media (max-width: 900px) {
    .jb-searchbar { grid-template-columns: 1fr 1fr; }
    .jb-searchbar input[type=search] { grid-column: 1 / -1; }
    .jb-layout, .jb-detail { grid-template-columns: 1fr; }
    .jb-filters, .jb-detail-side { position: static; }
    .jb-nav { margin-left: 0; }
}

/* Head Hunter (/agency) */
.chip-on { background: #cc4700; border-color: #cc4700; color: #fff; }
.jb-filter-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.jb-inline { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.jb-inline select, .jb-row-details select { width: auto; max-width: 100%; }
.jb-row-details summary { cursor: pointer; color: #cc4700; font-size: 13px; }
.jb-row-details form { display: grid; gap: 6px; margin: 8px 0 0; min-width: 200px; }
.jb-check { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
.jb-pre { white-space: pre-line; overflow-wrap: anywhere; }
.jb-timeline { list-style: none; margin: 12px 0 0; padding: 0; }
.jb-timeline li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.jb-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0 0 8px; }
.jb-dl dt { color: #65656b; }
.jb-dl dd { margin: 0; overflow-wrap: anywhere; }
.jb-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }
.jb-ai-head { font-size: 14px; margin: 14px 0 6px; }
.jb-ai-list { margin: 0; padding-left: 20px; }
.jb-ai-list li { margin-bottom: 4px; overflow-wrap: anywhere; }
.jb-ai-pitch { width: 100%; font: inherit; resize: vertical; }

/* หมวดบนการ์ด + รายงานประกาศ */
.jb-tag-link { color: inherit; text-decoration: underline dotted; }
.jb-tag-link:hover { color: #cc4700; }
.jb-report summary { cursor: pointer; font-size: 13px; color: #65656b; }
.jb-report form { display: grid; gap: 8px; margin-top: 10px; }
.jb-report-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.jb-report-reasons .jb-check { margin: 2px 0; font-size: 13px; }
.topbar .btn { white-space: nowrap; }

/* ลิงก์ลัดหน้าแรก (ประเภทงาน / WFH) */
.jb-quick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; }
.jb-company-grid .d-block { display: block; }

/* โปรไฟล์คนหางาน */
.jb-progress { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin: 6px 0; }
.jb-progress span { display: block; height: 100%; background: #cc4700; }
.d-block { display: block; }

/* คำถามคัดกรอง */
.jb-question-list { margin: 0; padding-left: 20px; }
.jb-question-list li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.jb-question-list li > div + form { margin-top: 6px; }
.jb-screening { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 14px; }
.jb-screening legend { font-weight: 600; padding: 0 4px; }

/* Partner API */
.jb-code { background: #1a1a1d; color: #f5f5f7; padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: 12px; white-space: pre; }
.jb-secret code { font-size: 13px; overflow-wrap: anywhere; }
.jb-break { overflow-wrap: anywhere; }

/* เงินเดือน */
.jb-bullets { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* ผู้สมัคร: แท็บสถานะ + เปลี่ยนสถานะหลายคน */
.jb-chips .chip.is-active { font-weight: 600; border-color: currentColor; }
.jb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.jb-toolbar select { width: auto; min-width: 12em; }
.jb-select-cell { width: 2.5em; }
.jb-select-cell input[type="checkbox"] { width: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* หัวเว็บ: สูงตามเนื้อหา (เดิมสูงคงที่ ทำให้บรรทัดที่ขึ้นใหม่บนมือถือทับเนื้อหา) + เมนูบัญชี */
.topbar { height: auto; min-height: var(--topbar); flex-wrap: wrap; row-gap: 6px; padding-block: 8px; }
.jb-account { position: relative; }
.jb-account > summary { list-style: none; cursor: pointer; }
.jb-account > summary::-webkit-details-marker { display: none; }
.jb-account > summary::after { content: " ▾"; }
.jb-account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; display: grid; padding: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.jb-account-menu a, .jb-account-logout { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
    color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.jb-account-menu a:hover, .jb-account-logout:hover { background: var(--surface-2); }
.jb-account-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.jb-account-who { padding: 4px 10px 6px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* หน้าค้นหาบนมือถือ: ผลค้นหาขึ้นก่อน ตัวกรองอยู่ท้าย มีลิงก์ลัด */
.jb-filter-jump { display: none; }

/* ประกาศที่ปิดรับแล้ว */
.jb-closed { margin-bottom: 18px; }
.jb-closed .jb-detail-title { margin-top: 8px; }

@media (max-width: 900px) {
    .topbar { position: static; }
    .jb-nav { order: 3; width: 100%; }
    .jb-results { order: -1; }
    .jb-filter-jump { display: inline-flex; margin-bottom: 8px; }
}

/* คุณสมบัติที่ต้องการ + ร่างจาก AI */
.jb-suggestions { list-style: none; margin: 8px 0 0; padding: 0; }
.jb-suggestions li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.jb-suggestions form { margin: 0; flex: none; }
.jb-ai-draft { margin: 8px 0 12px; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-2); }

/* เทียบคุณสมบัติ */
.jb-fit-list { list-style: none; margin: 8px 0; padding: 0; }
.jb-fit-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.jb-fit { flex: none; min-width: 7.5em; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 4px; text-align: center; white-space: nowrap; }
.jb-fit-met { background: var(--ok-soft); color: var(--ok); }
.jb-fit-partial { background: var(--info-soft); color: var(--info); }
.jb-fit-below { background: var(--err-soft); color: var(--err); }
.jb-fit-unknown { background: var(--surface-2); color: var(--muted); }

/* สัญญาณเหมาะกับงาน (ฝั่งคนหางาน) */
.jb-strong-fit { margin: 0 0 4px; padding: 6px 10px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); font-weight: 600; }

/* ท้ายเว็บ — ลิงก์หลักและหลักการใช้ AI */
.jb-footer{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:48px; padding-top:16px; border-top:1px solid rgba(127,127,127,.25); font-size:13px}

/* แบรนด์บริษัท — โลโก้บนการ์ดประกาศและหน้าบริษัท */
.jb-card-logo{width:44px; height:44px; object-fit:contain; border-radius:8px; flex:none; background:#fff}
.jb-company-logo{width:72px; height:72px; object-fit:contain; border-radius:12px; flex:none; background:#fff}
.jb-tagline{margin:4px 0 0; font-size:15px}

/* รีวิวบริษัท */
.jb-company-review{padding:12px 0; border-top:1px solid rgba(127,127,127,.2)}
.jb-company-review h3{margin:0 0 2px; font-size:15px}

/* ไฮไลต์คำที่ตรงกับคุณสมบัติในข้อความ CV */
.jb-cv-text{margin:12px 0}
.jb-cv-text > div{max-height:420px; overflow:auto; margin-top:8px; padding:8px; border:1px solid rgba(127,127,127,.25); border-radius:8px}
.jb-cv-text mark{background:#fff1a8; color:#1f2937; padding:0 2px; border-radius:3px}

/* บทความแนะนำอาชีพ + ปุ่มในแถวตารางผู้ดูแล */
.jb-article-body{max-width:720px; font-size:16.5px; line-height:1.75}
.jb-article-body h2{font-size:20px; margin:22px 0 8px}
.jb-article-body p{margin:0 0 14px}
.jb-article-body ul{margin:0 0 14px; padding-left:22px}
.jb-row-actions{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.jb-row-actions form{margin:0}

/* ค่าเริ่มต้นของหน้าค้นหาเมื่อยังไม่ได้เลือกเงื่อนไข */
.jb-popular{margin:0 0 14px}
.jb-popular p{margin:0 0 6px}

/* หน้าแพ็กเกจและราคา */
.jb-package-card h3{margin:0 0 6px; font-size:18px}
.jb-package-price{margin:0 0 8px; font-size:22px; line-height:1.3}
.jb-package-price .small{font-size:12.5px}
.jb-package-highlights{margin:8px 0 0; padding-left:18px; font-size:13.5px}

/* โลโก้ JobBecome บนหัวเว็บ — ไฟล์สูง 96px แสดง 34px (คมบนจอความละเอียดสูง) */
.brand-logo { display: block; height: 34px; width: auto; }
.brand .brand-sub { margin-top: 2px; }
/* โหมดมืด: "Job" สีกรมท่าจะจมหายบนพื้นเข้ม — วางบนแผ่นขาวแทนการเปลี่ยนสีโลโก้ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo { background: #fff; border-radius: 6px; padding: 3px 6px; box-sizing: content-box; }
}
:root[data-theme="dark"] .brand-logo { background: #fff; border-radius: 6px; padding: 3px 6px; box-sizing: content-box; }
@media (max-width: 640px) {
    .brand-logo { height: 28px; }
    .brand .brand-sub { display: none; }
}

/* หน้า MFA — กุญแจพิมพ์เองอ่านง่าย รหัสกู้คืนเรียงสองคอลัมน์ */
.mfa-key { font-size: 15px; letter-spacing: .06em; word-break: break-all; }
.mfa-codes { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.mfa-codes code { font-size: 15px; letter-spacing: .04em; }

/* ขั้นตอนเริ่มต้นของนายจ้าง — ขั้นที่ทำแล้วจางลง ขั้นที่ต้องทำตอนนี้เด่นที่สุด */
.jb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.jb-steps li { display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: start; gap: .5rem; padding: .5rem .6rem; border-radius: var(--radius, 8px); }
.jb-steps li.done { color: var(--muted, #6b7280); }
.jb-steps li.now { background: var(--surface-2, #f4f6f8); font-weight: 600; }
.jb-steps li.now .muted { font-weight: 400; }
.jb-step-mark { font-weight: 700; text-align: center; }
.jb-steps li.done .jb-step-mark { color: var(--ok, #157347); }
@media (max-width: 640px) {
    .jb-steps li { grid-template-columns: 1.25rem 1fr; }
    .jb-steps li .btn { grid-column: 2; justify-self: start; margin-top: .25rem; }
}

/* บริษัทคล้ายกัน (sidebar หน้าบริษัท) */
.jb-similar-companies { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jb-similar-companies li { display: flex; flex-direction: column; gap: 1px; }
.jb-similar-companies a { color: var(--ink); text-decoration: none; font-weight: 600; }
.jb-similar-companies a:hover { color: var(--accent); text-decoration: underline; }

/* ใบเสร็จ/ใบกำกับภาษี (พิมพ์ได้) */
.jb-receipt-toolbar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 12px; }
.jb-receipt { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 28px 32px; max-width: 820px; margin: 0 auto; }
.jb-receipt-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px; }
.jb-receipt-head h1 { font-size: 22px; margin: 0; }
.jb-receipt-meta { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; font-size: 14px; text-align: right; }
.jb-receipt-meta dt { color: var(--muted); }
.jb-receipt-meta dd { margin: 0; font-weight: 600; }
.jb-receipt-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.jb-receipt-parties h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; }
.jb-receipt-parties p { margin: 0 0 3px; font-size: 14px; }
.jb-receipt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.jb-receipt-table th, .jb-receipt-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.jb-receipt-table thead th { background: var(--surface-2); text-align: left; }
.jb-receipt-table .num { text-align: right; }
.jb-receipt-table tfoot td { border-bottom: none; }
.jb-receipt-table tfoot .grand td { border-top: 2px solid var(--ink); font-weight: 700; font-size: 16px; }
@media print {
  .topbar, .jb-nav, header.topbar, nav, footer, .jb-receipt-toolbar { display: none !important; }
  .jb-receipt { border: none; padding: 0; max-width: none; }
  body { background: #fff; }
}