/* เมนูบน + ท้ายเว็บ + ปุ่มลอย (ใหม่ 2026-10-13 · แบบ ก · index_navbar.php / index_footer.php · ทุกหน้าลูกค้า)
   ทุก class ขึ้นต้น rnav- / rhf- (กันชน Bootstrap 3 + CSS เก่าใน index_head.php) · สีชุดเดียวกับ rh_cards.css (กรมท่า #202A73 · เหลือง #F2B705)
   ความสูงเมนูคงเดิม: คอม ≥1201px = 64 · มือถือ ≤1200px = 68 (body padding-top ใน index_head.php + แถบค้นหาลอย top 64/68 ใน rh_search.css ผูกไว้) */
.rnav { --rnav-navy: #202A73; --rnav-navy2: #141B4C; --rnav-ink: #17213A; --rnav-muted: #5B6578; --rnav-line: #E3E8F0; --rnav-soft: #F4F6FA; --rnav-pri: #1F4FB5;
  --rnav-yel: #F2B705; --rnav-green: #06C755;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: transparent; color: var(--rnav-ink); pointer-events: none;
  font-family: 'Sarabun', sans-serif; }
.rnav *, .rnav *::before, .rnav *::after { box-sizing: border-box; }
/* แถบขาวลอย มุมมน (เจ้าของ 2026-10-16 · เดิมพื้นกรมท่าเต็มกว้าง): .rnav โปร่ง (คลิกทะลุช่องว่างได้) · .rnav-in = แถบขาว · สูงรวมเท่าเดิม 8 + 56 = 64 (มือถือ 8 + 60 = 68) = body padding/แถบค้นหาลอยไม่ต้องแก้ */
.rnav > * { pointer-events: auto; }
.rnav a { text-decoration: none; }
.rnav-i { width: 20px; height: 20px; flex: none; }
.rnav-in { display: flex; align-items: center; gap: 6px; height: 56px; width: calc(100% - 32px); max-width: 1340px; margin: 8px auto 0; padding: 0 12px 0 18px;
  background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(20, 30, 80, .06), 0 8px 28px rgba(10, 16, 50, .14); }
