/* ══════════════════════════════════════════════════════════════════════
   logo-zoom.css — กดโลโก้บนแถบหัวแล้วขยายดูเต็มใบ

   รูปที่ใช้บนแถบหัวคือโลโก้เต็มวง (มีวงแหวนตัวหนังสือครบ) ย่อลงมาเหลือ
   40px ตัวหนังสือรอบวงจึงอ่านไม่ออก ส่วนนี้ทำให้กดแล้วเห็นไฟล์ต้นฉบับ
   ขนาดเต็มได้

   z-index 1000 = สูงกว่าทุกอย่างในเว็บ
   (.ck แถบคุกกี้ 300 > .botnav 200 > .nav 150 > #toTop 140)
   ══════════════════════════════════════════════════════════════════════ */

/* ── ตัวโลโก้บนแถบหัว/ฟุตเตอร์ ── */
.mark.is-zoomable,
.brand-mark.is-zoomable{
  cursor:zoom-in;
}
.mark.is-zoomable img,
.brand-mark.is-zoomable img{
  transition:transform .22s cubic-bezier(.22,.8,.2,1);
}
.mark.is-zoomable:hover img,
.brand-mark.is-zoomable:hover img{
  transform:scale(1.07);
}

/* ปุ่มสำหรับคนที่ใช้คีย์บอร์ด/โปรแกรมอ่านหน้าจอ
   ซ่อนสายตาไว้ แต่พอ tab มาถึงจะโผล่ขึ้นมาให้เห็นว่ากดได้ */
.logo-zoom-key{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  background:#0b4a8f;color:#fff;
  border-radius:10px;
  font:600 13px/1.4 inherit;
}
.logo-zoom-key:focus-visible{
  position:static;
  width:auto;height:auto;
  margin:0 0 0 .5rem;padding:.4rem .7rem;
  overflow:visible;
  clip:auto;clip-path:none;
  outline:2px solid #fff;outline-offset:2px;
}

/* ── ฉากดำเต็มจอ ── */
.lbx{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(18px,env(safe-area-inset-top))
          max(18px,env(safe-area-inset-right))
          max(18px,env(safe-area-inset-bottom))
          max(18px,env(safe-area-inset-left));
  background:rgba(4,14,28,.90);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  animation:lbx-in .22s ease forwards;
}
.lbx[hidden]{display:none}

@keyframes lbx-in{to{opacity:1}}

.lbx-fig{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
  max-width:100%;
  max-height:100%;
  transform:scale(.94);
  animation:lbx-pop .28s cubic-bezier(.22,.8,.2,1) forwards;
}
@keyframes lbx-pop{to{transform:scale(1)}}

.lbx-fig img{
  display:block;
  width:auto;height:auto;
  max-width:min(88vw,760px);
  /* เผื่อที่ให้คำบรรยายกับปุ่มปิด */
  max-height:calc(100vh - 170px);
  max-height:calc(100dvh - 170px);
  border-radius:50%;
  background:#fff;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);
}

