/* ============================================================
   2Provi · mobile.css
   ปรับการแสดงผลบนจอเล็กโดยเฉพาะ — โหลดเป็นไฟล์สุดท้ายของทุกหน้า
   จึงชนะกฎเดิมที่ specificity เท่ากันโดยไม่ต้องใช้ !important
   ครอบคลุม 3 ตระกูลหน้า: core.css / health.css / form.css
   และหน้าโปรไฟล์ที่ใช้ .nav-pill
   ============================================================ */

/* ══════════ 1. ขอบจอ ══════════
   เดิม .wrap กว้าง 92% ซึ่งบนจอ 390px เหลือขอบข้างละ 15px เท่านั้น
   เปลี่ยนเป็นหักคงที่ 34px จะได้ขอบเท่ากันทุกขนาดจอ */
@media (max-width:640px){
  .wrap{width:min(1180px,100% - 34px)}
  .narrow{width:min(860px,100% - 34px)}
}

/* ══════════ 2. แถบหัว — ยุบแถบลิงก์ข้ามหน้าเข้าเมนูแฮมเบอร์เกอร์ ══════════
   เดิมแถบ .tools เลื่อนแนวนอนได้อย่างเดียว บนมือถือจึงเห็นลิงก์ถูกตัดขอบขวา
   และดูเหมือนเมนู "ไม่ยุบ" — ตอนนี้พอแฮมเบอร์เกอร์โผล่ แถบนี้จะย้ายเข้าไปอยู่ในเมนูแทน
   (js/nav.js เป็นคนโคลนลิงก์เข้าไปให้ตอนโหลดหน้า) */
.links .xp{display:none}

