@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400&display=swap');

    .t-bottom {
        color: white;
        font-size: 15px;
    }

    .t-bottom:hover {
        color: yellow;
        font-size: 16px;
        text-decoration: none;
    }


    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(128, 128, 128, 0.7);
        /* เทาโปร่ง 70% */
        z-index: 9999;
        /* อยู่บนสุด */
    }
         .hero-section {
    width: 100%;
    min-height: 739px; /* ความสูงขั้นต่ำ */
    background: url("../images/index_01.png") no-repeat center center;
    background-size: cover; /* ✅ ขยายเต็มหน้าจอ */
    display: flex;
    justify-content: center; /* กึ่งกลางแนวนอน */
    align-items: center;     /* กึ่งกลางแนวตั้ง */
  }


.hero-2 {
  min-height: 100px;
  background: url("./images/line_logo.png") no-repeat center center;
  background-size: cover;
  position: absolute ;
  transform: translateY(-80px); /* ✅ เลื่อนลง 50px */
}
    /* ===== Wrapper ===== */
.nav8-wrap {
  width:250px;
  position:relative;
  z-index:100;
  font-family:Tahoma,Arial,sans-serif;
}
    /* Root = Vertical, Secondary = Vertical */
    ul#navmenu,
    ul#navmenu li,
    ul#navmenu ul {
      margin: 0;
      border: 0 none;
      padding: 0;
      width: 250px;
      /*For KHTML*/
      list-style: none;
    }

    ul#navmenu:after

    /*From IE 7 lack of compliance*/
      {
      clear: both;
      display: block;
      font: 1px/0px serif;
      content: ".";
      height: 0;
      visibility: hidden;
    }

    ul#navmenu li {
      float: left;
      /*For IE 7 lack of compliance*/
      display: block !important;
      /*For GOOD browsers*/
      display: inline;
      /*For IE*/
      position: relative;
    }

    /* Root Menu */
    ul#navmenu a {
      border: 1px solid #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #c46a03;
      padding: 0 6px;
      display: block;
      background: #FFFFFF;
      color: #c46a03;
      font-size: 1rem;
      /* ? ให้ขยายตาม html */
      padding: 5px;
      box-sizing: border-box;
      font-family: 'Sarabun', sans-serif;
      text-decoration: none;
      height: auto !important;
      height: 1%;
      /*For IE*/
    }

    /* Root Menu Hover Persistence */
    ul#navmenu a:hover,
    ul#navmenu li:hover a,
    ul#navmenu li.iehover a {
      background: #f1ba54;
      color: #000000;
    }

    /* 2nd Menu */
    ul#navmenu li:hover li a,
    ul#navmenu li.iehover li a {
      background: #ffe4b1;
      color: #000000;
    }

    /* 2nd Menu Hover Persistence */
    ul#navmenu li:hover li a:hover,
    ul#navmenu li:hover li:hover a,
    ul#navmenu li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover a {
      background: #c48932;
      color: #FFF;
    }

    /* 3rd Menu */
    ul#navmenu li:hover li:hover li a,
    ul#navmenu li.iehover li.iehover li a {
     background: #c28d2b;
      color: #000000;
    }

    /* 3rd Menu Hover Persistence */
    ul#navmenu li:hover li:hover li a:hover,
    ul#navmenu li:hover li:hover li:hover a,
    ul#navmenu li.iehover li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover li.iehover a {
      background: #2ab1e3;
      color: #FFF;
    }

    /* 4th Menu */
    ul#navmenu li:hover li:hover li:hover li a,
    ul#navmenu li.iehover li.iehover li.iehover li a {
      background: #EEE;
      color: #666;
    }

    /* 4th Menu Hover */
    ul#navmenu li:hover li:hover li:hover li a:hover,
    ul#navmenu li.iehover li.iehover li.iehover li a:hover {
      background: #CCC;
      color: #FFF;
    }

    ul#navmenu ul,
    ul#navmenu ul ul,
    ul#navmenu ul ul ul {
      display: none;
      position: absolute;
      top: 0;
      left: 250px;
    }

    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu li:hover ul ul,
    ul#navmenu li:hover ul ul ul,
    ul#navmenu li.iehover ul ul,
    ul#navmenu li.iehover ul ul ul {
      display: none;
    }

    ul#navmenu li:hover ul,
    ul#navmenu ul li:hover ul,
    ul#navmenu ul ul li:hover ul,
    ul#navmenu li.iehover ul,
    ul#navmenu ul li.iehover ul,
    ul#navmenu ul ul li.iehover ul {
      display: block;
    }


    /* ?? เมนูหลัก */
    #navmenu {
      width: 15.625rem;
      font-family: "TH Sarabun New", Tahoma, sans-serif;
      font-size: 1rem;
      /* ? เดิม 18px ? ใช้ 1rem ให้ขยายตาม html */
      font-weight: 500;
      text-align: left;
    }

    /* ?? เมนูย่อย */
    #navmenu ul {
      font-size: 0.9rem;
      /* ? ย่อเล็กกว่านิดหน่อย */
      font-weight: 500;
      line-height: 1.6;
    }

    #navmenu,
    #navmenu ul,
    #navmenu li,
    #navmenu a {
      transition: font-size 0.2s ease, line-height 0.2s ease;
    }

    #navmenu>li>a {
      display: block;
      width: 100%;
      padding: 6px 8px;
      color: #1d1d1d;
      text-decoration: none;
      transition: all 0.25s ease;
      box-sizing: border-box;
      position: relative;
      background-color: rgba(255, 255, 255, 0.9);
    }

    /* ? เส้นล่างจางหรู */
    #navmenu>li>a::after {

      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.08));
    }


    /* ?? เมนูย่อย */
    #navmenu ul {
      font-size: 0.9rem;
      /* เดิม 16px ? 0.9rem */
      font-weight: 500;
      line-height: 1.6;
    }

    /* ?? Hover สีสวย */
    #navmenu li:hover>a {
      color: #ffeb3b;
      background-color: rgba(255, 255, 255, 0.1);
    }

    /* ?? Responsive (มือถือ / จอเล็ก) */
    @media (max-width: 900px) {
      #navmenu {
        font-size: 16px;
        /* ลดขนาดเมื่อจอแคบ */
      }

      #navmenu ul {
        font-size: 14px;
      }
    }

