@font-face{font-family:'Phetsarath OT';src:url('fonts/phetsarath.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ───── ธีมสีตามโลโก้ ONE JOBS (น้ำเงิน #152D91 + แดง #A20408) ───── */
:root{
  --blue:#152D91; --blue-dk:#0d1f6e; --blue-lt:#2a48b8; --blue-pale:#e9edfa;
  --red:#a20408;  --red-lt:#c8161c;  --red-pale:#fdeaea;
  /* พื้นหลังเทาอมฟ้าเข้มขึ้นเล็กน้อย เพื่อให้การ์ดขาวและตัวหนังสือดำเด้งออกมา */
  --bg:#e4e9f4; --card:#fff; --ink:#0d1526; --muted:#55617e; --line:#c9d3e6;
  --accent:var(--blue);
  --ok:#0f7a48; --warn:#b26b00; --bad:var(--red);
  --okbg:#e7f6ee; --badbg:var(--red-pale); --warnbg:#fff4e0; --infobg:var(--blue-pale);
}
html,body{margin:0;padding:0}
body{
  font-family:'Phetsarath OT','Noto Sans Lao','Leelawadee UI','Microsoft YaHei',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);font-size:19px;line-height:1.78;padding:0 0 10px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ───── โครงหน้าจอ: ออกแบบสำหรับมือถือ ───── */
/* บนคอมจะยังเป็นคอลัมน์แคบกลางจอ เหมือนดูบนมือถือ */
.wrap{max-width:480px;margin:0 auto;padding:14px 14px 28px}
.wrap.wide{max-width:1280px}
.phone{max-width:480px;margin:0 auto;background:var(--card);min-height:100vh;box-shadow:0 0 44px rgba(16,26,64,.13)}

/* ───── หัวเรื่อง ───── */
header.bar{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dk) 100%);
  color:#fff;padding:13px 14px;border-bottom:4px solid var(--red);
  position:relative;z-index:10
}
header.bar .inner{max-width:480px;margin:0 auto;display:flex;align-items:center;gap:11px}
header.bar.wide .inner{max-width:1280px}
header.bar h1{font-size:21px;margin:0;font-weight:800;line-height:1.35}
header.bar .sub{font-size:14.5px;opacity:.92;display:block;font-weight:400;line-height:1.45}
header.bar .who{font-size:14px;opacity:.95}
header.bar .logo{height:42px;width:42px;border-radius:10px;background:#fff;padding:3px;object-fit:contain;flex:none}
.brand{font-weight:800;letter-spacing:.5px;font-size:15px}

/* ───── การ์ด ───── */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 16px;margin:0 0 13px;box-shadow:0 2px 6px rgba(16,28,64,.07)}
.card h2{font-size:21px;margin:0 0 5px;color:var(--blue);font-weight:800;letter-spacing:.2px}
.card .hint{color:var(--muted);font-size:15.5px;margin:0 0 10px;line-height:1.65}

