/* หน้าตำแหน่งงานแบบใหม่บนหน้าหลัก (เฉพาะ localhost) — ดู assets/js/jobs-variants.js */
/* เลือกแบบแล้ว: ซ่อนเนื้อหาเดิมของหน้าหลัก เหลือ #app (ดีไซน์) กับแถบเลือกแบบ */
html.jv-native body > *:not(#app):not(.jv-bar):not(.c-hd):not(.c-drawer):not(.c-lm):not(#c-admin):not(.c-modal):not(script):not(link):not(style) { display: none !important; }
html.jv-native body { margin: 0; }

/* Selected layouts share the live cover carousel and slogan from the Start homepage. */
html.jl-cover-connected #app>.jl-static-hero-hidden{display:none!important}
html.jl-cover-connected #app>.jl-hero{padding-top:48px}
@media(max-width:700px){html.jl-cover-connected #app>.jl-hero{padding-top:42px}}

html.jl-cover-connected #app>.cats{margin-top:0;padding-top:16px}


/* Stable loading state and mobile navigation for the main job page. */
.jt-board-loading{margin:0;padding:36px;text-align:center;color:#667085;background:#f3f6fb;min-height:120px}
.jt-menu-toggle{display:none;border:1px solid #e4e9f2;background:#fff;border-radius:9px;width:38px;height:38px;color:#1d4ed8;font-size:20px}
/* Main board default: compact desktop proportions, without browser/page scaling. */
html.jv-native #app .wrap{max-width:var(--site-board-max,1840px);padding-inline:18px}
html.jv-native #app .board-grid>*{min-width:0}
html.jv-native #app .job .jc-badges{flex-wrap:nowrap;align-items:center;padding:32px 10px 0!important;gap:4px!important}
html.jv-native #app .job .jc-biz{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;padding:3px 8px}
html.jv-native #app .job .jc-amt{flex:none;white-space:nowrap;font-size:10px;padding:3px 7px}
@media(min-width:1150px){
 html.jv-native #app .board-grid{gap:18px}
 html.jv-native #app .detail{display:block}
 html.jv-native #app .job-list{gap:14px}
 html.jv-native #app .job .jc-head h3{font-size:15px}
 html.jv-native #app .job .jc-body{padding:12px}
 html.jv-native #app .job .jc-info{gap:6px}
 html.jv-native #app .job .jc-foot{font-size:10px;gap:6px}
 html.jv-native #app .job .jc-info>div{min-width:0}
 html.jv-native #app .job .jc-info b{font-size:12px;white-space:normal;overflow-wrap:anywhere}
 html.jv-native body.cats-old #app .cat{flex-basis:72px;width:72px;height:72px}
 html.jv-native body.cats-old #app .cat-txt b{font-size:9px}
}
@media(max-width:1020px){.jt-menu-toggle{display:block;flex:none}.site-in{position:relative;gap:12px}.site .login{margin-left:auto}.site.jt-menu-open .site-nav{display:flex;position:absolute;left:16px;right:16px;top:calc(100% + 4px);padding:12px;background:#fff;border:1px solid #e4e9f2;border-radius:14px;box-shadow:0 12px 32px #163a6b20;flex-direction:column}.site.jt-menu-open .site-nav a{display:block;color:#334155}.site.jt-menu-open .site-nav a.on{color:#fff}}

/* ตัวกรองงาน: หัวข้อ + "ล้างทั้งหมด" อยู่บรรทัดเดียวเสมอ แม้คอลัมน์ซ้ายแคบ ~180–210px (ท่านคิวสั่ง 26 ต.ค. 2569) */
html.jv-native #app .filters .f-head{flex-wrap:nowrap;gap:6px;padding-left:12px;padding-right:10px}
html.jv-native #app .filters .f-head h3{flex:1 1 auto;min-width:0;gap:6px;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden}
html.jv-native #app .filters .f-head h3 svg{width:16px;height:16px;flex:none}
html.jv-native #app .filters .f-reset{flex:none;margin-left:auto;font-size:12px;line-height:1.2;white-space:nowrap}
@media(min-width:1021px) and (max-width:1480px){html.jv-native #app .filters .f-head h3 svg{display:none}}

/* ตัวกรองงาน: ช่องเลือกเป็นวงกลม · ปุ่ม "ล้างตัวกรอง" สีแดง ขึ้นเฉพาะตอนเลือกตัวกรองอยู่ (ท่านคิวสั่ง 27 ต.ค. 2569) */
html.jv-native #app .filters .f-check .box{border-radius:50%}
html.jv-native #app .filters .f-reset{color:#dc2626;background:#fff1f2;border:1px solid #fecaca;border-radius:999px;padding:1px 7px;font-size:11px;line-height:1.5;font-weight:700;cursor:pointer;white-space:nowrap;flex:none}
html.jv-native #app .filters .f-reset:hover{background:#fee2e2;border-color:#fca5a5}
html.jv-native #app .filters .f-reset[hidden]{display:none!important}

/* โลโก้บริษัทบนการ์ดงาน/แผงรายละเอียด: ไม่มีขอบ ไม่มีวงแหวนขาว ไม่มีเงา (ท่านคิวสั่ง 27 ต.ค. 2569 "ไม่มีขอบเลย") */
html.jv-native #app .logo,
html.jv-native #app .logo--lg,
html.jv-native #app .jc-head .logo,
html.jv-native #app .d-co .logo,
html.jv-native #app .jt-identity .logo{border:0!important;box-shadow:none!important;outline:0!important}

/* ปุ่มสมัครงานฟรี: บรรทัดเล็กใต้ปุ่มในแผงรายละเอียด */
#app .d-apply-note{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:#64748b;text-align:right}

/* ตัวกรอง "ตำแหน่งงาน" (รายการแบบ f-chip ของสกิน 10/11): กล่องติ๊กเป็นวงกลมเหมือนช่องอื่น (ท่านคิวสั่ง 27 ต.ค. 2569 — รอบแรกแก้เฉพาะ .f-check ยังไม่ครบ) */
html.jv-native #app .filters .f-chip span:before{border-radius:50%}

/* หัวตัวกรองสูงเท่าเดิมเสมอ ไม่ว่าปุ่ม "ล้างตัวกรอง" จะขึ้นหรือหาย — ชื่อ "ตัวกรองงาน" ห้ามขยับ (ท่านคิวสั่ง 27 ต.ค. 2569) */
html.jv-native #app .filters .f-head{min-height:50px;box-sizing:border-box}
@media(min-width:1021px) and (max-width:1320px){
 html.jv-native #app .filters .f-head h3{font-size:13px}
 html.jv-native #app .filters .f-reset{font-size:10px;padding:1px 6px}
}

/* การ์ดงานแคบลง · แผงรายละเอียดงานกว้างขึ้น (ท่านคิวสั่ง 28 ต.ค. 2569 "เวอร์ชันคอมการ์ดกว้างไป")
   แผงขวาโตตามจอ: ≤1350 = 290px · 1500 ≈ 370px (ใกล้เดิม การ์ดไม่เบียด) · 1900+ = 480px (เดิม 370 · ลองแล้ว 560 ท่านคิวว่าใหญ่ไป)
   ตัวกรองซ้าย: 1500 = 210px เท่าเดิม · 1900 = 240px (เดิม 210 — ท่านคิวสั่งให้กว้างขึ้นนิดหน่อย) · สำรอง jobs-variants.css.before-widedetail.bak */
@media(min-width:1150px){
 html.jv-native #app .board-grid{max-width:1734px;margin-inline:auto}
 /* การ์ดแคบลง ชื่อจังหวัดยาว (กรุงเทพมหานคร) เคยโดนตัดกลางคำ → บีบช่องไฟในกล่องเงินเดือน/สถานที่ */
 html.jv-native #app .job .jc-info>div{padding:7px 6px;gap:5px}
 html.jv-native #app .job .jc-info b{overflow-wrap:normal}
 /* การ์ดแคบกว่า ~330px (จอ 1150–1900) กล่องเงินเดือน/สถานที่วางซ้อนกันแทนเคียงกัน ไม่งั้นชื่อจังหวัดขึ้นสองบรรทัด */
 html.jv-native #app .job{container-type:inline-size}
 @container (max-width:330px){html.jv-native #app .job .jc-info{grid-template-columns:minmax(0,1fr)!important;gap:6px!important}}
}
/* โครงหน้าตำแหน่งงานตามจอ (ท่านคิวสั่ง 30 ต.ค. 2569 ใช้ความกว้าง 1707px หรือซูม 90% เป็นต้นแบบ) แทนสูตร vw เดิมที่ทำให้การ์ดเล็ก/ใหญ่แกว่งตามจอ
   ต้นแบบ 1707px = ซ้าย 240 · การ์ดกลาง 3 คอลัมน์ ~295 · ขวา 470 · ซ้าย/ขวาค่อยๆ ลดเมื่อจอแคบ (ซ้าย ≥180 · ขวา ≥300) เพื่อรักษา 3 คอลัมน์การ์ด ~270–320
   จอ 1150–1404 = การ์ด 2 คอลัมน์ ~280–316 (พื้นที่ที่เหลือให้แผงขวา) · จอกว้างเกิน ~1785 = กรอบกลางกว้างสูงสุด 1734 ไม่ยืดการ์ด · ต่ำกว่า 1150 ใช้กฎเดิม (แผงขวาซ่อน)
   สำรองก่อนแก้: jobs-variants.5ffe3553.css.before-1707.bak · container 330px = การ์ดทุกใบวางกล่องเงินเดือน/สถานที่ซ้อนกันเหมือนต้นแบบ */
/* สเกลตามจอ (ท่านคิวสั่ง 30 ต.ค. 2569 ที่ 100% ให้ดูเหมือนซูม 90% ซึ่งเป็นแบบที่พอใจ): ย่อเฉพาะส่วนตำแหน่งงาน (.board) ด้วย zoom ให้ความกว้างที่ใช้จัดวางเท่าต้นแบบ 1707px
   จอ ≥1707 ไม่ย่อ · 1620–1706 ×.95 · 1536–1619 ×.90 · ต่ำกว่า 1536 ×.85 (ต่ำสุด ตัวอักษรเล็กสุด ~12.8px) · ค่าคอลัมน์ในกฎด้านล่างเป็นหน่วยก่อนย่อ (แสดงจริง = ×zoom) · จอ 1150–1229 ใช้การ์ด 2 คอลัมน์ */
@media(min-width:1707px){
  html.jv-native #app .board-grid{grid-template-columns:240px minmax(0,1fr) 470px}
  html.jv-native #app .job-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1620px) and (max-width:1706.98px){
  html.jv-native #app .board{zoom:0.95}
  html.jv-native #app .board-grid{grid-template-columns:240px minmax(0,1fr) 470px}
  html.jv-native #app .job-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1536px) and (max-width:1619.98px){
  html.jv-native #app .board{zoom:0.9}
  html.jv-native #app .board-grid{grid-template-columns:240px minmax(0,1fr) 470px}
  html.jv-native #app .job-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1450px) and (max-width:1535.98px){
  html.jv-native #app .board{zoom:0.85}
  html.jv-native #app .board-grid{grid-template-columns:240px minmax(0,1fr) 470px}
  html.jv-native #app .job-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1366px) and (max-width:1449.98px){
  html.jv-native #app .board{zoom:0.85}
  html.jv-native #app .board-grid{grid-template-columns:230px minmax(0,1fr) 420px}
  html.jv-native #app .job-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1280px) and (max-width:1365.98px){
  html.jv-native #app .board{zoom:0.85}
  html.jv-native #app .board-grid{grid-template-columns:200px minmax(0,1fr) 360px}
  html.jv-native #app .job-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1230px) and (max-width:1279.98px){
  html.jv-native #app .board{zoom:0.85}
  html.jv-native #app .board-grid{grid-template-columns:190px minmax(0,1fr) 320px}
  html.jv-native #app .job-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1150px) and (max-width:1229.98px){
  html.jv-native #app .board{zoom:0.85}
  html.jv-native #app .board-grid{grid-template-columns:190px minmax(0,1fr) 470px}
  html.jv-native #app .job-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* จอ 1100–1149 (เช่น 1366 ซูม 125%): แผงขวายังไม่ขึ้น (กดการ์ดเปิดลิ้นชักรายละเอียดตามเดิม) แต่ให้การ์ด 3 คอลัมน์ ~273–290 หน้าตาเดียวกับต้นแบบ แทนการ์ด 2 คอลัมน์กว้าง ~400 */
@media(min-width:1100px) and (max-width:1149.98px){
  html.jv-native #app .board-grid{grid-template-columns:200px minmax(0,1fr);gap:18px}
  html.jv-native #app .job-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  html.jv-native #app .job .jc-head h3{font-size:15px}
  html.jv-native #app .job .jc-body{padding:12px}
  html.jv-native #app .job .jc-info{gap:6px}
  html.jv-native #app .job .jc-foot{font-size:10px;gap:6px}
  html.jv-native #app .job .jc-info>div{min-width:0;padding:7px 6px;gap:5px}
  html.jv-native #app .job .jc-info b{font-size:12px;white-space:normal;overflow-wrap:normal}
  html.jv-native #app .job{container-type:inline-size}
  @container (max-width:330px){html.jv-native #app .job .jc-info{grid-template-columns:minmax(0,1fr)!important;gap:6px!important}}
}
/* ขอบ media ใช้ .98 เพราะซูมเบราว์เซอร์ทำให้ความกว้างเป็นทศนิยม (เช่น 1149.5) ถ้าเขียน max-width:1149px จะเกิดช่องว่างที่ไม่มีกฎไหนทำงาน */