/* ?? กล่องด้านซ้ายให้ลอยและเลื่อนตามจอ */
     #side-tools {
       position: fixed !important;
       left: 12px;
       top: 50%;
       transform: translateY(-50%);
       z-index: 999999 !important;
       background: linear-gradient(160deg, #0b3c91, #1565c0);
       padding: 16px 10px 18px;
       border-radius: 18px;
       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
       text-align: center;
       font-family: "Segoe UI", Tahoma, sans-serif;
       color: #fff;
       width: 85px;
       transition: all 0.3s ease;
       backdrop-filter: blur(2px);
       border: 1px solid rgba(255, 255, 255, 0.15);
       will-change: transform;
       isolation: isolate;
       /* กันไม่ให้ filter ด้านหลังรบกวน */
     }

     #side-tools:hover {
       transform: translateY(-50%) scale(1.05);
       box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
     }

     /* ?? กล่องปุ่มแปลภาษา */
     #translate-box {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       z-index: 1000000;
     }

     /* ปุ่ม Google Translate */
     #googleTranslateButton {
       background: rgba(255, 255, 255, 0.15);
       border: 1px solid rgba(255, 255, 255, 0.25);
       border-radius: 50%;
       width: 42px;
       height: 42px;
       cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
       transition: all 0.3s ease;
       position: relative;
       z-index: 1000001;
     }

     #googleTranslateButton:hover {
       background: rgba(255, 255, 255, 0.35);
       transform: scale(1.05);
     }

     #googleTranslateButton img {
       width: 26px;
       height: 26px;
     }

     /* ?? กล่องเลือกภาษา */
     #google_translate_element {
       display: none;
       position: absolute;
       left: 50%;
       transform: translateX(10%);
       background: #fff;
       border-radius: 10px;
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
       padding: 6px 8px;
       min-width: 140px;
       z-index: 1000002;
     }

     #translate-box.active #google_translate_element {
       display: block !important;
     }

     /* ?? dropdown ภายใน */
     .goog-te-combo {
       width: 100%;
       padding: 6px;
       border-radius: 6px;
       border: 1px solid #ccc;
       background: #fff;
       color: #000;
       font-size: 13px;
       outline: none;
       cursor: pointer;
     }

     .goog-te-combo:hover {
       background: #f0f0f0;
     }

     /* ?? ปุ่มปรับขนาดฟอนต์ */
     .font-size-control {
       margin-top: 6px;
     }

     .font-size-control button {
       display: block;
       width: 50px;
       height: 38px;
       margin: 7px auto;
       background: #1976d2;
       color: #fff;
       border: 2px solid rgba(255, 255, 255, 0.3);
       border-radius: 12px;
       cursor: pointer;
       font-weight: 600;
       font-size: 15px;
       letter-spacing: 0.5px;
       transition: all 0.25s ease;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
     }

     .font-size-control button:hover {
       background: #42a5f5;
       border-color: rgba(255, 255, 255, 0.8);
       transform: translateY(-2px);
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     }

     .font-size-control button:active {
       transform: scale(0.95);
     }

     /* ?? Responsive */
     @media (max-width: 768px) {
       #side-tools {
         left: 6px;
         width: 75px;
         padding: 12px 6px;
       }

       .font-size-control button {
         width: 45px;
         height: 34px;
         font-size: 13px;
       }

       .goog-te-combo {
         font-size: 11px;
         padding: 3px;
       }
     }
     body {
  filter: none;
}
    /* ITA button */
    /* ? ซ่อนจุดหน้าเมนูหลักทั้งหมด */
