/* ══════════════════════════════════════════════════════════════════════
   nav2.css — แถบนำทางแบบใหม่

   เดิมแถบหัวมีสองแถว
     แถวบน  = ลิงก์หัวข้อ "ในหน้านี้" (#story #calc #faq …) ซึ่งต่างกันทุกหน้า
     แถวล่าง = ลิงก์ข้ามหน้า (หน้าหลัก / ประกันชีวิต / สุขภาพ …) ซึ่งเหมือนกันทุกหน้า

   สลับกันใหม่
     แถบหัว   = ลิงก์ข้ามหน้า แถวเดียว เหมือนกันทุกหน้ารวมหน้าแรก
     แถบข้าง  = ลิงก์หัวข้อในหน้า พับเก็บไว้ เปิดด้วยปุ่มสามขีดบนแถบหัว

   ทำไมถึงดีกว่าเดิม
     · เมนูที่เหมือนกันทุกหน้าอยู่ที่เดิมเสมอ คนจำตำแหน่งได้
     · เมนูที่เปลี่ยนไปตามหน้าไม่แย่งที่กับเมนูหลัก และไม่ดันแถบหัวสูงสองแถว
     · แถบหัวเตี้ยลง เนื้อหาได้พื้นที่คืนราว 36px ทุกหน้า

   เขียนด้วยค่าสีตรง ๆ ไม่พึ่งตัวแปรของหน้าไหน เพราะหน้าเนื้อหาใช้ชุด
   ตัวแปรคนละชุด (core.css ใช้ --surface/--line, health.css ใช้ --panel/--line)
   โหลดไฟล์นี้เป็น stylesheet ตัวท้ายสุดเสมอ
   ══════════════════════════════════════════════════════════════════════ */

/* ───────────────── แถบหัว : ลิงก์ข้ามหน้า ───────────────── */

/* ══════════════════════════════════════════════════════════════════════
   แถบหัวสองแถว (จอกว้าง)

   เดิมยัดทุกอย่างไว้แถวเดียว พอมีลิงก์ 8 ตัว + เม็ดยาทีมงาน + ปุ่มลัด
   ที่ว่างไม่พอ ต้องไล่ซ่อนของทีละชิ้นตามความกว้าง (ข้อความในเม็ดยาหายที่
   1600, ปุ่มลัดหายที่ 1400, ชื่อแบรนด์หายที่ 1250) ซึ่งแย่มากสำหรับคนที่
   ตั้งขนาดตัวอักษรใหญ่ เพราะพอตัวอักษรโตขึ้น ของก็ยิ่งหายเร็วขึ้นอีก

   เปลี่ยนเป็นสองแถว ให้แถบสูงขึ้นแทนที่จะให้ของหายไป
     แถวบน  โลโก้+ชื่อ ....... ปุ่มธีม · ปุ่มลัด · เม็ดยาทีมงาน · สามขีด
     แถวล่าง ลิงก์ข้ามหน้า 6 ตัว ......... ปุ่มเหลืองสองตัว

   ใน HTML วาง .acts ไว้ก่อน .tools เพื่อให้ลำดับการกด Tab เดินตามสายตา
   (แถวบนซ้าย→ขวา แล้วค่อยลงแถวล่าง) ไม่ต้องพึ่ง order ที่ทำให้สองอย่างนี้
   ไม่ตรงกัน
   ══════════════════════════════════════════════════════════════════════ */
.nav-in{position:relative;flex-wrap:wrap}

/* .acts ไปสุดขวาของแถวบน */
.nav-in > .acts{margin-left:auto}