@media (max-width:980px){
  .tools{display:none}

  .links .xp{display:flex;flex-direction:column;gap:.12rem;
    margin-top:.55rem;padding-top:.6rem;border-top:1px dashed var(--line,#dce8ef)}
  /* หน้าสุขภาพใช้ชุดตัวแปรสีคนละชุด (--tx3 แทน --muted) ถ้าไม่ใส่ fallback ซ้อน
     ตัวหนังสือจะกลายเป็นสีเทาเข้มบนพื้นมืดจนอ่านไม่ออก */
  .links .xp .xp-l{padding:.1rem 1rem .4rem;font-size:.71rem;font-weight:800;
    letter-spacing:.09em;text-transform:uppercase;color:var(--muted,var(--tx3,#64798f))}
  .links .xp a{display:flex;align-items:center;gap:.5rem;
    padding:.7rem 1rem;border-radius:12px;font-size:.92rem;font-weight:700}
  /* [แก้บั๊ก] health.css ไม่มีตัวแปร --grad พื้นหลังจึงโปร่งใส เหลือตัวอักษรขาวบนพื้นขาว
     contrast ตกเหลือ 1.00 อ่านไม่ออกเลย — ใช้ไล่เฉดและสีตัวอักษรที่แต่ละหน้าประกาศไว้เอง
     (--menu-grad / --menu-fg มีทั้งใน core.css และ health.css) */
  .links .xp a[aria-current="page"]{
    background:var(--menu-grad,linear-gradient(120deg,#0b4a8f,#1466c4 34%,#2b8bf2 66%,#38bdf8));
    color:var(--menu-fg,#fff)}

  /* ปุ่มกระทำหลักท้ายเมนู — สีอำพันคงที่ทั้งสองธีม ให้ต่างจากแถบ "หน้าปัจจุบัน" ชัด ๆ */
  .links .xp a.askq{margin-top:.4rem;justify-content:center;font-weight:800;
    background:linear-gradient(120deg,#f59e0b,#fbbf24);color:#3a1d00}
  /* ปุ่มรองที่โคลนมาจากปุ่มบนแถบหัว (.nosm) ซึ่งถูกซ่อนบนจอแคบ */
  .links .xp a.xp-alt{margin-top:.3rem;justify-content:center;font-weight:800;
    border:1.5px solid var(--line,#dce8ef);color:var(--b600,var(--jade,#1466c4))}
  [data-theme="dark"] .links .xp a.xp-alt{color:var(--sky,var(--jade,#38bdf8))}

  /* ลิงก์หัวข้อในหน้า (ลูกตรงของเมนู) ไม่ต้องสูงเท่าปุ่ม จะได้เห็นหัวข้อได้มากขึ้นต่อจอ */
  .links>a{padding:.6rem 1rem}

  /* หน้าที่มีหัวข้อย่อยเยอะ (เช่น money) เมนูจะยาวเกินจอจนลิงก์ท้าย ๆ กดไม่ถึง
     เพราะกล่องนี้ลอยอยู่ ไม่ได้เลื่อนไปกับหน้า — จำกัดความสูงแล้วให้เลื่อนในตัว */
  .links.open{max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    /* [สำคัญ] .links ตั้ง flex-wrap:wrap ไว้ตั้งแต่กฎพื้นฐาน พอมาเป็นคอลัมน์ที่จำกัดความสูง
       flexbox จะ "ตัดขึ้นคอลัมน์ใหม่" ทำให้เมนูแตกเป็นสองแถวซ้อนกันจนอ่านไม่ออก
       ต้องสั่งไม่ให้ตัด แล้วปล่อยให้เลื่อนในแนวตั้งแทน */
    flex-wrap:nowrap}

  /* แถบหัวเตี้ยลงเพราะไม่มีแถบลิงก์แล้ว จุดจอดของ #anchor ต้องเลื่อนตาม */
  html{scroll-padding-top:86px}

  /* เมนูของหน้าสุขภาพยึดตำแหน่งกับแถวบน ส่วนหน้าอื่นยึดกับทั้งแถบ
     พอไม่มีแถบลิงก์แล้ว ให้ยึดแบบเดียวกันหมดจะได้เปิดลงมาตรงกัน */
  .nav-in{position:static}
}

/* ══════════ 3. ขนาดตัวอักษรบนมือถือ ══════════
   ของเดิม h1 ตกที่ 32.8px และ .lead ที่ 17.6px/1.78 ซึ่งบนจอ 390px
   กินพื้นที่เกินครึ่งจอก่อนจะเห็นเนื้อหาจริง */
@media (max-width:640px){
  .hero h1,.abhero h1,.nf h1{font-size:clamp(1.58rem,7.1vw,2rem);line-height:1.34}
  .hero .lead,.abhero .lead,.nf .lead,.lead{font-size:1rem;line-height:1.76}

  .head{margin-bottom:2.1rem}
  .head h2{font-size:clamp(1.4rem,5.5vw,1.78rem)}
  .head p{font-size:.95rem;line-height:1.72}

  .pill{font-size:.76rem;padding:.36rem .82rem}
  .eye{font-size:.71rem}

  .sec{padding:3rem 0}
  .cta{padding:3.2rem 0}
  .cta h2{font-size:clamp(1.4rem,5.5vw,1.78rem)}
}

/* ══════════ 4. ปุ่ม ══════════
   บนมือถือปุ่มควรเรียงลงมาและกว้างเต็มแถว ไม่ใช่กว้างไม่เท่ากันคนละบรรทัด */
@media (max-width:640px){
  .cta-row{flex-direction:column;align-items:stretch;gap:.6rem;margin:1.5rem 0}
  .cta-row .btn{width:100%}
  .btn{font-size:.97rem;padding:.8rem 1.3rem}
  .btn-lg{font-size:1rem;padding:.92rem 1.5rem}
}

/* ══════════ 5. ระยะในการ์ด ══════════ */
@media (max-width:640px){
  .card{padding:1.45rem 1.25rem}
  .tool{padding:1.6rem 1.25rem 1.3rem}
  .vcard{padding:1.5rem 1.25rem}
  .pbody{padding:1.2rem 1.2rem 1.35rem}
  .nf-grid a{padding:.95rem 1.05rem}
  .nf-code{font-size:clamp(4.4rem,22vw,6.5rem)}
}

/* ══════════ 6. ช่องกรอกข้อมูล ══════════
   Safari บน iOS จะซูมหน้าจอเองทุกครั้งที่โฟกัสช่องที่ตัวอักษรเล็กกว่า 16px
   ของเดิมอยู่ที่ 13.9–15px จึงเด้งซูมทุกช่อง
   ใช้ทั้งเงื่อนไขความกว้างและ pointer:coarse เพราะ iPad แนวนอนกว้างเกิน 1024
   แต่ยังเป็นจอสัมผัสและยังซูมเหมือนกัน */
@media (max-width:1024px),(pointer:coarse){
  input,select,textarea{font-size:16px}
}

/* ══════════ 7. ปุ่มกลับขึ้นบน ══════════
   เลี่ยงไม่ให้ทับพื้นที่นิ้วโป้งและแถบล่างของเบราว์เซอร์มือถือ */
@media (max-width:640px){
  #toTop{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:44px;height:44px}
}
/* แถบแจ้งคุกกี้อยู่ที่ z-index 300 ส่วนปุ่มกลับขึ้นบนอยู่ที่ 140
   ปุ่มจึงถูกแถบทับจนกดไม่โดน — ระหว่างที่แถบยังอยู่ให้ซ่อนปุ่มไว้ก่อน */
body:has(.ck.on) #toTop{opacity:0;pointer-events:none}

/* ══════════ 8. หน้าโปรไฟล์ที่ใช้ .nav-pill ══════════
   เดิมลิงก์ตัดขึ้นบรรทัดใหม่จนแถบสูงถึง 240px กินจอไปเกือบหนึ่งในสาม
   เปลี่ยนเป็นแถบเลื่อนแนวนอนบรรทัดเดียวพร้อมไล่เฉดบอกว่าเลื่อนต่อได้ */
@media (max-width:760px){
  .nav-pill{
    /* body ของหน้านี้เป็น flex column + align-items:center แถบจึงกว้างตามเนื้อหา
       พอสั่งไม่ให้ตัดบรรทัดมันเลยยื่นล้นออกทั้งสองข้าง ต้องตรึงความกว้างไว้ก่อน */
    width:100%;max-width:100%;align-self:stretch;box-sizing:border-box;
    position:relative;flex-wrap:nowrap;justify-content:flex-start;
    gap:.2rem;padding:8px 10px;border-radius:18px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  .nav-pill::-webkit-scrollbar{display:none}
  /* เป้าแตะต้องสูงอย่างน้อย 40px ของเดิมได้ 33px ซึ่งกดพลาดง่ายบนมือถือ */
  .nav-pill a{flex:none;white-space:nowrap;font-size:.85rem;padding:11px 14px;
    display:inline-flex;align-items:center;min-height:40px}
}
/* แท็บเล็ตแถบไม่ต้องเลื่อนแล้ว แต่ยังกดด้วยนิ้ว เป้าแตะจึงต้องสูงพอเหมือนกัน */
@media (max-width:1024px){
  .nav-pill a{display:inline-flex;align-items:center;min-height:38px}
}

/* ══════════ 9. หน้าฟอร์ม (quote / join / thank-you) ══════════ */
@media (max-width:640px){
  /* แถบบนติดหัวจอไว้ตลอด ผู้ใช้จะได้กดกลับหน้าหลักได้จากทุกจุดของฟอร์ม */
  .navbar{position:sticky;top:0;z-index:50;padding:11px 0;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border,#dce8ef)}
  .nav-inner{gap:10px}
  .brand{font-size:1.05rem}
  .brand-mark{width:36px;height:36px;border-radius:11px;font-size:.9rem}

  /* เดิมลิงก์นี้ถูกซ่อนที่ ≤540px ทำให้บนมือถือไม่มีทางกลับหน้าหลักเลย
     จนกว่าจะเลื่อนลงไปสุดฟุตเตอร์ — เอากลับมาในรูปปุ่มเล็กที่กดถนัด */
  .nav-contact{display:inline-flex;align-items:center;flex:none;min-height:38px;
    padding:.5rem .9rem;border-radius:999px;font-size:.82rem;
    color:var(--blue,#0f6cbb);background:rgba(15,108,187,.1)}

  .intro-panel h1{font-size:clamp(1.5rem,6.6vw,1.95rem);line-height:1.34}
  .intro-description{font-size:.95rem;line-height:1.72}
  .form-panel h2{font-size:clamp(1.32rem,5.4vw,1.7rem)}

  /* ปุ่มส่งฟอร์มกว้างเต็มแถวและสูงพอให้กดง่าย */
  .form-panel button[type=submit],
  .site-button{width:100%;min-height:50px}
}
@media (max-width:1024px){
  /* ทับกฎ display:none เดิมของ page-quote.css / page-join.css
     และทำให้ปุ่มสูงพอกดบนแท็บเล็ตด้วย ไม่ใช่เฉพาะมือถือ */
  .nav-contact{display:inline-flex;align-items:center;min-height:38px;
    padding:.5rem .9rem;border-radius:999px;font-size:.82rem;
    color:var(--blue,#0f6cbb);background:rgba(15,108,187,.1)}
}

/* ══════════ 10. หน้าขอบคุณ ══════════ */
@media (max-width:640px){
  .thank-you-card{width:min(620px,100% - 28px)}
  .tool-links a{padding:13px 14px;font-size:.86rem}
}
@media (max-width:1024px){
  /* ลิงก์กลับหน้าหลักเดิมสูงแค่ 21px นิ้วกดพลาดง่าย */
  .back-link{display:inline-flex;align-items:center;min-height:40px;padding:.3rem .9rem}
  .contact-text{font-size:.82rem;line-height:1.8}
}

/* ══════════ 11. เป้าแตะขั้นต่ำ ══════════
   ลิงก์ในฟุตเตอร์เดิมสูง 21–32px ซึ่งต่ำกว่าเกณฑ์ที่นิ้วกดแม่น
   ใช้ถึง 980px เพราะแท็บเล็ตก็ใช้นิ้วกดเหมือนกัน */
@media (max-width:1024px){
  .foot-g a{display:inline-flex;align-items:center;min-height:38px}
  .foot-g div>a+a{margin-top:.1rem}
  .foot-links a,.foot-contact a,.footer-links a{
    display:inline-flex;align-items:center;min-height:38px;padding:0 .35rem}
  /* ลิงก์นโยบายในแถบท้ายและในข้อความยินยอม เดิมสูงแค่ 14–22px */
  .foot-b a,.policy-link{display:inline-flex;align-items:center;min-height:34px;padding:0 .2rem}
}

/* ══════════ 12. ตัวหนังสือเนื้อหาที่เล็กเกินไปบนมือถือ ══════════
   ป้ายกำกับสั้น ๆ อย่าง .eye หรือ .ptag เล็กได้ แต่ข้อความที่ต้องอ่านจริง
   ไม่ควรต่ำกว่า 12.5px เพราะภาษาไทยมีสระบนล่างซ้อนกัน พออ่านยากกว่าอังกฤษมาก */
@media (max-width:1024px){
  /* ── หน้าเนื้อหาหลัก ── */
  .stat span{font-size:.83rem;line-height:1.7}   /* คำอธิบายใต้ตัวเลขในการ์ดสถิติ */
  .chip{font-size:.8rem}
  .imgbar .tag{font-size:.78rem}
  .ck p{font-size:.86rem}
  /* ── หน้าฟอร์ม ── */
  .privacy-text,.foot-copy,.edu-note{font-size:.81rem;line-height:1.75}
  .form-panel>p{font-size:.92rem;line-height:1.7}
  .info-notice p{font-size:.83rem;line-height:1.72}
  .consent span,.consent label{font-size:.83rem;line-height:1.7}
  .edu-labels span{font-size:.79rem}
}

/* ══════════ 13. ป้ายเล็กที่เป็นภาษาไทย ══════════
   ป้ายภาษาอังกฤษตัวพิมพ์ใหญ่ (.eye, .eyebrow) เล็กได้เพราะตัวอักษรอยู่บรรทัดเดียว
   แต่ภาษาไทยมีสระบน–ล่างและวรรณยุกต์ซ้อนกันถึงสามชั้น พอต่ำกว่า ~12.5px
   สระจะเริ่มติดกันจนอ่านผิดตัว จึงขยับเฉพาะป้ายที่มีเนื้อหาเป็นภาษาไทย */
@media (max-width:1024px){
  .stage-h span{font-size:.81rem}         /* สถานะในหัวข้อขั้นของหน้าสุขภาพ */
  .vcard .tagbest{font-size:.78rem}        /* ป้าย "เหมาะกับคนส่วนใหญ่" */
  .board-h span{font-size:.81rem}          /* คำกำกับบนแผนภาพ */
  .cost span{font-size:.81rem}             /* หน่วยใต้ตัวเลขค่าเล่าเรียน */
  .rung h4 small{font-size:.8rem}          /* ช่วงอายุในบันไดการศึกษา */
  .mc span{font-size:.81rem}               /* คำอธิบายระดับค่าครองชีพหลังเกษียณ */
  .imgbar .tag{font-size:.82rem}
  .ptag{font-size:.8rem}                   /* ป้ายสถานะในการ์ดทีมงาน */
  .link-subtext{font-size:.81rem}          /* คำอธิบายใต้ชื่อลิงก์ในหน้าโปรไฟล์ */
  .vcard .tagbest{font-size:.8rem}
  #stamp,.stamp{font-size:.8rem}           /* บรรทัด "คำนวณเมื่อ …" ใต้ผลลัพธ์ */
  .cert-issuer,.contact-label{font-size:.81rem}
  /* ป้ายนำหัวของฮีโร่มีข้อความไทยยาว ๆ อยู่ด้วย ต่างจาก .eye ที่เป็นอังกฤษล้วน */
  .pill{font-size:.82rem}
}
/* แถบเส้นเวลาช่วงสะสม–ใช้จ่าย ตัวอักษรเดิม 10.6–10.9px เล็กกว่าที่ควร
   ขยับขึ้นเล็กน้อยพร้อมเพิ่มความสูงของแถบ ไม่ให้ตัวหนังสือล้นออกนอกปุ่ม */
@media (max-width:640px){
  .albar .seg{font-size:.74rem;height:28px}
  .albar .cap{font-size:.72rem;top:57px}
}

/* ══════════ 14. ป้ายไทยที่ยังเหลือ (ต้องเขียนให้เจาะจงพอจะชนะกฎเดิม) ══════════ */
@media (max-width:1024px){
  /* .eye เป็นป้ายนำหัวข้อ หลายหน้าใส่ข้อความไทยยาว ๆ ไว้ เช่น "01 — ภาพที่ไม่มีใครอยากเห็น"
     ที่ .79rem ยังคงดูเป็นป้ายเล็กเหมือนเดิม แต่สระไทยไม่ติดกันแล้ว */
  .eye{font-size:.79rem}
  .tl small{font-size:.79rem}
  /* ขยายแล้วบนจอ 320px บรรทัดนี้ยาวเกินกล่องไป 3px จนทั้งหน้าเลื่อนแนวนอนได้
     ให้ขึ้นบรรทัดของตัวเองและตัดคำได้ จะได้ไม่ดันความกว้างอีก */
  .rung .cost span{font-size:.79rem;display:block;overflow-wrap:anywhere}
  .eye{overflow-wrap:anywhere}
  .cform label small{font-size:.81rem}
  .rl h3 small{font-size:.79rem}
  .exp-item .exp-org,.edu-item .univ{font-size:.82rem}
}

/* ══════════ 15. ป้ายไทยชุดสุดท้าย ══════════ */
@media (max-width:1024px){
  .links .xp .xp-l{font-size:.8rem}      /* หัวข้อ "ไปหน้าอื่น" ในเมนู */
  .arw span{font-size:.8rem}             /* คำกำกับลูกศรกระแสเงิน */
  .sld-t span{font-size:.79rem}          /* ค่าต่ำสุด–สูงสุดใต้แถบเลื่อน */
  .brow span{font-size:.8rem}            /* ชื่อรายการในแถบสัดส่วน */
  .kpi span{font-size:.81rem}            /* คำอธิบายใต้ตัวเลขผลลัพธ์ */
  .ylg span{font-size:.8rem}             /* คำกำกับในกราฟค่าเล่าเรียน */
  .mxg h3 small,.myth h3 small{font-size:.79rem}
  .pil .pn{font-size:.79rem;letter-spacing:.1em}   /* ชื่อเสาหลักบำนาญ */
}
@media (max-width:1024px){
  /* แถบเส้นเวลาช่วงสะสม–ใช้จ่าย ตัวเลขกำกับอายุเดิมเล็กถึง 10.6px */
  .albar .seg{font-size:.8rem}
  .albar .cap{font-size:.79rem}
  .albar .tick{font-size:.79rem}
  .sld .sld-b{font-size:.79rem}          /* ป้ายตัวเลขบนหัวแถบเลื่อน */
}

/* ══════════ 16. ปุ่มข้อความยาวบนจอ 320px ══════════
   .btn มี white-space:nowrap + overflow:hidden อยู่ในตัว พอจอแคบมาก
   ข้อความจะถูกตัดหายไปเงียบ ๆ โดยไม่มีจุดไข่ปลาบอก
   ที่เจอคือปุ่ม "ปฏิเสธที่ไม่จำเป็น" ของแถบคุกกี้ (หายไป 10px) และปุ่ม
   "ต่อด้วยเรื่องสุขภาพ & โรคร้ายแรง" ในหน้า money (หายไป 12px)
   ปุ่มยินยอมคุกกี้อ่านไม่ครบเป็นเรื่องที่ปล่อยไม่ได้ จึงให้ขึ้นบรรทัดใหม่ได้ */
@media (max-width:360px){
  .ck-btns .btn,
  .cta-row .btn{
    white-space:normal;
    line-height:1.35;
    text-align:center;
    padding-block:.62rem;
  }
}