/* ───── ช่องกรอก — ตัวหนังสือใหญ่ เข้ม อ่านชัดกลางแดด ───── */
label{display:block;font-size:17px;font-weight:700;color:#28324d;margin:16px 0 6px;line-height:1.5}
label .req{color:var(--red-lt);font-weight:800}
input,select,textarea{
  width:100%;padding:14px;font-size:19px;font-weight:600;font-family:inherit;
  border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  -webkit-appearance:none;appearance:none
}
input::placeholder,textarea::placeholder{color:#8e99b4;font-weight:400}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236d7893' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:42px}
textarea{min-height:90px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-pale)}
input.bad,select.bad{border-color:var(--red-lt);background:#fffafa}
input[type=date]{min-height:52px}

/* ───── ปุ่ม ───── */
button{
  width:100%;padding:16px;font-size:19px;font-family:inherit;font-weight:800;
  border:0;border-radius:13px;background:var(--blue);color:#fff;cursor:pointer;margin-top:12px;letter-spacing:.3px
}
button:active{transform:translateY(1px)}
button.ghost{background:#eef1f8;color:var(--blue);border:1.5px solid var(--line)}
button.go{background:var(--red)}
button.go:disabled{background:var(--muted)}
button.sm{width:auto;padding:10px 16px;font-size:15px;margin:0}
button.tiny{width:auto;padding:7px 13px;font-size:14px;margin:0}
button:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:140px}
.row.tight>*{min-width:0}

/* แถบปุ่มติดขอบล่าง — นิ้วโป้งกดถึงเสมอ */
.actions{
  position:sticky;bottom:0;margin:14px -16px -17px;padding:11px 16px 14px;
  background:var(--card);border-top:1px solid var(--line);
  border-radius:0 0 16px 16px;z-index:6
}
.actions button{margin-top:0}

/* ───── ตัวเลือกแบบแท็ก ───── */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 2px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:2px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink);font-size:18px;font-weight:600;cursor:pointer;user-select:none;flex:none;max-width:100%
}
.chip input{display:none}
.chip.on{border-color:var(--blue);background:var(--blue-pale);color:var(--blue);font-weight:700;box-shadow:inset 0 0 0 1px var(--blue)}
/* กล่องติ๊กเต็มบรรทัด ข้อความยาวตัดบรรทัดเอง ไม่ดันจอให้เลื่อนข้าง */
.chip.block{width:100%;align-items:flex-start;text-align:left;line-height:1.6;white-space:normal}
.chip.block span{flex:1;min-width:0}
/* ช่องติ๊กที่มองเห็นได้จริง — ผู้สมัครต้องรู้ว่าอันนี้กดติ๊กได้ */
.chip.block::before,.chip.check::before{
  content:'';flex:none;width:23px;height:23px;border:2px solid #bcc6dd;border-radius:7px;background:#fff
}
.chip.block::before{margin-top:3px}
.chip.block.on::before,.chip.check.on::before{
  border-color:var(--blue);background:var(--blue) no-repeat center/15px
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>")
}
.chip.day{flex-direction:column;gap:0;padding:9px 13px;text-align:center;line-height:1.25;min-width:56px}
.chip.day b{font-size:23px;font-weight:800}
.chip.day span{font-size:13px;color:var(--muted);font-weight:600}
.chip.day.on span{color:var(--blue)}

/* ───── รูป ───── */
.shots{display:flex;gap:10px;flex-wrap:wrap}
.shot{flex:1;min-width:140px}
.drop{
  position:relative;border:2px dashed #c6cfe2;border-radius:15px;background:#f7f9fd;
  aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;text-align:center;padding:10px;cursor:pointer;overflow:hidden
}
.drop.wide{aspect-ratio:4/3}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .ico{font-size:32px;line-height:1}
.drop .cap{font-size:16px;font-weight:600;color:#3c4866;line-height:1.45}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop.has{border-style:solid;border-color:var(--ok);background:#fff}
.drop .redo{position:absolute;right:7px;bottom:7px;background:rgba(10,16,30,.8);color:#fff;border-radius:9px;padding:5px 11px;font-size:13px;font-weight:700}
.drop .busy{position:absolute;inset:0;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--blue)}

/* ───── ข้อความแจ้ง ───── */
.msg{padding:13px 15px;border-radius:12px;margin:12px 0;font-size:17px;font-weight:700;display:none;line-height:1.6}
.msg.show{display:block}
.msg.ok{background:var(--okbg);color:var(--ok)}
.msg.err{background:var(--badbg);color:var(--red);border-left:4px solid var(--red)}
.msg.info{background:var(--infobg);color:var(--blue)}
.msg.warn{background:var(--warnbg);color:var(--warn)}
.note{background:var(--infobg);color:var(--blue);border-radius:12px;padding:13px 15px;font-size:16.5px;font-weight:600;margin:0 0 13px;border-left:4px solid var(--blue)}

/* ───── แถบขั้นตอน (ติดบนจอ) ───── */
.bar-steps{position:sticky;top:0;z-index:9;background:var(--bg);padding:12px 0 9px;margin:0 0 4px;box-shadow:0 8px 10px -8px rgba(16,28,64,.18)}
.steps{display:flex;gap:5px}
.steps i{flex:1;height:7px;border-radius:5px;background:#d3dae9;transition:background .25s}
.steps i.on{background:var(--blue)}
.steps i.done{background:var(--red)}
.stepno{font-size:15px;color:#3c4866;margin:7px 0 0;font-weight:700;letter-spacing:.3px}

/* ───── หน้าสำเร็จ ───── */
.done{text-align:center;padding:12px 4px}
.done .tick{font-size:58px;line-height:1}
.done h2{font-size:21px}
.done .code{
  font-size:33px;font-weight:800;letter-spacing:3px;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  border-radius:14px;padding:14px;margin:14px 0;border-bottom:4px solid var(--red)
}

/* ───── ตาราง (หลังบ้าน) ───── */
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--blue-pale);color:var(--blue);font-weight:800;font-size:15px;position:sticky;top:0;z-index:1}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f6f8fd}
tbody tr.sel{background:var(--blue-pale)}
.scroll{overflow:auto;max-height:68vh;border:1px solid var(--line);border-radius:14px;background:var(--card)}
/* ตารางหลังบ้าน: คอลัมน์ 1 ติ๊ก · 2 รหัส · 3 ชื่อ · 4 เพศ/อายุ · 5 เบอร์ · 6 เมือง
   · 7 ว่าง · 8 ขั้นตอน · 9 ป้าย/ทีม · 10 ธง · 11 สมัครเมื่อ */
