/* ============================================================
   SPU CONFERENCE 2027 — Stylesheet
   Fonts: Kanit (display) / Prompt (UI) / Sarabun (body)
   ============================================================ */
:root{
  --navy:       #0A1F44;
  --navy-2:     #10294F;
  --navy-soft:  #16305C;
  --pink:       #EC1B67;
  --pink-dark:  #C90F53;
  --pink-soft:  #FDE8F0;
  --ink:        #1B2A4A;
  --muted:      #5B6B8C;
  --line:       #E6EAF2;
  --bg:         #F5F7FB;
  --white:      #FFFFFF;
  --radius:     14px;
  --shadow:     0 10px 30px rgba(10,31,68,.10);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Sarabun', sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.65;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Kanit', sans-serif; line-height:1.25; }
.container{ width:min(1280px, 92%); margin-inline:auto; }

/* ---------- Header ---------- */
.site-header{
  background:var(--white);
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 12px rgba(10,31,68,.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px 0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{
  font-family:'Kanit', sans-serif; font-weight:800; font-size:30px;
  color:var(--pink); letter-spacing:1px;
}
.brand-text{ line-height:1.1; }
.brand-text .t1{
  font-family:'Prompt', sans-serif; font-weight:700; font-size:17px;
  color:var(--navy); letter-spacing:2px;
}
.brand-text .t2{
  font-family:'Prompt', sans-serif; font-size:10px; letter-spacing:3px;
  color:var(--muted); text-transform:uppercase;
}
.main-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.main-nav a{
  font-family:'Prompt', sans-serif; font-size:15px; color:var(--ink);
  padding:6px 0; border-bottom:2px solid transparent; transition:.2s;
}
.main-nav a:hover{ color:var(--pink); }
.main-nav a.active{ color:var(--pink); border-bottom-color:var(--pink); font-weight:500; }
.header-actions{ display:flex; gap:10px; }
.btn{
  font-family:'Prompt', sans-serif; font-size:15px; font-weight:500;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:10px; border:1.5px solid transparent;
  cursor:pointer; transition:.2s;
}
.btn-outline{ border-color:var(--line); background:var(--white); color:var(--navy); }
.btn-outline:hover{ border-color:var(--navy); }
.btn-pink{ background:var(--pink); color:#fff; box-shadow:0 6px 16px rgba(236,27,103,.35); }
.btn-pink:hover{ background:var(--pink-dark); }
.btn-ghost{
  background:rgba(255,255,255,.08); color:#fff;
  border-color:rgba(255,255,255,.35); backdrop-filter:blur(4px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.18); }
.btn svg{ width:18px; height:18px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background:
    linear-gradient(100deg, rgba(8,22,52,.96) 0%, rgba(10,31,68,.88) 42%, rgba(10,31,68,.35) 75%, rgba(10,31,68,.15) 100%),
    linear-gradient(215deg, #1d3a75 0%, #0A1F44 55%, #071633 100%);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 82% 30%, rgba(76,124,220,.35), transparent 42%),
    radial-gradient(circle at 68% 85%, rgba(236,27,103,.22), transparent 38%),
    radial-gradient(circle at 95% 70%, rgba(255,176,64,.18), transparent 30%);
}
/* เส้นตารางอาคารกระจก (แทนภาพถ่าย) */
.hero::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:55%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px);
  mask-image:linear-gradient(90deg, transparent, #000 40%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 40%);
}
.hero-inner{ position:relative; z-index:2; padding:46px 0 68px; max-width:640px; }
.hero-eyebrow{
  font-family:'Prompt', sans-serif; font-weight:600; letter-spacing:3px;
  color:var(--pink); font-size:15px;
}
.hero-title{
  font-size:clamp(34px, 4.6vw, 54px); font-weight:800; margin:6px 0 2px;
  letter-spacing:1px;
}
.hero-subtitle{
  font-family:'Prompt', sans-serif; font-weight:400;
  font-size:clamp(18px, 2.2vw, 24px); color:#EAF0FF;
}
.hero-rule{ width:56px; height:4px; background:var(--pink); border-radius:2px; margin:14px 0; }
.hero-desc{ font-size:17px; color:#C9D4EA; max-width:460px; }
.hero-announce{
  display:flex; align-items:center; gap:18px; margin:30px 0 34px;
}
.announce-icon{
  width:64px; height:64px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3); display:grid; place-items:center;
  background:rgba(255,255,255,.06); flex:none;
}
.announce-icon svg{ width:28px; height:28px; color:var(--pink); }
.hero-announce .a1{ font-family:'Prompt', sans-serif; font-size:16px; color:#DCE5F5; }
.hero-announce .a2{ font-family:'Prompt', sans-serif; font-size:20px; font-weight:600; color:#fff; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-cta .btn{ padding:14px 26px; font-size:16px; border-radius:12px; }

/* ---------- Important dates ---------- */
.dates-wrap{ margin-top:22px; position:relative; z-index:5; }
.dates-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  display:grid; grid-template-columns:200px repeat(5, 1fr);
  align-items:center; padding:26px 28px; gap:8px;
}
.dates-head .h1{
  font-family:'Kanit', sans-serif; font-weight:700; font-size:21px; color:var(--navy);
}
.dates-head .h2{
  font-family:'Prompt', sans-serif; font-size:11px; letter-spacing:2px;
  color:var(--pink); font-weight:600;
}
.date-item{
  display:flex; align-items:center; gap:14px; padding:6px 18px;
  border-left:1px solid var(--line);
}
.date-icon{
  width:52px; height:52px; border-radius:50%; flex:none;
  border:1.5px solid #F5B8CE; color:var(--pink);
  display:grid; place-items:center; background:#fff;
}
.date-icon svg{ width:24px; height:24px; }
.date-item .d1{ font-size:14px; color:var(--muted); font-family:'Sarabun',sans-serif; }
.date-item .d2{ font-family:'Prompt', sans-serif; font-weight:600; font-size:18px; color:var(--navy); }

/* ---------- Quick access ---------- */
.quick-wrap{ margin-top:26px; }
.quick-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; align-items:center; gap:14px;
  padding:22px 20px;
}
.quick-head{ flex:0 0 150px; }
.quick-head .h1{ font-family:'Kanit',sans-serif; font-weight:700; font-size:20px; color:var(--navy); }
.quick-head .h2{ font-family:'Prompt',sans-serif; font-size:11px; letter-spacing:2px; color:var(--pink); font-weight:600; }
/* ปรับความกว้างอัตโนมัติตามขนาดจอ/จำนวนเมนู */
.quick-items{
  flex:1; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(105px, 1fr));
  gap:4px;
}
.quick-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:12px 6px; border:none; background:none; cursor:pointer;
  border-left:1px solid var(--line);
  color:var(--navy); transition:.2s; border-radius:8px;
}
.quick-item svg{ width:34px; height:34px; color:var(--navy); transition:.2s; }
.quick-item span{ font-family:'Sarabun',sans-serif; font-size:14px; text-align:center; line-height:1.35; }
.quick-item:hover{ background:var(--pink-soft); }
.quick-item:hover svg{ color:var(--pink); }
.quick-item:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }
.quick-item.is-active{ background:var(--pink-soft); }
.quick-item.is-active svg{ color:var(--pink); }
.quick-item.is-active span{ color:var(--pink); font-weight:600; }

