#scrollBtn{
position:sticky;
bottom:0;
margin-left:auto;
display:block;

width:40px;
height:40px;

background:#333;
border-radius:40px 40px 0 0;
z-index: 1001;
  
cursor:pointer;
}

#scrollBtn::before{
content:"↓";
position:absolute;
inset:0;

display:flex;
align-items:center;
justify-content:center;

color:#fff;
font-size:22px;

transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}

#scrollBtn.up::before{
transform:rotate(540deg);
}

.navigation {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* เงาด้านบน */
.navigation::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 20px;
    background: url("https://lomkaohospital.com/th/images/shadow.png") no-repeat center;
    background-size: 100% 100%;
}

/* เงาด้านล่าง */
.navigation::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 100%;
    height: 19px;
    background: url("https://lomkaohospital.com/th/images/shadow.png") no-repeat center;
    background-size: 100% 100%;
}

.navigation::before,
.navigation::after {
    pointer-events: none;
}

.nav-bar {
    display: none;
}

@media (max-width: 980px) {

  .nav-bar {
        display: flex;
        height: 44px;
        width: 100%;
        background: rgba(123,206,181,0.25);

        align-items: center;
        justify-content: flex-start;
    }
}

/* ===== Hamburger ===== */
.nav-toggle {
    display: none; /* แสดงเฉพาะ mobile */
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s ease;
}

.nav-toggle span {
    position: absolute;
    left: 50%;
    width: 26px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transform: translateX(-50%);
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        background 0.2s ease;
}

/* ตำแหน่งปกติ */
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 24px; }

/* ===== Hover ===== */
.nav-toggle:hover span {
    background: #000;
}

/* ===== Active State (แปลงเป็น X) ===== */

.nav-toggle.active span:nth-child(1) {
    transform: translateX(-50%) translateY(6px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: translateX(-50%) translateY(-6px) rotate(-45deg);
}

/* หมุนปุ่มเล็กน้อยตอนเปิด */
.nav-toggle.active {
    transform: rotate(90deg);
}

/* ===== Mobile Only ===== */
@media (max-width: 980px) {

    .nav-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
    }

    .nav-menu.active {
        display: block;
    }

    .nav-menu ul,
    .nav-menu li {
        float: none !important;
        display: block;
        width: 100%;
    }

}

/* =========================
หัวข้อและซ่อน template.css accordion.js 2 ชุดสี
========================= */

/* Layout */
.dc-wrapper {
    margin: 20px 0;
    --dc-space-xs: 5px;
    --dc-space-sm: 8px;
    --dc-bullet-offset: 15px;
}

.dc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dc-item {
    margin-bottom: 10px;
}

/* หัวข้อกลุ่ม */
.dc-group-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid;
}

/* หัวข้อหลัก */
.dc-title {
    padding: 10px 10px;
    font-weight: bold;
    border-left: 6px solid;
    cursor: pointer;
    border-radius: 5px;
    line-height: 20px;
}

/* Accordion content */
.dc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* รายการย่อย */
.dc-sub-list {
    list-style: disc;
    margin: var(--dc-space-xs) 0;
    padding-left: var(--dc-bullet-offset);
}

/* ===== Theme Blue ===== */
.dc-theme-blue{
	--dc-primary: #65aac5;
  	--dc-accent: #8ebec9;
  	--dc-soft: #f1faff;
}

.dc-theme-blue .dc-group-title {
    color: var(--dc-primary);
    border-color: var(--dc-accent);
}

.dc-theme-blue .dc-title {
    background: var(--dc-soft);
    border-color: var(--dc-accent);
    color: var(--dc-primary);
}

.dc-theme-blue .dc-sub-list li::marker {
    color: var(--dc-accent);
}

/* ===== Theme Pink ===== */
.dc-theme-pink{
	--dc-primary: #d48db0;
  	--dc-accent: #f0aec8;
  	--dc-soft: #fff1f7;
}

.dc-theme-pink .dc-group-title {
    color: var(--dc-primary);
    border-color: var(--dc-accent);
}

.dc-theme-pink .dc-title {
    background: var(--dc-soft);
    border-color: var(--dc-accent);
    color: var(--dc-primary);
}

.dc-theme-pink .dc-sub-list li::marker {
    color: var(--dc-accent);
}

/* เส้นด้านบน */
.top-line{
  position: relative;
  padding-top: 8px;
  margin-top: 8px;
}

.top-line::before{
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--dc-bullet-offset, 15px));   /* ล้ำตาม bullet */
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--dc-accent),
    transparent
  );
}

.dc-group {
    position: relative;
}

/* ===== Base ===== */
.dc-toggle-all{
    position:absolute;
    top:0;right:0;
    width:40px;height:52px;
    border:0;
    background:none;
    cursor:pointer;
    transition:.2s;
}

