/* =====================================================
   Thai Inter Metalsheet — style.css (Refactor v2.1, syntax-fix)
   NOTE: All colors, font-sizes, margins/paddings are kept EXACTLY as original.
   Only syntax fixes, ordering guards, and minimal robustness tweaks.
   ===================================================== */

/* ------------------------------
   Base / Global
------------------------------ */
body {
  font-family: 'Kanit';
  margin: 0;
  padding: 0;
  color: #ffffff;
  background: linear-gradient(180deg, #1A2E3D 0%, #25465C 100%);
}


/* Headings: keep original sizes */
h1, h2, h3, h4, h5, h6 { font-family: 'Kanit'; }

h1 { font-size: 1.6em; }
h2 { font-size: 1.45em; } /* (kept) */
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }

/* ------------------------------
   Header / Topbar
------------------------------ */
header {
  background-color: #F0F0F0;
  color: rgb(0, 0, 0);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  height: 80px;
  z-index: 1000;
}

.logo-container { height: 90%; display: flex; align-items: center; }
.logo-container img { height: 100%; margin-right: 20px; }

.company-names { flex-grow: 1; text-align: left; margin-left: 30px; }
.company-names h1 { margin: 0; font-size: 1.5em; color: #333; }

/* Company section background (unchanged) */
#company { background-color: #15212F; padding-top: 50px; padding-bottom: 50px; width: 100%; }

/* ------------------------------
   Navigation (scaled & tidy)
------------------------------ */
nav { position: relative; margin-left: auto; }

/* ปุ่ม Toggle (โชว์ใน ≤1200px) */
.menu-toggle {
  display: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 1.35rem;
  line-height: 1;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

/* แถบเมนูแนวนอน (เดสก์ท็อป) */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

/* ระยะห่างระหว่างเมนู: ย่อ/ขยายตามจอ
   (สูงสุด 30px ตามของเดิม) */
nav ul li {
  margin-right: clamp(10px, 2vw, 30px);
}

/* ลิงก์เมนู: ฟอนต์เดิม 1.2em แต่สเกลลดลงเมื่อจอแคบ
   (สูงสุดคง 1.2em เท่าเดิม) */
nav ul li a {
  font-family: 'Kanit';
  font-weight: 500;
  font-size: clamp(0.8rem, 1vw + 0.3rem, 1.2em);
  color: #333;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;    /* กันตัดคำกลางเมนู */
}
nav ul li a:hover { text-decoration: underline; color: #e60000; }

/* ===== Mobile nav dropdown: readable links & full-width panel ===== */
@media (max-width: 768px) {
  /* แผงเมนู: ให้กว้างเท่าจอ (เผื่อซ้าย/ขวา 8px) */
  header nav ul {
    left: -80px !important;
    right: 0px !important;
    width: auto !important;
    max-width: none !important;
    min-width: calc(100vw - 16px) !important;
  }

  /* ลิงก์เมนู: ตัวใหญ่ขึ้น อ่านชัด กดง่าย */
  header nav ul li a {
    font-size: 1rem !important;     /* เดิม 0.7em → เล็กไป */
    line-height: 1.35 !important;
    padding: 14px 18px !important;  /* พื้นที่กด */
    white-space: normal !important;  /* อนุญาตตัดบรรทัดเมื่อชื่อยาว */
    word-break: break-word;          /* กันล้น */
  }
}

/* จอเล็กมาก: เพิ่มอีกนิดให้ชัด */
@media (max-width: 480px) {
  header nav ul li a {
    font-size: 1.05rem !important;
  }
}


/* === Mobile header: shrink logo & align left === */
/* ------------------------------
   Header responsive (improve)
   - Bigger toggle panel ≤1200px
   - Smoother scaling for company names
------------------------------ */

/* ชื่อบริษัท: scale นุ่ม + กันตัดบรรทัด */
.company-names { flex: 1 1 auto; min-width: 0; }
.company-names h1{
  font-size: clamp(0.9rem, 1.35vw + 0.2rem, 1.5em);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ย่อโลโก้ลงเล็กน้อยปล่อยพื้นที่ให้ชื่อ */
header .logo-container img { max-height: 64px; }
@media (min-width: 1400px){
  header .logo-container img { max-height: 72px; }
}

/* ===== Toggle menu panel (≤1200px) ===== */
@media (max-width: 1200px){
  header { height: auto; }
  .menu-toggle { display: block; }
  nav { position: relative; }

  /* ซ่อนเมนูแนวนอน แล้วเปิดเป็นแผงแบบดรอปดาวน์ */
  nav ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 8px;
    left: auto;
    width: min(92vw, 460px);     /* กว้างขึ้น อ่านง่าย */
    max-height: calc(100vh - 100px);
    overflow: auto;
    background: #fff;
    padding: 8px 0;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    z-index: 1001;
  }
  nav ul.show {
    display: flex;
    flex-direction: column;
  }
  nav ul li { margin: 0; }
  nav ul li a {
    display: block;
    padding: 14px 18px;                        /* พื้นที่กดใหญ่ขึ้น */
    font-size: clamp(0.95rem, 1vw + 0.35rem, 1.1rem);
    color: #333;
  }
  nav ul li a:hover {
    background: #f5f5f5;
    text-decoration: none;
  }

  /* ชื่อบริษัทย่ออีกนิดช่วงนี้เพื่อลดโอกาสขึ้นบรรทัดใหม่ */
  .company-names h1 {
    font-size: clamp(0.85rem, 1.15vw + 0.2rem, 1.3em);
    letter-spacing: 0.1px;
  }

  /* โลโก้ย่ออีกเล็กน้อย เพื่อคืนพื้นที่ให้ชื่อ */
  header .logo-container img { max-height: 58px; }

  /* จำกัดความกว้างบล็อกชื่อ เพื่อให้เมนู/โลโก้มีพื้นที่คงที่ */
  .company-names { max-width: 58vw; }  /* ปรับ 55–65vw ตามจริงได้ */
}

/* ===== ช่วงอ่อนไหว ~1100–1000px: กัน wrap เพิ่มเติม ===== */
@media (max-width: 1100px){
  .company-names h1 { font-size: clamp(0.82rem, 1.05vw + 0.18rem, 1.18em); }
  header .logo-container img { max-height: 54px; }
}
@media (max-width: 1000px){
  .company-names h1 { font-size: clamp(0.8rem, 1vw + 0.16rem, 1.1em); }
  header .logo-container img { max-height: 50px; }
}
@media (max-width: 768px) {
  header {
    padding: 6px 12px;   /* ลด padding รวม */
  }

  .logo-container {
    height: 38px !important;        /* ลดสูงสุดโลโก้ลง */
    margin-right: 0px;   /* ชิดชื่อบริษัท */
  }

  .logo-container img {
    max-height: 32px !important;    /* ปรับความสูงโลโก้ลง */
    margin-right: 2px !important; /* ระยะห่างโลโก้ → ตัวหนังสือ เหลือเล็กน้อย */
  }

  .company-names {
    margin-left: 2px !important;    /* ขยับชื่อบริษัทเข้ามาใกล้โลโก้ */
    max-width: 70vw;     /* กันชื่อยาวดันเกิน */
  }

  .company-names h1 {
    font-size: 0.7rem;   /* ย่อ font size เพิ่มเติม */
    line-height: 1.2;
  }
}

/* ------------------------------
   Hero / Slider
------------------------------ */
.hero {
  background-color: #b8c6d0;
  color: white;
  padding: 50px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding-top: 15px;
  z-index: 0; /* ทำให้ลูกมี layer ซ้อน */
}

/* overlay อยู่เหนือ bg แต่ใต้ .slide / .hero-text */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/hero-bg-0.webp") center/cover no-repeat;
  opacity: 0.1;            /* ความจาง */
  z-index: 1;              /* อยู่บนพื้นหลัง */
  pointer-events: none;
}

/* บังคับให้ slide และ hero-text อยู่เหนือ overlay */
.hero .slide,
.hero .hero-text {
  position: relative;
  z-index: 2;
}



.slider { position: relative; width: 60%; margin: 0 auto; overflow: hidden; }
.slide { width: 100%; height: auto; display: none; }
.slide.active { display: block; }

.hero-text {
  position: relative;
  background-color: #700000; 
  padding: 15px 10px 5px;
  border-radius: 8px;
  color: white;
  text-align: center;
  width: 100%;
  max-width: 1680px;
  margin: 10px auto;
  overflow: hidden;
}

/* รูปจางๆ อยู่บนพื้นหลัง + เหนือข้อความ */
.hero-text::after {
  content: "";
  position: absolute;
  inset: 0; /* เต็มกล่อง */
  background: url("img/hero-bg.webp") center/cover no-repeat;
  opacity: 0.15;                 /* ปรับความจาง */
  mix-blend-mode: lighten;      /* ทำให้ภาพไม่บดบังข้อความ */
  pointer-events: none;         /* ไม่ให้บังการคลิก */
}


.hero h1 { font-size: 2.5em; }
.hero p { font-size: 1.2em; }

/* ------------------------------
   Products
------------------------------ */
.products { padding: 20px; }

.product-item {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  transition: background-color 0.3s, color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
.product-item.active { background-color: #F9DC9D; color: #020202; }

.product-details {
  margin-top: 20px;
  background-color: rgba(35, 35, 35, 0.95);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.list-group-item { cursor: pointer; }

.detail-images { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.detail-image { width: 300px; }

/* ------------------------------
   Contact / Forms
------------------------------ */
form { display: flex; flex-direction: column; max-width: 400px; margin: 0 auto; }
form input, form textarea { margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
form button { background-color: #820000; color: white; border: none; padding: 10px; cursor: pointer; }
form button:hover { background-color: #e60000; }

#contact { padding: 50px 0; text-align: center; background-color: #313131; }
.contact-info { margin-top: 20px; font-size: 18px; line-height: 1.8; }
.contact-info p { margin: 10px 0; }

/* Special h2 override from original (kept ORDER & values) */
h2 { font-size: 36px; margin-bottom: 20px; }

/* ------------------------------
   Factory / Map / Active state
------------------------------ */
.active-factory { background-color: #537A80 !important; color: #ffffff !important; }
.contact-link { color: white; text-decoration: none; }
.factory-map iframe { width: 100%; height: 400px; }

/* ===== Factory Info Card (ปรับตามธีม + layout) ===== */
#factory-info {
  background: #537A80;
  color: #ffffff;
  border: 1px solid #25465C;
  border-radius: 12px;
  padding: 25px 40px;
  margin: -5px auto 15px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  max-width: 1000px;
  text-align: left;
  letter-spacing: 0.35px;
  line-height: 1.65;
}

#factory-info h4#factory-name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 14px;
  color: #F5967A;
  border-bottom: 2px solid #25465C;
  padding-bottom: 6px;
  letter-spacing: 0.6px;
}

#factory-info p {
  margin: 10px 0;
  font-size: 1.05rem;
  line-height: 1.65;
  letter-spacing: 0.4px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#factory-info strong { flex: 0 0 120px; color: #fcf2df; font-weight: 500; }
#factory-info span, #factory-info a {
  flex: 1;
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.3px;
  word-break: break-word;
}
#factory-info a:hover { text-decoration: underline; color: #ff6666; }

/* ------------------------------
   Modal (Image Preview)
------------------------------ */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}
.modal.open { display: flex; }
.modal-dialog { max-width: 800px; }
.modal-content { background-color: #fff; padding: 20px; }
.modal-header { display: flex; justify-content: space-between; }
.modal img { max-width: 100%; height: auto; }

/* Limit image height inside modal */
#imageModalImg { max-width: 100%; height: auto; max-height: 90vh; }

/* --- Extra images under main spec image --- */
.spec-extra-images {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.spec-thumb {
  width: 120px;
  height: auto;
  cursor: zoom-in;
  border-radius: 6px;
}
@media (max-width: 480px) { .spec-thumb { width: 95px; } }

/* ------------------------------
   Buttons
------------------------------ */
.custom-btn { margin: 5px; background-color: #537A80; color: white; padding: 10px 20px; border: none; cursor: pointer; }
.custom-btn:hover { background-color: #AFBB91; }

/* ------------------------------
   Spec Layout
------------------------------ */
.spec-container { display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; padding: 20px; border-radius: 8px; }
.spec-left { flex: 1; text-align: center; }
.spec-left img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #ccc; }
.spec-right { flex: 1; padding-left: 20px; }
.spec-right h3 { font-size: 24px; margin-bottom: 15px; }
.spec-right p { font-size: 16px; line-height: 1.6; }
/* ==== SPEC on mobile: main image large, others small & scrollable ==== */

/* เดสก์ท็อป/แท็บเล็ต: เผื่อมีสไตล์ที่ไปขยาย thumb */
#spec-details .spec-extra-images .spec-thumb{
  width:120px !important;
  height:auto !important;
  flex:0 0 auto;
}

@media (max-width: 768px){
  /* เปลี่ยนคอนเทนเนอร์เป็น Grid 2 คอลัมน์ */
  #spec-details.spec-container{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 10px;
    align-items: start;
  }

  /* ทำให้ลูกของ .spec-left “ย้ายขึ้นมา” อยู่ระดับเดียวกับ .spec-right */
  #spec-details .spec-left{
    display: contents; /* แสดงลูก (#spec-image, .spec-extra-images) เป็นสมาชิกของ grid พ่อ */
  }

  /* รูปหลัก: กินเต็มกว้าง (สองคอลัมน์) เป็นแถวแรก */
  #spec-details #spec-image{
    grid-column: 1 / -1;
    width: 100% !important;
    height: auto !important;
    border: 1px solid #ccc;   /* คงสไตล์เดิม */
    border-radius: 8px;
  }

  /* แถบรูปย่อ: คอลัมน์ซ้าย แถวถัดไป */
  #spec-details .spec-extra-images{
    grid-column: 1;
    display: flex !important;
    flex-direction: column;     /* เรียงลงล่างให้กดง่าย */
    gap: 8px;
    max-height: 60vh;           /* กันยาวเกินจอ */
    overflow: auto;
    padding-right: 4px;         /* เผื่อสกรอลบาร์ */
    -webkit-overflow-scrolling: touch;
  }

  /* ขนาดรูปย่อให้เล็กคงที่ ไม่ยืดเต็มคอลัมน์ */
  #spec-details .spec-extra-images .spec-thumb{
    width: 110px !important;
    height: auto !important;
    flex: 0 0 auto;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  /* ข้อความสเปค: คอลัมน์ขวา แถวถัดไป */
  #spec-details .spec-right{
    grid-column: 2;
    padding-left: 10px; /* ระยะห่างเล็กน้อยจากรูปย่อ */
  }
}
/* ==== SPEC (mobile): main image full-width; below split thumbs | text ==== */
@media (max-width: 768px){
  #spec-details.single-image {
    display: block !important;
  }
  #spec-details.single-image .spec-left,
  #spec-details.single-image .spec-right{
    width:100% !important;
    display:block;
    padding:0;
  }
  #spec-details.single-image #spec-image{
    width:100% !important;
    height:auto !important;
    margin-bottom:12px;
  }
  #spec-details .show-more-wrap{
    grid-column: 1;        /* เผื่อกรณีถูกยกขึ้นเป็น grid item */
    align-self: start;
    margin-top: 6px;
  }

  /* ถ้าอยู่ภายใน .spec-extra-images (ตามที่เราแก้ JS) ก็จะเป็นแค่บล็อกปิดท้ายคอลัมน์ซ้าย */
  #spec-details .spec-extra-images .show-more-wrap{
    padding-top: 4px;
  }
}


