/* ปรับหน้า Importance of Indoor Air ให้เข้ากับเทมเพลตของเว็บ
 *
 * เขียนมือ — ไม่ถูกทับตอน gen .scoped.css ใหม่ (application/tools/scope_indoor_air_css.py แตะเฉพาะไฟล์ต้นฉบับ)
 * โหลดเป็นไฟล์สุดท้ายเพื่อให้ override ชุด scoped ได้
 */

/* ฐานขนาดตัวอักษร — ต้นฉบับรันบนหน้าที่ html = 16px แต่เว็บนี้ตั้ง html = 13px
   ดีไซน์ใช้ em/% เป็นหน่วยสัมพัทธ์ 56 จุด (ไม่มี rem เลย) ทุกอย่างจึงหดเหลือ 81%
   ตรึงฐานที่ 16px ให้ em/% ข้างในคำนวณได้เท่าต้นฉบับ */
.iaq-page {
  font-size: 16px;
  line-height: 2;
  /* ฟองอากาศตกแต่งใช้ z-index:-1 — ในหน้าเดี่ยวมันอยู่หลังเนื้อหาแต่ยังเห็น
     พอย้ายเข้าเทมเพลต พื้นหลังของ container ฝั่งเว็บทับจนหายหมด
     สร้าง stacking context ที่นี่ ฟองจะอยู่หลังเนื้อหาแต่ยังอยู่หน้าพื้นหลังของเว็บ */
  position: relative;
  z-index: 0;
}

/* เทมเพลตเว้น margin-top 150px + padding-bottom 30px ก่อนฟุตเตอร์ทุกหน้า
   หน้านี้ปิดท้ายด้วยภาพเต็มความกว้าง (bg-footer) ช่องว่างขาวเลยโผล่คั่นกลาง
   ตัดเฉพาะหน้าที่มี .iaq-page — เบราว์เซอร์เก่าที่ไม่รู้จัก :has() จะได้ระยะเดิม ไม่พัง */
body:has(.iaq-page) #kt_app_footer {
  margin-top: 0 !important;
}
body:has(.iaq-page) #kt_app_content {
  padding-bottom: 0 !important;
}

/* คลาส utility ชื่อชนกับของเว็บ — ฝั่งเว็บ (style_frontend.bundle.css) ประกาศ !important
   จึงชนะ .iaq-page ... ทั้งที่ specificity ต่ำกว่า ทำให้กล่องแคบลงแล้วข้อความตัดบรรทัดไม่ตรงต้นฉบับ
   คืนค่าตามดีไซน์ (air_purity.css) เฉพาะคลาสที่ค่าไม่ตรงกันจริง */
.iaq-page .mw-450px {
  max-width: 455px !important;
}
.iaq-page .mw-500px {
  max-width: 600px !important;
}

/* .btn ชนกับปุ่ม Bootstrap/Metronic ของเว็บ — ฝั่งเว็บใช้ .btn:not():not():... (specificity สูงกว่า)
   ทับ padding และใส่ display:inline-block + box-shadow:none !important
   ทำให้ปุ่มเล็กลงและกล่องปุ่มสูงขึ้น 18px ต่อบล็อก (เพี้ยนสะสมทั้งหมวด Solutions)
   คืนค่าตามดีไซน์ (air_purity.css:1131) */
.iaq-page .box-product .btn.bnt-primary {
  display: inline !important;
  padding: 10px 57px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-button) !important;
}

/* แถบเมนูของหน้าเป็น position:fixed top:0 ตอน sticky — ในหน้าเดี่ยวถูกต้อง
   แต่ในเทมเพลตมันไปทับ header ของเว็บตอนยังไม่เลื่อน
   เปลี่ยนเป็น sticky: ตอนบนสุดอยู่ใต้ header ของเว็บ พอเลื่อนพ้นแล้วค้างบนเหมือนต้นฉบับ
   (g-main padding-top:46px ของดีไซน์มีไว้ชดเชยที่ fixed ไม่กินที่ — sticky กินที่เองแล้ว)
   ไม่ผูกกับคลาส g-lnav-sticky ของ common.js เพราะมันวัดความสูงจาก header ของดีไซน์
   ซึ่งไม่มีในเทมเพลตนี้ — CSS ล้วนได้ผลเหมือนกันและไม่พึ่ง JS */