.lbx-cap{
  color:#dbe7f7;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.01em;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.lbx-cap a{color:#7cc4ff}

/* กำลังโหลดไฟล์ต้นฉบับ (ราว 1.3MB โหลดตอนกดครั้งแรกเท่านั้น) */
.lbx-load{
  width:54px;height:54px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#7cc4ff;
  animation:lbx-spin .8s linear infinite;
}
@keyframes lbx-spin{to{transform:rotate(360deg)}}

.lbx-close{
  position:absolute;
  top:max(14px,env(safe-area-inset-top));
  right:max(14px,env(safe-area-inset-right));
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(10,24,44,.72);
  color:#fff;
  font-size:21px;line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s,transform .18s;
}
.lbx-close:hover{background:rgba(24,48,80,.9);transform:rotate(90deg)}
.lbx-close:focus-visible{outline:2px solid #7cc4ff;outline-offset:3px}

/* กันหน้าเลื่อนขณะเปิดฉาก และกันหน้ากระตุกตอนแถบเลื่อนหาย */
html.lbx-open,
html.lbx-open body{overflow:hidden}

@media (max-width:480px){
  .lbx-fig img{max-width:92vw}
  .lbx-cap{font-size:.8rem}
}

@media (prefers-reduced-motion:reduce){
  .lbx,.lbx-fig,.lbx-close,
  .mark.is-zoomable img,.brand-mark.is-zoomable img{
    animation:none !important;
    transition:none !important;
  }
  .lbx{opacity:1}
  .lbx-fig{transform:none}
  .mark.is-zoomable:hover img,
  .brand-mark.is-zoomable:hover img{transform:none}
}

@media print{
  .lbx{display:none !important}
}

/* ══════════════════════════════════════════════════════════════════════
   โลโก้ในช่องว่างฝั่งขวาของ hero (เหนือกรอบภาพ/การ์ด)

   คอลัมน์ขวาของ hero สั้นกว่าคอลัมน์ซ้ายเสมอ (ซ้ายมีหัวเรื่อง + ย่อหน้า +
   ปุ่ม + การ์ดตัวเลข) จึงเหลือที่ว่างด้านบนราว 75-180px แล้วแต่หน้า
   เอาโลโก้มาวางชิดขวาตรงนั้น ไม่เบียดเนื้อหาเดิมและไม่ดันกรอบภาพลง

   ชิดขวาเพราะป้ายลอย .tagA / .stage-h ของแต่ละหน้าเกาะอยู่มุมซ้ายบนของ
   กรอบภาพ ถ้าวางชิดซ้ายจะซ้อนกัน
   ══════════════════════════════════════════════════════════════════════ */

.hero-logo{
  display:flex;
  /* กึ่งกลางคอลัมน์ขวา — ตรงกับจุดที่คุณพ่อวงไว้ในภาพ (ห่างจากที่วง 11px) */
  justify-content:center;
  align-items:center;
  margin:0 0 22px;
  line-height:0;
  flex:0 0 auto;
}

.hero-logo img{
  width:224px;
  height:224px;
  display:block;
  border-radius:50%;
  /* ไฟล์โลโก้เป็นวงกลมมุมโปร่ง — รองพื้นขาวจาง ๆ ไว้ให้ขอบวงคมบนพื้นไล่สี */
  background:rgba(255,255,255,.9);
  box-shadow:
    0 26px 54px -20px rgba(8,38,74,.5),
    0 0 0 1px rgba(255,255,255,.7);
  cursor:zoom-in;
  transition:transform .3s cubic-bezier(.22,.8,.2,1), box-shadow .3s;
  animation:hero-logo-float 6.5s ease-in-out infinite;
}

.hero-logo img:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:
    0 34px 64px -22px rgba(8,38,74,.58),
    0 0 0 1px rgba(255,255,255,.9);
}

/* ลอยขึ้นลงเบา ๆ ให้เข้ากับการ์ด .floaty ที่หน้าอื่นใช้อยู่
   ระยะแค่ 6px และรอบละ 6.5 วิ — พอรู้สึกว่ามีชีวิต แต่ไม่ดึงสายตา */
@keyframes hero-logo-float{
  0%,100%{translate:0 0}
  50%    {translate:0 -6px}
}

/* โหมดมืด: วงขาวสว่างเกินไปถ้าไม่ลดความเข้มของเงา */
[data-theme="dark"] .hero-logo img{
  background:rgba(255,255,255,.95);
  box-shadow:
    0 28px 58px -20px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,255,255,.26);
}

/* ── ย่อตามความกว้างจอ ──
   คอลัมน์ขวากว้าง ~532px ตายตัว ขนาดจึงลดตามพื้นที่แนวตั้งที่เหลือเป็นหลัก */
@media (max-width:1400px){
  .hero-logo img{width:192px;height:192px}
}
@media (max-width:1200px){
  .hero-logo{margin-bottom:18px}
  .hero-logo img{width:160px;height:160px}
}