/* ----- Brands & Galleries (new sections) ----- */
.brand-grid { row-gap: 20px; }
.brand-card {
  background: rgba(35,35,35,0.95);
  border: 1px solid #444;
  border-radius: 10px;
  padding: 20px;
  height: 100%;
}
/* base logo */
.brand-logo {
  max-height: 80px; 
  width: auto;
  margin-top: -18px;
  margin-bottom: -13px;
}
/* ขยายขึ้นเมื่อจอใหญ่ */
@media (min-width: 992px) {
  .brand-logo {
    max-height: 160px;
    margin-top: -35px;
    margin-bottom: -30px;
  }
}
/* เฉพาะโลโก้จิงโจ้ */
.brand-kangaroo { margin-left: -40px; }
@media (min-width: 992px) {
  .brand-kangaroo { margin-top: -30px; margin-left: -70px; }
}

/* ===== PU Foam underside color gallery ===== */
.pufoam-gallery {
  margin-top: 30px;
  padding: 15px;
  background: rgba(20,20,20,0.85);
  border-radius: 10px;
  border: 1px solid #333;
}
.pufoam-gallery h3 { font-size: 1.2rem; margin-bottom: 15px; color: #fff; }
.pufoam-photos {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
.pufoam-card {
  flex: 0 1 240px;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pufoam-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.pufoam-thumb { display: block; width: 100%; height: auto; object-fit: cover; cursor: zoom-in; }

/* ---- Make buttons equal width/height within each download-row ---- */
.download-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
.download-row .btn {
  flex: 1 1 0;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  white-space: nowrap;
}
.download-row .btn:only-child { flex: 0 0 auto; min-width: auto; }
@media (max-width: 480px) { .download-row .btn { min-width: 100%; } }

/* ยืดการ์ดเท่ากัน */
.brand-grid { align-items: stretch; }
.brand-grid > [class^="col-"] { display: flex; }
.brand-card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.brand-card .brand-logo { flex: 0 0 auto; width: auto; height: auto; max-width: 100%; }
.download-row { margin-top: auto; align-self: stretch; }

/* Color gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  justify-content: center;
}
.gallery-item { width: 100%; height: auto; cursor: zoom-in; }
@media (max-width: 1199.98px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ===== Reference Works ===== */
.refs-gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
}
@media (min-width: 1200px) { .refs-gallery { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }
@media (max-width: 480px) { .refs-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.ref-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ref-thumb {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.001);
  will-change: transform;
  cursor: zoom-in;
}
.ref-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.14);
}
.ref-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
/* ==== References: 2 columns (no single column) ==== */
/* มือถือเล็กยังเป็น 2 คอลัมน์ตามเดิมอยู่แล้ว */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .refs-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;   /* อย่าให้กริดยืดการ์ด */
  }
}
@media (min-width: 1400px) {
  .refs-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ==== รูปไม่ครอป ไม่มีแถบดำ ==== */
.ref-card {
  margin: 0 !important;             /* ตัด margin เริ่มต้นของ figure */
  background: transparent !important;/* ไม่ให้พื้นหลังสีดำโผล่ด้านข้าง */
  border-radius: 14px;
  overflow: hidden;                  /* มุมโค้งสวย */
  aspect-ratio: auto !important;     /* ยกเลิกอัตราส่วนตายตัวใด ๆ ของการ์ด */
}
.ref-card::before { content: none !important; } /* เผื่อเคยใส่ padding-top hack */

.ref-card .ref-thumb {
  position: static !important;       /* ไม่ใช้ absolute */
  display: block !important;
  width: 100% !important;            /* กินเต็มความกว้างคอลัมน์ */
  height: auto !important;           /* สูงตามสัดส่วนรูปจริง */
  object-fit: contain !important;    /* ไม่ครอปภาพ */
  aspect-ratio: auto !important;     /* ล้าง 4:3 ที่ img ถ้ามี */
}

/* ------------------------------
   Videos Grid
------------------------------ */
.video-row { display: flex; flex-wrap: wrap; gap: 10px; }
.video-col { margin-bottom: 20px; }
.video-wrapper {
  position: relative; width: 100%;
  padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: 10px; background:#000;
}
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Progressive reveal */
#videos .video-col.is-hidden { display: none !important; }

/* ใช้ Bootstrap gutter แทน gap เดิม เพื่อไม่ไปดัน layout เหลือ 2 คอลัมน์บนเดสก์ท็อป */
.video-row { display: flex; flex-wrap: wrap; }
/* (fix) removed stray '*/
/* ==== VIDEO LAYOUT OVERRIDES: Desktop = 3, Mobile = 2 ==== */
#videos .video-row{
  display:flex;            /* คง wrap ด้วย flex ไม่รบกวน Bootstrap */
  flex-wrap:wrap;
  gap:0 !important;        /* ใช้ g-classes ของ Bootstrap แทน gap เอง */
}