@media only screen and (min-width: 770px) {
  .iaq-page .g-lnav {
    position: sticky !important;
    top: 0 !important;
    z-index: 11;
  }
  .iaq-page .g-main {
    padding-top: 0 !important;
  }
}

/* .text-center ของเว็บเป็น !important — ทับกฎจอเล็กของดีไซน์ที่สั่ง text-align:left
   บนองค์ประกอบที่ยังติดคลาส .text-center อยู่ (air_purity.css:1842, 1846, 1961, 2315) */
@media screen and (max-width: 769px) {
  /* .w-50 ของเว็บเป็น width:50% !important — ทับกฎจอเล็กของดีไซน์ที่ให้ยืดเต็มแถว
     (air_purity.css:1714) ทำให้บล็อกทั้งหน้าค้างครึ่งคอลัมน์บนมือถือ */
  .iaq-page .w-45,
  .iaq-page .w-43,
  .iaq-page .w-50,
  .iaq-page .w-55,
  .iaq-page .w-57,
  .iaq-page .w-100 {
    width: 100% !important;
  }

  .iaq-page .section3 .text-center.mw-765px.m-center,
  .iaq-page .section3 .m-center .title-m-1.text-center,
  .iaq-page .case-box .text-center,
  .iaq-page .section7 .content.text-center {
    text-align: left !important;
  }
}

/* โลโก้ในแถบเมนูของหน้า — เว็บมีโลโก้ใน header อยู่แล้ว โชว์ซ้ำกลายเป็นโลโก้ซ้อนกันบนมือถือ
   เก็บปุ่มแฮมเบอร์เกอร์ของแถบไว้ เพราะเป็นตัวเปิดเมนู anchor ในหน้า */
.iaq-page .g-lnav_hd > div > img:not(.sm_menu) {
  display: none;
}

/* แถบเหลือแค่ปุ่มเปิดเมนู — ดันไปชิดขวาให้ดูตั้งใจ ไม่ใช่ปุ่มลอยกลางแถบเปล่า */
.iaq-page .g-lnav_hd > div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* แถบเมนูในหน้าใช้ฟอนต์ของดีไซน์ (Poppins/Prompt 18px) ซึ่งไม่เข้ากับเมนูหลักของเว็บ
   ให้ตรงกับ .btn-header-menu ที่ใช้ฟอนต์ของ body (SukhumvitSet) ขนาด fs-5 */
.iaq-page .g-lnav_lv1_el .g-lnav_lv1_hd > a,
.iaq-page .g-lnav_lv1_el .g-lnav_lv1_hd > a span,
.iaq-page .g-lnav_lv1_el.user_benefit label.pop-up_open {
  font-family: 'SukhumvitSet', Tahoma, sans-serif;
  font-size: 15px;
  font-weight: 400;
}

/* จอเล็ก: ดีไซน์ตั้งแถบเมนูเป็น absolute (ไม่กินที่) เพราะเดิมมันอยู่บนสุดของหน้า
   พอย้ายลงมาใต้ภาพหัวเรื่อง ปุ่มเปิดเมนูจะลอยทับเนื้อหาย่อหน้าแรก
   ให้กินที่ตัวเองตอนปิด และกลับไป absolute ตอนกางเมนูเพื่อไม่ให้ดันเนื้อหา */
@media only screen and (max-width: 769px) {
  .iaq-page .g-lnav {
    position: relative !important;
  }
  .iaq-page .g-lnav.g-lnav-on {
    position: absolute !important;
  }
}

/* จอใหญ่: ให้ชื่อเมนูอยู่บรรทัดเดียว — ดีไซน์ใส่ <br class="pconly"> ไว้ตัดคำเป็นสองบรรทัด */
@media only screen and (min-width: 770px) {
  .iaq-page .g-lnav_lv1_hd a br {
    display: none;
  }
  .iaq-page .g-lnav_lv1_el .g-lnav_lv1_hd > a {
    padding-left: 18px;
    padding-right: 18px;
    white-space: nowrap;
  }
  /* ดีไซน์ให้ทุกช่องกว้างเท่ากัน (flex:1) พอเป็นบรรทัดเดียว ข้อความยาวจะเบียดกันเอง
     ให้แต่ละช่องกว้างตามข้อความแล้วเฉลี่ยช่องไฟเท่ากันแทน */
  .iaq-page .g-lnav_lv1 {
    justify-content: space-evenly;
  }
  .iaq-page .g-lnav_lv1_el {
    flex: 0 1 auto;
  }
}