.rnav-logo { display: flex; align-items: center; height: 100%; margin-right: 12px; flex: none; }
.rnav-logo img { height: 44px; width: auto; display: block; }
.rnav-menu { display: flex; align-items: center; height: 100%; }
.rnav-ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; height: 100%; gap: 2px; }
.rnav-li { position: relative; height: 100%; display: flex; align-items: center; }
.rnav-top { display: inline-flex; align-items: center; gap: 4px; padding: 8px 11px; border-radius: 10px; color: #1B2440 !important; font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.rnav-top .rnav-i { width: 14px; height: 14px; opacity: .6; }
.rnav-li:hover > .rnav-top, .rnav-top:focus-visible, .rnav-on > .rnav-top { background: #EEF2FB; color: var(--rnav-pri) !important; }
.rnav-top:focus-visible, .rnav a:focus-visible, .rnav button:focus-visible { outline: 3px solid rgba(31, 79, 181, .45); outline-offset: 2px; }
.rnav-exp { display: none; }
.rnav-dd { display: none; position: absolute; top: calc(100% - 6px); left: 0; min-width: 250px; background: #fff; color: var(--rnav-ink); border-radius: 14px; padding: 8px;
  box-shadow: 0 14px 40px rgba(10, 20, 60, .22); border: 1px solid var(--rnav-line); z-index: 2; }
.rnav-has:hover > .rnav-dd, .rnav-has:focus-within > .rnav-dd { display: block; }
.rnav-has:hover > .rnav-dd-2, .rnav-has:focus-within > .rnav-dd-2 { display: grid; grid-template-columns: 1fr 1fr; min-width: 440px; }
.rnav-dd a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--rnav-ink) !important; font-size: 15px; line-height: 1.35; }
.rnav-dd a:hover, .rnav-dd a:focus-visible { background: #EEF2FB; color: var(--rnav-pri) !important; }
.rnav-dd .rnav-i { width: 17px; height: 17px; color: var(--rnav-pri); }
.rnav-dd .rnav-all { grid-column: 1 / -1; justify-content: center; border-top: 1px solid var(--rnav-line); border-radius: 0 0 9px 9px; margin-top: 4px; color: var(--rnav-pri) !important; font-weight: 600; }
.rnav-dd .rnav-hi { background: #FFF6D6; font-weight: 700; margin-bottom: 4px; }
.rnav-r { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.rnav-line, .rnav-cta, .rnav-tel { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap; padding: 8px 15px; }
.rnav-line { background: var(--rnav-green); color: #fff !important; }
.rnav-line .rnav-i { width: 18px; height: 18px; }
.rnav-cta { background: var(--rnav-yel); color: #1B1A10 !important; }
.rnav-line:hover, .rnav-cta:hover { filter: brightness(.95); }
.rnav-tel { border: 1.5px solid var(--rnav-line); color: var(--rnav-ink) !important; }
.rnav-burger, .rnav-search { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--rnav-navy); padding: 0; }
.rnav-burger .rnav-i, .rnav-search .rnav-i { width: 25px; height: 25px; }
.rnav-drawer-top, .rnav-drawer-foot, .rnav-scrim { display: none; }

@media (max-width: 1340px) and (min-width: 1201px) {
  .rnav-top { padding: 8px 8px; font-size: 15px; }
  .rnav-r .rnav-line span { display: none; }
  .rnav-r .rnav-line { padding: 8px 10px; }
}

/* มือถือ/แท็บเล็ต (≤1200px = เดิมใช้เมนูมือถือ) */
@media (max-width: 1200px) {
  .rnav-in { height: 60px; width: calc(100% - 20px); padding: 0 8px; border-radius: 14px; justify-content: space-between; }
  .rnav-burger, .rnav-search { display: inline-flex; }
  .rnav-logo { margin: 0; }
  .rnav-logo img { height: 42px; }
  .rnav-r { display: none; }
  .rnav-menu { position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 380px); height: auto; background: #fff; color: var(--rnav-ink); flex-direction: column; align-items: stretch;
    overflow-y: auto; padding: 14px 14px 24px; transform: translateX(-102%); transition: transform .22s ease; z-index: 3; box-shadow: 4px 0 30px rgba(0, 0, 0, .25); visibility: hidden; }
  .rnav-open .rnav-menu { transform: none; visibility: visible; }
  .rnav-scrim { display: block; position: fixed; inset: 0; background: rgba(10, 15, 40, .45); z-index: 2; }
  .rnav-scrim[hidden] { display: none; }
  .rnav-open .rnav-burger { position: relative; z-index: 4; }
  .rnav-drawer-top { display: block; margin-bottom: 6px; }
  .rnav-cta-block { display: flex; width: 100%; padding: 13px; font-size: 16px; }
  .rnav-ul { flex-direction: column; align-items: stretch; height: auto; gap: 0; }
  .rnav-li { height: auto; flex-wrap: wrap; border-bottom: 1px solid var(--rnav-line); }
  .rnav-top { flex: 1; color: var(--rnav-ink) !important; padding: 14px 6px; min-height: 48px; font-size: 16.5px; font-weight: 700; border-radius: 0; }
  .rnav-top .rnav-i { display: none; }
  .rnav-li:hover > .rnav-top, .rnav-on > .rnav-top { background: transparent; }
  .rnav-on > .rnav-top { color: var(--rnav-pri) !important; }
  .rnav-exp { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: transparent; color: var(--rnav-muted); }
  .rnav-exp .rnav-i { transition: transform .15s; }
  .rnav-x > .rnav-exp .rnav-i { transform: rotate(180deg); }
  .rnav-has:hover > .rnav-dd, .rnav-has:focus-within > .rnav-dd, .rnav-has:hover > .rnav-dd-2, .rnav-has:focus-within > .rnav-dd-2 { display: none; }
  .rnav-x > .rnav-dd, .rnav-x > .rnav-dd-2 { display: flex !important; }
  .rnav-dd, .rnav-dd-2 { position: static; flex-basis: 100%; flex-wrap: wrap; gap: 8px; min-width: 0 !important; box-shadow: none; border: 0; padding: 0 2px 14px; background: transparent; }
  .rnav-dd a { flex: 0 1 auto; min-height: 44px; padding: 10px 14px; border: 1px solid var(--rnav-line); background: var(--rnav-soft); border-radius: 999px; font-size: 15px; }
  .rnav-dd .rnav-i { display: none; }
  .rnav-dd .rnav-all { border-top: 1px solid var(--rnav-line); margin-top: 0; border-radius: 999px; }
  .rnav-dd .rnav-hi { margin-bottom: 0; }
  .rnav-drawer-foot { display: grid; gap: 10px; margin-top: 18px; }
  .rnav-drawer-foot a { padding: 12px; font-size: 16px; }
  html.rnav-lock, html.rnav-lock body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .rnav-menu { transition: none; } }

/* ปุ่ม ☰ ↔ ✕ */
.rnav-burger .rnav-i-x { display: none; }
.rnav-open .rnav-burger .rnav-i-m { display: none; }
.rnav-open .rnav-burger .rnav-i-x { display: block; }
@media (max-width: 1200px) {
  .rnav-menu { padding-top: 76px; }
  .rnav-open .rnav-burger { color: var(--rnav-ink); }
}

/* ---------- ท้ายเว็บ ---------- */
.rhf { --rhf-text: #C9D3F0; background: #141B4C; color: var(--rhf-text); font-family: 'Sarabun', sans-serif; margin-top: 0; }
.rhf *, .rhf *::before, .rhf *::after { box-sizing: border-box; }
.rhf a { text-decoration: none; }
.rhf-in { max-width: 1200px; margin: 0 auto; padding: 40px 24px 28px; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; }
.rhf-logo { height: 58px; width: auto; display: block; }
.rhf-co { margin: 12px 0 4px; color: #fff; font-weight: 700; font-size: 15px; line-height: 1.45; }
.rhf-addr { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.rhf-chs { display: flex; flex-wrap: wrap; gap: 8px; }
.rhf-ch { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, .28); }
.rhf-ch .rnav-i { width: 17px; height: 17px; }
.rhf-ch-line { background: #06C755; border-color: #06C755; }
.rhf-ch:hover { filter: brightness(1.08); }
.rhf-fb { margin-top: 16px; max-width: 100%; overflow: hidden; }
.rhf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.rhf-h { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0; margin: 0 0 12px; border: 0; background: transparent; color: #fff;
  font: 700 16px/1.4 'Sarabun', sans-serif; text-align: left; cursor: default; }
.rhf-h .rnav-i { display: none; width: 18px; height: 18px; }
.rhf-l { display: grid; gap: 8px; align-content: start; }
.rhf-l a { color: var(--rhf-text) !important; font-size: 14px; line-height: 1.45; }
.rhf-l a:hover, .rhf-l a:focus-visible { color: #fff !important; }
.rhf-tag { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
.rhf-tag p { margin: 0 0 8px; }
.rhf-tag a { color: var(--rhf-text) !important; }
.rhf a:focus-visible, .rhf button:focus-visible { outline: 3px solid #FFD45C; outline-offset: 2px; }
.rhf-copyrow { border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; padding: 12px 16px 6px; background: #10163F; }
@media (max-width: 991px) {
  .rhf-in { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 16px 18px; }
  .rhf-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rhf-col { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .rhf-h { margin: 0; padding: 14px 0; min-height: 48px; cursor: pointer; }
  .rhf-h .rnav-i { display: block; transition: transform .15s; }
  .rhf-x .rhf-h .rnav-i { transform: rotate(180deg); }
  .rhf-l { display: none; padding-bottom: 14px; gap: 4px; }
  .rhf-l a { padding: 6px 0; }
  .rhf-x .rhf-l { display: grid; }
}

/* ปุ่มลอย ติดต่อเรา (เดิม #chat ปุ่มเขียว Bootstrap + เมนู dropup รายการ social) */
#chat.rhf-chat { right: 18px; bottom: 22px; opacity: 1; filter: none; }
.rhf-chat-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 18px; background: #06C755; color: #fff;
  font: 700 16px/1 'Sarabun', sans-serif; box-shadow: 0 8px 22px rgba(6, 120, 60, .35); }
.rhf-chat-btn .rnav-i { width: 20px; height: 20px; }
.rhf-chat-btn:focus-visible { outline: 3px solid #FFD45C; outline-offset: 2px; }
#chat.rhf-chat > .dropup > .rhf-chat-menu { background: #fff; border-radius: 14px; padding: 6px; border: 1px solid #E3E8F0; box-shadow: 0 14px 40px rgba(10, 20, 60, .22); min-width: 230px; }
#chat.rhf-chat > .dropup > .rhf-chat-menu > li > a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: #17213A !important; font-size: 15px; font-weight: 600; }
#chat.rhf-chat > .dropup > .rhf-chat-menu > li > a:hover { background: #EEF2FB; }
@media (max-width: 640px) { #chat.rhf-chat { right: 12px; bottom: 14px; } .rhf-chat-btn { padding: 10px 14px; font-size: 15px; } }
/* งาน 4 (2026-10-17 · เจ้าของ "ตามแนะนำ"): ปุ่มลอยติดต่อเรา = วงกลมไอคอนไลน์ ไม่มีตัวหนังสือบนจอ (คำ "ติดต่อเรา" ยังอยู่ให้โปรแกรมอ่านจอ) · มือถือไม่บังปุ่มในหน้า */
.rhf-chat-btn { width: 56px; height: 56px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
.rhf-chat-btn .rnav-i { width: 28px; height: 28px; }
.rhf-chat-btn > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 640px) { .rhf-chat-btn { width: 52px; height: 52px; padding: 0; } .rhf-chat-btn .rnav-i { width: 26px; height: 26px; } }