/* padding ซ้าย/ขวาให้คอลัมน์ (เหมือน gutter) */
#videos .video-col{
  padding-left:.5rem;
  padding-right:.5rem;
}

/* มือถือ ≤ 767.98px : 2 คอลัมน์เสมอ */
@media (max-width: 767.98px){
  #videos .video-col{
    flex:0 0 50% !important;
    max-width:50% !important;
  }
}

/* ตั้งแต่ 768px ขึ้นไป : 3 คอลัมน์เสมอ */
@media (min-width: 768px){
  #videos .video-col{
    flex:0 0 33.3333% !important;
    max-width:33.3333% !important;
  }
}
/* ------------------------------
   Image cursor & overlay (unchanged visuals)
------------------------------ */
.detail-image { cursor: zoom-in; position: relative; display: inline-block; }
.detail-image {
  cursor: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">\
    <circle cx="10" cy="10" r="7" stroke="%23ffffff" stroke-width="2" fill="none"/>\
    <line x1="15" y1="15" x2="22" y2="22" stroke="%23ffffff" stroke-width="2"/>\
    <line x1="10" y1="7" x2="10" y2="13" stroke="%23ffffff" stroke-width="2"/>\
    <line x1="7" y1="10" x2="13" y2="10" stroke="%23ffffff" stroke-width="2"/>\
  </svg>') 12 12, pointer;
}
.detail-images { gap: 10px; }
.detail-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(transparent 60%, rgba(0,0,0,0.35));
  opacity: 0;
  transition: opacity .2s ease;
  border-radius: 6px;
}
.detail-image::before {
  content: '';
  position: absolute;
  width: 28px; height: 28px; right: 8px; bottom: 8px;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <circle cx='10' cy='10' r='7' stroke='white' stroke-width='2' fill='none'/>\
    <line x1='15' y1='15' x2='22' y2='22' stroke='white' stroke-width='2'/>\
    <line x1='10' y1='7' x2='10' y2='13' stroke='white' stroke-width='2'/>\
    <line x1='7' y1='10' x2='13' y2='10' stroke='white' stroke-width='2'/>\
  </svg>");
  background-size: contain; background-repeat: no-repeat;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  transform: translateY(4px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.detail-image:hover::after, .detail-image:hover::before { opacity: 1; transform: translateY(0); }

/* =====================================================
   Responsive (order preserved)
   ===================================================== */

/* Tablet / mid screens */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .company-names h1 { font-size: 1em; line-height: 1.2; }
  nav ul li a { font-size: 0.95em; }
}

/* Small screens */
@media (max-width: 768px) {
  .menu-toggle { display: block; }

  nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
  }
  nav ul.show { display: flex; }

  nav ul li { margin-right: 0; margin-bottom: 15px; }

  .logo-container { height: 50%; }
  .logo-container img { margin-right: 10px; }

  .company-names h1 { font-size: 0.75em; }

  nav ul li { margin-right: 15px; }
  nav ul li a { font-size: 0.7em; }

  nav ul { width: auto; min-width: 100%; }

  /* Home / hero adjustments retained */
  .slider { position: relative; width: 90%; margin: 0 auto; overflow: hidden; }
  .products { padding: 5px 20px; }
  .product-item { width: 30%; margin: 1.66%; font-size: 0.7em; height: 70px; }
  .row { display: flex; flex-wrap: wrap; justify-content: space-between; }

  /* factory-info responsive */
  #factory-info { padding: 15px; border-radius: 8px; font-size: 0.9rem; }
}