/* กล่องข้อความใต้เมนูด่วน */
.quick-detail{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  border-top:4px solid var(--pink);
  margin-top:14px; padding:26px 32px;
  animation:qdFade .25s ease;
}
@keyframes qdFade{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.quick-detail-head{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.quick-detail-icon{
  width:44px; height:44px; border-radius:50%; flex:none;
  border:1.5px solid #F5B8CE; color:var(--pink);
  display:grid; place-items:center;
}
.quick-detail-icon svg{ width:22px; height:22px; }
.quick-detail-head h3{
  font-family:'Kanit',sans-serif; font-weight:600; font-size:21px; color:var(--navy);
  flex:1;
}
.quick-detail-close{
  border:none; background:none; cursor:pointer;
  font-size:26px; line-height:1; color:var(--muted);
  padding:4px 8px; border-radius:8px; transition:.2s;
}
.quick-detail-close:hover{ color:var(--pink); background:var(--pink-soft); }
.quick-detail p{ font-family:'Sarabun',sans-serif; color:var(--ink); }

/* ---------- Stats ---------- */
.stats-wrap{ margin:26px 0 60px; }
.stats-card{
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius:var(--radius); box-shadow:var(--shadow); color:#fff;
  display:grid; grid-template-columns:repeat(5,1fr); padding:30px 24px;
}
.stat-item{
  display:flex; align-items:center; gap:16px; justify-content:center;
  border-left:1px solid rgba(255,255,255,.15); padding:6px 12px;
}
.stat-item:first-child{ border-left:none; }
.stat-icon{
  width:56px; height:56px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3); display:grid; place-items:center; flex:none;
}
.stat-icon svg{ width:26px; height:26px; color:#fff; }
.stat-item .v{ font-family:'Kanit',sans-serif; font-weight:700; font-size:28px; color:var(--pink); line-height:1.1; }
.stat-item .l{ font-size:14px; color:#D5DEF0; font-family:'Sarabun',sans-serif; }

/* ---------- Generic content page ---------- */
.page-head{
  background:linear-gradient(110deg, var(--navy), var(--navy-soft));
  color:#fff; padding:56px 0;
}
.page-head h1{ font-size:34px; font-weight:700; }
.page-head p{ font-family:'Prompt',sans-serif; color:#C9D4EA; margin-top:6px; }
.page-body{ padding:48px 0 72px; }
.panel{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:34px 38px; margin-bottom:24px;
}
.panel h2{ color:var(--navy); font-size:24px; margin-bottom:12px; }
.panel p{ color:var(--ink); margin-bottom:10px; }
.topic-list{ list-style:none; display:grid; gap:12px; margin-top:10px; }
.topic-list li{
  display:flex; align-items:center; gap:14px; padding:16px 20px;
  border:1px solid var(--line); border-radius:12px; font-family:'Prompt',sans-serif;
  transition:.2s;
}
.topic-list li:hover{ border-color:var(--pink); background:var(--pink-soft); }
.topic-num{
  width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-family:'Kanit',sans-serif; font-weight:600; flex:none;
}

/* ---------- Form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.form-grid .full{ grid-column:1 / -1; }
label{ font-family:'Prompt',sans-serif; font-size:14px; font-weight:500; color:var(--navy); display:block; margin-bottom:6px; }
label .req{ color:var(--pink); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], select, textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:'Sarabun',sans-serif; font-size:16px; color:var(--ink); background:#fff;
  transition:.2s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(236,27,103,.12);
}
textarea{ min-height:140px; resize:vertical; }
.alert{
  border-radius:12px; padding:16px 20px; margin-bottom:22px;
  font-family:'Prompt',sans-serif;
}
.alert-success{ background:#E8F8EF; color:#0C6B3D; border:1px solid #BFE8D2; }
.alert-error{ background:#FDECEF; color:#A3123F; border:1px solid #F5C2D0; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy); color:#B9C6DF; margin-top:auto;
}
.footer-inner{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding:52px 0 36px;
}
.footer-inner h4{ color:#fff; font-size:18px; margin-bottom:14px; font-family:'Prompt',sans-serif; }
.footer-inner a{ display:block; padding:4px 0; font-size:14.5px; transition:.2s; }
.footer-inner a:hover{ color:var(--pink); }
.footer-brand .brand-logo{ color:var(--pink); font-size:26px; }
.footer-brand p{ font-size:14.5px; margin-top:10px; max-width:380px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:18px 0;
  font-size:13.5px; font-family:'Prompt',sans-serif; text-align:center; color:#7E90B4;
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .dates-card{ grid-template-columns:1fr 1fr; row-gap:16px; }
  .dates-head{ grid-column:1/-1; }
  .date-item{ border-left:none; padding-left:0; }
  .quick-card{ flex-direction:column; align-items:stretch; }
  .quick-head{ flex:none; margin-bottom:6px; }
  .quick-item{ border-left:none; }
  .stats-card{ grid-template-columns:1fr 1fr; row-gap:18px; }
  .stat-item{ border-left:none; justify-content:flex-start; }
}
@media (max-width:820px){
  .main-nav{ display:none; }
  .hero-inner{ padding:36px 0 60px; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:26px; }
  .dates-card{ grid-template-columns:1fr; }
  .quick-items{ grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); }
  .stats-card{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* เนื้อหา HTML จาก editor ในกล่องเมนูด่วน */
.quick-detail-body{ font-family:'Sarabun',sans-serif; color:var(--ink); line-height:1.7; }
.quick-detail-body p{ margin:0 0 10px; }
.quick-detail-body img{ max-width:100%; height:auto; border-radius:10px; margin:8px 0; display:block; }
.quick-detail-body a{ color:var(--pink); text-decoration:underline; }
.quick-detail-body a:hover{ color:var(--pink-dark); }
.quick-detail-body ul, .quick-detail-body ol{ margin:0 0 10px 22px; }
.quick-detail-body h3, .quick-detail-body h4{ color:var(--navy); margin:12px 0 6px; }
.quick-detail-body blockquote{
  border-left:3px solid var(--pink); padding:6px 14px; margin:10px 0;
  background:var(--pink-soft); border-radius:0 8px 8px 0;
}

/* ตัวสลับภาษา TH | EN */
.lang-switch{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Prompt',sans-serif; font-size:13.5px; margin-right:4px;
}
.lang-switch a{ color:var(--muted); padding:4px 6px; border-radius:6px; transition:.2s; }
.lang-switch a:hover{ color:var(--pink); }
.lang-switch a.on{ color:var(--pink); font-weight:600; background:var(--pink-soft); }
.lang-switch i{ color:var(--line); font-style:normal; }

/* ---------- แบนเนอร์หน้าแรก (ใต้กำหนดการสำคัญ) ---------- */
.banner-wrap{ margin-top:26px; }
.banner-slider{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); background:var(--white);
}
.banner-slide{ display:none; }
.banner-slide.on{ display:block; animation:bnFade .5s ease; }
@keyframes bnFade{ from{ opacity:0; } to{ opacity:1; } }
.banner-slide img{ width:100%; height:auto; display:block; }
.banner-slide a{ display:block; }
.banner-dots{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; justify-content:center; gap:8px; z-index:2;
}
.banner-dot{
  width:11px; height:11px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.55); box-shadow:0 1px 4px rgba(10,31,68,.35);
  padding:0; transition:.2s;
}
.banner-dot:hover{ background:#fff; }
.banner-dot.on{ background:var(--pink); }
@media (prefers-reduced-motion: reduce){
  .banner-slide.on{ animation:none; }
}

/* ---------- พอร์ทัลผู้ส่งบทความ ---------- */
.portal-status{
  display:inline-block; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45); border-radius:99px;
  padding:8px 20px; font-family:'Prompt',sans-serif; font-weight:500; color:#fff;
}
.portal-pay{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:820px){ .portal-pay{ grid-template-columns:1fr; } }
.qr-frame{
  display:inline-block; padding:18px 22px; border:2px solid var(--pink-soft);
  border-radius:16px; background:#fffbfd; text-align:center; max-width:100%;
}
.qr-frame img{ max-width:230px; height:auto; margin:0 auto; }
.qr-amount{ font-family:'Kanit',sans-serif; font-size:22px; font-weight:700; color:var(--pink); margin-top:10px; }
.qr-invoice{ font-size:13.5px; color:var(--muted); }
.file-slot{
  border:1.5px dashed var(--line); border-radius:12px;
  padding:14px 16px; margin-bottom:12px; background:#FAFBFE;
}
.file-slot label{ margin-bottom:8px; }
.comment-card{
  background:#FAFBFE; border:1px solid var(--line); border-left:4px solid var(--pink);
  border-radius:10px; padding:14px 16px; margin-bottom:12px; white-space:pre-line;
}

/* ---------- หน้าผู้ประเมินบทความ ---------- */
.rev-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
@media (max-width:760px){ .rev-stats{ grid-template-columns:repeat(2,1fr); } }
.rev-stat{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 20px; display:flex; flex-direction:column; gap:2px;
  border-top:3px solid var(--navy);
}
.rev-stat.ok{ border-top-color:#0B7A43; }
.rev-stat.warn{ border-top-color:#B57D00; }
.rev-stat .v{ font-family:'Kanit',sans-serif; font-size:30px; font-weight:700; color:var(--navy); }
.rev-stat .l{ font-size:13.5px; color:var(--muted); }

.crit-row{
  display:grid; grid-template-columns:34px 1fr 220px 86px;
  gap:14px; align-items:center; padding:10px 0;
  border-bottom:1px dashed var(--line);
}
@media (max-width:700px){ .crit-row{ grid-template-columns:30px 1fr 90px; } .crit-row input[type=range]{ display:none; } }
.crit-row .no{
  width:30px; height:30px; border-radius:50%; background:var(--pink-soft);
  color:var(--pink); font-weight:700; display:flex; align-items:center; justify-content:center;
  font-family:'Kanit',sans-serif;
}
.crit-row .lb b{ display:block; color:var(--ink); font-size:15px; }
.crit-row .lb span{ font-size:12.5px; color:var(--muted); }
.crit-row input[type=range]{ width:100%; accent-color:var(--pink); }
.crit-row input[type=number]{ text-align:center; font-weight:600; }

.total-bar{
  margin-top:22px; padding:18px 20px; border-radius:14px;
  background:#FAFBFE; border:1.5px solid var(--line);
}
.total-num{ font-family:'Kanit',sans-serif; font-size:34px; font-weight:800; color:var(--pink); }
.fill-hint{ font-size:13.5px; }
.score-progress{ height:9px; background:var(--line); border-radius:99px; overflow:hidden; }
.score-progress-bar{ height:100%; background:linear-gradient(90deg,var(--pink),#F6689C); transition:width .25s; }


/* ---------- แบนเนอร์เต็มใบบนสุด (โชว์รูปครบ ไม่มีอะไรบัง) ---------- */
.topbanner{ width:100%; background:#0A1F44; }
.topbanner-slider{ position:relative; max-width:1600px; margin:0 auto; line-height:0; }
.topbanner-slide{ display:none; }
.topbanner-slide.on{ display:block; animation:tbFade .6s ease; }
@keyframes tbFade{ from{ opacity:0; } to{ opacity:1; } }
.topbanner-slide img{ width:100%; height:auto; display:block; }   /* เต็มความกว้าง โชว์ทั้งรูป ไม่ตัดขอบ */
.topbanner-slide a{ display:block; }
.topbanner-dots{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; justify-content:center; gap:8px; z-index:2;
}

/* ---------- กล่องคำแนะนำในหน้า login รวม ---------- */
.login-help{
  margin-top:18px; padding:14px 16px; border-radius:12px;
  background:#FAFBFE; border:1px solid var(--line);
  font-size:13.5px; color:var(--muted); line-height:1.9;
}
.login-help u{ color:var(--navy); text-decoration-color:var(--pink); }

/* ---------- แถบประกาศ + ปุ่มหลัก (แทน Hero) ---------- */
.announce-strip-wrap{ padding-top:22px; }
.announce-strip{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 24px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  border-left:5px solid var(--pink);
}
.announce-strip .as-left{ display:flex; align-items:center; gap:14px; }
.announce-strip .announce-icon{
  width:46px; height:46px; border-radius:50%;
  background:var(--pink-soft); color:var(--pink);
  display:flex; align-items:center; justify-content:center; flex:0 0 46px;
}
.announce-strip .a1{ font-family:'Prompt',sans-serif; font-size:14.5px; color:var(--muted); }
.announce-strip .a2{ font-family:'Prompt',sans-serif; font-size:19px; font-weight:600; color:var(--navy); }
.announce-strip .as-right{ display:flex; gap:10px; flex-wrap:wrap; }
.announce-strip .btn-outline{ border-color:var(--line); color:var(--navy); }
.announce-strip .btn-outline:hover{ border-color:var(--pink); color:var(--pink); }
@media (max-width:640px){
  .announce-strip{ flex-direction:column; align-items:flex-start; }
}

/* ---------- ฟอร์มใบเสร็จในหน้าชำระเงิน (กะทัดรัด) ---------- */
.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.pay-grid .full{ grid-column:1 / -1; }
.pay-grid label{ font-size:13.5px; margin-bottom:4px; }
.pay-grid input, .pay-grid textarea{ padding:9px 12px; font-size:14px; }
.pay-grid textarea{ min-height:0; resize:vertical; }
@media (max-width:640px){ .pay-grid{ grid-template-columns:1fr; } }

/* ---------- สรุปข้อมูลใบเสร็จหลังยืนยัน (อ่านอย่างเดียว) ---------- */
.receipt-summary{
  background:#FAFBFE; border:1.5px solid var(--line); border-radius:14px; padding:16px 18px;
}
.rs-lock{ color:#0B7A43; font-size:13.5px; font-weight:500; margin-bottom:10px; }
.rs-table{ width:100%; border-collapse:collapse; font-size:14px; }
.rs-table th{
  text-align:left; color:var(--muted); font-weight:500;
  padding:6px 10px 6px 0; vertical-align:top; width:38%;
}
.rs-table td{ padding:6px 0; color:var(--ink); }
.rs-table tr + tr th, .rs-table tr + tr td{ border-top:1px dashed var(--line); }

/* ปุ่มปิดรับสมัคร (กดไม่ได้) */
.btn.btn-disabled{
  background:#C6CCD9; color:#6B7486; cursor:not-allowed;
  border:none; box-shadow:none; pointer-events:none;
}

/* ---------- PDPA Consent Popup ---------- */
.pdpa-overlay{
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(10,31,68,.65); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:20px;
}
.pdpa-box{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  max-width:640px; width:100%; max-height:86vh; display:flex; flex-direction:column;
  border-top:5px solid var(--pink);
}
.pdpa-box h3{
  font-family:'Kanit',sans-serif; color:var(--navy); font-size:21px;
  padding:18px 24px 10px;
}
.pdpa-body{
  padding:0 24px; overflow-y:auto; font-size:14.5px; line-height:1.9; color:var(--ink);
}
.pdpa-body p{ margin-bottom:10px; }
.pdpa-body a{ color:var(--pink); text-decoration:underline; }
.pdpa-actions{
  padding:14px 24px 20px; display:flex; gap:10px; justify-content:center;
  border-top:1px solid var(--line); margin-top:8px;
}

/* ---------- ฟอร์มยืนยันใบเสร็จ: ซ้าย(ออกใบเสร็จ) / ขวา(จัดส่ง) ---------- */
.receipt-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:820px; }
.receipt-cols .rc-box{
  background:#FAFBFE; border:1.5px solid var(--line); border-radius:12px; padding:16px 18px;
}
.receipt-cols .rc-title{
  font-family:'Kanit',sans-serif; color:var(--navy); font-weight:600;
  font-size:15px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.receipt-cols .rc-field{ margin-bottom:12px; }
.receipt-cols .rc-field:last-child{ margin-bottom:0; }
.receipt-cols label{ display:block; font-size:13.5px; margin-bottom:4px; }
.receipt-cols input, .receipt-cols textarea{
  width:100%; padding:9px 12px; font-size:14px; resize:vertical;
}
@media (max-width:720px){ .receipt-cols{ grid-template-columns:1fr; } }

/* ---------- Modal ยืนยันการออกใบเสร็จ ---------- */
.confirm-overlay{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(10,31,68,.65); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:20px;
}
.confirm-box{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  max-width:480px; width:100%; padding:28px 26px; text-align:center;
  border-top:5px solid var(--pink);
}
.confirm-box .confirm-icon{ font-size:44px; line-height:1; margin-bottom:10px; }
.confirm-box h3{ color:var(--navy); font-family:'Kanit',sans-serif; font-size:19px; margin:0 0 12px; }
.confirm-box p{ color:#374151; font-size:14.5px; line-height:1.75; margin:0 0 22px; }
.confirm-actions{ display:flex; gap:12px; justify-content:center; }
.confirm-actions .btn{ padding:11px 26px; }
@media (max-width:480px){ .confirm-actions{ flex-direction:column-reverse; } .confirm-actions .btn{ width:100%; } }

/* ปุ่มยกเลิกใน modal (เห็นชัดบนพื้นขาว) */
.btn-cancel{
  background:#fff; color:#4b5563; border:1.5px solid #cbd2dc;
}
.btn-cancel:hover{ background:#f3f4f6; border-color:#9aa3b2; }

/* จุดกระพริบบอกว่าระบบกำลังตรวจสอบการชำระเงินอัตโนมัติ */
.auto-dot{
  width:9px; height:9px; border-radius:50%; background:#0B7A43;
  display:inline-block; animation:autoPulse 1.3s ease-in-out infinite;
}
@keyframes autoPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* คำนำหน้า / ชื่อ / นามสกุล เรียงแถวเดียว (คำนำหน้าแคบกว่า) */
.name-row{ display:grid; grid-template-columns:140px 1fr 1fr; gap:14px; align-items:end; }
.name-row .nr-prename select,
.name-row .nr-name input{ width:100%; }
@media (max-width:640px){
  .name-row{ grid-template-columns:1fr; }   /* มือถือยุบเป็นคอลัมน์เดียว */
}

/* ============================================================
   RESPONSIVE — รองรับทุกอุปกรณ์ (แก้ header ล้นจอบนมือถือ)
   วางไว้ท้ายไฟล์เพื่อให้ override กฎเดิมที่ซ่อนเมนู (.main-nav display:none)
   ============================================================ */

/* จอแล็ปท็อปเล็ก: บีบระยะห่างก่อนขึ้นบรรทัดใหม่ */
@media (max-width:1180px){
  .header-inner{ gap:14px; }
  .main-nav{ gap:16px; }
  .main-nav a{ font-size:14px; }
  .header-actions .btn{ padding:9px 15px; font-size:14px; }
}

/* แท็บเล็ต/มือถือ: แบรนด์+ปุ่มแถวบน / เมนูแถวล่างเลื่อนแนวนอนได้ */
@media (max-width:980px){
  .header-inner{ flex-wrap:wrap; row-gap:10px; padding:11px 0; }
  .brand{ flex:0 0 auto; }
  .header-actions{ margin-left:auto; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

  /* เมนูกลับมาแสดง (เดิมถูกซ่อนบนมือถือ ทำให้กดเมนูไม่ได้เลย) */
  .main-nav{
    display:flex !important;
    order:3; flex:1 0 100%;
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:20px; padding-bottom:5px; margin-top:2px;
    border-top:1px solid var(--line); padding-top:9px;
    scrollbar-width:none;
  }
  .main-nav::-webkit-scrollbar{ display:none; }
  .main-nav a{ white-space:nowrap; flex:0 0 auto; }
}

/* มือถือทั่วไป */
@media (max-width:560px){
  .brand-logo{ font-size:24px; }
  .brand-text .t1{ font-size:14px; letter-spacing:1px; }
  .brand-text .t2{ font-size:9px; letter-spacing:1.5px; }
  .header-actions{ gap:6px; }
  .header-actions .btn{ padding:8px 12px; font-size:13px; gap:6px; }
  .lang-switch{ font-size:13px; }
  .main-nav{ gap:16px; }
  .main-nav a{ font-size:13.5px; }
}

/* มือถือจอเล็กมาก: ปุ่มลงมาอยู่แถวของตัวเอง ไม่เบียดแบรนด์ */
@media (max-width:420px){
  .brand-text .t2{ display:none; }
  .header-actions{ flex:1 0 100%; margin-left:0; justify-content:center; }
  .header-actions .btn{ padding:8px 11px; font-size:12.5px; }
}

/* ---------- ตาราง: เลื่อนแนวนอนแทนการดันจอ ---------- */
@media (max-width:720px){
  .data-table, .rs-table{
    display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
}

/* ---------- กันองค์ประกอบล้นแนวนอนทั้งเว็บ ---------- */
img, video, iframe, table{ max-width:100%; }
pre, code{ white-space:pre-wrap; word-break:break-word; }
input, select, textarea{ max-width:100%; }