/* ==============================================================
   theme/202407-whitered/css/whitered-daylight-patch.css
   Compatibility patch: 202407-whitered components บน template 202605
   (indexTheme202605DeepBlue/daylight + Bootstrap 4 CDN)
   โหลด "ต่อท้าย" styleMoodle.css + 3steps.css เฉพาะหน้าที่ใช้
   © 2004–2026 Ideal Creation Center Co., Ltd.
   ============================================================== */

/* --------------------------------------------------------------
   1) ตารางราคาโดเมน (ul.tld-box 5 คอลัมน์)
   เดิม: li float:left width:20% → item ที่สูงกว่าปกติ 1 บรรทัด
   (ชื่อยาว/ราคา wrap เพราะ font ใหม่ของ BS4+daylight) ทำให้ float
   สะดุด เกิด "ช่องว่าง" กลาง grid
   ใหม่: เปลี่ยน container เป็น flex-wrap — ขนาด/หน้าตา li เท่าเดิม
   แต่ wrap เป็นแถวเสมอ ไม่มีรูโหว่
   -------------------------------------------------------------- */
.section.shareFeature.domain-price ul.tld-box {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    float: none;
}
.section.shareFeature.domain-price ul.tld-box li {
    float: none;
    margin-bottom: 6px;
}
.section.shareFeature.domain-price ul.tld-box li .Bcolor--price {
    height: 100%; /* ให้พื้นหลัง/เส้นขอบสูงเท่ากันทั้งแถว */
}

/* --------------------------------------------------------------
   2) Hero 3 ขั้นตอน (ค้นหา → สั่งซื้อ → ชำระ)
   เดิม: ul เป็น flex แต่ li ยัง float:left + .orange-circle ใช้
   padding เป็น % (อิงความกว้าง li ที่เปลี่ยนไปตาม theme ใหม่)
   → icon/ข้อความเบี้ยวไม่อยู่กลางวงกลม
   ใหม่: จัดกลางด้วย flex ตรงๆ ขนาดวงกลมเท่าเดิม 120px
   -------------------------------------------------------------- */
.section.searchTop.steps3 > .container > ul {
    padding: 0;
}
.section.searchTop.steps3 > .container > ul li {
    float: none;
}
.section.searchTop.steps3 > .container > ul li .orange-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.section.searchTop.steps3 > .container > ul li .orange-circle img {
    display: block;
    width: 50px;
    height: 60px;
    margin: 0 auto;
}
.section.searchTop.steps3 > .container > ul li .orange-circle p.content {
    margin: 8px 0 0 0;
    text-align: center;
}

/* --------------------------------------------------------------
   3) กันเหตุการณ์ float ของ section หลุดออกนอก flow
   (เผื่อหน้าอื่นที่ใช้ whitered แต่ footer.css ยังไม่ deploy)
   -------------------------------------------------------------- */
.section.shareFeature::after,
.section.faqs202407::after {
    content: "";
    display: table;
    clear: both;
}