/* ===================================================================
   Asiapet Animal Hospital — Shared Stylesheet
   3 สีหลักจากโลโก้: แดง / ดำ / ขาว
   =================================================================== */
:root{
  /* แบรนด์: แดง / ดำอุ่น / ครีม (โทนอุ่นอิง Anthropic warm-cream) */
  --red:        #E8334B;
  --red-dark:   #c91f37;
  --ink:        #1C1A17;   /* ดำอุ่น (ไม่ดำสนิท) */
  --ink-soft:   #3A352F;
  --black:      #1C1A17;   /* alias เดิม → map เป็นดำอุ่น ทั้งเว็บอุ่นขึ้นทันที */
  --white:      #ffffff;
  --cream:      #FAF7F0;   /* พื้นหน้าเว็บ */
  --surface:    #FFFDF8;   /* การ์ด/พื้นผิวขาวนวล */

  --grey-bg:    #F2EDE3;   /* พื้น section (อุ่น) */
  --grey-line:  #E9E2D5;   /* เส้นขอบ (อุ่น) */
  --grey-text:  #6B6358;   /* ข้อความรอง (อุ่น) */

  --radius: 16px;
  --shadow: 0 10px 40px rgba(28,26,23,.08);
  --shadow-lg: 0 20px 60px rgba(28,26,23,.15);
  --container: 1200px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:'Kanit',sans-serif; color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
.container{ width:92%; max-width:var(--container); margin:0 auto; }
section{ padding:84px 0; }

.eyebrow{ display:inline-block; color:var(--red); font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:.85rem; margin-bottom:12px; }
h2.title{ font-size:clamp(1.8rem,4vw,2.5rem); font-weight:700; line-height:1.25; margin-bottom:16px; }
.section-head{ text-align:center; max-width:660px; margin:0 auto 54px; }
.section-head p{ color:var(--grey-text); }

.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:1rem; padding:14px 30px; border-radius:50px; cursor:pointer; border:2px solid transparent; transition:.25s ease; }
.btn-red{ background:var(--red); color:var(--white); }
.btn-red:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(232,51,75,.35); }
.btn-outline{ background:transparent; color:var(--black); border-color:var(--black); }
.btn-outline:hover{ background:var(--black); color:var(--white); transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--red); }
.btn-white:hover{ background:var(--black); color:#fff; transform:translateY(-2px); }

/* ===== TOP BAR ===== */
.topbar{ background:var(--black); color:#fff; font-size:.85rem; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; height:38px; }
.topbar .left{ display:flex; gap:20px; opacity:.85; }
.topbar .left a, .topbar .left span{ display:inline-flex; align-items:center; gap:6px; color:inherit; }
.lang{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); padding:4px 12px; border-radius:50px; cursor:pointer; }

/* ===== NAVBAR ===== */
/* หัวเว็บถูก JS ยัดไว้ในกล่อง #site-header ซึ่งสูงแค่ 122px (แถบบน 38 + เมนู 84)
   position:sticky ยึดกับกล่องแม่ เท่ากับเลื่อนตามได้แค่ 38px แล้วหลุดหายไปกับหน้า
   หัวเว็บจึงไม่เคยติดขอบบนจริงสักหน้าเดียว
   display:contents ทำให้กล่องนี้หายไปจากการจัดวาง หัวเว็บไปยึดกับ body แทน  */
#site-header{ display:contents; }
header{ position:sticky; top:0; z-index:200; background:#fff; box-shadow:0 2px 18px rgba(26,26,26,.07); }
/* พอหัวเว็บติดขอบบนได้จริงแล้ว ลิงก์ข้ามหน้าแบบ #anchor (เช่น service-lab.html#imaging)
   จะเลื่อนมาแล้วหัวข้อไปจมอยู่ใต้หัวเว็บ ต้องเผื่อระยะไว้ให้ทุกจุดหมาย     */
[id]{ scroll-margin-top:100px; }
nav{ display:flex; align-items:center; justify-content:space-between; height:84px; gap:18px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
/* โลโก้แบบครอปแถบสามเหลี่ยมล่างออกอัตโนมัติ (ใช้ภาพต้นฉบับได้เลย) */
.brand-logo{ display:block; height:58px; width:auto; }
/* fallback (กรณียังไม่มีไฟล์โลโก้) */
.brand .red{ color:var(--red); }
.brand small{ display:block; font-size:.62rem; font-weight:500; letter-spacing:1px; color:var(--grey-text); font-family:'Kanit',sans-serif; margin-top:-4px; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-item{ position:relative; }
.nav-item > a{ display:flex; align-items:center; gap:5px; font-weight:500; font-size:.95rem; padding:12px 14px; border-radius:10px; transition:.2s; white-space:nowrap; }
.nav-item > a:hover{ color:var(--red); background:var(--grey-bg); }
.nav-item.has-drop > a::after{ content:"▾"; font-size:.75rem; opacity:.6; }
.nav-item .active-link{ color:var(--red); }
.nav-item .active-link::before{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:var(--red); }

.dropdown{ position:absolute; top:calc(100% + 6px); left:0; min-width:230px; background:#fff; border:1px solid var(--grey-line); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s ease; }
.nav-item.has-drop:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; font-size:.92rem; font-weight:400; transition:.18s; }
.dropdown a:hover{ background:var(--grey-bg); color:var(--red); }

.nav-right{ display:flex; align-items:center; gap:12px; flex:none; }
.search-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--grey-line); background:#fff; cursor:pointer; font-size:1.05rem; display:grid; place-items:center; transition:.2s; }
.search-btn:hover{ border-color:var(--red); color:var(--red); }
/* ===== SEARCH ===== */
.search-overlay{ position:fixed; inset:0; background:rgba(28,26,23,.55); backdrop-filter:blur(3px); z-index:400; display:none; padding:80px 18px 24px; overflow-y:auto; }
.search-overlay.open{ display:block; }
.search-panel{ max-width:620px; margin:0 auto; background:#fff; border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; }
.search-bar{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--grey-line); }
.search-bar svg.ico{ width:20px; height:20px; color:var(--grey-text); flex:none; }
.search-bar input{ flex:1; border:none; outline:none; font-family:'Kanit',sans-serif; font-size:16px; color:var(--ink); background:transparent; }
.search-close{ background:none; border:none; font-size:1.7rem; line-height:1; color:var(--grey-text); cursor:pointer; padding:0 4px; }
.search-close:hover{ color:var(--red); }
.search-results{ max-height:60vh; overflow-y:auto; }
.search-hint{ padding:26px 20px; color:var(--grey-text); font-size:.95rem; text-align:center; }
.search-hint a{ color:var(--red); font-weight:600; }
.search-hit{ display:block; padding:14px 18px; border-bottom:1px solid var(--grey-bg); color:inherit; transition:.15s; }
.search-hit:last-child{ border-bottom:none; }
.search-hit:hover{ background:var(--grey-bg); }
.search-hit .sec{ display:inline-block; font-size:.72rem; font-weight:600; color:var(--red); background:rgba(232,51,75,.09); padding:2px 9px; border-radius:999px; margin-bottom:5px; }
.search-hit strong{ display:block; font-size:1rem; font-weight:600; line-height:1.4; }
.search-hit .snip{ display:block; color:var(--grey-text); font-size:.88rem; line-height:1.6; margin-top:3px; }
.search-hit mark{ background:rgba(232,51,75,.18); color:inherit; border-radius:3px; padding:0 1px; }
@media(max-width:560px){ .search-overlay{ padding:64px 12px 16px; } .search-results{ max-height:66vh; } }

.emergency{ background:var(--red); color:#fff; font-weight:600; font-size:.9rem; padding:12px 20px; border-radius:50px; display:inline-flex; align-items:center; gap:8px; transition:.2s; white-space:nowrap; }
.emergency:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 8px 20px rgba(232,51,75,.4); }
.emergency span.full{ display:none; } /* ปุ่มฉุกเฉินเป็นไอคอนอย่างเดียว — ข้อความเต็มยาวเกินจนเมนูล้นจอ */
/* พื้นที่กดอย่างน้อย 44x44 ตามมาตรฐาน — ไอคอนยังเท่าเดิม แค่ขยายพื้นที่นิ้วแตะ */
.menu-toggle{ display:none; background:none; border:none; font-size:1.7rem; cursor:pointer; color:var(--black);
  width:44px; height:44px; place-items:center; padding:0; }

/* ===== HERO (หน้าหลัก) ===== */
.hero{
  position:relative; min-height:620px; display:grid; place-items:center; text-align:center; overflow:hidden;
  background:
    radial-gradient(1100px 480px at 50% -8%, rgba(232,51,75,.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--grey-bg) 100%);
}
/* จุดวงกลมจาง ๆ ประดับพื้นหลัง Hero */
.hero::before{ content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(232,51,75,.06); top:-90px; right:-80px; }
.hero::after{ content:""; position:absolute; width:240px; height:240px; border-radius:50%; background:rgba(26,26,26,.04); bottom:-100px; left:-60px; }
.hero-inner{ padding:70px 20px; z-index:2; }
.hero .lead{ color:var(--grey-text); font-size:1.1rem; max-width:560px; margin:18px auto 30px; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* Hero ใหม่ (ไม่มีโลโก้) */
.hero-badge{ display:inline-flex; align-items:center; gap:7px; background:rgba(232,51,75,.1); color:var(--red); font-weight:600; font-size:.9rem; padding:7px 16px; border-radius:999px; margin-bottom:22px; }
.hero-badge svg.ico{ width:16px; height:16px; }
/* ป้ายสถานะเปิด/ปิด — สีและข้อความมาจาก initOpenStatus() ใน partials.js */
.hero-badge.status{ gap:9px; }
.hero-badge.status .dot{ flex:none; width:9px; height:9px; border-radius:50%; background:currentColor; }
.hero-badge.status .bar{ width:1px; height:13px; background:currentColor; opacity:.35; margin:0 5px; }
.hero-badge.is-open{ background:rgba(21,128,61,.1); color:#15803d; }
.hero-badge.is-open .dot{ animation:live-dot 2.4s ease-out infinite; }
.hero-badge.is-closed{ background:rgba(28,26,23,.07); color:var(--ink-soft); }
@keyframes live-dot{ 0%{ box-shadow:0 0 0 0 rgba(21,128,61,.45) } 70%,100%{ box-shadow:0 0 0 7px rgba(21,128,61,0) } }
@media (prefers-reduced-motion:reduce){ .hero-badge.is-open .dot{ animation:none } }
.hero-en{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(1rem,2.4vw,1.35rem); letter-spacing:2px; text-transform:uppercase; color:var(--grey-text); margin-bottom:8px; }
.hero-th{ font-family:'Kanit',sans-serif; font-size:clamp(2.1rem,6.5vw,3.6rem); font-weight:800; line-height:1.12; color:var(--ink); letter-spacing:-.5px; }
.hero-th .red{ color:var(--red); }
.hero-trust{ display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:center; margin-top:34px; }
.hero-trust span{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft); font-weight:500; font-size:.95rem; }
.hero-trust svg.ico{ width:18px; height:18px; color:var(--red); }

/* ===== PAGE BANNER (หน้าย่อย) ===== */
.page-banner{
  background:linear-gradient(120deg, var(--black) 0%, #2a2a2e 100%); color:#fff; text-align:center;
  padding:64px 0; position:relative; overflow:hidden;
}
.page-banner::before{ content:""; position:absolute; width:280px; height:280px; border-radius:50%; background:var(--red); opacity:.18; top:-120px; right:-60px; }
.page-banner::after{ content:""; position:absolute; width:200px; height:200px; border-radius:50%; background:var(--red); opacity:.12; bottom:-110px; left:-40px; }
.page-banner h1{ font-size:clamp(1.9rem,5vw,2.8rem); font-weight:700; position:relative; z-index:1; }
.page-banner .crumb{ position:relative; z-index:1; margin-top:10px; opacity:.75; font-size:.92rem; }
.page-banner .crumb a:hover{ color:var(--red); }

/* ===== FEATURE BAR ===== */

/* ===== ABOUT ===== */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
/* รูปถ่ายจริงของคลินิก (หน้าร้าน / ห้องเอกซเรย์ ฯลฯ) */
.clinic-photo{ margin:0; position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); background:var(--grey-bg); }
.clinic-photo img{ display:block; width:100%; height:auto; }
.clinic-photo figcaption{ display:flex; gap:9px; align-items:flex-start; padding:14px 18px;
  font-size:.9rem; line-height:1.6; color:var(--grey-text); background:#fff; }
.clinic-photo figcaption svg.ico{ flex:none; width:17px; height:17px; margin-top:.25em; color:var(--red); }
.clinic-photo .map-btn{ position:absolute; right:14px; top:14px; display:inline-flex; align-items:center; gap:7px;
  background:var(--red); color:#fff; font-weight:600; font-size:.88rem; padding:10px 18px; border-radius:999px;
  text-decoration:none; box-shadow:var(--shadow); }
.clinic-photo .map-btn:hover{ background:var(--red-dark); }
.clinic-photo .map-btn svg.ico{ width:16px; height:16px; color:#fff; margin:0; }
.clinic-photo.wide{ margin:26px 0 6px; }              /* ใช้ในหน้าบริการ คั่นระหว่างรายการ */

/* ===== รีวิวจากลูกค้า ===== */
.rv-head{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:38px; }
.rv-score{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--grey-line);
  border-radius:999px; padding:10px 20px; box-shadow:var(--shadow); }
.rv-score b{ font-size:1.35rem; line-height:1; }
.rv-score .stars{ color:#F5A623; letter-spacing:1px; font-size:1rem; }
.rv-score span{ color:var(--grey-text); font-size:.9rem; }
.rv-score a{ color:var(--red); font-weight:600; font-size:.9rem; white-space:nowrap; }

.rv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.rv-card{ background:#fff; border:1px solid var(--grey-line); border-radius:var(--radius);
  padding:30px 28px 24px; box-shadow:var(--shadow); position:relative;
  display:flex; flex-direction:column; transition:.3s ease; }
.rv-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--red); }
/* เครื่องหมายคำพูดจาง ๆ เป็นพื้นหลัง */
.rv-card::before{ content:"\201C"; position:absolute; top:2px; right:20px;
  font-family:Georgia,serif; font-size:5rem; line-height:1; color:var(--red); opacity:.10; }
.rv-stars{ color:#F5A623; font-size:1.05rem; letter-spacing:2px; margin-bottom:14px; }
.rv-text{ font-size:1rem; line-height:1.9; color:var(--ink-soft); flex:1; }
.rv-by{ display:flex; align-items:center; gap:9px; margin-top:20px; padding-top:16px;
  border-top:1px solid var(--grey-bg); font-size:.88rem; color:var(--grey-text); }
.rv-by .who{ font-weight:600; color:var(--ink); }
.rv-by .src{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.rv-by .src svg{ width:14px; height:14px; }
@media(max-width:900px){ .rv-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .rv-grid{ grid-template-columns:1fr; } }

/* ===== หน้าคำถามที่พบบ่อย ===== */
.faq-wrap{ max-width:820px; }
.faq-cat{ display:flex; align-items:center; gap:11px; font-size:1.2rem; font-weight:700;
  margin:44px 0 18px; padding-bottom:12px; border-bottom:2px solid var(--grey-line); }
.faq-cat:first-of-type{ margin-top:34px; }
.faq-cat svg.ico{ width:22px; height:22px; color:var(--red); flex:none; }

.faq-item{ background:var(--surface); border:1px solid var(--grey-line); border-radius:14px;
  margin-bottom:12px; overflow:hidden; }
.faq-item summary{ cursor:pointer; list-style:none; padding:18px 52px 18px 20px; position:relative;
  font-weight:600; line-height:1.6; transition:background .2s ease; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ background:rgba(232,51,75,.04); }
.faq-item summary::after{ content:""; position:absolute; right:22px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease; }
.faq-item[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq-item[open] summary{ background:rgba(232,51,75,.05); }
.faq-a{ padding:2px 20px 20px; color:var(--grey-text); line-height:1.85; }
.faq-a p + p{ margin-top:10px; }
.faq-a ul{ margin:10px 0 0 20px; display:grid; gap:7px; }
.faq-a a{ color:var(--red); font-weight:500; }
@media(prefers-reduced-motion:reduce){ .faq-item summary::after{ transition:none } }

/* รูปคู่ในหน้าบริการ — รูปสูงเท่ากันเสมอ ไม่ว่าไฟล์จะเป็นแนวตั้งหรือแนวนอน */
.photo-duo{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0 6px; }
.photo-duo .clinic-photo{ display:flex; flex-direction:column; }
.photo-duo .clinic-photo img{ height:230px; object-fit:cover; object-position:center 45%; }
.photo-duo figcaption{ flex:1; }
@media(max-width:640px){
  .photo-duo{ grid-template-columns:1fr; }
  .photo-duo .clinic-photo img{ height:200px; }
}

/* แผนที่แบบเต็มความกว้าง (ใต้ส่วนเกี่ยวกับเรา) */
.about-map.wide{ aspect-ratio:16/6; }
@media(max-width:820px){ .about-map.wide{ aspect-ratio:4/3; } }

/* แผนที่จริงของคลินิก — แทนที่รูปประกอบ ทำให้เห็นว่าเป็นสถานที่จริง */
.about-map{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow); background:var(--grey-bg); }
.about-map iframe{ width:100%; height:100%; border:0; display:block; }
.about-map .map-btn{ position:absolute; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px;
  background:var(--red); color:#fff; font-weight:600; font-size:.88rem; padding:10px 18px; border-radius:999px;
  text-decoration:none; box-shadow:var(--shadow); }
.about-map .map-btn:hover{ background:var(--red-dark); }
.about-map .map-btn svg.ico{ width:16px; height:16px; }
.check-list{ list-style:none; margin-top:22px; display:grid; gap:14px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; }
.check-list .tick{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:.8rem; margin-top:3px; }

/* ===== CARDS / SERVICES ===== */
.bg-grey{ background:var(--grey-bg); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{ background:#fff; border-radius:var(--radius); padding:34px 28px; box-shadow:var(--shadow); transition:.3s ease; border:1px solid transparent; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--red); }
.card .ic{ width:60px; height:60px; border-radius:16px; background:rgba(232,51,75,.1); color:var(--red); display:grid; place-items:center; font-size:1.7rem; margin-bottom:18px; }
.card h3{ font-size:1.2rem; margin-bottom:8px; font-weight:600; }
.card p{ color:var(--grey-text); font-size:.95rem; }

/* ===== SERVICE GROUPS (จัดหมวดบริการ) ===== */
.svc-group{ margin-bottom:54px; }
.svc-group:last-child{ margin-bottom:0; }
.svc-group-title{ display:flex; align-items:center; gap:10px; font-size:1.25rem; font-weight:700; color:var(--ink); margin-bottom:24px; padding-bottom:12px; border-bottom:2px solid var(--grey-line); }
.svc-group-title svg.ico{ width:24px; height:24px; color:var(--red); flex:none; }
.svc-group-title .count{ margin-left:auto; font-size:.85rem; font-weight:500; color:var(--grey-text); }

/* ===== SPECIAL CARE (บริการดูแลพิเศษ) ===== */
.care-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.care-card{ display:flex; gap:22px; background:var(--surface); border:1px solid var(--grey-line); border-left:4px solid var(--red); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); transition:.3s ease; }
.care-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--red); }
.care-card .care-ic{ flex:none; width:64px; height:64px; border-radius:18px; background:rgba(232,51,75,.1); color:var(--red); display:grid; place-items:center; }
.care-card .care-ic svg.ico{ width:32px; height:32px; stroke-width:1.7; }
.care-card h3{ font-size:1.2rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.care-card p{ color:var(--grey-text); font-size:.96rem; line-height:1.7; }
.care-tag{ font-size:.72rem; font-weight:600; letter-spacing:.4px; color:var(--red); background:rgba(232,51,75,.1); padding:3px 11px; border-radius:999px; white-space:nowrap; }
@media(max-width:560px){ .care-grid{ grid-template-columns:1fr; } .care-card{ padding:24px 22px; } }

/* ===== BEFORE / AFTER GALLERY (ผลงานอาบน้ำ-ตัดขน) ===== */
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ba-card{ background:var(--surface); border:1px solid var(--grey-line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.3s ease; }
.ba-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--red); }
.ba-pair{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--grey-line); }
.ba-photo{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--grey-bg); }
.ba-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba-photo .tag{ position:absolute; top:10px; left:10px; font-size:.72rem; font-weight:600; letter-spacing:.5px; color:#fff; padding:3px 10px; border-radius:999px; }
.ba-photo.before .tag{ background:rgba(28,26,23,.72); }
.ba-photo.after  .tag{ background:var(--red); }
/* บังคับให้แถบรูปของทุกการ์ดสูงเท่ากัน ไม่ว่าจะเป็นรูปคู่หรือรูปเดี่ยว
   ไม่งั้นการ์ดรูปคู่ (รูปเล็กกว่าครึ่งหนึ่ง) จะเหลือช่องว่างท้ายการ์ดเยอะ */
.ba-pair,
.ba-card.single .ba-photo{ height:300px; }
.ba-pair .ba-photo,
.ba-card.single .ba-photo{ aspect-ratio:auto; height:300px; }
.ba-photo img{ object-position:center 35%; }   /* เก็บหัวน้องไว้ เวลาครอปรูปแนวตั้ง */
@media(max-width:560px){ .ba-pair, .ba-pair .ba-photo, .ba-card.single .ba-photo{ height:340px; } }
.ba-empty{ width:100%; height:100%; display:grid; place-items:center; color:var(--grey-text); opacity:.55; }
.ba-empty svg.ico{ width:40px; height:40px; stroke-width:1.5; }
.ba-cap{ padding:16px 18px; font-size:.95rem; font-weight:500; }
.ba-cap span{ display:block; color:var(--grey-text); font-weight:400; font-size:.86rem; margin-top:3px; }
@media(max-width:860px){ .ba-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .ba-grid{ grid-template-columns:1fr; } }

/* ===== VACCINE TABLE (ตารางวัคซีน) ===== */
.vac-block{ margin-bottom:44px; }
.vac-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.vac-head .ic{ width:48px; height:48px; border-radius:14px; background:rgba(232,51,75,.1); color:var(--red); display:grid; place-items:center; flex:none; }
.vac-head .ic svg.ico{ width:26px; height:26px; }
.vac-head h3{ font-size:1.35rem; font-weight:700; }
.vac-wrap{ overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow); }
.vac-table{ width:100%; border-collapse:collapse; background:var(--surface); min-width:520px; }
.vac-table th{ background:var(--ink); color:#fff; text-align:left; padding:14px 18px; font-weight:600; font-size:.92rem; white-space:nowrap; }
.vac-table td{ padding:13px 18px; border-top:1px solid var(--grey-line); font-size:.94rem; vertical-align:top; }
.vac-table td:first-child{ font-weight:600; white-space:nowrap; color:var(--ink); }
.vac-table tbody tr:nth-child(even){ background:var(--grey-bg); }
.vac-legend{ color:var(--grey-text); font-size:.88rem; margin:10px 2px 0; line-height:1.6; }
/* ชื่อย่อวัคซีนตามเอกสาร VPAT — ให้อ่านเป็นข้อมูลรอง ไม่แย่งสายตาจากชื่อไทย */
.vac-sub{ display:block; font-size:.8rem; color:var(--grey-text); letter-spacing:.2px; margin-top:2px; }
.note-box{ display:flex; gap:14px; background:#FFF6E9; border:1px solid #F0D9AE; border-radius:var(--radius); padding:20px 22px; color:var(--ink-soft); font-size:.95rem; line-height:1.7; }
.note-box .ic{ color:#C98A2B; flex:none; }
.note-box .ic svg.ico{ width:26px; height:26px; }

/* ===== PRODUCTS (สินค้าในร้าน — จาก CMS) ===== */
/* แถบค้นหา + เลือกหมวด — ติดขอบบนใต้หัวเว็บ เพราะรายการสินค้ายาวมาก
   --hdr / --bar วัดจริงด้วย JS ใน shop.html แล้วเขียนลง :root
   (หัวเว็บสูงไม่เท่ากันทุกจอ — ที่ <=860px แถบบนซ่อนเวลาทำการ ความสูงเลยลด)
   เดิมใช้ margin ติดลบ -14px ให้แถบเต็มขอบ แต่ .container กว้าง 92%
   ขอบข้างจึงเป็น 4% ของจอ ซึ่งเท่ากับ 13px ที่จอ 320px -> ล้นออกไป 1px
   ทำให้ทั้งหน้าเลื่อนซ้ายขวาได้ จึงเปลี่ยนเป็นการ์ดอยู่ในคอนเทนเนอร์แทน */
/* ต่อกับหัวเว็บเป็นชิ้นเดียว — เดิมทำเป็นการ์ดมุมมนลอยอยู่ จึงดูเหมือน
   แถบไปแปะกลางสินค้าแทนที่จะเป็นแถบเครื่องมือด้านบน                    */
.prod-toolbar{ position:sticky; top:var(--hdr,84px); z-index:60; margin:0 0 24px; padding:11px 14px 8px;
  background:var(--surface); border:1px solid var(--grey-line); border-top:0;
  border-radius:0 0 18px 18px; box-shadow:0 6px 16px rgba(26,26,26,.07); }
.prod-count{ text-align:center; font-size:.8rem; color:var(--grey-text); margin:6px 0 0; }
/* ตอนไม่ได้กรอง บรรทัดนี้ซ้ำกับเลขในปุ่ม "ทั้งหมด" อยู่แล้ว ซ่อนไว้ให้แถบเตี้ยลง */
.prod-count:empty{ display:none; }

/* ปุ่มเลือกหมวด — เรียงเป็นแถวเดียวเสมอ ถ้าไม่พอให้เลื่อนแนวนอน
   ปล่อยให้ตัดบรรทัดไม่ได้ เพราะแถบนี้ปักหมุดอยู่บนสุด พอสูงสองบรรทัด
   (วัดได้ 181px ที่จอ 785px) จะกินพื้นที่จอจนเหลือที่ดูสินค้าน้อยมาก      */
.prod-chips{ display:flex; gap:8px; justify-content:center; margin:0; }
@media(max-width:1240px){
  .prod-chips{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin:0 -14px 8px; padding:2px 14px 4px; }
  .prod-chips::-webkit-scrollbar{ display:none; }
}
.chip{ display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:.85rem; font-weight:500;
  color:var(--ink); background:#fff; border:1.5px solid var(--grey-line); border-radius:999px;
  padding:7px 14px; cursor:pointer; white-space:nowrap; transition:.16s; }
.chip span{ font-size:.75rem; color:var(--grey-text); font-weight:600; }
.chip:hover{ border-color:var(--red); color:var(--red); }
.chip.is-on{ background:var(--red); border-color:var(--red); color:#fff; }
.chip.is-on span{ color:rgba(255,255,255,.8); }

/* ช่องค้นหาสินค้าในหน้า — สินค้ามีเป็นร้อยรายการ พิมพ์หาเร็วกว่าเลื่อน */
.prod-filter{ position:relative; display:flex; align-items:center; max-width:560px; margin:0 auto 10px; }
.prod-filter svg.ico{ position:absolute; left:16px; width:19px; height:19px; color:var(--grey-text); pointer-events:none; }
.prod-filter input{ width:100%; font-family:inherit; font-size:.98rem; color:var(--ink);
  padding:13px 44px 13px 45px; border:1.5px solid #E3DACB; border-radius:999px; background:#fff; transition:.18s; }
.prod-filter input::placeholder{ color:#A99C88; }
.prod-filter input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px rgba(200,32,48,.10); }
.prod-filter input::-webkit-search-cancel-button{ display:none; }
.prod-filter button{ position:absolute; right:8px; width:30px; height:30px; border:0; border-radius:50%;
  background:var(--grey-bg); color:var(--grey-text); font-size:1.25rem; line-height:1; cursor:pointer; }
.prod-filter button:hover{ background:var(--red); color:#fff; }

/* กลุ่มสินค้าแยกตามหมวด — เป้าหมายของลิงก์จากการ์ดหมวดด้านบน */
/* กันหัวเว็บ + แถบกรอง (ทั้งคู่ sticky) บังหัวข้อหมวดตอนเลื่อนมา
   ค่าเดิม 96px เผื่อไว้แค่หัวเว็บ พอมีแถบกรองมาซ้อนหัวข้อเลยจมหายไปใต้แถบ */
.prod-group{ scroll-margin-top:calc(var(--hdr,84px) + var(--bar,140px) + 14px); }
.prod-group + .prod-group{ margin-top:52px; }
.prod-group-title{ display:flex; align-items:center; gap:11px; font-size:1.25rem; font-weight:700;
  padding-bottom:14px; margin-bottom:24px; border-bottom:2px solid var(--grey-line); }
.prod-group-title svg.ico{ width:24px; height:24px; color:var(--red); flex:none; }
.prod-group-title .count{ margin-left:auto; font-size:.85rem; font-weight:500; color:var(--grey-text); white-space:nowrap; }
.prod-group.is-target .prod-group-title{ border-bottom-color:var(--red); transition:border-color .3s ease; }

.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.prod-card{ background:var(--surface); border:1px solid var(--grey-line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:.3s ease; }
.prod-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--red); }
.prod-img{ aspect-ratio:1/1; background:var(--grey-bg); display:grid; place-items:center; overflow:hidden; }
.prod-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== เลื่อนดูรูปในการ์ด (สินค้าตัวเดียวกันคนละรส/ขนาด) =====
   display:block ไม่ใช่ grid — grid + place-items:center ทำให้ height:100%
   ของรางเลื่อนหาความสูงอ้างอิงไม่ได้ (เจอปัญหาเดียวกันมาแล้วที่การ์ดบทความ) */
.prod-img.multi{ display:block; position:relative; }
.prod-track{ display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; }
.prod-track::-webkit-scrollbar{ display:none; }
.prod-track img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center; }
.prod-track:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }

/* ปุ่มลูกศร — โผล่เมื่อชี้เมาส์เท่านั้น บนมือถือใช้ปัดนิ้วแทน จอเล็กพื้นที่น้อย */
.prod-img.multi .pnav{ position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:1.15rem; line-height:1;
  box-shadow:0 2px 8px rgba(28,26,23,.22); opacity:0; transition:opacity .18s; }
.prod-img.multi .pnav.prev{ left:7px; }
.prod-img.multi .pnav.next{ right:7px; }
.prod-card:hover .pnav{ opacity:1; }
.prod-img.multi .pnav:disabled{ opacity:0 !important; pointer-events:none; }
.prod-img.multi .pnav:focus-visible{ opacity:1; outline:2px solid var(--red); }

/* ตัวนับ 1/6 — บอกจำนวนรูปตั้งแต่แรกเห็น ไม่ต้องเดาว่าเลื่อนได้กี่รูป */
.prod-img.multi .pcount{ position:absolute; top:8px; right:8px; z-index:1;
  background:rgba(28,26,23,.62); color:#fff; font-size:.7rem; font-weight:600;
  padding:2px 7px; border-radius:999px; letter-spacing:.3px; }

.prod-img.multi .pdots{ position:absolute; left:0; right:0; bottom:7px; z-index:1;
  display:flex; justify-content:center; gap:5px; }
.pdot{ width:6px; height:6px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.62); box-shadow:0 0 3px rgba(28,26,23,.45); transition:.18s; }
.pdot.on{ background:#fff; width:16px; border-radius:99px; }
.pdot:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

@media(hover:none){ .prod-img.multi .pnav{ display:none; } }
@media(prefers-reduced-motion:reduce){ .prod-track{ scroll-behavior:auto; } }
.prod-img .ph{ color:var(--red); opacity:.4; }
.prod-img .ph svg.ico{ width:44px; height:44px; }
.prod-body{ padding:15px 16px 18px; display:flex; flex-direction:column; gap:5px; flex:1; }
.prod-cat{ font-size:.72rem; color:var(--red); font-weight:600; }
.prod-body h4{ font-size:1rem; font-weight:600; line-height:1.4; }
.prod-price{ font-weight:700; color:var(--ink); }
.prod-note{ color:var(--grey-text); font-size:.86rem; }
.prod-body .btn-line{ margin-top:auto; padding:9px 14px; font-size:.85rem; white-space:nowrap; }
.prod-body .btn-line .t-mini{ display:none; }
#productEmpty .btn-line, .prod-body .btn-line{ background:#06C755; color:#fff; }
#productEmpty .btn-line:hover, .prod-body .btn-line:hover{ background:#05a648; transform:translateY(-2px); box-shadow:0 8px 20px rgba(6,199,85,.35); }
@media(max-width:900px){ .prod-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media(max-width:680px){ .prod-grid{ grid-template-columns:1fr 1fr; } }
/* สินค้ามีเป็นร้อยรายการ — บนมือถือคงไว้ 2 คอลัมน์ ถ้าเหลือคอลัมน์เดียวหน้าจะยาวเกินไป
   จึงบีบตัวอักษรและตัดคำอธิบายเหลือ 3 บรรทัดแทน                                        */
/* จอแคบ: หัวเว็บเตี้ยลง และปุ่มหมวดยาวเกินจะตัดบรรทัดจนแถบสูงบังสินค้า
   จึงให้เลื่อนแนวนอนแทน                                                */
@media(max-width:760px){
  .prod-toolbar{ padding:9px 11px 7px; border-radius:0 0 15px 15px; }
  .prod-chips{ margin:0 -11px; padding:2px 11px 4px; }
  .chip{ font-size:.8rem; padding:6px 12px; }
  .prod-filter{ margin-bottom:8px; }
  .prod-filter input{ padding:11px 42px 11px 42px; font-size:.92rem; }
}

@media(max-width:420px){
  .prod-grid{ grid-template-columns:1fr 1fr; gap:13px; }
  .prod-body{ padding:11px 12px 13px; gap:4px; }
  .prod-body h4{ font-size:.88rem; line-height:1.35; }
  .prod-note{ font-size:.76rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .prod-body .btn-line{ padding:8px 10px; font-size:.78rem; gap:5px; }
  .prod-body .btn-line svg{ width:14px; height:14px; }
  .prod-body .btn-line .t-full{ display:none; }
  .prod-body .btn-line .t-mini{ display:inline; }
}

/* ===== PROSE (เนื้อหาบทความ) ===== */
/* ===== แถบข้อมูลบทความ (ผู้เขียน · เวลาอ่าน · อัปเดต) ===== */
.art-meta{ max-width:800px; margin:0 auto 26px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding-bottom:18px; border-bottom:1px solid var(--grey-line); font-size:.88rem; color:var(--grey-text); }
.art-meta span{ display:inline-flex; align-items:center; gap:7px; }
.art-meta svg.ico{ width:16px; height:16px; color:var(--red); }
.art-meta .by{ font-weight:600; color:var(--ink); }

/* ===== บทความที่เกี่ยวข้อง (ท้ายบทความ) ===== */
.rel-wrap{ max-width:800px; margin:52px auto 0; padding-top:34px; border-top:1px solid var(--grey-line); }
.rel-wrap h3{ font-size:1.15rem; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.rel-wrap h3 svg.ico{ width:22px; height:22px; color:var(--red); }
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rel-card{ display:flex; flex-direction:column; gap:9px; background:#fff; border:1px solid var(--grey-line);
  border-radius:14px; padding:18px 18px 20px; text-decoration:none; color:inherit; transition:.25s ease; }
.rel-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--red); }
.rel-card .ic{ color:var(--red); }
.rel-card .ic svg.ico{ width:26px; height:26px; }
.rel-card .rc-cat{ font-size:.74rem; font-weight:600; color:var(--grey-text); }
.rel-card b{ font-size:.98rem; font-weight:600; line-height:1.55; }
@media(max-width:760px){ .rel-grid{ grid-template-columns:1fr; } }

.prose{ max-width:800px; margin:0 auto; color:var(--ink-soft); }
.prose p{ font-size:1.02rem; }                 /* อ่านบทความยาวสบายตาขึ้นเล็กน้อย */
.prose .lead{ font-size:1.1rem; color:var(--grey-text); line-height:1.8; margin-bottom:28px; }
.prose p{ margin:0 0 16px; line-height:1.85; }
.prose h3{ font-size:1.3rem; font-weight:700; color:var(--ink); margin:36px 0 14px; display:flex; align-items:center; gap:10px; }
.prose h3 svg.ico{ width:26px; height:26px; color:var(--red); flex:none; }
.prose ul{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px; }
.prose ul li{ position:relative; padding-left:28px; line-height:1.7; }
.prose ul li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--red); font-weight:700; }
.prose strong{ color:var(--ink); font-weight:600; }

/* ===== PRICE BOX (ราคาบริการ) ===== */
.price-box{ max-width:800px; margin:30px auto 0; background:var(--surface); border:1px solid var(--grey-line); border-left:4px solid var(--red); border-radius:var(--radius); padding:24px 28px; box-shadow:var(--shadow); }
.price-box h3{ font-size:1.18rem; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.price-box h3 svg.ico{ color:var(--red); width:24px; height:24px; }
.price-list{ list-style:none; padding:0; margin:0; display:grid; gap:0; }
.price-list li{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:12px 2px; border-top:1px dashed var(--grey-line); }
.price-list li:first-child{ border-top:none; }
.price-list .p-name{ color:var(--ink-soft); }
.price-list .p-val{ font-weight:700; color:var(--red); white-space:nowrap; }
.price-hint{ color:var(--grey-text); font-size:.86rem; margin-top:14px; line-height:1.6; }
/* จอแคบ: ราคายาวจะบีบชื่อบริการจนตัดบรรทัด — เรียงลงล่างแทน */
@media(max-width:480px){
  .price-list li{ flex-direction:column; align-items:flex-start; gap:3px; }
}

/* ===== BACK BUTTON (ปุ่มย้อนกลับ) ===== */
.back-bar{ padding:26px 0 0; }
.back-link{ display:inline-flex; align-items:center; gap:7px; color:var(--grey-text); font-weight:600; font-size:.92rem; padding:8px 16px 8px 13px; border:1px solid var(--grey-line); border-radius:999px; background:var(--surface); transition:.2s ease; }
.back-link:hover{ color:var(--red); border-color:var(--red); transform:translateX(-2px); }
.back-link svg.ico{ width:18px; height:18px; }

/* ===== ANIMALS ===== */
.animals-row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.animal-chip{ display:flex; flex-direction:column; align-items:center; gap:10px; width:134px; background:#fff; border:1px solid var(--grey-line); border-radius:var(--radius); padding:18px 12px 20px; transition:.25s; color:inherit; text-decoration:none; }
.animal-chip:hover{ border-color:var(--red); transform:translateY(-4px); box-shadow:var(--shadow); }
.animal-chip .emoji{ font-size:2.4rem; }
.animal-chip span{ font-weight:500; font-size:.9rem; text-align:center; }

/* ===== INFO / HOURS ===== */
.info{ background:var(--black); color:#fff; }
.info .section-head h2,.info .section-head p{ color:#fff; }
.info .section-head p{ opacity:.7; }
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.info-box{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:34px; }
.info-box h3{ display:flex; align-items:center; gap:10px; font-size:1.3rem; margin-bottom:22px; }
.info-box h3 .ic{ color:var(--red); }
.hours-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.hours-row:last-child{ border-bottom:none; }
.hours-row .day{ font-weight:500; }
.hours-row .time{ opacity:.8; }
.hours-row.alert .time{ color:var(--red); font-weight:600; }
.contact-item{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; }
.contact-item .ic{ flex:none; width:42px; height:42px; border-radius:12px; background:var(--red); display:grid; place-items:center; font-size:1.1rem; }
.contact-item b{ display:block; }
.contact-item span{ opacity:.75; font-size:.95rem; }

/* ===== SVG line-icons (แทน emoji) — สีตาม currentColor เข้าธีมอัตโนมัติ ===== */
svg.ico{ width:1em; height:1em; display:inline-block; vertical-align:-.18em; flex:none;
         fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.contact-item .ic{ color:#fff; }                                  /* ไอคอนขาวบนกล่องแดง */
.contact-item .ic svg.ico{ width:20px; height:20px; vertical-align:0; }
.info-box h3 .ic svg.ico{ width:22px; height:22px; vertical-align:-.22em; }
.map-badge .pin{ color:var(--red); display:inline-flex; align-items:center; }
.map-badge .pin svg.ico{ width:18px; height:18px; }
.hours-row.alert .day{ display:inline-flex; align-items:center; gap:7px; }
.btn svg.ico{ width:18px; height:18px; vertical-align:-.22em; margin-right:4px; }
.topbar .left svg.ico{ width:15px; height:15px; vertical-align:-.2em; margin-right:5px; }
.emergency svg.ico{ width:17px; height:17px; vertical-align:-.22em; }
footer svg.ico{ width:16px; height:16px; vertical-align:-.2em; margin-right:7px; }

/* Lucide content icons — ขนาด/สีตามบริบท */
.card .ic svg.ico{ width:30px; height:30px; stroke-width:1.8; }
.animal-chip .emoji{ color:var(--red); display:inline-flex; }
.animal-chip .emoji svg.ico{ width:28px; height:28px; }
.animal-chip .emoji img{ width:100%; max-width:104px; height:auto; aspect-ratio:1; object-fit:contain; display:block; }
.animal-chip .emoji{ width:100%; display:grid; place-items:center; }
.article-card .thumb{ color:var(--red); }
.article-card .thumb svg.ico{ width:46px; height:46px; stroke-width:1.6; }
.about-img .big-paw{ color:var(--red); }
.about-img .big-paw svg.ico{ width:120px; height:120px; stroke-width:1.4; opacity:.85; }
.future .ribbon svg.ico{ width:18px; height:18px; vertical-align:-.22em; margin-right:5px; }
.search-btn svg.ico, .menu-toggle svg.ico{ width:21px; height:21px; }
.lang svg.ico{ width:15px; height:15px; }
.lang .caret{ width:13px; height:13px; opacity:.75; }

/* ===== BOOKING + MAP ===== */
.booking-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; }
.booking-form{ background:#fff; border-radius:var(--radius); padding:38px; box-shadow:var(--shadow); }
.booking-form h3{ font-size:1.4rem; margin-bottom:6px; }
.booking-form .hint{ color:var(--grey-text); font-size:.92rem; margin-bottom:24px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.9rem; font-weight:500; margin-bottom:7px; }
.field label .req{ color:var(--red); }
.field input,.field select,.field textarea{ width:100%; font-family:'Kanit',sans-serif; font-size:.95rem; padding:13px 14px; border:1.5px solid var(--grey-line); border-radius:11px; background:#fff; transition:.2s; color:var(--black); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(232,51,75,.12); }
.field textarea{ resize:vertical; min-height:90px; }
.booking-form .btn{ width:100%; justify-content:center; margin-top:6px; }
.form-note{ font-size:.82rem; color:var(--grey-text); text-align:center; margin-top:14px; }
.form-success{ display:none; background:rgba(40,199,111,.1); border:1.5px solid #28c76f; color:#1a7a4a; border-radius:12px; padding:16px; font-size:.92rem; margin-top:16px; text-align:center; font-weight:500; }
.map-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:480px; background:var(--black); position:relative; }
.map-wrap iframe{ width:100%; height:100%; min-height:480px; border:0; display:block; }
.map-badge{ position:absolute; top:16px; left:16px; background:#fff; border-radius:12px; padding:10px 16px; box-shadow:var(--shadow); font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:8px; z-index:2; }
.map-badge .pin{ color:var(--red); }

/* ===== LINE QR ===== */
.qr-card{ background:#fff; border:1px solid var(--grey-line); border-radius:var(--radius); padding:32px; text-align:center; box-shadow:var(--shadow); max-width:340px; margin:0 auto; }
.qr-card .qr-img{ width:220px; height:220px; margin:0 auto 18px; border-radius:14px; overflow:hidden; border:6px solid #06C755; background:#fff; }
.qr-card .qr-img img{ width:100%; height:100%; object-fit:contain; }
.qr-card .line-tag{ display:inline-flex; align-items:center; gap:8px; background:#06C755; color:#fff; font-weight:600; padding:8px 18px; border-radius:50px; margin-bottom:14px; }
.qr-card h3{ font-size:1.25rem; margin-bottom:6px; }
.qr-card p{ color:var(--grey-text); font-size:.92rem; margin-bottom:18px; }
.qr-card .line-id{ font-weight:600; color:var(--black); }
.qr-card .btn-line{ background:#06C755; color:#fff; width:100%; justify-content:center; }
.qr-card .btn-line:hover{ background:#05a648; transform:translateY(-2px); box-shadow:0 8px 20px rgba(6,199,85,.35); }

/* ===== FUTURE / ROADMAP ===== */
.future{ text-align:center; }
.future .ribbon{ display:inline-block; background:rgba(232,51,75,.1); color:var(--red); font-weight:600; padding:8px 20px; border-radius:50px; margin-bottom:18px; }
.roadmap{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px; text-align:left; }
.step{ background:#fff; border:1px solid var(--grey-line); border-radius:var(--radius); padding:30px; }
.step .num{ width:46px; height:46px; border-radius:50%; background:var(--black); color:#fff; font-weight:700; display:grid; place-items:center; margin-bottom:16px; }
.step.active .num{ background:var(--red); }
.step h4{ font-size:1.1rem; margin-bottom:6px; }
.step p{ color:var(--grey-text); font-size:.93rem; }
.step .tag{ font-size:.78rem; font-weight:600; color:var(--red); }

/* ===== ARTICLES ===== */
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.article-card{ background:#fff; border:1px solid var(--grey-line); border-radius:var(--radius); overflow:hidden;
  transition:.3s; display:flex; flex-direction:column; }
.article-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
/* แถบไอคอนเตี้ยลง ไม่ให้เหลือที่ว่างเยอะ + พื้นโทนแบรนด์แทนเทาเรียบ */
.article-card .thumb{ aspect-ratio:16/6; background:linear-gradient(180deg,#FDF3F4 0%,#FAF7F0 100%);
  display:grid; place-items:center; border-bottom:1px solid var(--grey-line); }
.article-card .body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.article-card .cat{ font-size:.76rem; font-weight:600; color:var(--grey-text); letter-spacing:.3px; }
.article-card .cat.urgent{ color:var(--red); }          /* ใช้สีแดงเฉพาะหมวดฉุกเฉิน ให้สีมีความหมาย */
.article-card h3{ font-size:1.1rem; margin:6px 0 8px; font-weight:600; line-height:1.5; }
.article-card p{ color:var(--grey-text); font-size:.92rem; flex:1; }
.article-card .read{ display:inline-block; margin-top:14px; font-weight:600; color:var(--red); font-size:.9rem; }

/* บทความเด่น — กินสองคอลัมน์ วางไอคอนซ้าย เนื้อหาขวา สร้างลำดับสายตา */
/* ปกบทความ — ภาพออกแบบมาเป็น 3:2 มีพาดหัวอยู่ในรูป ต้องแสดงเต็มสัดส่วน
   ถ้าเอาไปยัดในกรอบ 16:6 แบบไอคอนเดิม หัวสัตว์กับพาดหัวจะโดนตัดทิ้ง        */
/* จำกัดความกว้างไว้ ไม่งั้นบนจอคอมปกสูงเกือบ 800px กินจอทั้งหน้าจอแรก
   คนที่เข้ามาดูตารางวัคซีนต้องเลื่อนผ่านรูปยาวมากกว่าจะเจอตาราง        */
.article-cover{ display:block; width:100%; max-width:820px; height:auto; aspect-ratio:3/2;
  object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); margin:30px auto 4px; }
/* รูปในการ์ด — คงกรอบเดิมไว้ทุกอย่าง เปลี่ยนแค่วิธีวางรูปลงในกรอบ
   ใช้ flex จัดกึ่งกลางแทน grid + place-items เพราะ grid ทำให้ height:100%
   ของรูปหาความสูงอ้างอิงไม่ได้ รูปเลยยืดจนล้นกรอบออกมาทับเนื้อหา        */
.article-card .thumb.has-img{ padding:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
/* กรอบแถบยาว (16:6) ของการ์ดธรรมดา — ครอบเต็มโดยยึดขอบบน
   เก็บพาดหัวกับหัวสัตว์ที่อยู่ครึ่งบนของรูปไว้ ตัดทิ้งแค่พื้นเคาน์เตอร์ด้านล่าง */
.article-card .thumb.has-img img{ width:100%; height:100%;
  object-fit:cover; object-position:center top; display:block; }
/* เฉพาะจอกว้าง: กรอบเดิมกว้าง 44% ทำให้ได้ทรงเกือบจตุรัส (1.04) ซึ่งไม่ตรงกับ
   รูป 3:2 จะครอปก็เสีย (พาดหัวอยู่ซ้ายสุด ตัวสัตว์อยู่ขวาสุด) จะย่อก็เหลือ
   แถบครีมบน-ล่าง จึงขยายกรอบเป็น 58% ให้สัดส่วนเข้าใกล้ 3:2 รูปเต็มกรอบพอดี
   เนื้อหายังเหลือที่พอ เพราะการ์ดนี้กินสองคอลัมน์อยู่แล้ว
   เผื่อเนื้อหายาวกว่ารูป ใช้ครอบเต็มไว้ ตัดบน-ล่างนิดหน่อยดีกว่าเหลือแถบว่าง */
@media(min-width:861px){
  .article-card.featured .thumb.has-img{ width:58%; }
}

.article-card.featured{ grid-column:span 2; flex-direction:row; align-items:stretch; }
.article-card.featured .thumb{ aspect-ratio:auto; width:44%; flex:none; border-bottom:none;
  border-right:1px solid var(--grey-line); background:linear-gradient(160deg,#FDF3F4 0%,#FAF7F0 100%); }
.article-card.featured .thumb svg.ico{ width:76px; height:76px; }
.article-card.featured .body{ justify-content:center; padding:30px 32px; }
.article-card.featured h3{ font-size:1.42rem; margin:8px 0 10px; }
.article-card.featured p{ font-size:1rem; flex:none; }
@media(max-width:860px){
  .article-card.featured{ grid-column:span 2; flex-direction:column; }
  .article-card.featured .thumb{ width:100%; aspect-ratio:16/6; border-right:none; border-bottom:1px solid var(--grey-line); }
  .article-card.featured .body{ padding:20px 22px 22px; }
  .article-card.featured h3{ font-size:1.15rem; }
}
@media(max-width:560px){ .article-card.featured{ grid-column:span 1; } }

/* ===== CTA ===== */
.cta-band{ background:var(--red); color:#fff; border-radius:28px; padding:60px 40px; text-align:center; box-shadow:var(--shadow-lg); }
.cta-band h2{ font-size:clamp(1.6rem,4vw,2.3rem); font-weight:700; margin-bottom:14px; }
.cta-band p{ opacity:.9; margin-bottom:28px; }

/* ===== FOOTER ===== */
footer{ background:var(--black); color:#fff; padding:60px 0 30px; }
.footer-brand{ display:inline-block; line-height:1; color:inherit; }
.footer-brand .fb-name{ display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:1.95rem; letter-spacing:-.5px; color:var(--red); }
.footer-brand .fb-sub{ display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:.76rem; letter-spacing:2.6px; text-transform:uppercase; opacity:.7; margin-top:6px; }
/* ===== รูปถ่ายจริงในร้าน (แถบภาพหน้าเพ็ทช็อป) ===== */
/* min(300px,100%) ไม่ใช่ 300px เฉย ๆ — ที่จอ 320px คอนเทนเนอร์กว้างแค่ ~294px
   แทร็กขั้นต่ำ 300px จะดันจนรูปล้นออกนอกจอ ทำให้หน้าเลื่อนซ้ายขวาได้ */
.shop-photos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:20px; margin-bottom:44px; }
.shop-photos figure{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--grey-bg); }
.shop-photos img{ display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.shop-photos figcaption{ padding:12px 16px; font-size:.9rem; color:var(--grey-text); background:#fff; }

.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:40px; margin-bottom:40px; }
.foot-grid p{ opacity:.7; font-size:.95rem; margin-top:14px; max-width:330px; }
.foot-tag{ margin-top:18px !important; }
.foot-addr{ display:flex; gap:4px; align-items:flex-start; line-height:1.75; }
.foot-addr svg.ico{ flex:none; margin-top:.35em; color:var(--red); opacity:.9; }
.foot-grid h5{ font-size:1rem; margin-bottom:16px; }
.foot-grid ul{ list-style:none; display:grid; gap:10px; }
.foot-grid ul li{ opacity:.78; font-size:.93rem; display:flex; gap:8px; align-items:flex-start; }
.foot-grid ul a{ opacity:.78; font-size:.93rem; }
.foot-grid ul a:hover{ opacity:1; color:var(--red); }
.socials{ display:flex; gap:11px; margin-top:22px; }
.socials a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; transition:.22s ease; }
.socials a:hover{ background:var(--red); border-color:var(--red); transform:translateY(-3px); box-shadow:0 8px 18px rgba(232,51,75,.35); }
.socials svg.ico{ width:19px; height:19px; margin:0; vertical-align:0; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:22px; text-align:center; opacity:.6; font-size:.88rem; }

/* ===== SCROLL REVEAL (text/การ์ดค่อย ๆ ลอยขึ้นตอนเลื่อน) ===== */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===== RESPONSIVE ===== */
@media (max-width:1280px){
  .nav-links{ position:fixed; inset:122px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch; gap:0; padding:10px 16px 20px; border-bottom:1px solid var(--grey-line); box-shadow:var(--shadow-lg); display:none; max-height:calc(100vh - 122px); overflow-y:auto; }
  .nav-links.open{ display:flex; }
  .nav-item > a{ justify-content:space-between; padding:14px 8px; border-bottom:1px solid var(--grey-bg); border-radius:0; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 8px 16px; min-width:auto; display:none; }
  .nav-item.has-drop.open-sub .dropdown{ display:block; }
  .menu-toggle{ display:grid; }   /* grid เพื่อให้ place-items จัดไอคอนกลางพื้นที่แตะ 44px */
  .emergency span.full{ display:none; }
}
/* แท็บเล็ต / จอสัมผัส — iOS ซูมหน้าจอเองถ้าตัวอักษรในช่องกรอกเล็กกว่า 16px */
@media (max-width:1024px){
  .field input,.field select,.field textarea{ font-size:16px; }
}
@media (max-width:900px){
  .cta-band{ padding:48px 30px; }
}
@media (max-width:860px){
  .about-grid,.info-grid,.booking-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .cards,.roadmap,.article-grid{ grid-template-columns:1fr 1fr; }
  .topbar .left{ gap:0; }
  .topbar .left .tb-hours{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .booking-form{ padding:28px 22px; }
}
@media (max-width:560px){
  .cards,.roadmap,.article-grid{ grid-template-columns:1fr; }
  section{ padding:60px 0; }
  .brand-logo{ height:46px; }
  .foot-grid{ grid-template-columns:1fr; }
  /* ลดขอบในให้เนื้อหาได้พื้นที่คืนบนจอแคบ */
  .cta-band{ padding:36px 20px; border-radius:22px; }
  .booking-form{ padding:24px 18px; }
  .care-card{ padding:22px 18px; }
  .price-box{ padding:20px 18px; }
  .note-box{ padding:18px 16px; gap:11px; }
  .vac-head h3{ font-size:1.15rem; }
  .prose h3{ font-size:1.18rem; }
}
/* จอแคบมาก (iPhone SE รุ่นเก่า 320px และเครื่องที่ตั้งค่าขยายจอ)
   ของในหัวเว็บรวมกันต้องการอย่างน้อย 296px แต่ .container กว้างแค่ 92%
   ที่จอ 320px จึงเหลือ 294px -> หัวเว็บล้น ทำให้ "ทุกหน้า" เลื่อนซ้ายขวาได้
   บีบระยะห่างและโลโก้ลง เพื่อให้พอดีตั้งแต่จอ ~290px ขึ้นไป              */
@media (max-width:400px){
  nav{ gap:10px; }
  .nav-right{ gap:8px; }
  .emergency{ padding:12px 13px; }
  .brand-logo{ height:40px; }
}
/* มือถือแนวนอน (จอเตี้ย) — ขอบเปล่ากินพื้นที่ 38% ทำให้ปุ่มจองนัดตกจอ */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:0; }
  .hero-inner{ padding:26px 20px; }
  .hero-th{ font-size:clamp(1.5rem,3.6vw,1.95rem); }
  .hero-badge{ margin-bottom:12px; }
  .hero-en{ margin-bottom:4px; }
  .hero .lead{ font-size:1rem; margin:10px auto 18px; }
  .hero-trust{ margin-top:18px; gap:8px 18px; }
  section{ padding:48px 0; }
}

/* ===== กล่องยืนยันการจองหลังส่งฟอร์มสำเร็จ =====
   ใช้แทนอีเมลตอบกลับอัตโนมัติ ซึ่งเป็นฟีเจอร์เสียเงินของ Web3Forms
   ลูกค้าได้สรุปการจองไว้แคปหน้าจอ + บันทึกลงปฏิทิน + ทักไลน์ยืนยันต่อได้ */
.bk-confirm{ display:none; background:#fff; border:1px solid var(--grey-line); border-left:4px solid #28C76F;
  border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow); }
.bk-confirm.show{ display:block; }
.bk-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.bk-head svg.ico{ width:26px; height:26px; color:#28C76F; flex:none; margin-top:2px; }
.bk-head b{ display:block; font-size:1.1rem; margin-bottom:4px; }
.bk-head span{ color:var(--grey-text); font-size:.92rem; line-height:1.65; }
.bk-list{ list-style:none; margin:0 0 20px; padding:16px 18px; background:var(--grey-bg); border-radius:12px; display:grid; gap:9px; }
.bk-list li{ display:flex; gap:12px; font-size:.94rem; }
.bk-list .k{ color:var(--grey-text); min-width:96px; flex:none; }
.bk-list .v{ font-weight:600; }
.bk-acts{ display:flex; flex-wrap:wrap; gap:10px; }
.bk-acts .btn{ padding:12px 20px; font-size:.93rem; }
.bk-note{ margin-top:16px; font-size:.87rem; color:var(--grey-text); line-height:1.7; }
@media(max-width:520px){
  .bk-list li{ flex-direction:column; gap:2px; }
  .bk-list .k{ min-width:auto; font-size:.85rem; }
  .bk-acts .btn{ width:100%; justify-content:center; }
}