.global-tabs-wrapper { width: 100%; max-width: 1400px; margin: 0 auto; }
.global-search-area { 
  display: flex; 
  justify-content: flex-end; 
  margin-bottom: 20px; 
  padding: 0 15px; 
}

.global-search-box { 
  width: 400px; 
  border-bottom: 2px solid #444 !important; /* เปลี่ยนจากเส้นหนาสีน้ำเงิน เป็นเส้นบางสีเทา */
  transition: border-color 0.3s;
  position: relative;
}

.global-search-box:focus-within {
  border-bottom-color: #0f05cc !important; /* เส้นจะเปลี่ยนเป็นสีน้ำเงินเมื่อคลิกพิมพ์ */
}

.search-input-group { 
  display: flex; 
  align-items: center; 
}

.search-input-group input { 
  width: 100%; 
  border: none !important; 
  padding: 10px 30px 10px 0px !important; /* เผื่อพื้นที่ด้านขวาให้ไอคอน */
  outline: none !important; 
  background: transparent !important; 
  box-shadow: none !important; 
  font-size: 15px !important;
  color: #333 !important;
}

/* ปรับตำแหน่งไอคอนแว่นขยาย */
.search-icon-btn { 
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #999; /* สีเทาอ่อนให้ดูแพง */
  font-size: 16px;
  pointer-events: none; /* ให้คลิกทะลุไปที่ input ได้ */
}

.global-tabs-header { border-bottom: 4px solid #eee !important; margin-bottom: 20px !important; }
.tabs-nav-container { display: flex; gap: 15px; border: none !important; }
.tab-trigger { padding: 15px 30px !important; border: none !important; background: transparent !important; font-weight: 500 !important; cursor: pointer; color: #555; position: relative; font-size: 16px; }
.tab-trigger.active { color: #0f05cc !important; font-weight: 700 !important;}
.tab-trigger.active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background: #0f05cc; z-index: 10; }

.sub-filter-area { padding: 20px 0 30px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sub-filter-area button { background: transparent !important; border: none !important; font-weight: 600 !important; text-transform: uppercase; padding: 8px 15px !important; cursor: pointer; font-size: 13px; color: #333; transition: 0.3s; }
.sub-filter-area button:hover, .sub-filter-area button.active { background: #0f05cc !important; color: #fff !important; border-radius: 30px !important; }
.sub-filter-area button.active, 
.sub-filter-area a.active { 
    background: #0f05cc !important; 
    color: #fff !important; 
    border-radius: 30px !important; 
}

.extension-grid { display: flex !important; flex-wrap: wrap !important; margin: 0 -15px !important; justify-content: flex-start !important; }
.extension-item-card { width: 33.333% !important; padding: 15px !important; box-sizing: border-box !important; display: block; }
.extension-item-card.is-hidden { display: none !important; }

.card-inner-wrap { background: #fff; border: 1px solid #E3E3E8 !important; border-radius: 10px; height: 100%; min-height: 450px; display: flex; flex-direction: column; }
.card-image-box { background: #f6f6f6; padding: 20px 30px 10px; text-align: center; border-radius: 10px 10px 0 0; }
.card-image-box img { height: 200px !important; width: auto !important; object-fit: contain; }
.card-caption { padding: 10px 15px; flex-grow: 1; text-align: left; }
.card-caption h3 { font-size: 20px; margin: 20px 0 10px 0; letter-spacing: -.3px; }
.card-caption p {
  font-size: 16px;
  line-height: 25px;
  margin-bottom: 10px;
}
.tag-group { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #666;
    display: inline-block;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1 !important;
    margin-bottom: 0;
    width: auto;
    padding: 5px;
    text-transform: uppercase;
}
.tag.cate {background: #f4f4f4;}
.tag.type { background-color: #ebf2fa; border-color: #9abde7; }
.btn-link { color: #0f05cc; font-weight: 600; text-decoration: none; font-size: 14px; padding-left:15px;}

/* กำหนดระยะ Offset เดิมที่คุณตั้งไว้ */
.tab-panel {
  scroll-margin-top: 200px;
  
  /* เพิ่มค่าเริ่มต้นสำหรับ Animation */
  opacity: 0; 
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  display: none; /* ซ่อนไว้ก่อน */
}

/* --- Add an effect that triggers only when navigating to this panel via the Main Menu link.--- */
.tab-panel.visible, 
.tab-panel:target {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
}

/* Define the animation details: a gradual fade-in with a slight upward movement. */
.tab-panel.visible .extension-item-card {
  animation: cardFlyIn 0.6s ease forwards;
}

@keyframes cardFlyIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Support for legacy browsers (unchanged). */
@supports not (scroll-margin-top: 200px) {
  .tab-panel::before {
    content: "";
    display: block;
    height: 150px; 
    margin-top: -150px;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 991px) { .extension-item-card { width: 50% !important; } }
@media (max-width: 767px) { 
  .extension-item-card { 
    width: 100% !important; 
  } 
  .tabs-nav-container { 
    gap: 10px; 
  }
  .tab-trigger {
    font-size: 14px;
    padding: 15px !important;
  }
}
@media (max-width: 530px) {
  .global-tabs-header {
    margin-bottom: 10px !important;
  }
  .tab-trigger {
    font-size: 12px !important;
    padding: 15px 2px !important;
  }
  .filter-value button {
    font-size: 12px !important;
    letter-spacing: -.3px;
  }
  .sub-filter-area  {
    text-align: center;
  }
  .sub-filter-area button {
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
  }
}
@media (max-width: 380px) {
  .global-search-box { 
    width: 280px; 
    padding: 0;
  }
}
@media (min-width: 768px) {
  .card-inner-wrap:hover {
    transform: scale(1.04);
    cursor: pointer;
  }
}