/* Extra small screens */
@media (max-width: 480px) {
  .company-names h1 { font-size: 0.70em; }
  nav ul li { margin-right: 5px; }
  nav ul li a { font-size: 0.4em; }
  nav ul { width: auto; min-width: 100%; }
  .company-names { margin-left: 10px; }

  .hero-text {
    background-color: #700000; /* keep */
    padding-bottom: 5px;
    padding-top: 18px; /* keep */
    border-radius: 8px;
    color: white;
    text-align: center;
    width: 100%;
    max-width: 1680px;
    margin: 20px auto;
  }
  .hero-text h2 { font-size: 1.4em; }

  .hero {
    background-color: #cee0ed;
    color: white;
    padding: 5px 5px;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-top: 15px;
  }

  .slider { position: relative; width: 90%; margin: 0 auto; overflow: hidden; }
}

/* Very large screens */
@media (min-width: 1400px) {
  .company-names h1 { font-size: 1.6em; }
  nav ul li a { font-size: 1.1em; }
}

/* ===== Mobile media helpers ===== */
@media (max-width: 768px) {
  /* ปุ่มสเปคให้เลื่อนซ้ายขวา */
  #roof-specs .col-md-12.text-center {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  #roof-specs .col-md-12.text-center .btn.custom-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* คอนเทนเนอร์แนวนอนใช้ซ้ำได้หลายที่ */
  .h-scroll {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .h-scroll > * { flex: 0 0 auto; scroll-snap-align: start; }

  /* รูปย่อยให้มีขนาดกำลังดีบนมือถือ */
  .spec-thumb,
  .ref-thumb,
  .pufoam-thumb,
  .detail-image.img-thumbnail {
    max-height: 140px;
    width: auto;
    object-fit: contain;
  }

  /* กล่องรวมรูปย่อยใน spec ให้เลื่อนข้าง */
  .spec-extra-images {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
    margin-top: 8px;
  }

  /* ปุ่ม "ดูทั้งหมด" */
  .show-more-wrap { display: flex; justify-content: center; margin-top: 8px; }
  .show-more-btn {
    border: 1px solid #ccc;
    background: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 14px;
  }
}

/* ปรับ equalize แกลเลอรีสี: ไม่ให้สูงเกินในจอเล็ก */
@media (max-width: 768px) {
  #brands .gallery {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
  }
  #brands .gallery img.gallery-item {
    height: 120px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }
}

