:root{
    /* Thonglor Pet Hospital brand — cyan #00A1E4 / indigo #2C2A7D (ตัวอย่างจากโลโก้) */
    --brand-cyan:#00a1e4;
    --brand-cyan-dark:#0083c5;
    --brand-indigo:#2c2a7d;

    --blue-900:#1d1b5c;   /* topbar / หัวข้อหลัก — indigo เข้ม */
    --blue-700:#2c2a7d;   /* indigo แบรนด์ */
    --blue-600:#0083c5;
    --blue-500:#00a1e4;   /* cyan แบรนด์ */
    --blue-100:#e2f4fd;
    --blue-50:#f2fafe;
    --gray-900:#18212e;
    --gray-600:#57667a;
    --gray-300:#d9e2ec;
    --gray-100:#f3f6f9;
    --white:#ffffff;
    --radius:10px;
    --shadow:0 1px 3px rgba(15,41,66,0.08), 0 1px 2px rgba(15,41,66,0.06);
    --shadow-md:0 4px 16px rgba(20,32,64,0.10), 0 1px 3px rgba(20,32,64,0.06);
    --focus:0 0 0 3px rgba(0,161,228,.45);
  }

  /* โฟกัสที่มองเห็นชัดสำหรับคนที่ใช้คีย์บอร์ด (accessibility) */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:none;
    box-shadow:var(--focus);
    border-radius:6px;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:"Sarabun","Noto Sans Thai","Segoe UI",sans-serif;
    background:var(--gray-100);
    color:var(--gray-900);
  }

  .topbar{
    background:linear-gradient(100deg,var(--blue-900) 0%,var(--brand-indigo) 62%,#1e3f8f 100%);
    color:var(--white);
    padding:10px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:20;
    gap:16px;
    flex-wrap:wrap;
    border-bottom:3px solid var(--brand-cyan);
    box-shadow:0 2px 10px rgba(16,24,52,.18);
  }
  .topbar .brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:700;
    font-size:16.5px;
  }
  /* โลโก้จริงของโรงพยาบาล แทนตัวอักษรย่อแบบเดิม */
  .brand .logo-badge{
    display:flex;align-items:center;
    flex-shrink:0;
    height:40px;
    padding:0;
    background:var(--white);
    border-radius:8px;
    padding:3px 8px;
    box-shadow:0 1px 4px rgba(0,0,0,.18);
    transition:transform .15s ease;
  }
  .brand .logo-badge img{height:30px;width:auto;display:block;}
  .brand .logo-badge:hover{transform:translateY(-1px);}
  .brand .brand-divider{
    width:1px;height:26px;
    background:rgba(255,255,255,.28);
    flex-shrink:0;
  }
  .brand .brand-text{display:flex;flex-direction:column;line-height:1.25;}
  .topbar .tagline{
    font-size:11.8px;
    color:#a9c4e2;
    font-weight:400;
    letter-spacing:.01em;
  }
  @media (max-width:860px){
    .topbar{padding:10px 16px;}
    .topbar .brand{font-size:14.5px;gap:9px;}
    .topbar .brand-divider{display:none;}
    .topbar .tagline{font-size:11px;}   /* คงบรรทัดชื่อโรงพยาบาล + Line OA ไว้ทุกขนาดจอ */
    .brand .logo-badge{padding:3px 6px;}
    .brand .logo-badge img{height:26px;}
  }
  .search-box{
    display:flex;
    align-items:center;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:8px;
    padding:8px 14px;
    width:360px;
    max-width:44vw;
  }
  .search-box input{
    background:transparent;
    border:none;
    outline:none;
    color:var(--white);
    font-size:14px;
    width:100%;
    font-family:inherit;
  }
  .search-box input::placeholder{color:#b9cbdd;}
  .search-box svg{flex-shrink:0;margin-right:8px;opacity:.85;}

  .layout{
    display:flex;
    max-width:1320px;
    margin:0 auto;
    min-height:calc(100vh - 61px);
  }

  .sidebar{
    width:300px;
    flex-shrink:0;
    background:var(--white);
    border-right:1px solid var(--gray-300);
    padding:18px 12px 40px;
    position:sticky;
    top:61px;
    height:calc(100vh - 61px);
    overflow-y:auto;
  }
  .sidebar-title{
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--gray-600);
    text-transform:uppercase;
    padding:6px 12px 12px;
  }
  .menu-group{margin-bottom:2px;}
  .menu-head{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    background:none;
    border:none;
    text-align:left;
    padding:10px 12px;
    border-radius:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:13.8px;
    font-weight:600;
    color:var(--gray-900);
    transition:background .15s ease;
  }
  .menu-head:hover{background:var(--blue-50);}
  .menu-head .icon{
    width:20px;height:20px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;
  }
  .menu-head .chev{
    margin-left:auto;
    transition:transform .18s ease;
    color:var(--gray-600);
    flex-shrink:0;
    font-size:12px;
  }
  .menu-group.open .menu-head .chev{transform:rotate(90deg);}
  .menu-group.active > .menu-head{background:var(--blue-100);color:var(--blue-700);}

  .submenu{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    padding-left:14px;
    border-left:2px solid var(--gray-300);
    margin-left:22px;
  }
  .menu-group.open .submenu{max-height:900px;}
  .submenu button{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    font-family:inherit;
    font-size:13.3px;
    color:var(--gray-600);
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
    line-height:1.4;
  }
  .submenu button:hover{background:var(--gray-100);color:var(--gray-900);}
  .submenu button.active{
    background:var(--blue-600);
    color:var(--white);
    font-weight:600;
  }

  .content{
    flex:1;
    padding:32px 40px 80px;
    min-width:0;
  }
  .breadcrumb{
    font-size:13px;
    color:var(--gray-600);
    margin-bottom:14px;
  }
  .breadcrumb b{color:var(--blue-700);}
  .content h1{
    font-size:25px;
    margin:0 0 6px;
    color:var(--blue-900);
  }
  .content .subtitle{
    color:var(--gray-600);
    font-size:14.5px;
    margin-bottom:22px;
    line-height:1.7;
  }
  .step-card{
    background:var(--white);
    border:1px solid var(--gray-300);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px 24px;
    margin-bottom:16px;
    display:flex;
    gap:18px;
  }
  .step-num{
    flex-shrink:0;
    width:34px;height:34px;
    border-radius:50%;
    background:var(--blue-600);
    color:var(--white);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;
    font-size:15px;
  }
  .step-body{min-width:0;flex:1;}
  .step-body h3{
    margin:2px 0 8px;
    font-size:15.5px;
    color:var(--gray-900);
  }
  .step-body p{
    margin:0 0 6px;
    font-size:14px;
    line-height:1.8;
    color:#3c4a58;
  }
  .step-body ul{
    margin:8px 0 0;
    padding-left:18px;
    font-size:13.8px;
    color:#3c4a58;
    line-height:1.8;
  }
  .shots{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:14px;
  }
  .shot{
    width:260px;
    height:170px;
    flex-shrink:0;
    border:1px solid var(--gray-300);
    border-radius:8px;
    box-shadow:var(--shadow);
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:zoom-in;
  }
  /* ภาพหน้าจอแนวตั้ง (สกรีนช็อตจากมือถือ) ใช้กรอบทรงสูง ไม่ให้ถูกย่อจนอ่านไม่ออก
     คลาส portrait ถูกใส่ให้อัตโนมัติโดย manual.js ตามสัดส่วนจริงของภาพ */
  .shot.portrait{
    width:232px;
    height:452px;
  }
  .shots img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    display:block;
  }
  .note, .info{
    display:flex;
    gap:10px;
    border-radius:8px;
    padding:14px 16px;
    font-size:13.5px;
    margin:18px 0;
    line-height:1.7;
  }
  .note{background:#fff9e8;border:1px solid #f2dd9a;color:#6b5200;}
  .info{background:var(--blue-50);border:1px solid #b7d3ec;color:#154a72;}
  .info ul{margin:6px 0 0;padding-left:18px;}
  .flow-nav{
    display:flex;justify-content:space-between;
    margin-top:32px;
    gap:12px;
    flex-wrap:wrap;
  }
  .flow-nav button{
    flex:1;
    min-width:180px;
    background:var(--white);
    border:1px solid var(--gray-300);
    border-radius:8px;
    padding:14px 16px;
    text-align:left;
    cursor:pointer;
    font-family:inherit;
  }
  .flow-nav button:hover{border-color:var(--blue-500);}
  .flow-nav .label{font-size:11.5px;color:var(--gray-600);display:block;margin-bottom:3px;}
  .flow-nav .title{font-size:13.8px;font-weight:600;color:var(--blue-700);}
  .flow-nav .next{text-align:right;}

  .related-box{
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid var(--gray-300);
  }
  .related-box h4{font-size:13px;color:var(--gray-600);margin:0 0 12px;text-transform:uppercase;letter-spacing:.03em;}
  .related-chip{
    display:inline-block;
    background:var(--blue-50);
    color:var(--blue-700);
    padding:7px 14px;
    border-radius:20px;
    font-size:13px;
    margin:0 8px 8px 0;
    cursor:pointer;
    font-weight:500;
  }
  .related-chip:hover{background:var(--blue-100);}

  .feedback-box{
    margin-top:30px;
    background:var(--blue-900);
    border-radius:var(--radius);
    padding:20px 24px;
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
  }
  .feedback-box .txt strong{display:block;font-size:14.5px;margin-bottom:2px;}
  .feedback-box .txt span{font-size:12.5px;color:#b9cbdd;}
  .fb-buttons button{
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.25);
    color:var(--white);
    border-radius:7px;
    padding:8px 16px;
    margin-left:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:13px;
  }
  .fb-buttons button:hover{background:rgba(255,255,255,0.22);}

  .faq-nav-btn{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    background:none;
    border:none;
    text-align:left;
    padding:12px;
    margin-bottom:10px;
    border-radius:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:13.8px;
    font-weight:600;
    color:var(--blue-700);
    border:1px solid var(--blue-100);
    background:var(--blue-50);
  }
  .faq-nav-btn:hover{background:var(--blue-100);}
  .faq-nav-btn.active{background:var(--blue-600);color:var(--white);border-color:var(--blue-600);}
  .faq-nav-btn .icon{font-size:15px;}

  .faq-category{
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--gray-600);
    text-transform:uppercase;
    margin:26px 0 12px;
  }
  .faq-category:first-of-type{margin-top:6px;}
  .faq-item{
    background:var(--white);
    border:1px solid var(--gray-300);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin-bottom:10px;
    overflow:hidden;
  }
  .faq-q{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    background:none;
    border:none;
    text-align:left;
    padding:16px 18px;
    cursor:pointer;
    font-family:inherit;
    font-size:14.5px;
    font-weight:600;
    color:var(--gray-900);
  }
  .faq-q .chev{
    flex-shrink:0;
    color:var(--gray-600);
    transition:transform .18s ease;
    font-size:12px;
  }
  .faq-item.open .faq-q .chev{transform:rotate(90deg);}
  .faq-item.hot{
    border-color:#e8823a;
    border-left-width:4px;
    box-shadow:0 1px 3px rgba(200,90,20,0.14), 0 1px 2px rgba(200,90,20,0.10);
  }
  .faq-q-text{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
  }
  .faq-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:#fff1e6;
    color:#c25b12;
    border:1px solid #f2c39a;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    padding:2px 9px;
    border-radius:999px;
    white-space:nowrap;
    flex-shrink:0;
  }
  .faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .faq-item.open .faq-answer{max-height:400px;}
  .faq-answer-inner{
    padding:0 18px 18px;
    font-size:13.8px;
    line-height:1.8;
    color:#3c4a58;
  }
  .faq-link{
    display:inline-block;
    margin-top:10px;
    background:var(--blue-50);
    color:var(--blue-700);
    padding:6px 12px;
    border-radius:20px;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
  }
  .faq-link:hover{background:var(--blue-100);}
  .faq-link:before{content:"→ ";}

  .empty-search{text-align:center;padding:60px 20px;color:var(--gray-600);}
  .search-result-item{
    background:var(--white);
    border:1px solid var(--gray-300);
    border-radius:8px;
    padding:16px 18px;
    margin-bottom:10px;
    cursor:pointer;
  }
  .search-result-item:hover{border-color:var(--blue-500);}
  .search-result-item .path{font-size:11.5px;color:var(--gray-600);margin-bottom:4px;}
  .search-result-item .title{font-size:14.5px;font-weight:600;color:var(--blue-700);}

  .home-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:14px;
    margin-top:14px;
  }
  .home-card{
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:6px;
    background:var(--white);
    border:1px solid var(--gray-300);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px 20px;
  }
  .home-card:hover{border-color:var(--blue-500);}
  .home-card .ic{font-size:24px;}
  .home-card h3{margin:2px 0 0;font-size:14.5px;color:var(--gray-900);}
  .home-card p{margin:0;color:var(--gray-600);font-size:12.5px;}

  /* Lightbox */
  .lightbox{
    display:none;
    position:fixed;inset:0;
    background:rgba(10,20,30,0.82);
    z-index:100;
    align-items:center;
    justify-content:center;
    padding:30px;
    cursor:zoom-out;
  }
  .lightbox.open{display:flex;}
  .lightbox img{max-width:92vw;max-height:88vh;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,0.5);}

  @media (max-width:860px){
    .layout{flex-direction:column;}
    .sidebar{width:100%;height:auto;position:relative;top:0;border-right:none;border-bottom:1px solid var(--gray-300);}
    .content{padding:24px 18px 60px;}
    .search-box{width:100%;max-width:none;}
  }

