/* ใบสมัครงานออนไลน์ + หน้าดูผล (2/11/2569 HR-AI) — มือถือก่อน ขั้นละเรื่อง · ธีมสว่างแบบเมนูพนักงานที่เจ้าของออกแบบ (พื้นสว่าง วงกลมแดง) */
:root{
  color-scheme: light;
  --bg:#f7f5f6; --card:#ffffff; --ink:#2b1e21; --muted:#76666a; --line:#eadde0;
  --red:#c8161d; --red-deep:#8e1b22; --pink:#fbe8ea; --pink-2:#f3cfd4;
  --ok:#1d7a46; --ok-bg:#e5f3eb; --warn:#8a5200; --warn-bg:#fff3dc;
  --font:'Prompt','Noto Sans Lao',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-card:18px; --r-ctl:14px;
  --t-xs:.8rem; --t-sm:.92rem; --t-md:1.05rem; --t-lg:1.3rem; --t-xl:1.65rem;
}
*{box-sizing:border-box}
html:lang(lo) body{line-height:1.7}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.55;
  background-image:radial-gradient(60rem 30rem at -10% -10%, #fde3e6 0%, rgba(253,227,230,0) 60%);
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:18px 40px; min-height:100vh;
}
.wrap{display:grid; justify-content:center; grid-template-columns:minmax(0,460px)}
.app{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:0 10px 30px rgba(142,27,34,.08); overflow:hidden; min-width:0}
.top{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.logo{width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-weight:700;
  background:radial-gradient(circle at 30% 25%, #e8434a, var(--red) 55%, var(--red-deep)); letter-spacing:.02em}
.top h1{margin:0; font-size:var(--t-md); line-height:1.2}
.top small{display:block; color:var(--muted); font-size:var(--t-xs); font-weight:400}
.langs{margin-left:auto; display:flex; background:var(--pink); border-radius:999px; padding:3px}
.langs button{border:0; background:transparent; font:inherit; font-size:var(--t-sm); padding:6px 12px; border-radius:999px; color:var(--red-deep); cursor:pointer; min-height:36px}
.langs button[aria-pressed="true"]{background:var(--red); color:#fff}
.body{padding:18px 16px 20px; display:flex; flex-direction:column; gap:18px}
.prog{display:flex; flex-direction:column; gap:6px}
.prog .bar{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.prog .bar i{height:6px; border-radius:6px; background:var(--pink)}
.prog .bar i.on{background:var(--red)}
.prog span{font-size:var(--t-xs); color:var(--muted)}
h2{margin:0; font-size:var(--t-xl); line-height:1.25; text-wrap:balance}
.sub{margin:-10px 0 0; color:var(--muted); font-size:var(--t-sm)}
.q{display:flex; flex-direction:column; gap:8px}
.q > label, .q > .lab, .lab{font-weight:600; font-size:var(--t-md)}
.opt{font-weight:400; color:var(--muted); font-size:var(--t-sm)}
input[type=text], input[type=tel], select{
  width:100%; font:inherit; font-size:1.1rem; color:var(--ink); background:#fff; border:1.5px solid var(--line);
  border-radius:var(--r-ctl); padding:12px 14px; min-height:52px; outline:none}
input:focus, select:focus{border-color:var(--red); box-shadow:0 0 0 3px rgba(200,22,29,.12)}
.row3{display:grid; grid-template-columns:1fr 1.4fr 1.2fr; gap:8px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1.5px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-size:1.02rem; border-radius:999px; padding:10px 16px; min-height:48px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#fff}
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.tile{border:1.5px solid var(--line); background:#fff; border-radius:16px; padding:14px 10px; min-height:104px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:1rem; color:var(--ink); cursor:pointer; text-align:center}
.tile.site{min-height:76px}
.tile svg{width:38px; height:38px; stroke:var(--red-deep); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tile .ic{width:58px; height:58px; border-radius:50%; background:var(--pink); display:grid; place-items:center}
.tile[aria-pressed="true"]{border-color:var(--red); box-shadow:0 0 0 3px rgba(200,22,29,.14)}
.tile[aria-pressed="true"] .ic{background:var(--red)}
.tile[aria-pressed="true"] svg{stroke:#fff}
.tile small{color:var(--muted); font-size:var(--t-xs)}
/* 3/11/2569 ขับรถแยกตามชนิดรถ: กดปุ่ม "ขับรถ · เครื่องจักร" แล้วเลือกรถจากรูป (assets/apply-job-pics.js) */
.kindbar{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.kindbar b{font-size:var(--t-md)}
.kindback{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:6px 12px; font:inherit; font-size:var(--t-xs); color:var(--red-deep); cursor:pointer; white-space:nowrap}
.tiles.pics{margin-top:8px}
.tile.pic{min-height:0; padding:8px 8px 10px; gap:6px; justify-content:flex-start; line-height:1.3}
.tile.pic .art{display:block; width:100%; border-radius:12px; background:#f6f7f9}
.tile.pic .art svg{display:block; width:100%; height:auto; stroke:none}
.tile.pic[aria-pressed="true"] .art{background:#fdecec}
.err{color:var(--red); font-size:var(--t-sm); display:none}
.bad .err{display:block}
.bad input, .bad select{border-color:var(--red); background:#fff7f7}
.bad .chips, .bad .tiles, .bad .shot{outline:2px dashed rgba(200,22,29,.45); outline-offset:4px; border-radius:12px}
.note{font-size:var(--t-sm); color:var(--muted)}
.okline{color:var(--ok); font-size:var(--t-sm)}
.miss{background:#fff1f1; color:var(--red-deep); border:1px solid #f4c7ca; border-radius:12px; padding:10px 12px; font-size:var(--t-sm)}
.age{display:inline-block; background:var(--ok-bg); color:var(--ok); border-radius:999px; padding:2px 12px; font-size:var(--t-sm); width:max-content}
.shot{display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; align-items:center; border:1.5px dashed var(--pink-2); border-radius:16px; padding:10px; background:#fffafa}
.shot .pic{width:92px; height:92px; border-radius:12px; background:var(--pink); display:grid; place-items:center; overflow:hidden}
.shot .pic img{width:100%; height:100%; object-fit:cover}
.shot .pic svg{width:40px; height:40px; stroke:var(--red-deep); fill:none; stroke-width:1.6}
.shot b{display:block; font-size:var(--t-md)}
.shot .hint{display:block; color:var(--muted); font-size:var(--t-xs); margin-bottom:6px}
.pickbtn{display:inline-flex; align-items:center; gap:8px; border:0; background:var(--red); color:#fff; font:inherit; font-size:var(--t-sm); border-radius:999px; padding:8px 14px; min-height:42px; cursor:pointer}
.pickbtn.alt{background:var(--pink); color:var(--red-deep)}
.vis{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--pink); border-radius:14px; padding:4px}
.seg button{border:0; background:transparent; font:inherit; font-size:var(--t-sm); padding:10px; border-radius:10px; color:var(--red-deep); min-height:44px; cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.08)}
.stepper{display:flex; align-items:center; gap:12px}
.stepper button{width:48px; height:48px; border-radius:50%; border:0; background:var(--pink); color:var(--red-deep); font:inherit; font-size:1.4rem; cursor:pointer}
.stepper output{font-size:1.3rem; font-weight:600; min-width:70px; text-align:center}
.actions{display:flex; gap:10px; margin-top:4px}
.btn{flex:1; border:0; border-radius:999px; font:inherit; font-size:1.12rem; font-weight:600; min-height:56px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; padding:0 18px}
.btn.main{background:linear-gradient(135deg, #e0333a, var(--red) 55%, var(--red-deep)); color:#fff; box-shadow:0 8px 18px rgba(200,22,29,.25)}
.btn.ghost{background:var(--pink); color:var(--red-deep); flex:0 0 auto}
.btn.full{flex:1}
.btn[disabled]{opacity:.65; cursor:progress}
.saved{font-size:var(--t-xs); color:var(--muted); text-align:center}
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{outline:3px solid rgba(200,22,29,.45); outline-offset:2px}
.hero{display:flex; flex-direction:column; gap:10px}
.hero p{margin:0; color:var(--muted)}
.bigl{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.bigl button{border:1.5px solid var(--line); background:#fff; border-radius:16px; min-height:64px; font:inherit; font-size:1.2rem; cursor:pointer; color:var(--ink)}
.bigl button[aria-pressed="true"]{border-color:var(--red); background:var(--pink); color:var(--red-deep); font-weight:600}
.prep{background:var(--bg); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:6px}
.prep b{font-size:var(--t-sm)}
.prep li{font-size:var(--t-sm)}
.prep ul{margin:0; padding-left:20px}
.resume{background:var(--ok-bg); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px}
.resume .actions{margin:0}
.rev{border:1px solid var(--line); border-radius:14px; overflow:hidden}
.rev header{display:flex; justify-content:space-between; align-items:center; background:var(--bg); padding:8px 12px; font-weight:600; font-size:var(--t-sm)}
.rev header button{border:0; background:transparent; color:var(--red); font:inherit; font-size:var(--t-sm); cursor:pointer; min-height:36px}
.rev dl{margin:0; padding:8px 12px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; font-size:var(--t-sm)}
.rev dt{color:var(--muted)}
.rev dd{margin:0; overflow-wrap:anywhere}
.consent{border:1.5px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px}
.consent label{display:flex; gap:12px; align-items:flex-start; font-size:var(--t-sm); cursor:pointer}
.consent input{width:26px; height:26px; flex:none; accent-color:var(--red); margin-top:2px}
.consent details{font-size:var(--t-xs); color:var(--muted)}
.consent summary{cursor:pointer; color:var(--red)}
.done{display:flex; flex-direction:column; gap:14px; align-items:stretch; text-align:center}
.tick{width:84px; height:84px; border-radius:50%; margin:6px auto 0; background:var(--ok-bg); display:grid; place-items:center}
.tick svg{width:44px; height:44px; stroke:var(--ok); fill:none; stroke-width:2.4}
.appno{font-size:2rem; font-weight:700; letter-spacing:.08em; color:var(--red-deep); font-variant-numeric:tabular-nums}
.tl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; text-align:left}
.tl li{display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:center; font-size:var(--t-sm)}
.tl li span{width:32px; height:32px; border-radius:50%; background:var(--pink); color:var(--red-deep); display:grid; place-items:center; font-weight:600}
.tl li.now span{background:var(--red); color:#fff}
.tl li.ok span{background:var(--ok); color:#fff}
.center{text-align:center}
.spin{width:36px; height:36px; border-radius:50%; border:4px solid var(--pink); border-top-color:var(--red); margin:24px auto; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status{border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px}
.status.received{background:var(--warn-bg); color:var(--warn)}
.status.interview, .status.interview_done{background:#e8f0fb; color:#1f4f8f}
.status.passed{background:var(--ok-bg); color:var(--ok)}
.status.not_passed{background:var(--bg); color:var(--ink)}
.status b{font-size:var(--t-lg); line-height:1.3}
.status p{margin:0; font-size:var(--t-sm)}
.foot{margin:16px auto 0; max-width:460px; text-align:center; font-size:var(--t-xs); color:var(--muted)}
.foot a{color:var(--red-deep)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto!important} .spin{animation:none} }