@charset "utf-8";
/* CSS Document */
/* ฟอนต์เนื้อหาใน .detail (รายละเอียดสินค้า + บทความ) — ใช้ฟอนต์ที่ติดมากับเครื่อง
   ไม่ต้องโหลดไฟล์ ไม่ต้องติดตั้งอะไรเพิ่ม และไม่มีช่วงตัวอักษรกระพริบตอนโหลด
   ⛔ Arial ไม่มี glyph ภาษาไทยทั้งบน Windows / macOS / iOS — ถ้าใส่แค่ "Arial, sans-serif"
      ตัวไทยจะตกไปใช้ฟอนต์อะไรก็ได้ที่ระบบเลือกให้ คุมไม่ได้และแต่ละเครื่องไม่เหมือนกัน
      จึงต้องไล่ฟอนต์ไทยของแต่ละระบบต่อท้ายไว้เอง:
      Windows 8+ = Leelawadee UI · Windows 7 = Tahoma · iOS/macOS = Thonburi · Android = Noto Sans Thai
      (Android ไม่มี Arial เหมือนกัน ตัวอังกฤษจะตกเป็น Roboto ให้เอง หน้าตาใกล้เคียงมาก) */
body {
  font-family: 'Prompt', sans-serif;
  font-size: 16px;
  text-decoration: none;
  color: #000;
}
a:focus {
  outline: none;
}
.container {
  padding: 5px;
}
.row {
  margin: 25px 0;
}
.p0 {
  padding: 0px;
}
.p5 {
  padding: 5px;
}
.pt5 {
  padding: 5px 10px;
}
.p10 {
  padding: 10px;
}
.p20 {
  padding: 20px;
}
.m0 {
  margin: 0;
}
.m5 {
  margin: 5px;
}
.maxwidth {
  max-width: 100%;
}
.mycolor {
  color: #f8cd1c;
}
.mycolor2 {
  color: #132a52;
}
.mycolorlink {
  color: #000;
}
.mycolorlink:hover {
  color: #132a52;
}
.myborder {
  border-bottom: 3px solid #f8cd1c;
}
.borderall {
  border: thin solid #ccc;
}
.bordertop {
  border-top: thin solid #ccc;
}
.borderdown {
  border-bottom: thin solid #ccc;
}
.borderbox {
  display: inline-block;
  width: 200px;
  border-bottom: 3px solid #f8cd1c;
}
.mybg {
  background-color: #f8cd1c;
}
.bggray {
  background-color: #e9e9e9;
}
.bggray1 {
  background-color: #333;
}
.bgfixed {
  background-image: url(../images/welding/bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.bgrelative {
  position: relative;
  background-image: url(../images/bg2.png);
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.bgscroll {
  background-image: url(../images/bg2.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.mybtn {
  display: inline-block;
  padding: 7px 25px;
  color: #000;
  border: thin double #000;
  text-decoration: none;
  text-align: center;
}
.mybtn:hover,
.mybtn:focus {
  border-color: #f8cd1c;
  color: #fff;
  background-color: #f8cd1c;
  text-decoration: none;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  -ms-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
.brandbtn {
  display: inline-block;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 5px 1px;
  font-size: 12px;
  color: #000;
  border: thin double #000;
  text-decoration: none;
  text-align: center;
}
.brandbtn:hover,
.brandbtn:focus {
  color: #000;
  background-color: #f8cd1c;
  text-decoration: none;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  -ms-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
.textslide {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
  text-align: center;
  color: #fff;
}
.zoom {
  transition: all 0.3s;
}
.zoom:hover {
  -ms-transform: scale(1.03);
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}
.radius {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.navbar-default .navbar-nav > li > a {
  padding: 5px 25px;
  color: #161258;
  border-radius: 20px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #000;
  background-color: #f8931c;
  border-radius: 20px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.navbar-right {
  margin-right: 0;
}
.carousel-indicators {
  bottom: 0px;
}
.carousel-indicators .active {
  width: 15px;
  height: 15px;
  background-color: #fff;
}
.carousel-indicators li {
  width: 15px;
  height: 15px;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 15px;
}
.icon-big {
  font-size: 60px;
  margin-bottom: 20px;
  color: #111;
}
.icon,
.iconfooter {
  display: inline-block;
  text-align: center;
  padding: 5px 0;
  width: 40px;
  font-size: 18px;
  color: #fff;
  border-radius: 50%;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.iconfooter {
  font-size: 24px;
  width: 45px;
  background-color: #d9c593;
}
.icon:hover,
.iconfooter:hover {
  background-color: #f8cd1c;
}
.detail img {
  max-width: 100%;
  height: auto;
}
.detail iframe {
  max-width: 100%;
}
.detail table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  color: #000;
  border: 1px solid #c9c9c9;
  background-color: #fff;
  margin: 14px 0 20px;
}
.detail th,
.detail td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid #d6d6d6;
}
/* หัวตารางจริงเท่านั้น (<th>) — เหลืองแบรนด์ + อักษรดำ
   ⛔ ห้ามกลับไปใช้ `tr:first-child` เพราะมันยิงโดนแถวข้อมูลแรกของตารางสเปก 2 คอลัมน์
   ที่ไม่มี <th> ทำให้แถวนั้นหายไปทั้งแถว (อักษรขาวบนพื้นเหลือง) */
.detail th {
  background-color: #f8cd1c;
  color: #000;
  font-weight: 600;
}
.detail tr:nth-child(even) {
  background-color: #f7f7f7;
}
.detail tbody tr:hover {
  background-color: #fff8dd;
}
/* ===== รายละเอียดสินค้า: ไล่ลำดับหัวข้อให้กวาดตาเจอ ===== */
/* line-height ของ Bootstrap คือ 1.43 ซึ่งตั้งมาสำหรับภาษาอังกฤษ
   ภาษาไทยมีสระบนสระล่างกับวรรณยุกต์ซ้อนกันถึง 3 ชั้น บรรทัดเลยชนกันจนอ่านยาก
   เนื้อหายาว ๆ อย่างบทความเห็นชัดที่สุด จึงเปิดระยะบรรทัดตรงนี้ที่เดียว */
.detail {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
/* หัวข้อยังเป็น Prompt ตามเดิม — ให้เนื้อหากับหัวข้อแยกกันชัด กวาดตาหาหัวข้อง่ายขึ้น */
.detail h1,
.detail h2,
.detail h3,
.detail h4,
.detail h5,
.detail h6 {
  font-family: 'Prompt', sans-serif;
}
.detail h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 18px;
  color: #132a52;
}
.detail h4 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  margin: 36px 0 12px;
  padding-bottom: 8px;
  color: #132a52;
  border-bottom: 3px solid #f8cd1c;
}
/* h5 = คำถามในบล็อก "คำถามที่พบบ่อย"
   ไม่เคยตั้งสไตล์ไว้ เบราว์เซอร์เลยให้ 14px ซึ่ง "เล็กกว่าคำตอบ" ที่อยู่ข้างล่าง
   อ่านแล้วแยกไม่ออกว่าอันไหนคำถามอันไหนคำตอบ */
.detail h5 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  margin: 28px 0 8px;
  color: #132a52;
}
.detail > h4:first-child {
  margin-top: 0;
}
.detail p {
  margin: 0 0 16px;
}
/* แบนเนอร์แอดไลน์ท้ายรายละเอียดสินค้า — แบนเนอร์เขียวเต็มความกว้าง แยกตัวจากเนื้อหาชัดอยู่แล้ว
   จึงไม่ต้องมีเส้นคั่น ใช้ระยะห่างพอ ไม่ให้ไปติดคำตอบ FAQ ข้างบน */
.detail-cta {
  margin-top: 34px;
  text-align: center;
}
.detail-cta a {
  display: block;
}
/* width/height ใน HTML กันหน้ากระตุกตอนโหลด (CLS) ส่วน height:auto ให้ย่อตามจริงบนจอเล็ก */
.detail-cta img {
  width: 100%;
  max-width: 1000px;
  height: auto;
}
.detail ul,
.detail ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
.detail li {
  margin-bottom: 10px;
}
/* ตัวหนาในย่อหน้า/หัวข้อย่อย = จุดที่ต้องกวาดตาเจอก่อน · ในตารางคงสีดำไว้ */
.detail p > strong,
.detail li > strong {
  color: #132a52;
  font-weight: 600;
}
/* ลิงก์ไปสินค้าอื่นในเนื้อหา — ให้รู้ว่ากดได้ แต่ไม่แย่งสายตาหัวข้อ
   จำกัดไว้ที่ p/li เท่านั้น จะได้ไม่โดนแบนเนอร์แอดไลน์ใน .detail-cta */
.detail p a,
.detail li a {
  color: #132a52;
  font-weight: 600;
  border-bottom: 1px solid #f8cd1c;
  text-decoration: none;
}
.detail p a:hover,
.detail p a:focus,
.detail li a:hover,
.detail li a:focus {
  color: #132a52;
  background-color: #fff8dd;
  text-decoration: none;
}
.fb-comments iframe {
  width: 100%!important;
}
.tabbox {
  display: block;
  border-bottom: thin solid #ccc;
  padding: 10px 20px;
  color: #333;
}
.tabbox:hover {
  background-color: #f8cd1c;
}
.boxopen {
  display: none;
  padding: 20px;
  border-bottom: thin solid #ccc;
  font-family: "tahoma", "Arial";
}
.boxopen.boxactive {
  display: block;
}
.rotate {
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.rotate.down {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.iframereel {
  height: 476px;
  max-width: 100%;
}
.footlg {
  position: fixed;
  display: block;
  bottom: 10px;
  right: 20px;
}
.footxs {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 0;
  z-index: 9999;
  background-color: #132a52;
}
.taghead {
  text-align: left;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
  margin-top: 1px;
  margin-bottom: 10px;
  position: relative;
}
.taghead b {
  z-index: 10;
  position: relative;
  display: inline-block;
  background: #f7f7f7;
  padding-right: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
.taghead:before,
.taghead:before {
  position: absolute;
  width: 100%;
  content: ' ';
  height: 2px;
  top: 50%;
  left: 0;
  background-color: #f8cd1c;
  bottom: 4px;
  box-sizing: border-box;
  transform: translatey(-50%);
}
.breadcrumb-box {
  background: #fff;
  padding: 5px;
}
.breadcrumb {
  background: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li a {
  color: #333;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 18px;
  }
  /* รายละเอียดสินค้าบนมือถือ — .detail h3/h4 มี specificity สูงกว่า h3 เปล่า ต้องเขียนทับตรง ๆ */
  /* เนื้อหาบนมือถือเล็กลงมาที่ 14px — ฟอนต์ไทยของระบบ (Leelawadee UI / Noto Sans Thai / Thonburi)
   ตัวอักษรใหญ่กว่า Prompt ที่ px เท่ากันอยู่แล้ว 14px จึงยังอ่านสบาย */
  .detail {
    font-size: 14px;
  }
  .detail h3 {
    font-size: 20px;
    margin-bottom: 14px;
  }
  .detail h4 {
    font-size: 18px;
    margin-top: 28px;
  }
  .detail h5 {
    font-size: 17px;
    margin-top: 22px;
  }
  .detail table {
    font-size: 13px;
  }
  .detail th,
  .detail td {
    padding: 8px;
  }
  .detail ul,
  .detail ol {
    padding-left: 20px;
  }
  .navbar-nav {
    margin: 10px -15px;
  }
  .navbar-brand img {
    width: 180px;
    margin-top: -10px;
  }
  .navbar-default .navbar-nav > li > a {
    border-radius: 0px;
    color: #fff;
    padding: 8px 25px;
  }
  .navbar-toggle {
    margin-bottom: 10px;
    margin-top: 5px;
    border: thin solid #000 !important;
  }
  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,
  .navbar-default .navbar-nav > .open > a:focus,
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus {
    border-radius: 0px;
  }
  .navbar-collapse {
    position: absolute;
    top: 89px;
    /* ความสูง navbar */
    left: 0;
    width: 100%;
    background-color: #132a52;
    z-index: 9999;
  }
  .iframereel {
    height: 320px;
  }
}
@media screen and (min-width: 768px) {
  .navbar-default .navbar-nav > li > a {
    padding: 10px 10px;
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-brand img {
    width: 220px;
    margin-top: -20px;
    margin-left: 15px;
  }
  .navbar-toggle {
    margin-bottom: 10px;
    margin-top: 5px;
    border: thin solid #000 !important;
  }
}
@media (min-width: 992px) {
  .navbar-brand img {
    width: 250px;
    margin-top: -25px;
  }
  .navbar-default .navbar-nav > li > a {
    padding: 10px 10px;
  }
  .navsearch {
    width: 180px;
    margin: 20px 5px;
  }
}
@media screen and (min-width: 1200px) {
  .navbar-default .navbar-nav > li > a {
    padding: 10px 15px;
  }
  .navsearch {
    width: 200px;
    margin: 20px 5px;
  }
}