/* =====================================================================
   เพิ่มเติมสำหรับศูนย์คู่มือกลาง (hub) และปุ่มสลับคู่มือบน topbar
===================================================================== */
.topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.brand .logo-badge{
  text-decoration:none;
  color:var(--white);
  transition:transform .15s ease, box-shadow .15s ease;
}
.brand .logo-badge:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
.manual-switcher{
  display:flex;
  align-items:center;
  gap:4px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  padding:3px;
}
.manual-switcher a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 11px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  color:#cddced;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.manual-switcher a:hover{background:rgba(255,255,255,.12);color:var(--white);}
.manual-switcher a.current{background:var(--blue-500);color:var(--white);}
.manual-switcher a.home-link{font-size:15px;padding:6px 9px;}

/* ---------------- หน้าศูนย์คู่มือ (index.html) ---------------- */
.hub-body{background:var(--gray-100);}
.hub-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1100px 460px at 78% 18%, rgba(0,161,228,.34) 0%, rgba(0,161,228,0) 62%),
    linear-gradient(140deg,#141247 0%,var(--brand-indigo) 52%,#124a86 100%);
  color:var(--white);
  padding:52px 28px 76px;
}
.hub-hero-inner{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px;
  align-items:center;
}
.hub-hero-copy{min-width:0;}
.hub-hero .hub-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24);
  padding:6px 15px;border-radius:99px;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;
  margin-bottom:20px;
}
.hub-hero h1{
  margin:0 0 14px;
  font-size:36px;
  line-height:1.28;
  font-weight:800;
  letter-spacing:-.01em;
}
.hub-hero p{
  margin:0;
  max-width:620px;
  font-size:15.5px;
  line-height:1.8;
  color:#d7e6f6;
}
.hub-hero-meta{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:24px;
}
.hub-hero-meta span{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  padding:7px 13px;
  font-size:12.8px;
  font-weight:600;
  color:#e9f4ff;
}
.hub-hero-art{min-width:0;display:flex;justify-content:center;}
.hub-hero-art img{
  width:100%;
  max-width:460px;
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 38px rgba(4,12,40,.34));
}
@media (max-width:900px){
  .hub-hero{padding:40px 22px 64px;}
  .hub-hero-inner{grid-template-columns:1fr;gap:26px;text-align:center;}
  .hub-hero p{margin:0 auto;}
  .hub-hero-meta{justify-content:center;}
  .hub-hero h1{font-size:28px;}
  .hub-hero-art{order:-1;}
  .hub-hero-art img{max-width:330px;}
}
.hub-main{
  max-width:1120px;
  margin:-34px auto 0;
  padding:0 24px 64px;
}
.hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}
.hub-card{
  background:var(--white);
  border:1px solid var(--gray-300);
  border-top:4px solid var(--blue-500);
  border-radius:14px;
  padding:26px 24px 22px;
  box-shadow:0 4px 18px rgba(15,41,66,.09);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hub-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(15,41,66,.16);
  border-color:var(--blue-500);
}
.hub-card .hub-ic{
  width:52px;height:52px;
  border-radius:13px;
  background:var(--blue-100);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  margin-bottom:16px;
}
.hub-card .hub-role{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.09em;
  color:var(--blue-600);
  margin-bottom:7px;
}
.hub-card h2{
  margin:0 0 9px;
  font-size:19.5px;
  font-weight:700;
  color:var(--gray-900);
  line-height:1.35;
}
.hub-card p{
  margin:0 0 18px;
  font-size:13.8px;
  line-height:1.72;
  color:var(--gray-600);
  flex:1;
}
.hub-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.hub-stats span{
  background:var(--blue-50);
  border:1px solid var(--gray-300);
  color:var(--blue-700);
  border-radius:6px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
}
.hub-card .hub-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13.8px;
  font-weight:700;
  color:var(--blue-600);
}
.hub-card:hover .hub-cta{color:var(--blue-700);}