/* ===== Pseudo ===== */
.dc-toggle-all::before,
.dc-toggle-all::after{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;
}

.dc-toggle-all.blink::before{
    transform: scaleY(.1);
}
  
/* เปลือกตา */
.dc-toggle-all::before{

    width:22px;
    height:14px;

    border:2px solid currentColor;
    border-radius:50%;

    background:var(--dc-primary);

    /* ลูกตาเคลื่อน + หรี่ */
    transform:
        translate(var(--eye-x,0), var(--eye-y,0))
        scaleY(calc(1 - var(--eye-squint,0) * 0.7));

    transition: transform .15s ease;

}

.dc-toggle-all::after{
    width:8px;
    height:8px;
    background:#fff;
    border-radius:50%;
    transform: translate(var(--eye-x,0), var(--eye-y,0));
    transition: transform .12s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

/* ลูกตากลิ้ง */
@keyframes eye-roll{
    0%,100%{transform:translateX(-5px)}
    50%{transform:translateX(5px)}
}

.dc-toggle-all:not(.active):hover::after{
    animation:eye-roll .6s linear infinite;
}

/* ===== Active = ตาปิด ===== */
.dc-toggle-all.active::after{
    transform:scale(0);
    opacity:0;
}

.dc-toggle-all.active::before{
    height:1px;
    border-width:2px 0 0;
    border-radius:30%;
    background:#666;
}

/* hover scale */
.dc-toggle-all:hover{
    transform:scale(1.08);
}

@keyframes blink{
  0%,96%,100% { height:14px; }
  98% { height:1px; }
}

/* ทำงานเฉพาะตอนเปิดตา */
.dc-toggle-all:not(.active)::before{
  animation: blink 15s infinite;
}
    
/* glow ตอนเปิด */
.dc-toggle-all:not(.active){
    filter:drop-shadow(0 0 4px rgba(0,0,0,.15));
}
    
/* ทำเอฟเฟกต์กับ span เท่านั้น */
.shine{
    background:linear-gradient(
        90deg,
        var(--dc-primary),
        var(--dc-soft),
        var(--dc-accent)
    );
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shine 2.5s linear infinite;
}

@keyframes shine{
    from{ background-position:200% 0; }
    to{ background-position:-200% 0; }
}

.shine1{
    background:linear-gradient(
        90deg,
        var(--dc-primary),
        var(--dc-soft),
        var(--dc-accent)
    );
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shine 10s linear infinite;
}

@keyframes shine1{
    from{ background-position:200% 0; }
    to{ background-position:-200% 0; }
} 
    
.img-shine{
position:relative;
display:inline-block;
overflow:hidden;
bottom: -5px;
}

.img-shine img{
width:100%;
height:auto;
display:block;
}

.img-shine::after{
content:"";
position:absolute;
inset:0;

/* เส้นแสงบาง */
background:linear-gradient(
120deg,
transparent 48%,
rgba(255,255,255,.12) 49%,
rgba(255,255,255,.35) 50%,
rgba(255,255,255,.12) 51%,
transparent 52%
);

background-size:200% 100%;

/* mask อาคาร */
-webkit-mask-image:var(--shine-mask);
mask-image:var(--shine-mask);

-webkit-mask-mode:luminance;
mask-mode:luminance;

-webkit-mask-size:100% 100%;
mask-size:100% 100%;

-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;

/* แสงนุ่มขึ้น */
filter:blur(.6px);

/* วิ่งเร็ว แต่พักนาน */
animation:shineSweep 20s linear infinite;
}

@keyframes shineSweep{

0%{
background-position:200% 0;
}

50%{
background-position:-200% 0;
}

100%{
background-position:-200% 0;
}

}
    
/* ใช้งาน: <div class="rowxp" style="--cols:3;"> */
.rowxp {
  --cols: 5;
  --gap: 10px;

  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}

.rowxp a {
  display: block;
}

.rowxp img {
  width: 100%;
  height: auto;        /* ปล่อยให้สูงตามสัดส่วนจริง */
  display: block;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.rowxp img:hover {
  transform: scale(1.03);
}
        
/* ตัวอย่าง responsive โดยไม่ทำลาย --cols บน desktop */
@media (max-width: 768px) {
  .rowxp {
    --cols: 2;
  }
}
    
.radius1 {
    background-color: #FFF;
    border-radius: 10px;
    padding: 5px 10px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    max-width: 100px;
}

/* img ภายใต้ noo slider image */
.noo-slider-image img {
  border-radius: 8px;
}

/* เพิ่มมุมมนภาพสไลด์ ck */
.camera_target {
  border-radius: 8px;
}

/* zoom */
.zoom-container{
  width:100%;
  overflow:hidden;
  display:inline-block;
}

.zoom-container img{
  width:100%;
  transition: transform var(--zoom-speed, .2s) ease,
              transform-origin var(--zoom-speed, .2s) ease;
}