/* ══════════════════════════════════════════════════════════════════════
   จอแคบ — แสดงโลโก้ใบใหญ่ด้วย (คุณพ่อขอ)

   เดิมซ่อนทิ้งที่ ≤980px เพราะคิดว่าพอกรอบภาพเลื่อนลงมาใต้ข้อความแล้ว
   ตรงนั้นไม่ใช่ "ช่องว่าง" อีกต่อไป แต่ผลคือคนเข้าจากมือถือ (ซึ่งเป็น
   คนส่วนใหญ่) ไม่เคยเห็นโลโก้ใบเต็มเลย เห็นแค่วงเล็ก 34px บนแถบทีมงาน

   จึงเอากลับมาแสดง โดยย่อขนาดให้พอเหมาะกับความสูงจอมือถือ และยังกดขยาย
   ดูเต็มใบได้เหมือนเดิม ส่วนวงเล็กบนแถบทีมงานคงไว้ เพราะมันติดหนึบอยู่
   ใต้แถบหัวตลอดเวลาที่เลื่อนอ่าน คนละหน้าที่กัน
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:980px){
  .hero-logo{
    display:flex;
    margin:0 0 16px;
  }
  .hero-logo img{width:170px;height:170px}
}
@media (max-width:640px){
  .hero-logo{margin-bottom:14px}
  .hero-logo img{width:150px;height:150px}
}
@media (max-width:400px){
  .hero-logo img{width:132px;height:132px}
}
@media (max-width:340px){
  .hero-logo{margin-bottom:12px}
  .hero-logo img{width:120px;height:120px}
}

@media (prefers-reduced-motion:reduce){
  .hero-logo img{animation:none;transition:none}
  .hero-logo img:hover{transform:none}
}

@media print{
  .hero-logo{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   โลโก้บนแถบ "ทีมตัวแทนผู้ให้บริการ" (จอแคบ)

   บนจอแคบแถบนี้กินเต็มความกว้างและปักหมุดอยู่ใต้แถบหัว ฝั่งขวามีที่ว่าง
   ข้างลูกศร → พอดี เอาโลโก้มาวางตรงนั้นแทนที่จะอยู่ใน hero
   ทำให้เห็นโลโก้ตลอดเวลาที่เลื่อนอ่าน ไม่ใช่เห็นแค่ตอนอยู่บนสุด

   ไม่ผูกกับระบบกดขยาย เพราะทั้งแถบเป็นลิงก์ไปหน้าทีมงานอยู่แล้ว
   ถ้ากดแล้วเด้งเป็นรูปใหญ่แทนที่จะพาไปหน้าทีม จะงงมากกว่าได้ประโยชน์
   ══════════════════════════════════════════════════════════════════════ */
.teamcta-logo{
  display:none;                      /* เปิดใช้เฉพาะจอแคบด้านล่าง */
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  /* วงแหวนขาวบาง ๆ ให้โลโก้ลอยออกจากพื้นไล่เฉดน้ำเงินของแถบ */
  box-shadow:
    0 2px 8px rgba(4,20,46,.35),
    0 0 0 1.5px rgba(255,255,255,.55);
  object-fit:contain;
}

@media (max-width:980px){
  .teamcta-logo{display:block}
  /* เว้นช่องระหว่างข้อความกับกลุ่มโลโก้+ลูกศรให้ชัดขึ้นอีกนิด */
  .teamcta{gap:.7rem}
}

@media (max-width:420px){
  .teamcta-logo{width:30px;height:30px}
}
@media (max-width:360px){
  /* จอแคบมากตัดบรรทัดรองไปแล้ว (teamcta.css) โลโก้ยังพอมีที่อยู่ */
  .teamcta-logo{width:28px;height:28px}
  .teamcta{gap:.55rem}
}
@media (max-width:340px){
  /* แคบสุดที่ยังเจอในเครื่องจริง (iPhone SE รุ่นแรก 320px)
     ย่อลงอีกนิดแทนการซ่อน จะได้เห็นโลโก้ครบทุกเครื่อง */
  .teamcta-logo{width:26px;height:26px}
  .teamcta{gap:.45rem}
}

@media print{
  .teamcta-logo{display:none}
}