.hub-section-title{
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gray-600);
  margin:44px 0 16px;
}
.hub-quick{
  background:var(--white);
  border:1px solid var(--gray-300);
  border-radius:12px;
  padding:8px;
  box-shadow:var(--shadow);
}
.hub-quick a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:8px;
  text-decoration:none;
  color:var(--gray-900);
  font-size:14px;
  transition:background .14s ease;
}
.hub-quick a:hover{background:var(--blue-50);}
.hub-quick a .q-tag{
  flex-shrink:0;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--white);
  background:var(--blue-600);
  border-radius:5px;
  padding:3px 7px;
}
.hub-quick a .q-arrow{margin-left:auto;color:var(--gray-600);}
.hub-foot{
  text-align:center;
  color:var(--gray-600);
  font-size:12.5px;
  line-height:1.9;
  padding:34px 24px 48px;
  border-top:1px solid var(--gray-300);
  background:var(--white);
}
.hub-foot .foot-logo{
  height:42px;width:auto;
  display:block;margin:0 auto 12px;
}
.hub-foot .foot-org{
  font-size:14px;font-weight:700;
  color:var(--brand-indigo);
  letter-spacing:.01em;
}
.hub-foot .foot-sub{margin-top:2px;}
.hub-foot .foot-line{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--gray-300);
  display:inline-block;
  max-width:640px;
  color:#7b8797;
  font-size:12px;
}
.hub-foot .foot-contact{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
  padding:8px 16px 8px 9px;
  border-radius:99px;
  background:#06c755;              /* LINE brand green */
  border:1px solid #05b34c;
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(6,199,85,.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hub-foot .foot-contact:hover{
  background:#05b34c;
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(6,199,85,.34);
}
.hub-foot .foot-contact-ic{
  background:#fff;
  color:#06c755;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.04em;
  padding:3px 7px;
  border-radius:99px;
  line-height:1;
}

@media (max-width:860px){
  .hub-hero{padding:40px 20px 52px;}
  .hub-hero h1{font-size:25px;}
  .topbar-right{width:100%;}
  .search-box{max-width:100%;width:100%;}
  .manual-switcher{width:100%;justify-content:space-between;}
}

/* =====================================================================
   ปุ่ม / แบนเนอร์ ดาวน์โหลดคู่มือฉบับ PDF
===================================================================== */
.pdf-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 13px;
  border-radius:8px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  color:#e4eefa;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.pdf-btn:hover{background:#c0392b;border-color:#c0392b;color:var(--white);}
.pdf-btn .pdf-ic{font-size:14px;}

.pdf-banner{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--white);
  border:1px solid var(--gray-300);
  border-left:4px solid #c0392b;
  border-radius:10px;
  padding:14px 18px;
  margin:20px 0 4px;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow);
  transition:box-shadow .16s ease, transform .16s ease;
}
.pdf-banner:hover{box-shadow:0 6px 20px rgba(15,41,66,.14);transform:translateY(-1px);}
.pdf-banner-ic{font-size:26px;flex-shrink:0;}
.pdf-banner-txt{display:flex;flex-direction:column;gap:3px;line-height:1.5;}
.pdf-banner-txt strong{font-size:14.5px;color:var(--gray-900);}
.pdf-banner-txt span{font-size:12.8px;color:var(--gray-600);}
.pdf-banner-arrow{
  margin-left:auto;
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--blue-50);
  color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;
}
.pdf-banner:hover .pdf-banner-arrow{background:#c0392b;color:var(--white);}

/* การ์ดบนหน้าเว็บกลาง: ทำให้ทั้งการ์ดกดได้ แต่ลิงก์ PDF ยังกดแยกได้
   (ใช้ stretched-link แทนการครอบทั้งการ์ดด้วย <a> ซึ่งซ้อน <a> ไม่ได้) */
.hub-card{position:relative;}
.hub-card .hub-cta::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
}
.hub-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.hub-pdf{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.8px;
  font-weight:700;
  color:#c0392b;
  text-decoration:none;
  border:1px solid #eccac5;
  background:#fdf3f2;
  border-radius:7px;
  padding:5px 10px;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.hub-pdf:hover{background:#c0392b;border-color:#c0392b;color:var(--white);}