.ita-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ? ปุ่ม accordion */
.ita-accordion {
  width: 100%;
  background: linear-gradient(160deg, #1565c0, #0b3c91);
  color: #fff;
  font-family: 'Sarabun', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  position: relative;
}

/* ? เครื่องหมาย + */
.ita-accordion::after {
  content: "+";
  position: absolute;
  right: 10px;    /* ?? เพิ่มค่ามากขึ้น = เลื่อนขวา, ลดลง = เข้าใกล้ข้อความ */
  top: 50%;       /* ?? วางตรงกึ่งกลางแนวตั้ง */
  transform: translateY(-60%); /* ?? เลื่อนขึ้นเล็กน้อย (ค่ามากขึ้นจะขึ้นสูงกว่าเดิม) */
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

/* ? เมื่อเปิดเปลี่ยนเป็น ? */
.ita-accordion.active::after {
  content: "-";
  transform: translateY(-60%) rotate(180deg);
}




    .ita-panel {
      background: rgba(255, 255, 255, 0.96);
      border-radius: 10px;
      margin-top: 6px;
      overflow: hidden;
      height: 0;
      opacity: 0;
      transition: height 0.4s ease, opacity 0.3s ease;
    }

    .ita-panel.open {
      opacity: 1;
      height: auto;
    }

    .ita-panel ul {
      list-style: none;
      margin: 0;
      padding: 8px 14px;
    }

    .ita-panel ul li a {
      display: block;
      padding: 8px 12px;
      color: #0b3c91;
      text-decoration: none;
    }

    .ita-panel ul li a:hover {
      background: #1565c0;
      color: #fff;
    }
  
                  /* ? ตำแหน่งริบบิ้นไว้อาลัย */
        .mourning-ribbon {
          position: fixed;
          top: 0px;
          left: 0px;
          width: 150px;
          z-index: 999999;
          pointer-events: none;
          opacity: 0.9;
        }
    

/* โหมดไว้อาลัย */
body.mourning #toTopBtn {
  background-color: rgba(255,255,255,0.25);
  color: #f5f5f5;
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
}
body.mourning #toTopBtn:hover {
  background-color: rgba(255,255,255,0.45);
  color: #000;
}

/* เมื่อเลื่อนลง -> แสดงปุ่ม */
#toTopBtn.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

/* มือถือ */
@media (max-width: 600px) {
  #toTopBtn {
    bottom: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
  #toTopBtn small {
    font-size: 10px;
  }
}
   
                  /* ? ตำแหน่งริบบิ้นไว้อาลัย */
        .mourning-ribbon {
          position: fixed;
          top: 0px;
          left: 0px;
          width: 150px;
          z-index: 999999;
          pointer-events: none;
          opacity: 0.9;
        }