.scroll table{min-width:1040px}
.scroll td:nth-child(2),.scroll td:nth-child(4),.scroll td:nth-child(5),
.scroll td:nth-child(6),.scroll td:nth-child(7),.scroll td:nth-child(8),.scroll td:last-child{white-space:nowrap}
.scroll td:nth-child(3){min-width:180px}
.scroll td:nth-child(9),.scroll td:nth-child(10){min-width:160px}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:14px;font-weight:700;margin:2px 3px 2px 0;white-space:nowrap}
.tag.g{background:var(--okbg);color:var(--ok)}
.tag.r{background:var(--red-pale);color:var(--red)}
.tag.y{background:var(--warnbg);color:var(--warn)}
.tag.b{background:var(--blue-pale);color:var(--blue)}
.tag.n{background:#eceff5;color:var(--muted)}
.stats{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 13px}
.stat{flex:1;min-width:104px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;cursor:pointer}
.stat.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-pale)}
.stat .n{font-size:27px;font-weight:800;line-height:1.2;color:var(--blue)}
.stat .t{font-size:14px;color:var(--muted)}
.stat.ok .n{color:var(--ok)}.stat.bad .n{color:var(--red)}.stat.warn .n{color:var(--warn)}

/* ───── รายละเอียดผู้สมัคร ───── */
.cols{display:flex;gap:14px;align-items:flex-start}
.cols .left{flex:1.7;min-width:0}
.cols .right{flex:1;min-width:0;position:sticky;top:14px}
@media(max-width:900px){.cols{flex-direction:column}.cols .right{position:static;width:100%}}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:16.5px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted);flex:none}
.kv b{font-weight:700;text-align:right;word-break:break-word}
.pics{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0}
.pics a{flex:1;min-width:118px}
.pics img{width:100%;border-radius:12px;border:1px solid var(--line);display:block;background:#eceff5}
.lightbox{position:fixed;inset:0;background:rgba(8,12,22,.93);z-index:50;display:none;align-items:center;justify-content:center;padding:16px}
.lightbox.show{display:flex}
.lightbox img{max-width:100%;max-height:92vh;border-radius:10px}
.muted{color:var(--muted);font-size:15.5px}
.hide{display:none!important}
a.link{color:var(--blue);font-weight:700;text-decoration:none}
.foot{text-align:center;font-size:13px;color:var(--muted);padding:18px 10px}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.toolbar input,.toolbar select{width:auto;flex:1;min-width:150px;padding:11px 12px;font-size:16px}

/* ───── ກ່ອງລາຍລະອຽດວຽກ ແລະ ເງື່ອນໄຂ (ພັບໄດ້) ───── */
.jd{padding:0;overflow:hidden}
.jd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:0;padding:15px 16px;font-family:inherit;font-size:19px;font-weight:800;
  color:var(--blue);text-align:left;cursor:pointer;line-height:1.5}
.jd-arrow{font-size:17px;color:var(--red)}
.jd-body{padding:4px 16px 16px;border-top:2px solid var(--line)}
.jd-body h3{margin:16px 0 6px;font-size:19px;font-weight:800;color:var(--blue);line-height:1.5}
.jd-body h3:first-child{margin-top:10px}
.jd-body p{margin:4px 0;padding-left:15px;position:relative;font-size:18px;line-height:1.7}
.jd-body p::before{content:'';position:absolute;left:2px;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--red)}
.jd-body b{font-weight:800;color:var(--red)}