/* .tools กินเต็มความกว้าง จึงตกไปเป็นแถวที่สองเสมอ */
.nav-in > .tools.tools-in{
  border-top:0;
  margin:0;
  padding:0;
  flex:1 0 100%;
  /* ลิงก์ตกบรรทัดได้เองเมื่อที่ไม่พอ ดีกว่าเลื่อนแนวนอนที่คนมักมองไม่เห็น */
  flex-wrap:wrap;
  align-items:center;
  overflow:visible;
  /* กันเงาของเม็ดยา .cur ถูกตัด */
  padding-block:2px 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   ปุ่มเหลืองสองตัวท้ายแถบ — "ขอรับข้อเสนอเบื้องต้น" กับ "สมัครเป็นตัวแทน"

   .tools a.askq มี margin-left:auto อยู่ ซึ่งเดิมมีตัวเดียวจึงทำหน้าที่
   ดันไปชิดขวาสุดของแถบ พอมีสองตัว ตัวที่สองจะดันตัวเองอีกรอบจนสองปุ่ม
   แยกจากกันคนละมุม ต้องยกเลิก auto ของตัวที่สองแล้วให้ติดกันเป็นคู่
   ══════════════════════════════════════════════════════════════════════ */
.nav-in > .tools.tools-in a.askq + a.askq{margin-left:.3rem}
/* ตัวหลังเป็นปลายทางสุดท้ายของเส้นทาง จึงให้เข้มกว่าเล็กน้อยเพื่อไล่ลำดับสายตา
   สีพื้นยังอยู่ในโทนเดียวกัน ตัวหนังสือ #3a1d00 บน #f8b617 วัดได้ 7.9:1 */
.nav-in > .tools.tools-in a.askq + a.askq{
  background:linear-gradient(120deg,#e8890a,#f8b617);
}
.nav-in > .tools.tools-in a.askq + a.askq:hover{
  background:linear-gradient(120deg,#d87f06,#f0ad10);
}
/* พอยืนอยู่บนหน้า quote หรือ join ปุ่มนั้นเป็นหน้าปัจจุบัน ต้องเปลี่ยนเป็น
   สีเดียวกับลิงก์หน้าปัจจุบันตัวอื่น ไม่งั้นแยกไม่ออกว่าอยู่หน้าไหน
   (กฎ .tools a.askq ใน core.css อยู่หลัง .tools a.cur จึงชนะไปโดยปริยาย) */
.nav-in > .tools.tools-in a.askq.cur,
.nav-in > .tools.tools-in a.askq + a.askq.cur{
  background:var(--grad,linear-gradient(120deg,#0b4a8f,#2b8bf2));
  color:#fff;
  box-shadow:0 8px 18px -10px rgba(11,74,143,.9);
}

/* ══════════════════════════════════════════════════════════════════════
   ชื่อเว็บกลางแถบ (จอแคบ)

   จอแคบ ชื่อ "2ProviGroup" ข้างโลโก้ถูกซ่อน (กฎ ≤1249px ด้านล่าง) เหลือ
   แต่รูปวงกลมซึ่งไม่ได้บอกว่านี่เว็บอะไร จึงเอาชื่อมาไว้กลางแถบแทน

   ใช้ absolute + translate ไม่ใช่ margin:auto เพราะฝั่งซ้าย (โลโก้ 40px)
   กับฝั่งขวา (ปุ่มธีม 44 + สามขีด 42) กว้างไม่เท่ากัน ถ้าใช้ flex มันจะ
   ไปอยู่กึ่งกลาง "ที่ว่างที่เหลือ" ซึ่งเยื้องจากกึ่งกลางจอจริง
   ══════════════════════════════════════════════════════════════════════ */
.navmid{display:none}
@media (max-width:980px){
  /* จอแคบ ชื่อข้างโลโก้ถูกแทนที่ด้วยชื่อกลางแถบ จะได้ไม่ซ้ำกันสองที่
     (เดิมตัดที่ 1249px แต่พอแยกสองแถวแล้ว แถวบนโล่งพอให้ชื่ออยู่ถึง 980) */
  .nav-in > .brand > span:not(.mark){display:none}
  .navmid{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    /* กันไม่ให้ยาวจนชนโลโก้หรือปุ่มฝั่งขวา ที่เหลือตัดเป็นจุดไข่ปลา */
    max-width:calc(100% - 215px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:1.06rem;
    font-weight:800;
    letter-spacing:-.01em;
    line-height:1;
    /* [แก้บั๊ก] ตัวอักษรสูงแค่ 15px ซึ่งเป็นเป้าแตะที่เล็กเกินเกณฑ์ WCAG 2.2
       (ขั้นต่ำ 24px) ขยายพื้นที่กดแนวตั้งโดยไม่ขยับตำแหน่งที่ตามองเห็น
       เพราะจัดกึ่งกลางด้วย translate อยู่แล้ว */
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding-inline:6px;
    color:var(--text,var(--tx,#0a1729));
    text-decoration:none;
  }
  /* [แก้บั๊ก] เคยเขียน .hs .navmid{color:#eaf3ff} โดยเดาว่าหน้าสุขภาพพื้นมืด
     ตลอดเวลา ซึ่งผิด — health.css มี [data-theme="light"] อยู่ด้วย ผลคือ
     พอเปิดโหมดสว่างในหน้าสุขภาพ คำว่า "2Provi" กลายเป็นขาวบนขาว หายไปเลย
     (พลาดแบบเดียวกับปุ่มสามขีดเมื่อรอบก่อน)

     ไม่ต้องเขียนทับเลยดีที่สุด ปล่อยให้ไล่ตามตัวแปรของแต่ละหน้าเอง
       core.css   --text #0a1729 / โหมดมืด #eaf3ff
       health.css --tx   #08101f / โหมดมืด #eaf2ff
     ตัวอักษรเน้นก็เช่นกัน --b500 (น้ำเงิน) หรือ --jade (เขียวมิ้นต์) */
  .navmid b{color:var(--b500,var(--jade,#2b8bf2));font-weight:800}
}
/* จอแคบ .tools ถูกซ่อน (mobile.css) จึงไม่มีอะไรดัน .acts ไปขวาอีกแล้ว
   ต้องดันเอง ไม่งั้นปุ่มธีมกับสามขีดจะไปกองอยู่ติดโลโก้ฝั่งซ้าย */
@media (max-width:980px){
  .nav-in > .acts{margin-left:auto}
}
@media (max-width:400px){
  .navmid{font-size:.96rem;max-width:calc(100% - 195px)}
}
@media (max-width:340px){
  .navmid{font-size:.9rem;max-width:calc(100% - 180px)}
}

/* ── ความกว้างของแถบหัว ──
   .wrap เดิมคุมไว้ที่ 1180px ซึ่งพอดีสำหรับเนื้อหาที่อ่านเป็นบรรทัด
   แต่แถบหัวตอนนี้ต้องใส่ทั้งชื่อแบรนด์ เมนูข้ามหน้า 7 ลิงก์ เม็ดยาทีมงาน
   ปุ่มหลัก และปุ่มสามขีด รวมแล้วราว 1,400px จึงต้องกว้างกว่าเนื้อหา
   จอกว้างจะได้เห็นเมนูครบโดยไม่ต้องเลื่อน */
.nav > .wrap.nav-in{width:min(1640px,calc(100% - 30px))}

/* ลดระยะในเม็ดยาของเมนูข้ามหน้าลงเล็กน้อยเฉพาะตอนอยู่บนแถบหัว
   เพื่อให้ครบทั้ง 7 ลิงก์ในแถวเดียวบนจอโน้ตบุ๊ก */
.nav-in > .tools.tools-in{gap:.22rem}
.nav-in > .tools.tools-in a{padding:.42rem .68rem}

/* ══════════════════════════════════════════════════════════════════════
   เม็ดยาทีมงาน — ให้อ่านได้เต็มคำ

   [เปลี่ยนแนวคิด] ของเดิมซ่อนข้อความ "ทีมตัวแทนผู้ให้บริการ" ทิ้งตั้งแต่
   จอต่ำกว่า 1600px เหลือแค่รูปทีมกับลูกศร ซึ่งคนไม่รู้ว่ากดไปแล้วเจออะไร
   พอแยกเป็นสองแถว แถวบนเหลือแค่ โลโก้ + ปุ่มธีม + ปุ่มลัด + เม็ดยา + สามขีด
   รวมราว 800px จึงมีที่เหลือเฟือ ไม่ต้องซ่อนข้อความอีกแล้ว
   (จอแคบ ≤980px เม็ดยาถูกซ่อนทั้งอัน แล้วใช้แถบเต็มความกว้างแทน)
   ══════════════════════════════════════════════════════════════════════ */
.acts .teampill{
  padding:.52rem 1.05rem .52rem .6rem;
  gap:.6rem;
  font-size:.92rem;
}
.acts .teampill .tf{width:29px;height:29px;font-size:.7rem}

/* จอต่ำกว่า 1100 — ย่อระยะลงเล็กน้อย แต่ยังคงข้อความไว้ครบ */
@media (max-width:1099px){
  .acts .teampill{padding:.48rem .85rem .48rem .5rem;gap:.45rem;font-size:.86rem}
  .acts .teampill .tf{width:26px;height:26px;font-size:.64rem}
}

/* ชื่อ 2ProviGroup ข้างโลโก้อยู่ได้ยาวถึง 980px แล้ว เพราะแถวบนโล่ง
   ต่ำกว่านั้น .navmid กลางแถบรับช่วงต่อ */
@media (max-width:1249px){
  .nav-in{gap:.5rem}
}

/* จอต่ำกว่า 1200 — ย่อเม็ดยาเมนูลงเล็กน้อย แต่ไม่ต้องบีบมากเหมือนเดิมแล้ว
   เพราะลิงก์อยู่แถวของตัวเอง และตกบรรทัดได้เองถ้าที่ไม่พอ */
@media (max-width:1199px){
  .nav-in > .tools.tools-in a{padding:.42rem .62rem;font-size:.86rem}
  .nav-in > .tools.tools-in{gap:.2rem}
}

/* ══════════════════════════════════════════════════════════════════════
   ปุ่มเหลืองสองตัวท้ายแถวล่าง

   [แก้บั๊ก] เดิมเป็นลูกของ .tools-in ตรง ๆ โดยตัวแรกมี margin-left:auto
   ไว้ดันไปชิดขวา พอจอแคบลงจนลิงก์ต้องตกบรรทัด ปุ่มสองตัวถูกแยกคนละบรรทัด
   และตัวที่ตกลงมา (ซึ่งไม่มี auto) ไปกองชิดซ้ายแทน — เห็นชัดที่ 1000px
   ห่อไว้ใน .navcta ตัวเดียวแล้วย้าย auto มาไว้ที่ตัวห่อ ทั้งคู่จึงตกบรรทัด
   พร้อมกันและยังชิดขวาเสมอ

   เป้าแตะสูง 42px ตามที่ WCAG 2.2 แนะนำ (ขั้นต่ำจริง 24px) เพื่อคนที่
   มือสั่นหรือสายตาไม่ดี ซึ่งเป็นกลุ่มผู้อ่านหลักของเว็บนี้
   ══════════════════════════════════════════════════════════════════════ */
.nav-in > .tools.tools-in > .navcta{
  display:flex;
  align-items:center;
  gap:.34rem;
  flex:none;
  margin-left:auto;
}
.nav-in > .tools.tools-in > .navcta a.askq{
  margin-left:0;
  min-height:42px;
  padding:.52rem 1.1rem;
  font-size:.92rem;
}
@media (max-width:1199px){
  .nav-in > .tools.tools-in > .navcta a.askq{padding:.5rem .9rem;font-size:.88rem}
}
/* จอแคบมาก ปุ่มคู่นี้ขยายเต็มแถวของตัวเองจะกดง่ายกว่าเบียดกันอยู่มุมขวา
   (ยังไม่ถึง 980px ที่แถบลิงก์ทั้งแถวถูกซ่อน) */
@media (max-width:1049px){
  .nav-in > .tools.tools-in > .navcta{flex:1 0 100%;justify-content:flex-end;margin-top:.2rem}
}

/* ───────────────── ปุ่มสามขีด : เปิดแถบหัวข้อ ───────────────── */

/* เดิมปุ่มนี้โผล่เฉพาะจอแคบ ตอนนี้เป็นตัวเปิดแถบหัวข้อจึงต้องมีทุกความกว้าง */
.burger{
  display:flex !important;
  flex-direction:column;
  gap:5px;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(127,150,180,.32);
  background:rgba(255,255,255,.55);
  cursor:pointer;
  flex:none;
  transition:background .25s,border-color .25s;
}
.burger:hover{background:rgba(255,255,255,.9);border-color:rgba(20,102,196,.55)}
.burger:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}
.burger span{
  width:19px;height:2px;border-radius:2px;
  background:#2b3f57;
  transition:transform .3s cubic-bezier(.22,.8,.2,1),opacity .3s;
}
/* [แก้บั๊ก] เดิมบังคับสีอ่อนให้หน้าสุขภาพด้วยคลาส .hs เพราะคิดว่าหน้านั้น
   พื้นมืดตลอด ที่จริงหน้าสุขภาพสลับโหมดสว่าง/มืดได้เหมือนหน้าอื่น
   พอผู้ใช้อยู่โหมดสว่าง ขีดสีขาวจึงหายไปกับพื้นขาว
   ตอนนี้ผูกสีกับ data-theme อย่างเดียว ทุกหน้าจึงถูกต้องทั้งสองโหมด */
[data-theme="dark"] .burger{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
[data-theme="dark"] .burger:hover{background:rgba(255,255,255,.15)}
[data-theme="dark"] .burger span{background:#e6effb}

.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ───────────────── แถบข้าง : หัวข้อในหน้า ───────────────── */

.siderail{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:220;              /* สูงกว่า .botnav (200) ต่ำกว่าแถบคุกกี้ (300) */
  width:min(304px,84vw);
  padding:calc(78px + env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom));
  background:rgba(253,254,255,.97);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-left:1px solid rgba(127,150,180,.22);
  box-shadow:-24px 0 60px -34px rgba(4,20,46,.55);
  transform:translateX(102%);
  visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.8,.2,1),visibility .34s;
  overflow-y:auto;
  overscroll-behavior:contain;
}
[data-theme="dark"] .siderail{
  background:rgba(9,24,48,.97);
  border-left-color:rgba(255,255,255,.12);
}
/* เบราว์เซอร์ที่ไม่รองรับ backdrop-filter ต้องได้พื้นทึบ ไม่งั้นตัวหนังสือ
   จะทับเนื้อหาที่อยู่ข้างหลัง */
@supports not (backdrop-filter:blur(4px)){
  .siderail{background:#fdfeff}
  [data-theme="dark"] .siderail{background:#091830}
}

.siderail.open{transform:none;visibility:visible}

.siderail-in{padding:0 16px}

.siderail-h{
  margin:0 0 .55rem;
  padding:0 .6rem;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:none;
  color:#6c819b;
}
[data-theme="dark"] .siderail-h{color:#9db3d1}

/* ล้างสไตล์เดิมของ .links ที่เคยเป็นแถวแนวนอนบนแถบหัว
   และที่เคยเป็นกล่องลอยใต้แถบหัวบนจอแคบ */
.siderail .links{
  position:static !important;
  display:flex !important;
  flex-direction:column;
  gap:2px;
  inset:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
  flex-wrap:nowrap;
}

.siderail .links a{
  display:block;
  padding:.62rem .72rem;
  border-radius:12px;
  font-size:.93rem;
  font-weight:600;
  line-height:1.45;
  text-decoration:none;
  color:#3d566f;
  background:none;
  border-left:3px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.siderail .links a:hover{
  color:#0b4a8f;
  background:rgba(20,102,196,.09);
}
/* หัวข้อที่กำลังอ่านอยู่ — core.js / page-*.js เติมคลาส .act ให้เอง */
.siderail .links a.act{
  color:#0b4a8f;
  background:rgba(20,102,196,.13);
  border-left-color:#1466c4;
}
.siderail .links a:focus-visible{outline:2px solid #1466c4;outline-offset:-2px}

[data-theme="dark"] .siderail .links a{color:#b8c9e0}
[data-theme="dark"] .siderail .links a:hover{color:#5cc9fb;background:rgba(56,189,248,.12)}
[data-theme="dark"] .siderail .links a.act{color:#5cc9fb;background:rgba(56,189,248,.16);border-left-color:#38bdf8}

/* ลิงก์ข้ามหน้าที่ nav.js เคยโคลนมาใส่เมนู — ไม่ใช้แล้วในโครงใหม่
   (แถบหัวมีลิงก์ชุดนั้นครบอยู่แล้วทุกความกว้าง) */
.siderail .xp{display:none}

/* ───────────────── ฉากบังหลังแถบข้าง ───────────────── */
.siderail-veil{
  position:fixed;
  inset:0;
  z-index:210;
  background:rgba(4,16,34,.42);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .3s;
}
.siderail-veil[hidden]{display:none}
.siderail-veil.on{opacity:1}

/* ล็อกการเลื่อนหน้าหลักขณะเปิดแถบข้างบนจอแคบ
   จอกว้างไม่ล็อก เพราะแถบกินพื้นที่แค่ริมขวา ยังอ่านเนื้อหาไปด้วยได้ */
@media (max-width:980px){
  html.rail-open,
  html.rail-open body{overflow:hidden}
}

/* ───────────────── ระยะกระโดดของลิงก์ในหน้า ─────────────────
   [แก้บั๊ก] เดิมเขียนตัวเลขตายตัว 86/128/122px ซึ่งเดาจากความสูงแถบ
   ที่ประมาณเอาไว้ พอความสูงจริงเปลี่ยน (แถบหัวเป็น 81px, แถบทีมงาน
   กลับมาปักหมุดอีกครั้ง) ตัวเลขพวกนี้ก็ผิดทันทีแบบเงียบ ๆ

   เปลี่ยนมาคิดจากของจริง — --stickyh คือผลรวมความสูงของทุกแถบที่
   "ปักหมุดอยู่บนยอดจอจริง ๆ" ณ ความกว้างนั้น วัดและเขียนให้โดย
   logo-zoom.js บวกระยะหายใจอีก 8px ให้หัวข้อไม่ชิดขอบแถบ
   ค่าใน var() ตัวหลังเป็นค่าสำรองกันกระพริบตอน JS ยังไม่ทำงาน */
html{scroll-padding-top:calc(var(--stickyh,81px) + 8px)}

/* ───────────────── จอแคบ ───────────────── */
@media (max-width:980px){
  /* ลิงก์ข้ามหน้าบนแถบหัวยังอยู่ แต่ย่อระยะลงให้พอดีแถวเดียว */
  .nav-in > .tools.tools-in{gap:.25rem}
  .nav-in > .tools.tools-in a{padding:.4rem .72rem;font-size:.84rem}
  /* ปุ่ม "สมัครเป็นตัวแทน/เริ่มประเมิน" ถูกซ่อนบนจอแคบอยู่แล้ว (.nosm)
     เม็ดยาทีมงานก็ซ่อน เหลือปุ่มสลับธีมกับปุ่มสามขีด */
}
@media (max-width:560px){
  .nav-in{gap:.4rem}
  .nav-in > .tools.tools-in a{padding:.36rem .54rem;font-size:.8rem}
}

@media (prefers-reduced-motion:reduce){
  .siderail,.siderail-veil,.burger span,.siderail .links a{transition:none}
}

@media print{
  .siderail,.siderail-veil,.burger{display:none !important}
}

/* ══════════════════════════════════════════════════════════════════════
   ทำให้หน้าเนื้อหาทั้งสี่ใช้โครงเดียวกัน ต่างกันแค่สีประจำหน้า

   money / retire / education ใช้ core.css จึงเหมือนกันอยู่แล้ว
   health ใช้ health.css ซึ่งตั้งค่าคนละชุด ส่วนนี้ดึงให้มาตรงกัน
     · สัดส่วนคอลัมน์ hero       628/494  →  600/532
     · ช่องไฟระหว่างคอลัมน์       58px     →  48px
     · ระยะห่างบนของ hero        112px    →  64px
     · ความสูงแถบหัว              76px     →  81px
   ส่วนสีเขียวมิ้นต์ ตัวการ์ด และกราฟคลื่นหัวใจของหน้าสุขภาพคงไว้ตามเดิม
   ══════════════════════════════════════════════════════════════════════ */

.hero-g{
  grid-template-columns:1.06fr .94fr;
  gap:3rem;
  /* [แก้บั๊ก] เดิมเป็น center ทำให้แต่ละคอลัมน์ถูกจัดกึ่งกลางตามความสูงของ
     คอลัมน์ที่สูงกว่า หน้าที่เนื้อหายาวไม่เท่ากันจึงเริ่มต้นคนละระดับ
     วัดจากขอบล่างแถบหัว: ป้ายหัวเรื่องอยู่ที่ 76 / 210 / 64 / 113 px
     เปลี่ยนเป็น start ทุกหน้าจึงเริ่มที่ระดับเดียวกันพอดี */
  align-items:start;
}
.hero{padding-top:4rem}
/* box-sizing:border-box ทำให้ min-height นับรวม padding ค่านี้จึงเป็นความสูงรวม */
.nav-in{padding-block:.7rem;min-height:80px}

/* ══════════════════════════════════════════════════════════════════════
   ตำแหน่งโลโก้ใบใหญ่ใน hero

   เดิม .hero-logo เป็นลูกของ .art (คอลัมน์ขวา) ซึ่งบนจอกว้างก็ถูกแล้ว —
   โลโก้ลอยอยู่เหนือการ์ด แต่พอจอแคบ กริดยุบเหลือคอลัมน์เดียว .art
   ไหลลงไปอยู่ "ใต้ข้อความทั้งก้อน" โลโก้จึงจมอยู่ลึกมาก ต้องเลื่อนผ่าน
   หัวเรื่อง ย่อหน้านำ ปุ่ม และตัวเลขสถิติกว่าจะเจอ

   ย้ายมาเป็นลูกตัวแรกของ .hero-g แทน จอแคบจึงได้โลโก้อยู่บนสุดทันที
   ใต้แถบทีมงานพอดี ส่วนจอกว้างใช้การระบุตำแหน่งในกริดดึงกลับไปไว้ที่เดิม
   (คอลัมน์ 2 แถว 1 เหนือการ์ด) ผลลัพธ์บนจอกว้างจึงเท่าเดิมทุกพิกเซล
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:981px){
  .hero-g{
    grid-template-rows:auto 1fr;
    /* ช่องไฟแนวตั้งระหว่างโลโก้กับการ์ดมาจาก margin-bottom ของโลโก้เอง
       (22px ตาม logo-zoom.css) ถ้าปล่อย row-gap ไว้ 3rem จะกลายเป็น 70px */
    row-gap:0;
  }
  .hero-g > .hero-logo{grid-column:2;grid-row:1;align-self:start}
  /* คอลัมน์ข้อความกินสองแถว จะได้เริ่มที่ระดับบนสุดเหมือนเดิม */
  .hero-g > .rv:not(.art){grid-column:1;grid-row:1 / span 2}
  .hero-g > .art{grid-column:2;grid-row:2}
}

@media (max-width:980px){
  .hero-g{grid-template-columns:1fr}
  /* จอแคบ: โลโก้อยู่บนสุด ลดระยะบนของ hero ลงเพื่อให้เห็นตั้งแต่ยังไม่เลื่อน */
  .hero{padding-top:1.4rem}
  .hero-g > .hero-logo{order:-1}
}
@media (max-width:640px){
  .hero{padding-top:1.1rem}
}

/* ป้ายลอยสองใบของหน้าสุขภาพ — health.css ไม่มีกฎ .tagA/.tagB
   เขียนด้วยค่าสีตรง ๆ ให้เข้ากับพื้นมืดของหน้านั้น

   สำคัญ: ป้ายเป็น position:absolute จึงต้องมีบรรพบุรุษที่ positioned
   ไม่งั้นมันจะไปเกาะมุมซ้ายบนของทั้งหน้า core.css มี .art{position:relative}
   อยู่แล้ว แต่ health.css ไม่มี ต้องประกาศตรงนี้ให้ครบทุกหน้า */
.hero .art{position:relative;z-index:1}

/* กล่องครอบการ์ดกับป้ายลอย — ป้ายอ้างตำแหน่งกับกล่องนี้ ไม่ใช่กับทั้งคอลัมน์
   ถ้าไม่มีกล่องนี้ ป้าย .tagA (top:-16px) จะไปเกาะข้างโลโก้แทนที่จะเกาะการ์ด */
.art-stage{position:relative}

.hs .tagA,.hs .tagB{
  position:absolute;
  padding:.55rem 1rem;
  border-radius:14px;
  font-size:.82rem;
  font-weight:700;
  background:var(--panel,#0f2033);
  border:1px solid var(--line,rgba(255,255,255,.12));
  box-shadow:0 18px 38px -22px rgba(0,0,0,.85);
  z-index:2;
}
.hs .tagA{top:-16px;left:-14px;animation:bob 5.5s ease-in-out infinite}
.hs .tagB{bottom:-18px;right:-12px;animation:bob 7s ease-in-out infinite .9s}
@keyframes bob{50%{transform:translateY(-13px)}}
@media (max-width:640px){
  .hs .tagA{left:0}
  .hs .tagB{right:0}
}

/* แถบข้อความวิ่งของหน้าสุขภาพ — health.css ไม่มีกฎ .marq */
.hs .marq{position:relative;z-index:1;overflow:hidden;background:var(--gJade,linear-gradient(120deg,#0b7a5e,#14b88a));color:#04211a;padding:.8rem 0}
.hs .marq div{display:flex;gap:2.2rem;width:max-content;white-space:nowrap;font-weight:700;font-size:.92rem;animation:sc 34s linear infinite}
@keyframes sc{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .hs .tagA,.hs .tagB,.hs .marq div{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   ให้ระยะในส่วน hero ของสี่หน้าเนื้อหาตรงกันทุกบรรทัด

   หลังตั้ง align-items:start แล้ว ป้ายหัวเรื่อง หัวเรื่อง โลโก้ และการ์ด
   เริ่มที่ระดับเดียวกันทุกหน้าแล้ว แต่ย่อหน้านำกับแถวปุ่มยังเหลื่อมกัน
   เพราะหัวเรื่องของแต่ละหน้ายาวไม่เท่ากัน (2 หรือ 3 บรรทัด) และย่อหน้านำ
   ก็ 2-4 บรรทัด

   จองความสูงขั้นต่ำเท่าหน้าที่ยาวที่สุด หน้าที่สั้นกว่าจะมีช่องว่างเสริม
   ให้ลงล็อกพอดีกัน ทำเฉพาะจอที่เป็นสองคอลัมน์ (>980px) เพราะจอแคบ
   คอลัมน์เรียงลงมาอยู่แล้ว ไม่มีอะไรให้เทียบ

   ค่าที่ใช้: หัวเรื่อง line-height 1.3em สูงสุด 3 บรรทัด = 3.9em
             ย่อหน้านำ line-height 1.78em สูงสุด 4 บรรทัด = 7.12em
   ══════════════════════════════════════════════════════════════════════ */
/* ตั้งค่าตัวอักษรและระยะขอบของ hero ให้ตรงกันทุกหน้าก่อน
   health.css ใช้ค่าต่างจาก core.css อยู่หลายจุด ทำให้เหลื่อมกัน 3-6px
     ป้ายหัวเรื่อง  ตัวอักษร 13.28 vs 13.6 · ระยะล่าง 20.8 vs 0
     หัวเรื่อง      ระยะบน 0 vs 17.6 · ระยะล่าง 17.6 vs 14.4 · lh 1.24 vs 1.3
     ย่อหน้านำ      ตัวอักษร 18.56 vs 17.6 · lh 1.8 vs 1.78
     แถวปุ่ม        ระยะบน 28.8 vs 30.4
   ยึดค่าของ core.css เป็นหลัก */
/* ป้ายหัวเรื่องเป็น inline-flex จึงถูกจัดตาม baseline ของบรรทัด
   อีโมจิคนละตัวมี baseline ไม่เท่ากัน ป้ายเลยเริ่มต่างกัน 5-6px ในแต่ละหน้า
   บังคับให้ชิดบนของบรรทัดแทน ทุกหน้าจึงเริ่มที่ระดับเดียวกัน */
body.topic .hero .pill{font-size:.85rem;margin:0;vertical-align:top}
body.topic .hero h1{margin:1.1rem 0 .9rem;line-height:1.3}
body.topic .hero .lead{font-size:1.1rem;line-height:1.78;margin:0}
body.topic .hero .cta-row{margin:1.9rem 0}

@media (min-width:981px){
  /* จองความสูงขั้นต่ำเท่าหน้าที่ยาวที่สุด หน้าที่สั้นกว่าจึงลงล็อกพอดีกัน */
  body.topic .hero h1{min-height:3.9em}
  body.topic .hero .lead{min-height:7.12em}
}