/* ══════════════════════════════════════════════════════════════════
   ปรับย่อย ๆ ที่ใช้ร่วมกันทุกหน้า (แยกไฟล์ไว้เพื่อไม่ให้หายเวลาสลับโทนสี)
   ══════════════════════════════════════════════════════════════════ */

/* ชื่อแบรนด์บนแถบบนสุด — ขยับลงมา 10% ของความสูงแถบ (คำสั่งเจ้าของ 10 ก.ย. 69)
   ทำเฉพาะจอที่มีคำโปรยใต้ชื่อ (จอคอม) ส่วนมือถือคำโปรยถูกซ่อน
   ชื่อจึงต้องอยู่กึ่งกลางแถบเหมือนเดิม ไม่งั้นจะดูเอียงลง */
@media (min-width:701px){
  header .brand .name{
    position:relative;
    top:7px;              /* ≈ 10% ของความสูงแถบบน 73px */
  }
}

/* ══════════════════════════════════════════════════════════════════
   โลโก้ภาพบนแถบบนสุด (คำสั่งเจ้าของ 12 ก.ย. 69)
   ไฟล์ต้นฉบับ 752 x 160 px พื้นหลังโปร่งใส สัดส่วน 4.7 : 1
   จอคอมแสดงสูง 40 จุด (กว้าง 188) · มือถือสูง 30 จุด (กว้าง 141)
   ══════════════════════════════════════════════════════════════════ */
.brand{ align-items:center }
/* ลบคำโปรยใต้โลโก้ออกแล้ว (คำสั่งเจ้าของ) โลโก้จึงขยายได้เต็มความสูงแถบ */
.brand .logo-img{ display:block; height:42px; width:auto; max-width:100% }
@media (min-width:701px){
  header .brand .name{ top:0 }          /* ยกเลิกการขยับของเดิม ไม่ใช้แล้วเพราะเป็นภาพ */
}
@media (max-width:700px){
  .brand .logo-img{ height:32px }
}

/* ══════════════════════════════════════════════════════════════════
   โลโก้ขยับได้ (คำสั่งเจ้าของ 12 ก.ย. 69)
   1) แสงวิ่งผ่านตัวหนังสือทุก 5 วินาที — ใช้ตัวโลโก้เองเป็นแม่แบบ
      แสงจึงวิ่งตามรูปตัวอักษรเป๊ะ ไม่ใช่แถบสี่เหลี่ยมวิ่งทับ
   2) หายใจเข้า-ออกเบา ๆ 3% ให้รู้สึกมีชีวิต
   ปิดอัตโนมัติถ้าผู้ใช้ตั้งค่า "ลดการเคลื่อนไหว" ในเครื่อง
   ══════════════════════════════════════════════════════════════════ */
.brand{ position:relative; isolation:isolate }
.brand .logo-img{ position:relative; z-index:1 }

@media (prefers-reduced-motion:no-preference){
  .brand::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    -webkit-mask:url("logo-sb.png?v=1") no-repeat left center/contain;
            mask:url("logo-sb.png?v=1") no-repeat left center/contain;
    background-image:linear-gradient(102deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.95) 50%,
      rgba(255,255,255,0) 100%);
    background-size:42% 100%;
    background-repeat:no-repeat;
    background-position:-70% 0;
    animation:logoShine 5s cubic-bezier(.35,0,.25,1) 1.4s infinite;
  }
  @keyframes logoShine{
    0%   { background-position:-70% 0 }
    24%  { background-position:170% 0 }
    100% { background-position:170% 0 }
  }
  .brand .logo-img{ animation:logoBreathe 5s ease-in-out infinite }
  @keyframes logoBreathe{
    0%,100%{ transform:scale(1) }
    50%    { transform:scale(1.03) }
  }
  .brand:hover .logo-img{ animation-play-state:paused; transform:scale(1.05); transition:transform .25s ease }
}

/* ══════════════════════════════════════════════════════════════════
   เบอร์โทรบนแถบบนสุด "เต้น" ซูมเข้า-ออก 5% (คำสั่งเจ้าของ 12 ก.ย. 69)
   รอบละ 2.6 วินาที · เอาเมาส์ชี้แล้วหยุดค้างไว้ที่ 7%
   จังหวะต่างจากปุ่มกด (2.8 วิ / 12%) เพื่อไม่ให้เต้นพร้อมกันทั้งหน้า
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  @keyframes phonePulse{
    0%   { scale:1 }
    50%  { scale:1.05 }
    100% { scale:1 }
  }
  .nav-phone{
    animation:phonePulse 2.6s ease-in-out infinite;
    transform-origin:center center;
  }
  .nav-phone:hover,.nav-phone:focus-visible{
    animation-play-state:paused; scale:1.07;
  }
}

/* ปุ่มฟ้าตัวหนังสือขาว — เงาขาวที่เหลือจากดีไซน์ปุ่มขาวเดิมทำให้ตัวหนังสือซ้อนเบลอ */
.btn:not(.btn-main),.btn-primary,.btn-card,.go{
  text-shadow:0 1px 1px rgba(8,65,127,.35) !important;
}