/*
 * Home (index) — mobile / tablet tweaks
 * โหลดท้าย body หลัง <style> ของแต่ละ sector เพื่อให้ cascade ทับได้
 */

/*
 * ห้ามใช้ overflow-x: hidden อย่างเดียวบน wrapper ที่มีลูก absolute —
 * ตาม CSS ถ้า overflow-x ไม่ใช่ visible แล้ว overflow-y จะถูกคำนวณเป็น auto
 * ทำให้สไลด์วิดีโอ sector4 ถูกตัดแนวตั้งบนมือถือ
 * ใช้ overflow-x: clip เฉพาะเมื่อรองรับ — ถ้าไม่รองรับจะไม่ใส่ overflow บน wrapper
 */
.container-full.sr-fade-down {
  max-width: 100%;
  box-sizing: border-box;
}
@supports (overflow: clip) {
  .container-full.sr-fade-down {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* ── Flash banner ── */
.container-full.bg-flash {
  max-width: 100%;
  overflow-x: hidden;
}
.container-full.bg-flash .carousel,
.container-full.bg-flash #carousel {
  max-width: 100%;
}
.container-full.bg-flash .carousel-inner,
.container-full.bg-flash .carousel-item {
  max-width: 100%;
}
.container-full.bg-flash .carousel-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

/* ── Sector 1 ── */
@media (max-width: 991px) {
  /* อย่าบังคับความสูงคอลัมน์ขวา — จะเหลือช่องว่างใต้ปุ่มค้นหา */
  .sector1-right {
    min-height: 0;
  }
}

@media (max-width: 575px) {
  .sector1-wrap {
    overflow-x: clip;
    overflow-y: visible;
  }
  .sector1-inner {
    max-width: 100%;
  }
  .sector1-left {
    padding: 22px 14px 18px;
  }
  .sector1-left-title-box {
    left: 12px;
    right: 12px;
    top: 12px;
    max-width: none;
    width: auto;
    text-align: right;
    box-sizing: border-box;
  }
  /* stroke หนาเกินจะล้นจากกล่องข้อความทั้งที่มี overflow:hidden บน .sector1-left */
  .sector1-left-title-main {
    max-width: 100%;
    font-size: 24px;
    letter-spacing: 0.02em;
  }
  .sector1-title-stroke {
    -webkit-text-stroke: 2px #ffffff;
    text-shadow:
      1px 0 0 rgba(255, 255, 255, 0.75),
      -1px 0 0 rgba(255, 255, 255, 0.75),
      0 1px 0 rgba(255, 255, 255, 0.75),
      0 -1px 0 rgba(255, 255, 255, 0.75);
  }
  .sector1-thumbs {
    left: 10px;
    right: 10px;
    bottom: 12px;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
  .sector1-thumb {
    width: 56px;
    height: 38px;
  }
  .sector1-arrow {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-top: -22px;
  }
  .sector1-arrow-left {
    left: 8px;
  }
  .sector1-arrow-right {
    right: 8px;
  }
  .sector1-right {
    padding: 20px 16px;
  }
  .sector1-search-box {
    padding: 18px 16px;
  }
}

/* ── Sector 2 ── */
@media (max-width: 575px) {
  .sector2-wrap {
    overflow-x: hidden;
  }
  .sector2-inner {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px;
  }
  .sector2-desc {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ── Sector 3 — tablet/mobile: อย่าให้คอลัมน์ flex-grow แบ่งความสูง (ช่องว่างขาวระหว่างบล็อก) ── */
@media (max-width: 991px) {
  .sector3-left,
  .sector3-right {
    flex: 0 0 auto;
  }
}

/* ── Sector 3 — ฟอร์มค้นหาตัวแทน: แถวเดียวทำให้ select ล้นขอบบนจอกลาง–มือถือ ── */
@media (max-width: 767px) {
  .sector3-left-form-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .sector3-left-form-row .field,
  .sector3-left-form-row .field-btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  .sector3-left-form-row .field-btn .sector3-find-btn {
    width: 100%;
  }
  .sector3-wrap {
    min-height: 0;
  }
}

/* ── Sector 3 — แถวไอคอน IR บนมือถือให้คอลัมน์เดียว + ไอคอนเล็กลง ── */
@media (max-width: 575px) {
  .sector3-wrap {
    overflow-x: clip;
    overflow-y: visible;
  }
  .sector3-left-top {
    padding: 22px 14px 18px;
  }
  .sector3-left  {
    padding-left: 0px;
    padding-right: 0px;
  }
  .sector3-right {
    padding-left: 15px;
    padding-right: 15px;
  }
  .sector3-invest-item {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
  .sector3-invest-icon {
    width: 88px;
    height: 88px;
  }
  .sector3-invest-title {
    font-size: 13px;
    line-height: 1.35;
  }
  .sector3-claim {
    padding: 22px 16px;
  }
}

/* ── Sector 4 — Media Center video row ── */
@media (max-width: 575px) {
  .sector4-wrap {
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: visible;
    overflow-y: visible;
  }
  .sector4-left-sub {
    font-size: 14px;
    line-height: 1.55;
  }
  .sector4-carousel {
    max-width: 100%;
  }
}

/* ── Sector 5 — ข่าว / แท็บ ── */
@media (max-width: 991px) {
  .sector5-left-title-main {
    font-size: 32px;
    line-height: 1.2;
  }
}

@media (max-width: 575px) {
  .sector5-wrap {
    overflow-x: hidden;
    padding-left: 12px;
    padding-right: 12px;
  }
  .sector5-left-title-small {
    font-size: 24px;
  }
  .sector5-left-title-main {
    font-size: 28px;
  }
  .sector5-left-menu-item {
    padding: 10px 12px;
    font-size: 13px;
  }
  .sector5-left-menu-item-text {
    line-height: 1.35;
  }
  .sector5-cards-frame {
    min-height: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
}