/* ===== หน้าติดต่อเรา + สมัครตัวแทน (contact.php) ===== */
.ct-layout{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
@media(max-width:820px){.ct-layout{grid-template-columns:1fr}}

.ct-main{border:1px solid var(--line);border-radius:10px;padding:24px}
.ct-tabs{display:flex;gap:8px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.ct-tab{appearance:none;background:none;border:none;font-family:'Kanit';font-size:15px;font-weight:500;
  color:var(--muted);padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s}
.ct-tab:hover{color:#333}
.ct-tab.act{color:var(--red);border-bottom-color:var(--red)}

.ct-form{display:grid;gap:16px;max-width:560px}
.ct-field label{display:block;font-family:'Kanit';font-size:14px;font-weight:500;color:#333;margin-bottom:6px}
.ct-field .req{color:var(--red)}
.ct-field .ct-hint{font-weight:400;color:var(--muted);font-size:12.5px}
.ct-field input[type=text],.ct-field input[type=tel],.ct-field input[type=email],
.ct-field select,.ct-field textarea{width:100%;background:#fff;border:1px solid var(--line);
  padding:11px 13px;border-radius:6px;font-family:'Kanit';font-size:15px;color:#333;transition:border-color .15s}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{outline:none;border-color:var(--red)}
.ct-field textarea{min-height:120px;resize:vertical}
/* อัปโหลดรูป — กล่องเส้นประแทนปุ่ม Choose File ของเบราว์เซอร์ */
.ct-field .ct-drop{position:relative;display:flex;align-items:center;gap:14px;margin:0;padding:16px 18px;border:1.5px dashed #d4d5db;border-radius:10px;
  background:var(--soft);cursor:pointer;transition:border-color .18s,background .18s;font-weight:400}
.ct-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ct-drop:hover,.ct-drop.drag{border-color:var(--red);background:color-mix(in srgb,var(--red) 5%,#fff)}
.ct-drop:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,0,79,.12)}
.ct-drop-ic{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--red);
  box-shadow:0 2px 8px rgba(0,0,0,.06);transition:.18s}
.ct-drop-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-drop:hover .ct-drop-ic,.ct-drop.drag .ct-drop-ic{background:var(--red);color:#fff}
.ct-drop-t{font-family:'Kanit';font-size:14px;color:#555;line-height:1.45}
.ct-drop-t b{color:var(--red);font-weight:500}
.ct-drop-t small{display:block;color:var(--muted);font-size:12px}
.ct-drop[hidden],.ct-file[hidden]{display:none}
.ct-file{display:flex;align-items:center;gap:12px;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.ct-file img{width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--soft);flex:none}
.ct-file-i{min-width:0;flex:1;font-family:'Kanit'}
.ct-file-i b{display:block;font-weight:500;font-size:14px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-file-i small{font-size:12px;color:var(--muted)}
.ct-file.err{border-color:var(--red)}
.ct-file.err small{color:var(--red)}
.ct-file button{width:32px;height:32px;flex:none;border:none;border-radius:50%;background:var(--soft);color:#777;cursor:pointer;font-size:13px;transition:.15s}
.ct-file button:hover{background:var(--red);color:#fff}

.ct-checks{display:flex;flex-direction:column;gap:10px}
.ct-checks label{display:flex;align-items:center;gap:11px;font-family:'Kanit';font-size:14.5px;font-weight:400;
  color:#333;margin:0;cursor:pointer}
.ct-checks input{width:16px;height:16px;accent-color:var(--c,var(--red));flex:none}
/* ไอคอนหมวดแบบ mega menu: badge เทา → ติ๊กแล้วเป็นสีหมวด + pop (feedback UI เดียวกัน) */
.ct-checks .ct-ib{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  flex:none;color:#9a9ba2;background:#f0f1f3;transition:background .18s,color .18s}
.ct-checks .ct-ib svg{width:20px;height:20px}
.ct-checks label:hover .ct-ib{color:var(--c,var(--red));background:color-mix(in srgb,var(--c,var(--red)) 11%,#fff)}
.ct-checks label:has(input:checked) .ct-ib{color:#fff;background:var(--c,var(--red));
  animation:mtabPop .3s cubic-bezier(.34,1.56,.64,1)}

.ct-consent{display:flex;align-items:flex-start;gap:9px;font-family:'Kanit';font-size:14px;color:#555;cursor:pointer}
.ct-consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--red);flex:none}
.ct-consent a{color:var(--red)}
.ct-note{font-size:13.5px;color:var(--muted);margin:0}

.ct-submit{justify-content:center;width:max-content;padding:11px 30px}

.ct-alert{border-radius:8px;padding:14px 16px;margin-bottom:20px;font-size:14.5px;line-height:1.6}
.ct-alert.ok{background:#e8f7ee;border:1px solid #9bd8b3;color:#186a38}
.ct-alert.err{background:#fdeaef;border:1px solid #f0aec2;color:#a01840}

.ct-info{position:sticky;top:90px}