/* ---------- Horizontal scroll helpers ---------- */
.h-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
}
.h-scroll::-webkit-scrollbar { height: 8px; }
.h-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }

/* ==== Products as GRID (no horizontal scroll) - overrides ==== */
@media (max-width: 768px) {
  #products .row, #producten .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
  }
  #products .product-item, #producten .product-item {
    width: auto !important; max-width: none !important; min-width: 0 !important;
    flex: initial !important; margin: 0 !important; scroll-snap-align: unset !important; padding: 10px;
  }
  #products [class*="col-"].product-item, #producten [class*="col-"].product-item {
    width: auto !important; flex: initial !important; box-sizing: border-box;
  }
  #products .product-item h3, #producten .product-item h3 {
    font-size: 0.9rem; line-height: 1.25; margin: 0;
    white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; -webkit-line-clamp: initial; display: block;
  }
}

/* --- Product detail images: mobile show 2 per row --- */
@media (max-width: 768px) {
  .detail-images {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    justify-items: center;
  }
  .detail-images img { width: 100%; height: auto; object-fit: contain; }
}

/* แท็บเล็ต 769–991px */
@media (min-width: 769px) and (max-width: 991.98px) {
  #products .row, #producten .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px !important;
    overflow: visible !important;
  }
  #products .product-item, #producten .product-item {
    width: auto !important; max-width: none !important; flex: initial !important;
  }

  /* ===== FIX videos grid: force 2-up on mobile, 3-up on desktop ===== */
  /* 1) อย่าให้ช่องว่าง (gap) บน .video-row ไปดันเลย์เอาต์ของ Bootstrap */
  #videos .video-row { display: flex; flex-wrap: wrap; gap: 0 !important; }
  /* 2) ล้าง width ใด ๆ ที่ไปบังคับคอลัมน์ */
  #videos .video-col { width: auto !important; max-width: none; box-sizing: border-box; }
  /* 3) บังคับจำนวนคอลัมน์ที่ต้องการ */
  @media (max-width: 767.98px) {
    #videos .video-col { flex: 0 0 50% !important; max-width: 50% !important; }
  }
  @media (min-width: 768px) {
    #videos .video-col { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
  }
  /* 4) progressive reveal */
  #videos .video-col.is-hidden { display: none !important; }
  /* 5) responsive 16:9 wrapper (ซ้ำกับด้านบนแต่คงไว้เพื่อความใส) */
  .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; background:#000; }
  .video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
}

/* Hide whole spec container if image is empty */
#spec-details:has(#spec-image[src=""]),
#spec-details:has(#spec-image:not([src])) {
  display: none !important;
/* เมื่อถูกใส่ h-scroll ให้ .refs-gallery แสดงแบบแถวแนวนอน */
.refs-gallery.h-scroll { display: flex !important; flex-wrap: nowrap; }

}
/* --- Soft block: ป้องกันลาก/เลือก/กดค้างรูป (เฉพาะ UX) --- */
img,
.gallery-item,
.spec-thumb,
.detail-image {
  -webkit-user-drag: none;  /* กันลากเซฟรูป */
  user-select: none;        /* กัน select รูป/alt */
  -webkit-touch-callout: none; /* กันเมนูตอนกดค้างบน iOS Safari */
}