<!-- [KU-BEGINNER]
หน้าที่ของไฟล์: landing page ของ index.php แสดง hero ทางลัด ค้นหาห้องและรายการพื้นที่สำหรับคนที่ยังไม่ login ลิงก์การจองพาเข้าสู่เส้นทางที่ตรวจสิทธิ์อีกครั้ง ใช้ ภาษาที่เครื่องแม่ข่ายใช้ประมวลผลงาน แสดงข้อมูลจริงและมีโครง responsive โดยไม่พึ่ง SPA framework
วิธีอ่าน: คอมเมนต์เป็นคำอธิบายให้คนอ่าน เครื่องจะไม่ทำตามข้อความในคอมเมนต์
คำว่า บรรทัดเดิม หมายถึงตำแหน่งก่อนเพิ่มคำอธิบาย ชื่อภาษาอังกฤษยังคงไว้ให้เปิดเทียบคำสั่งได้
บรรทัดเดิม 1: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 3: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า today ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 4: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า search ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 5: เตรียมหรือเก็บ รหัสอาคารที่เลือก ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 6: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า searchError ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 7: เริ่มชุดงานที่เตรียมรับมือหากมีข้อผิดพลาดระหว่างทำ
บรรทัดเดิม 8: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: [วันที่เลือก, เวลาเริ่ม, เวลาสิ้นสุด] = slot([
บรรทัดเดิม 9: จับคู่ชื่อ วันที่ใช้งาน กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 10: จับคู่ชื่อ เวลาเริ่ม กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 11: จับคู่ชื่อ เวลาสิ้นสุด กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 12: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 13: รับข้อผิดพลาดจากชุดงานก่อนหน้า แล้วจัดการแจ้งผู้ใช้หรือย้อนข้อมูลอย่างเหมาะสม
บรรทัดเดิม 14: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า searchError ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 15: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: [วันที่เลือก, เวลาเริ่ม, เวลาสิ้นสุด] = [ค่าที่ตั้งชื่อไว้ว่า today, '09:00', '11:00']
บรรทัดเดิม 16: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 17: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า buildings ไว้ใช้ในขั้นตอนต่อไป โดยอ่านหรือเปลี่ยนข้อมูลผ่านตัวกลางฐานข้อมูล
บรรทัดเดิม 18: ขออ่านข้อมูลจากฐานข้อมูล โดยเลือกช่องหรือรายการตามที่ระบุ
บรรทัดเดิม 19: อ่านผลจากฐานข้อมูลออกมาเป็นหลายรายการ
บรรทัดเดิม 20: อ่านห้องพร้อมอาคารและข้อมูลอุปกรณ์ แปลง room_types ข้อความข้อมูลที่มีชื่อช่องและค่า จัดเป็นชุดเพื่อส่งหรือเก็บ เป็น กล่องที่เก็บข้อมูลหลายค่า และสร้าง inventory_summary ให้หน้าห้องใช้ร่วมกัน แล้วเก็บผลเป็น รายการห้อง
บรรทัดเดิม 21: ทำขั้นตอนเดิมซ้ำกับรายการหรือช่วงค่าที่กำหนด เช่นแต่ละห้อง แต่ละวัน หรือแต่ละตัวเลือก
บรรทัดเดิม 22: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง availability = ข้อมูลห้อง ในช่อง เปิดให้ใช้งานอยู่หรือไม่
บรรทัดเดิม 23: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? conflict((int) ข้อมูลห้อง ในช่อง รหัสรายการ , วันที่เลือก, เวลาเริ่ม, เวลาสิ้นสุด) ถ้าไม่มีให้ใช้ 'Available'
บรรทัดเดิม 24: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'Unavailable'
บรรทัดเดิม 25: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 26: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: unset(ข้อมูลห้อง)
บรรทัดเดิม 27: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า filteredRooms ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 28: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: array_filter(
บรรทัดเดิม 29: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: รายการห้อง,
บรรทัดเดิม 30: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: fn(ข้อมูลห้อง) => (!รหัสอาคารที่เลือก หรือ (int) ข้อมูลห้อง ในช่อง รหัสอาคาร ตรงกับ รหัสอาคารที่เลือก) และต้อง
บรรทัดเดิม 31: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: (ค่าที่ตั้งชื่อไว้ว่า search ตรงกับ '' หรือ stripos(ข้อมูลห้อง ในช่อง รหัสที่คนอ่านได้ . ' ' . ข้อมูลห้อง ในช่อง building , ค่าที่ตั้งชื่อไว้ว่า search) ไม่ตรงกับ
บรรทัดเดิม 32: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 33: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 34: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า filters ไว้ใช้ในขั้นตอนต่อไป ในรูปกลุ่มที่เก็บค่าได้หลายรายการ
บรรทัดเดิม 35: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า filteredAvailable ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 36: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: array_filter(ค่าที่ตั้งชื่อไว้ว่า filteredRooms, fn(ข้อมูลห้อง) => ข้อมูลห้อง ในช่อง availability ตรงกับ 'Available')
บรรทัดเดิม 37: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 38: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า destination ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 39: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ผู้ใช้ที่เข้าสู่ระบบ ? ชื่อหน้าจอที่กำลังเปิด : 'login',
บรรทัดเดิม 40: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ผู้ใช้ที่เข้าสู่ระบบ ? ค่าที่ตั้งชื่อไว้ว่า params : []
บรรทัดเดิม 41: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 42: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า dashboardPage ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 43: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า featuredRoom ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 44: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: array_values(array_filter(รายการห้อง, fn(ข้อมูลห้อง) => ข้อมูลห้อง ในช่อง availability ตรงกับ 'Available'))[0] ถ้าไม่มีให้ใช้
บรรทัดเดิม 45: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: (รายการห้อง[0] ถ้าไม่มีให้ใช้ ค่าว่างที่หมายถึงยังไม่มีข้อมูล)
บรรทัดเดิม 46: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า hasFilters ไว้ใช้ในขั้นตอนต่อไป
บรรทัดเดิม 47: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า search ไม่ตรงกับ '' หรือ รหัสอาคารที่เลือก ไม่ตรงกับ 0 หรือ isset(ช่อง วันที่ใช้งาน ที่ผู้ใช้ส่งมา, ช่อง เวลาเริ่ม ที่ผู้ใช้ส่งมา, ช่อง เวลาส
บรรทัดเดิม 48: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า shortcuts ไว้ใช้ในขั้นตอนต่อไป ในรูปกลุ่มที่เก็บค่าได้หลายรายการ
บรรทัดเดิม 49: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ['reservations', 'file', 'รายการจองของฉัน', 'ดูคำขอและติดตามผลอนุมัติ', 'violet'],
บรรทัดเดิม 50: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ['schedule', 'calendar', 'ตารางใช้งานห้อง', 'วางแผนก่อนส่งคำขอจอง', 'blue'],
บรรทัดเดิม 51: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ['maintenance', 'tool', 'แจ้งซ่อมอุปกรณ์', 'พบปัญหา? แจ้งให้เราช่วยดูแล', 'teal']
บรรทัดเดิม 52: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 53: จบส่วนประมวลผล แล้วกลับไปแสดงโครงหน้าหรือข้อความตามปกติ
-->
<!-- [KU-BEGINNER]
บรรทัดเดิม 54: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: <!doctype ส่วนที่กำหนดว่าหน้าจอมีข้อความ ช่องกรอก หรือปุ่มอะไร>
-->
<!doctype html>
<!-- [KU-BEGINNER]
บรรทัดเดิม 55: สร้างเอกสารเว็บทั้งหมด
-->
<html lang="th">
    <!-- [KU-BEGINNER]
บรรทัดเดิม 56: สร้างข้อมูลตั้งค่าของหน้าเว็บที่ไม่ใช่เนื้อหาหลัก
-->
    <head>
        <!-- [KU-BEGINNER]
บรรทัดเดิม 57: สร้างข้อมูลกำหนดการแสดงผลหน้าเว็บ
-->
        <meta charset="utf-8" />
        <!-- [KU-BEGINNER]
บรรทัดเดิม 58: สร้างข้อมูลกำหนดการแสดงผลหน้าเว็บ
บรรทัดเดิม 59: ตั้งชื่อช่องนี้ว่า viewport เพื่อให้ฝั่งรับข้อมูลรู้ว่าเป็น viewport
บรรทัดเดิม 60: ตั้งค่า content ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 61: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
        <!-- [KU-BEGINNER]
บรรทัดเดิม 62: สร้างข้อมูลกำหนดการแสดงผลหน้าเว็บ
บรรทัดเดิม 63: ตั้งชื่อช่องนี้ว่า theme-color เพื่อให้ฝั่งรับข้อมูลรู้ว่าเป็น theme-color
บรรทัดเดิม 64: ตั้งค่า content ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 65: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
        <meta
            name="theme-color"
            content="#e0f2fe"
        />
        <!-- [KU-BEGINNER]
บรรทัดเดิม 66: สร้างข้อมูลกำหนดการแสดงผลหน้าเว็บ
บรรทัดเดิม 67: ตั้งชื่อช่องนี้ว่า description เพื่อให้ฝั่งรับข้อมูลรู้ว่าเป็น description
บรรทัดเดิม 68: ตั้งค่า content ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 69: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
        <meta
            name="description"
            content="ค้นหาห้องเรียน เลือกวันเวลา และส่งคำขอจองห้องเรียน มหาวิทยาลัยเกษตรศาสตร์ วิทยาเขตกำแพงแสน ได้ในที่เดียว"
        />
        <!-- [KU-BEGINNER]
บรรทัดเดิม 70: สร้างส่วนหน้าจอชนิด title
-->
        <title>KU Room · ค้นหาห้องเรียนและจองพื้นที่การเรียนรู้</title>
        <!-- [KU-BEGINNER]
บรรทัดเดิม 71: โหลดคำสั่งที่ใช้ร่วมกันจากอีกไฟล์ โดยอ้างโฟลเดอร์ของไฟล์นี้เป็นหลัก
-->
        <!-- [KU-BEGINNER]
หน้าที่ของไฟล์: ส่วน head ของ branding เช่น favicon/สีหน้าต่างและการอ้างทรัพยากรส่วนกลาง แยกออกจากเนื้อหาธุรกิจเพื่อแก้ภาพลักษณ์ครั้งเดียวได้หลายหน้า
วิธีอ่าน: คอมเมนต์เป็นคำอธิบายให้คนอ่าน เครื่องจะไม่ทำตามข้อความในคอมเมนต์
คำว่า บรรทัดเดิม หมายถึงตำแหน่งก่อนเพิ่มคำอธิบาย ชื่อภาษาอังกฤษยังคงไว้ให้เปิดเทียบคำสั่งได้
บรรทัดเดิม 1: สร้างการเชื่อมไฟล์รูปแบบหรือทรัพยากรของหน้า
บรรทัดเดิม 2: ตั้งค่า rel ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 3: กำหนดชนิดช่องหรือปุ่ม เช่นรับข้อความ วันที่ เวลา หรือเลือกหลายข้อ
บรรทัดเดิม 4: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 5: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
<link
    rel="icon"
    type="image/png"
    href="logo/KU_Logo_PNG.png"
/>
<!-- [KU-BEGINNER]
บรรทัดเดิม 6: สร้างการเชื่อมไฟล์รูปแบบหรือทรัพยากรของหน้า
บรรทัดเดิม 7: ตั้งค่า rel ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 8: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 9: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
<link
    rel="apple-touch-icon"
    href="logo/KU_Logo_PNG.png"
/>
<!-- [KU-BEGINNER]
บรรทัดเดิม 10: สร้างข้อมูลกำหนดการแสดงผลหน้าเว็บ
บรรทัดเดิม 11: ตั้งชื่อช่องนี้ว่า application-name เพื่อให้ฝั่งรับข้อมูลรู้ว่าเป็น application-name
บรรทัดเดิม 12: ตั้งค่า content ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 13: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
<meta
    name="application-name"
    content="KU Room"
/>
        <!-- [KU-BEGINNER]
บรรทัดเดิม 72: โหลดคำสั่งที่ใช้ร่วมกันจากอีกไฟล์ โดยอ้างโฟลเดอร์ของไฟล์นี้เป็นหลัก
-->
        <!-- [KU-BEGINNER]
หน้าที่ของไฟล์: โหลด JavaScript กลางแบบ defer ได้แก่ inventory.js, notifications.js และ components.js ให้ DOM พร้อมก่อนเริ่ม enhancement เมื่อ JavaScript ปิด ฟอร์ม ภาษาที่เครื่องแม่ข่ายใช้ประมวลผลงาน พื้นฐานยังส่งได้ แต่พฤติกรรมอัตโนมัติบางส่วนจะหายไป
วิธีอ่าน: คอมเมนต์เป็นคำอธิบายให้คนอ่าน เครื่องจะไม่ทำตามข้อความในคอมเมนต์
คำว่า บรรทัดเดิม หมายถึงตำแหน่งก่อนเพิ่มคำอธิบาย ชื่อภาษาอังกฤษยังคงไว้ให้เปิดเทียบคำสั่งได้
-->
<!-- Shared progressive enhancement: PHP forms also work without JavaScript. -->
<!-- [KU-BEGINNER]
บรรทัดเดิม 2: สร้างคำสั่งเพิ่มความสะดวกฝั่งโปรแกรมเปิดเว็บ
บรรทัดเดิม 3: กำหนดที่อยู่ของรูปหรือไฟล์คำสั่งที่ต้องโหลด
บรรทัดเดิม 4: รอให้โครงหน้าพร้อมก่อนเริ่มคำสั่งเพิ่มความสะดวก
บรรทัดเดิม 5: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ></script>
-->
<script
    src="assets/inventory.js?v=1"
    defer
></script>
<!-- [KU-BEGINNER]
บรรทัดเดิม 6: สร้างคำสั่งเพิ่มความสะดวกฝั่งโปรแกรมเปิดเว็บ
บรรทัดเดิม 7: กำหนดที่อยู่ของรูปหรือไฟล์คำสั่งที่ต้องโหลด
บรรทัดเดิม 8: รอให้โครงหน้าพร้อมก่อนเริ่มคำสั่งเพิ่มความสะดวก
บรรทัดเดิม 9: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ></script>
-->
<script
    src="assets/notifications.js?v=1"
    defer
></script>
<!-- [KU-BEGINNER]
บรรทัดเดิม 10: สร้างคำสั่งเพิ่มความสะดวกฝั่งโปรแกรมเปิดเว็บ
บรรทัดเดิม 11: กำหนดที่อยู่ของรูปหรือไฟล์คำสั่งที่ต้องโหลด
บรรทัดเดิม 12: รอให้โครงหน้าพร้อมก่อนเริ่มคำสั่งเพิ่มความสะดวก
บรรทัดเดิม 13: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ></script>
-->
<script
    src="assets/components.js?v=4"
    defer
></script>
        <!-- [KU-BEGINNER]
บรรทัดเดิม 73: สร้างการเชื่อมไฟล์รูปแบบหรือทรัพยากรของหน้า
บรรทัดเดิม 74: ตั้งค่า rel ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 75: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 76: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
        <link
            rel="stylesheet"
            href="assets/app.css?v=0778de440b4f"
        />
        <!-- [KU-BEGINNER]
บรรทัดเดิม 77: จบข้อมูลตั้งค่าของหน้าเว็บที่ไม่ใช่เนื้อหาหลัก
-->
    </head>
    <!-- [KU-BEGINNER]
บรรทัดเดิม 78: สร้างส่วนหน้าจอที่ผู้ใช้เห็น
-->
    <body class="landing-page bg-[#f5fbff] text-base text-slate-700 antialiased sm:text-lg">
        <!-- [KU-BEGINNER]
บรรทัดเดิม 79: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 80: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 81: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 82: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
        <a
            class="landing-skip"
            href="#find-room"
        >
            <!-- [KU-BEGINNER]
บรรทัดเดิม 83: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ข้ามไปค้นหาห้องเรียน
-->
            ข้ามไปค้นหาห้องเรียน
            <!-- [KU-BEGINNER]
บรรทัดเดิม 84: จบลิงก์กดไปหน้าอื่น
-->
        </a>
        <!-- [KU-BEGINNER]
บรรทัดเดิม 85: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
        <div class="launch-shell grid min-h-screen grid-rows-[auto_1fr_auto]">
            <!-- [KU-BEGINNER]
บรรทัดเดิม 86: สร้างส่วนหัวหน้า
-->
            <header class="border-b border-slate-200/70 bg-white">
                <!-- [KU-BEGINNER]
บรรทัดเดิม 87: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 88: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 89: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                <div
                    class="mx-auto flex min-h-24 max-w-7xl items-center justify-between gap-4 px-5 py-4 sm:px-8"
                >
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 90: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 91: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 92: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 93: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 94: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                    <a
                        class="flex shrink-0 items-center gap-3"
                        href="index.php"
                        aria-label="KU Room หน้าแรก"
                    >
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 95: สร้างข้อความหรือองค์ประกอบย่อย
-->
                        <span class="university-logo-frame"><img class="university-logo" src="logo/KU_Logo_PNG.png" alt="มหาวิทยาลัยเกษตรศาสตร์ Kasetsart University" width="241" height="285" decoding="async"></span>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 96: สร้างข้อความหรือองค์ประกอบย่อย
-->
                        <span class="text-xl font-bold tracking-tight text-brand-900 sm:text-2xl">
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 97: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: KU Room
-->
                            KU Room
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 98: สร้างข้อความประกอบขนาดเล็ก
บรรทัดเดิม 99: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 100: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <small
                                class="mt-1 block text-xs font-normal tracking-normal text-slate-500 sm:text-sm"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 101: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: พื้นที่สำหรับทุกการเรียนรู้
-->
                                พื้นที่สำหรับทุกการเรียนรู้
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 102: จบข้อความประกอบขนาดเล็ก
-->
                            </small>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 103: จบข้อความหรือองค์ประกอบย่อย
-->
                        </span>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 104: จบลิงก์กดไปหน้าอื่น
-->
                    </a>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 105: สร้างกลุ่มลิงก์นำทาง
บรรทัดเดิม 106: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 107: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 108: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                    <nav
                        class="hidden items-center gap-7 text-base font-medium lg:flex"
                        aria-label="เมนูหน้าแรก"
                    >
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 109: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 110: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 111: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 112: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <a
                            class="landing-nav"
                            href="#find-room"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 113: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ค้นหาห้องเรียน
-->
                            ค้นหาห้องเรียน
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 114: จบลิงก์กดไปหน้าอื่น
-->
                        </a>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 115: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 116: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 117: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 118: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <a
                            class="landing-nav"
                            href="#how-it-works"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 119: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: วิธีจองห้อง
-->
                            วิธีจองห้อง
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 120: จบลิงก์กดไปหน้าอื่น
-->
                        </a>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 121: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 122: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 123: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 124: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <a
                            class="landing-nav"
                            href="login.php"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 125: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: สำรวจอาคาร
-->
                            สำรวจอาคาร
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 126: จบลิงก์กดไปหน้าอื่น
-->
                        </a>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 127: จบกลุ่มลิงก์นำทาง
-->
                    </nav>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 128: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                    <div class="hidden items-center gap-4 sm:flex">
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 129: ตรวจเงื่อนไขก่อนเลือกว่าจะทำส่วนนี้หรือไม่: if (ผู้ใช้ที่เข้าสู่ระบบ): ? >
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 143: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 144: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 145: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 146: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <a
                            class="landing-nav text-base"
                            href="register.php"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 147: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: สมัครสมาชิก
-->
                            สมัครสมาชิก
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 148: จบลิงก์กดไปหน้าอื่น
-->
                        </a>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 149: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 150: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 151: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 152: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <a
                            class="landing-button bg-sky-200 text-sky-950 hover:bg-sky-300"
                            href="login.php"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 153: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: เข้าสู่ระบบ < ?= icon('users') ? >
-->
                            เข้าสู่ระบบ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                            <!-- [KU-BEGINNER]
บรรทัดเดิม 154: จบลิงก์กดไปหน้าอื่น
-->
                        </a>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 155: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 156: จบกล่องสำหรับจัดวางเนื้อหา
-->
                    </div>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 157: สร้างกล่องที่กดเปิดหรือพับรายละเอียดได้
-->
                    <details class="relative sm:hidden">
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 158: สร้างหัวข้อที่กดเปิดหรือพับกล่อง
บรรทัดเดิม 159: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 160: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 161: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <summary
                            class="grid size-12 cursor-pointer list-none place-items-center rounded-xl border border-slate-200 text-brand-900"
                            aria-label="เปิดเมนูหน้าแรก"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 162: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ☰
-->
                            ☰
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 163: จบหัวข้อที่กดเปิดหรือพับกล่อง
-->
                        </summary>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 164: สร้างกลุ่มลิงก์นำทาง
บรรทัดเดิม 165: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 166: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 167: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <nav
                            class="absolute right-0 z-30 mt-3 grid w-64 gap-1 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl"
                            aria-label="เมนูหน้าแรกบนมือถือ"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 168: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 169: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 170: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 171: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-mobile-link"
                                href="#find-room"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 172: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ค้นหาห้องเรียน
-->
                                ค้นหาห้องเรียน
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 173: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 174: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 175: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 176: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 177: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-mobile-link"
                                href="#how-it-works"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 178: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: วิธีจองห้อง
-->
                                วิธีจองห้อง
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 179: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 180: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 181: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 182: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 183: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-mobile-link"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 184: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: สำรวจอาคาร
-->
                                สำรวจอาคาร
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 185: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 186: ตรวจเงื่อนไขก่อนเลือกว่าจะทำส่วนนี้หรือไม่: if (ผู้ใช้ที่เข้าสู่ระบบ): ? >
-->
                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 194: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 195: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 196: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 197: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-mobile-link"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 198: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: เข้าสู่ระบบ
-->
                                เข้าสู่ระบบ
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 199: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 200: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 201: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 202: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 203: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-mobile-link"
                                href="register.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 204: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: สมัครสมาชิก
-->
                                สมัครสมาชิก
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 205: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 206: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 207: จบกลุ่มลิงก์นำทาง
-->
                        </nav>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 208: จบกล่องที่กดเปิดหรือพับรายละเอียดได้
-->
                    </details>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 209: จบกล่องสำหรับจัดวางเนื้อหา
-->
                </div>
                <!-- [KU-BEGINNER]
บรรทัดเดิม 210: จบส่วนหัวหน้า
-->
            </header>
            <!-- [KU-BEGINNER]
บรรทัดเดิม 211: สร้างพื้นที่เนื้อหาหลัก
บรรทัดเดิม 212: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 213: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 214: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
            <main
                id="system-home"
                class="min-w-0"
            >
                <!-- [KU-BEGINNER]
บรรทัดเดิม 215: สร้างกลุ่มเนื้อหาที่เกี่ยวข้องกัน
บรรทัดเดิม 216: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 217: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 218: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                <section
                    class="overflow-hidden border-b border-blue-100 bg-gradient-to-br from-[#e5f5ff] via-[#f0f9ff] to-[#e0f2fe]"
                    aria-labelledby="landing-heading"
                >
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 219: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 220: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 221: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                    <div
                        class="mx-auto grid max-w-7xl items-center gap-10 px-5 pt-12 pb-12 sm:px-8 sm:pt-16 sm:pb-16 lg:grid-cols-[1.1fr_0.9fr] lg:gap-16 lg:pt-20 lg:pb-20"
                    >
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 222: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 223: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 224: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 225: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <span
                                class="inline-flex items-center gap-2 rounded-full border border-blue-200 bg-white/80 px-4 py-2 text-sm font-medium text-brand-900 sm:text-base"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 226: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="size-2 rounded-full bg-teal-500"></span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 227: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: มหาวิทยาลัยเกษตรศาสตร์ · กำแพงแสน
-->
                                มหาวิทยาลัยเกษตรศาสตร์ · กำแพงแสน
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 228: จบข้อความหรือองค์ประกอบย่อย
-->
                            </span>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 229: สร้างหัวเรื่องหลักของหน้า
บรรทัดเดิม 230: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 231: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 232: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <h1
                                id="landing-heading"
                                class="mt-6 text-[38px] leading-[1.35] font-bold tracking-tight text-brand-900 sm:text-5xl sm:leading-[1.35] lg:text-[60px]"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 233: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: พื้นที่ดี ๆ
-->
                                พื้นที่ดี ๆ
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 234: สร้างจุดขึ้นบรรทัดใหม่
-->
                                <br />
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 235: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: สำหรับ
-->
                                สำหรับ
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 236: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="text-brand-600">ไอเดียใหม่</span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 237: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="ml-2 text-teal-500">✦</span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 238: จบหัวเรื่องหลักของหน้า
-->
                            </h1>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 239: สร้างย่อหน้าข้อความ
บรรทัดเดิม 240: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 241: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-5 max-w-xl text-lg leading-relaxed text-slate-600 sm:text-xl"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 242: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: หาห้องเรียนที่เหมาะกับคุณ เลือกเวลาที่ต้องการ
-->
                                หาห้องเรียนที่เหมาะกับคุณ เลือกเวลาที่ต้องการ
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 243: สร้างจุดขึ้นบรรทัดใหม่
-->
                                <br class="hidden sm:block" />
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 244: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: แล้วส่งคำขอจองได้ง่าย ๆ ในที่เดียว
-->
                                แล้วส่งคำขอจองได้ง่าย ๆ ในที่เดียว
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 245: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 246: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="mt-8 flex flex-wrap gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 247: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 248: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 249: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 250: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <a
                                    class="landing-button bg-sky-200 text-sky-950 shadow-lg shadow-blue-600/15 hover:bg-sky-300"
                                    href="#find-room"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 251: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"/></svg>ค้นหาห้องเรียน
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 252: จบลิงก์กดไปหน้าอื่น
-->
                                </a>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 253: ตรวจเงื่อนไขก่อนเลือกว่าจะทำส่วนนี้หรือไม่: if (ผู้ใช้ที่เข้าสู่ระบบ): ? >
-->
                                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 261: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 262: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 263: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 264: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <a
                                    class="launch-primary landing-button border border-blue-200 bg-white text-brand-900 hover:bg-blue-50"
                                    href="login.php"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 265: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: เข้าสู่ระบบ →
-->
                                    เข้าสู่ระบบ →
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 266: จบลิงก์กดไปหน้าอื่น
-->
                                </a>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 267: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 268: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 269: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 270: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 271: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-9 flex flex-wrap items-center gap-x-7 gap-y-4 border-t border-blue-200/70 pt-6 text-base"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 272: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 273: สร้างข้อความที่เน้นให้เห็นชัด
-->
                                    <strong class="mr-1 text-2xl font-bold text-brand-900">
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 274: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        148                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 275: จบข้อความที่เน้นให้เห็นชัด
-->
                                    </strong>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 276: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ห้องเรียนในระบบ
-->
                                    ห้องเรียนในระบบ
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 277: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 278: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 279: สร้างข้อความที่เน้นให้เห็นชัด
-->
                                    <strong class="mr-1 text-2xl font-bold text-brand-900">
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 280: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        6                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 281: จบข้อความที่เน้นให้เห็นชัด
-->
                                    </strong>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 282: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: อาคารเรียน
-->
                                    อาคารเรียน
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 283: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 284: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="flex items-center gap-2 text-slate-600">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 285: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12l2 2 4-5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"/></svg>เจ้าหน้าที่ · ผู้ดูแลระบบ
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 286: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 287: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 288: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 289: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div class="relative mx-auto w-full max-w-lg lg:max-w-none">
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 290: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 291: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 292: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 293: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ></div>
-->
                            <div
                                class="absolute -top-5 -right-5 size-40 rounded-full border border-blue-200/70 sm:size-64"
                                aria-hidden="true"
                            ></div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 294: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 295: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 296: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="relative rotate-1 rounded-[28px] border border-white bg-white p-5 shadow-2xl shadow-blue-900/10 sm:p-7"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 297: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                                <div class="mb-5 flex items-center justify-between gap-3">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 298: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 299: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 300: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <span
                                        class="flex items-center gap-2 text-base font-semibold text-brand-900"
                                    >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 301: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v16H4zM7 3v4m10-4v4M4 10h16m-12 4h1m6 0h1m-8 3h1"/></svg>Your campus, your space.
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 302: จบข้อความหรือองค์ประกอบย่อย
-->
                                    </span>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 303: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 304: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 305: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 306: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <span
                                        class="text-xl text-teal-500"
                                        aria-hidden="true"
                                    >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 307: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ✦
-->
                                        ✦
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 308: จบข้อความหรือองค์ประกอบย่อย
-->
                                    </span>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 309: จบกล่องสำหรับจัดวางเนื้อหา
-->
                                </div>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 310: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                                <div class="relative overflow-hidden rounded-2xl bg-[#e8efed]">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 311: สร้างรูปภาพ
บรรทัดเดิม 312: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 313: กำหนดที่อยู่ของรูปหรือไฟล์คำสั่งที่ต้องโหลด
บรรทัดเดิม 314: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า featuredRoom
บรรทัดเดิม 315: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? roomPhoto(ค่าที่ตั้งชื่อไว้ว่า featuredRoom)
บรรทัดเดิม 316: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'assets/classroom.svg'
บรรทัดเดิม 317: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 318: ตั้งค่า alt ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 319: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า featuredRoom และต้อง ค่าที่ตั้งชื่อไว้ว่า featuredRoom ในช่อง image_path
บรรทัดเดิม 320: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'รูปห้อง ' . ค่าที่ตั้งชื่อไว้ว่า featuredRoom ในช่อง รหัสที่คนอ่านได้
บรรทัดเดิม 321: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'ภาพประกอบห้องเรียน'
บรรทัดเดิม 322: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 323: ตั้งค่า width ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 324: ตั้งค่า height ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 325: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <img
                                        class="aspect-[16/10] w-full object-cover"
                                        src="assets/classroom.svg"
                                        alt="ภาพประกอบห้องเรียน"
                                        width="640"
                                        height="400"
                                    />
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 326: ตรวจเงื่อนไขก่อนเลือกว่าจะทำส่วนนี้หรือไม่: if (!ค่าที่ตั้งชื่อไว้ว่า featuredRoom หรือ !ค่าที่ตั้งชื่อไว้ว่า featuredRoom ในช่อง image_path ): ? >
-->
                                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 327: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 328: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 329: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <span
                                        class="absolute bottom-3 left-3 rounded-lg bg-white/95 px-3 py-1 text-sm text-slate-600"
                                    >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 330: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ภาพประกอบห้องเรียน
-->
                                        ภาพประกอบห้องเรียน
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 331: จบข้อความหรือองค์ประกอบย่อย
-->
                                    </span>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 332: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 333: จบกล่องสำหรับจัดวางเนื้อหา
-->
                                </div>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 334: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                                <div class="mt-5 flex items-start justify-between gap-3">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 335: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                                    <div>
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 336: สร้างย่อหน้าข้อความ
-->
                                        <p class="text-sm text-slate-500">
                                            <!-- [KU-BEGINNER]
บรรทัดเดิม 337: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: พื้นที่สำหรับการเรียนรู้ของคุณ
-->
                                            พื้นที่สำหรับการเรียนรู้ของคุณ
                                            <!-- [KU-BEGINNER]
บรรทัดเดิม 338: จบย่อหน้าข้อความ
-->
                                        </p>
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 339: สร้างหัวข้อของส่วนเนื้อหา
-->
                                        <h2 class="mt-1 text-2xl font-bold text-brand-900">
                                            <!-- [KU-BEGINNER]
บรรทัดเดิม 340: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 341: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ห้อง ' . h(ค่าที่ตั้งชื่อไว้ว่า featuredRoom ในช่อง รหัสที่คนอ่านได้ )
บรรทัดเดิม 342: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'เริ่มต้นค้นหาห้องเรียน' ? >
-->
                                            ห้อง KH80-201                                            <!-- [KU-BEGINNER]
บรรทัดเดิม 343: จบหัวข้อของส่วนเนื้อหา
-->
                                        </h2>
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 344: สร้างย่อหน้าข้อความ
-->
                                        <p class="mt-2 text-base text-slate-600">
                                            <!-- [KU-BEGINNER]
บรรทัดเดิม 345: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? h(ค่าที่ตั้งชื่อไว้ว่า featuredRoom ในช่อง building ) .
บรรทัดเดิม 346: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ' · ' .
บรรทัดเดิม 347: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: (int) ค่าที่ตั้งชื่อไว้ว่า featuredRoom ในช่อง จำนวนคนสูงสุดของห้อง .
บรรทัดเดิม 348: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ' ที่นั่ง'
บรรทัดเดิม 349: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'เลือกอาคารและช่วงเวลาที่ต้องการ' ? ></p>
-->
                                            อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์ · 300 ที่นั่ง                                        </p>
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 350: จบกล่องสำหรับจัดวางเนื้อหา
-->
                                    </div>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 351: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 352: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 353: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <span
                                        class="grid size-12 shrink-0 place-items-center rounded-full bg-blue-50 text-brand-600"
                                    >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 354: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 355: จบข้อความหรือองค์ประกอบย่อย
-->
                                    </span>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 356: จบกล่องสำหรับจัดวางเนื้อหา
-->
                                </div>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 357: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 358: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 359: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 360: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="relative -mt-2 ml-auto flex w-fit max-w-full items-center gap-3 rounded-2xl border border-teal-100 bg-white px-5 py-4 shadow-lg shadow-teal-900/5 sm:-mr-4"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 361: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 362: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 363: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-11 shrink-0 place-items-center rounded-xl bg-teal-50 text-teal-700"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 364: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12l2 2 4-5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 365: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 366: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                                <div>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 367: สร้างข้อความที่เน้นให้เห็นชัด
-->
                                    <strong class="block text-base text-brand-900">
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 368: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: เลือกเวลา ส่งคำขอ ติดตามผล
-->
                                        เลือกเวลา ส่งคำขอ ติดตามผล
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 369: จบข้อความที่เน้นให้เห็นชัด
-->
                                    </strong>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 370: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                    <span class="text-sm text-slate-500">
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 371: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: จัดการได้ในบัญชีเดียว
-->
                                        จัดการได้ในบัญชีเดียว
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 372: จบข้อความหรือองค์ประกอบย่อย
-->
                                    </span>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 373: จบกล่องสำหรับจัดวางเนื้อหา
-->
                                </div>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 374: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 375: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 376: จบกล่องสำหรับจัดวางเนื้อหา
-->
                    </div>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 377: จบกลุ่มเนื้อหาที่เกี่ยวข้องกัน
-->
                </section>

                <!-- [KU-BEGINNER]
บรรทัดเดิม 379: สร้างกลุ่มเนื้อหาที่เกี่ยวข้องกัน
บรรทัดเดิม 380: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 381: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 382: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 383: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                <section
                    id="find-room"
                    class="mx-auto max-w-7xl scroll-mt-6 px-5 py-12 sm:px-8 sm:py-16"
                    aria-labelledby="search-heading"
                >
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 384: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                    <div class="mb-7 flex flex-wrap items-end justify-between gap-4">
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 385: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 386: สร้างย่อหน้าข้อความ
-->
                            <p class="mb-2 text-sm font-bold tracking-widest text-brand-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 387: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: FIND YOUR SPACE
-->
                                FIND YOUR SPACE
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 388: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 389: สร้างหัวข้อของส่วนเนื้อหา
บรรทัดเดิม 390: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 391: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 392: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <h2
                                id="search-heading"
                                class="text-3xl font-bold text-brand-900 sm:text-4xl"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 393: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: วันนี้ อยากใช้ห้องไหน?
-->
                                วันนี้ อยากใช้ห้องไหน?
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 394: จบหัวข้อของส่วนเนื้อหา
-->
                            </h2>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 395: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-3 text-base leading-relaxed text-slate-600 sm:text-lg">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 396: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: เลือกวันและเวลา เพื่อดูว่าห้องไหนว่างสำหรับคุณ
-->
                                เลือกวันและเวลา เพื่อดูว่าห้องไหนว่างสำหรับคุณ
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 397: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 398: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 399: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 400: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 401: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 402: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <a
                            class="landing-nav inline-flex min-h-12 items-center gap-2 text-base font-semibold"
                            href="login.php"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 403: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0ZM15 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/></svg>ดูแผนผังอาคาร →
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 404: จบลิงก์กดไปหน้าอื่น
-->
                        </a>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 405: จบกล่องสำหรับจัดวางเนื้อหา
-->
                    </div>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 406: สร้างแบบฟอร์มที่ใช้ส่งข้อมูล
บรรทัดเดิม 407: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 408: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 409: กำหนดวิธีส่งข้อมูลของฟอร์มว่าจะใช้ค้นหาหรือใช้บันทึกข้อมูล
บรรทัดเดิม 410: ตั้งค่า action ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 411: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 412: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                    <form
                        class="rounded-3xl border border-slate-200 bg-white p-5 shadow-card sm:p-7"
                        id="landing-search"
                        method="get"
                        action="index.php#find-room"
                        role="search"
                    >
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 413: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-[1.3fr_1fr_1fr]">
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 414: สร้างป้ายชื่อและพื้นที่กดของช่องข้อมูล
บรรทัดเดิม 415: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 416: ตั้งค่า for ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 417: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <label
                                class="landing-label"
                                for="home-search"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 418: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: ค้นหาชื่อห้องหรืออาคาร
-->
                                ค้นหาชื่อห้องหรืออาคาร
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 419: สร้างช่องกรอกหรือช่องเลือก
บรรทัดเดิม 420: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 421: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 422: กำหนดชนิดช่องหรือปุ่ม เช่นรับข้อความ วันที่ เวลา หรือเลือกหลายข้อ
บรรทัดเดิม 423: ตั้งชื่อช่องนี้ว่า q เพื่อให้ฝั่งรับข้อมูลรู้ว่าเป็น คำที่ใช้ค้นหา
บรรทัดเดิม 424: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 425: กำหนดขอบเขตหรือช่วงของค่าที่กรอกได้ ก่อนให้เซิร์ฟเวอร์ตรวจซ้ำ
บรรทัดเดิม 426: ตั้งค่า placeholder ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 427: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <input
                                    class="landing-input"
                                    id="home-search"
                                    type="search"
                                    name="q"
                                    value=""
                                    maxlength="150"
                                    placeholder="เช่น A101 หรือ อาคารเรียนรวม"
                                />
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 428: จบป้ายชื่อและพื้นที่กดของช่องข้อมูล
-->
                            </label>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 429: สร้างป้ายชื่อและพื้นที่กดของช่องข้อมูล
บรรทัดเดิม 430: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 431: ตั้งค่า for ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 432: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <label
                                class="landing-label"
                                for="home-building"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 433: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: อาคารเรียน
-->
                                อาคารเรียน
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 434: สร้างช่องเลือกจากรายการ
บรรทัดเดิม 435: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 436: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 437: ตั้งชื่อช่องนี้ว่า building_id เพื่อให้ฝั่งรับข้อมูลรู้ว่าเป็น รหัสอาคาร
บรรทัดเดิม 438: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <select
                                    class="landing-input"
                                    id="home-building"
                                    name="building_id"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 439: สร้างตัวเลือกหนึ่งรายการ
-->
                                    <option value="0">ทุกอาคาร</option>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 440: ทำขั้นตอนเดิมซ้ำกับรายการหรือช่วงค่าที่กำหนด เช่นแต่ละห้อง แต่ละวัน หรือแต่ละตัวเลือก
-->
                                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 441: สร้างตัวเลือกหนึ่งรายการ
บรรทัดเดิม 442: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 443: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 444: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <option
                                        value="1"
                                                                            >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 445: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        อาคารศูนย์เรียนรวม 2                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 446: จบตัวเลือกหนึ่งรายการ
-->
                                    </option>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 447: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 441: สร้างตัวเลือกหนึ่งรายการ
บรรทัดเดิม 442: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 443: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 444: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <option
                                        value="2"
                                                                            >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 445: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        อาคารศูนย์เรียนรวม 3                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 446: จบตัวเลือกหนึ่งรายการ
-->
                                    </option>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 447: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 441: สร้างตัวเลือกหนึ่งรายการ
บรรทัดเดิม 442: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 443: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 444: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <option
                                        value="3"
                                                                            >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 445: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        อาคารศูนย์เรียนรวม 4                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 446: จบตัวเลือกหนึ่งรายการ
-->
                                    </option>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 447: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 441: สร้างตัวเลือกหนึ่งรายการ
บรรทัดเดิม 442: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 443: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 444: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <option
                                        value="4"
                                                                            >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 445: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 446: จบตัวเลือกหนึ่งรายการ
-->
                                    </option>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 447: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 441: สร้างตัวเลือกหนึ่งรายการ
บรรทัดเดิม 442: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 443: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 444: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <option
                                        value="5"
                                                                            >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 445: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        อาคาร SC14                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 446: จบตัวเลือกหนึ่งรายการ
-->
                                    </option>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 447: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 441: สร้างตัวเลือกหนึ่งรายการ
บรรทัดเดิม 442: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 443: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 444: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <option
                                        value="6"
                                                                            >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 445: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        อาคาร SC9                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 446: จบตัวเลือกหนึ่งรายการ
-->
                                    </option>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 447: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 448: จบช่องเลือกจากรายการ
-->
                                </select>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 449: จบป้ายชื่อและพื้นที่กดของช่องข้อมูล
-->
                            </label>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 450: สร้างป้ายชื่อและพื้นที่กดของช่องข้อมูล
บรรทัดเดิม 451: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 452: ตั้งค่า for ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 453: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <label
                                class="landing-label"
                                for="home-date"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 454: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: วันที่ใช้งาน
-->
                                วันที่ใช้งาน
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 455: สร้างช่องกรอกหรือช่องเลือก
บรรทัดเดิม 456: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 457: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 458: กำหนดชนิดช่องหรือปุ่ม เช่นรับข้อความ วันที่ เวลา หรือเลือกหลายข้อ
บรรทัดเดิม 459: ตั้งชื่อช่องนี้ว่า date เพื่อให้ฝั่งรับข้อมูลรู้ว่าเป็น วันที่ใช้งาน
บรรทัดเดิม 460: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 461: บังคับให้กรอกช่องนี้ก่อนส่งฟอร์ม
บรรทัดเดิม 462: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <input
                                    class="landing-input"
                                    id="home-date"
                                    type="date"
                                    name="date"
                                    value="2026-11-05"
                                    required
                                />
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 463: จบป้ายชื่อและพื้นที่กดของช่องข้อมูล
-->
                            </label>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 464: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 465: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 466: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 467: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <div
                            class="mt-5 grid items-end gap-5 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_1.3fr]"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 468: สร้างป้ายชื่อและพื้นที่กดของช่องข้อมูล
บรรทัดเดิม 469: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 470: ตั้งค่า for ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 471: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <label
                                class="landing-label"
                                for="home-start"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 472: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: เวลาเริ่มต้น
-->
                                เวลาเริ่มต้น
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 473: สร้างช่องกรอกหรือช่องเลือก
บรรทัดเดิม 474: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 475: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 476: กำหนดชนิดช่องหรือปุ่ม เช่นรับข้อความ วันที่ เวลา หรือเลือกหลายข้อ
บรรทัดเดิม 477: ตั้งชื่อช่องนี้ว่า start เพื่อให้ฝั่งรับข้อมูลรู้ว่าเป็น เวลาเริ่ม
บรรทัดเดิม 478: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 479: บังคับให้กรอกช่องนี้ก่อนส่งฟอร์ม
บรรทัดเดิม 480: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <input
                                    class="landing-input"
                                    id="home-start"
                                    type="time"
                                    name="start"
                                    value="09:00"
                                    required
                                />
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 481: จบป้ายชื่อและพื้นที่กดของช่องข้อมูล
-->
                            </label>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 482: สร้างป้ายชื่อและพื้นที่กดของช่องข้อมูล
บรรทัดเดิม 483: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 484: ตั้งค่า for ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 485: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <label
                                class="landing-label"
                                for="home-end"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 486: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: เวลาสิ้นสุด
-->
                                เวลาสิ้นสุด
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 487: สร้างช่องกรอกหรือช่องเลือก
บรรทัดเดิม 488: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 489: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 490: กำหนดชนิดช่องหรือปุ่ม เช่นรับข้อความ วันที่ เวลา หรือเลือกหลายข้อ
บรรทัดเดิม 491: ตั้งชื่อช่องนี้ว่า end เพื่อให้ฝั่งรับข้อมูลรู้ว่าเป็น เวลาสิ้นสุด
บรรทัดเดิม 492: กำหนดค่าที่ช่องนี้แสดงหรือค่าที่จะส่งเมื่อเลือก
บรรทัดเดิม 493: บังคับให้กรอกช่องนี้ก่อนส่งฟอร์ม
บรรทัดเดิม 494: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <input
                                    class="landing-input"
                                    id="home-end"
                                    type="time"
                                    name="end"
                                    value="11:00"
                                    required
                                />
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 495: จบป้ายชื่อและพื้นที่กดของช่องข้อมูล
-->
                            </label>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 496: สร้างปุ่มกด
บรรทัดเดิม 497: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 498: กำหนดชนิดช่องหรือปุ่ม เช่นรับข้อความ วันที่ เวลา หรือเลือกหลายข้อ
บรรทัดเดิม 499: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <button
                                class="landing-button min-h-14 w-full bg-sky-200 text-sky-950 hover:bg-sky-300 sm:col-span-2 lg:col-span-1"
                                type="submit"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 500: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"/></svg>ค้นหาห้องเรียน
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 501: จบปุ่มกด
-->
                            </button>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 502: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 503: สร้างย่อหน้าข้อความ
บรรทัดเดิม 504: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 505: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <p
                            class="mt-5 flex items-start gap-2 text-sm leading-relaxed text-slate-500"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 506: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12l2 2 4-5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"/></svg>                            <!-- [KU-BEGINNER]
บรรทัดเดิม 507: สร้างข้อความหรือองค์ประกอบย่อย
-->
                            <span>ค้นหาได้ก่อนเข้าสู่ระบบ และเข้าสู่ระบบเมื่อพร้อมส่งคำขอจอง</span>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 508: จบย่อหน้าข้อความ
-->
                        </p>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 509: จบแบบฟอร์มที่ใช้ส่งข้อมูล
-->
                    </form>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 510: ทำขั้นตอนเดิมซ้ำกับรายการหรือช่วงค่าที่กำหนด เช่นแต่ละห้อง แต่ละวัน หรือแต่ละตัวเลือก
บรรทัดเดิม 511: ตรวจเงื่อนไขก่อนเลือกว่าจะทำส่วนนี้หรือไม่: if (ค่าที่ตั้งชื่อไว้ว่า message): ? >
-->
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 520: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                    <div class="mt-9 mb-6 flex flex-wrap items-center justify-between gap-4">
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 521: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 522: สร้างหัวข้อย่อย
-->
                            <h3 class="text-xl font-bold text-slate-800 sm:text-2xl">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 523: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เลือกห้องเรียนที่เหมาะกับคุณ                                <!-- [KU-BEGINNER]
บรรทัดเดิม 524: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="ml-2 text-base font-normal text-slate-500">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 525: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    148 ห้อง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 526: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 527: จบหัวข้อย่อย
-->
                            </h3>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 528: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 529: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                5 พ.ย. 2569 · 09:00–11:00 น.
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 530: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="font-medium text-teal-700">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 531: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: · ว่าง < ?= $filteredAvailable ? > ห้อง
-->
                                    · ว่าง 148 ห้อง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 532: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 533: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 534: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 535: ตรวจเงื่อนไขก่อนเลือกว่าจะทำส่วนนี้หรือไม่: if (ค่าที่ตั้งชื่อไว้ว่า hasFilters): ? >
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 543: จบกล่องสำหรับจัดวางเนื้อหา
-->
                    </div>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 544: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 545: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 546: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 547: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 548: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                    <div
                        class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3"
                        id="landing-results"
                        aria-live="polite"
                    >
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 549: ทำขั้นตอนเดิมซ้ำกับรายการหรือช่วงค่าที่กำหนด เช่นแต่ละห้อง แต่ละวัน หรือแต่ละตัวเลือก
บรรทัดเดิม 550: เตรียมหรือเก็บ ค่าที่ตั้งชื่อไว้ว่า isFree ไว้ใช้ในขั้นตอนต่อไป
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="KH80-201"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                KH80-201                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="KH80-202"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                KH80-202                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="KH80-203"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                KH80-203                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="KH80-204"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                KH80-204                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="KH80-205"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                KH80-205                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="KH80-206"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                KH80-206                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="KH80-207"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                KH80-207                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="KH80-208"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                KH80-208                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร 80 ปี มหาวิทยาลัยเกษตรศาสตร์                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-201"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-201                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    200 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-202"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-202                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    200 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-203"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-203                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-204"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-204                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-205"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-205                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-206"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-206                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-301"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-301                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-302"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-302                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-303"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-303                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH2-304"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH2-304                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 2                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-201"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-201                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-202"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-202                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-203"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-203                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-204"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-204                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-205"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-205                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-206"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-206                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-207"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-207                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-208"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-208                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-209"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-209                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-210"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-210                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-211"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-211                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    200 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-301"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-301                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    350 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-302"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-302                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    350 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-303"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-303                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    150 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-304"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-304                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    150 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-305"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-305                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    150 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-306"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-306                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH3-307"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH3-307                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 3                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-101"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-101                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-102"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-102                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-103"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-103                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-104"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-104                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-201"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-201                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    200 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-202"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-202                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    200 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-301"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-301                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-302"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-302                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-303"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-303                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-304"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-304                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    300 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ห้องประชุม (Auditorium)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-305"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-305                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    200 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-306"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-306                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    200 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-307"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-307                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-308"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-308                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-502"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-502                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    100 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-503"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-503                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    120 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-505"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-505                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-601"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-601                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-602"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-602                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-603"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-603                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-604"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-604                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-605"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-605                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-606"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-606                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-607"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-607                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-608"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-608                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-609"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-609                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-610"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-610                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="LH4-611"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                LH4-611                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคารศูนย์เรียนรวม 4                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-104"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-104                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-105"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-105                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-106"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-106                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-107"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-107                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-113"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-113                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-114"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-114                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 1 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-203"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-203                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-209"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-209                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-213"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-213                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-218"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-218                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-221"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-221                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-226"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-226                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-227"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-227                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-303"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-303                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-309"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-309                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-310"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-310                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-313"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-313                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-316"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-316                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-317"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-317                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-318"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-318                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-323"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-323                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-405"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-405                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-406"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-406                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-407"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-407                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-408"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-408                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-410"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-410                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-412"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-412                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-413/1"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-413/1                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-413/2"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-413/2                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-417"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-417                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-417B"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-417B                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-422"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-422                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-423"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-423                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-424"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-424                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-425"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-425                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-427"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-427                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-428"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-428                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-429"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-429                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-430"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-430                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-506"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-506                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-507"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-507                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-508"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-508                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-509"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-509                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-512"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-512                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-513"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-513                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-518"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-518                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-519"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-519                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-520"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-520                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-521"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-521                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-524"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-524                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-525"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-525                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 5 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-603"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-603                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-604"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-604                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-605"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-605                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-606"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-606                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-608"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-608                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-611"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-611                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-612"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-612                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-613"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-613                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-614"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-614                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-617"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-617                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC14-618"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC14-618                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC14                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    50 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 6 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-202"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-202                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-209"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-209                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-220"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-220                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-233"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-233                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-237"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-237                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-238"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-238                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-240"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-240                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-241"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-241                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 2 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom)                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-301"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-301                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-302"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-302                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-308"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-308                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-313"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-313                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-320"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-320                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-330"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-330                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-333"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-333                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 3 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-401"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-401                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-402"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-402                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-406"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-406                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-407"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-407                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-408"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-408                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-410"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-410                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 551: สร้างส่วนหน้าจอชนิด article
บรรทัดเดิม 552: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 553: ตั้งค่า data-home-room ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 554: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <article
                            class="flex min-w-0 flex-col rounded-3xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-lg hover:shadow-blue-900/5"
                            data-home-room="SC9-411"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 555: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div class="flex items-start justify-between gap-3">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 556: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 557: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 558: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-brand-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 559: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M8 9h1m6 0h1m-8 3h1m6 0h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 560: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 561: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 562: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 563: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'bg-teal-50 text-teal-800'
บรรทัดเดิม 564: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'bg-amber-50 text-amber-900' ? >"
บรรทัดเดิม 565: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="rounded-full px-3 py-2 text-sm font-semibold bg-teal-50 text-teal-800"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 566: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 567: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ว่าง พร้อมจอง'
บรรทัดเดิม 568: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(statusLabel(ข้อมูลห้อง ในช่อง availability )) ? >
-->
                                    ว่าง พร้อมจอง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 569: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 570: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 571: สร้างส่วนหน้าจอชนิด h4
-->
                            <h4 class="mt-5 text-3xl font-bold tracking-tight text-brand-900">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 572: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                SC9-411                                <!-- [KU-BEGINNER]
บรรทัดเดิม 573: จบส่วนหน้าจอชนิด h4
-->
                            </h4>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 574: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-2 text-base leading-relaxed text-slate-600">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 575: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง building
บรรทัดเดิม 576: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></p>
-->
                                อาคาร SC9                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 577: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 578: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 579: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <div
                                class="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-base text-slate-600"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 580: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="inline-flex items-center gap-2">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 581: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-4M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0m4-4a4 4 0 0 1 0 8"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 582: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    60 ที่นั่ง
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 583: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 584: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span>
                                    ชั้น 4 ·
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 585: อ่าน room_types ที่เป็น กล่องที่เก็บข้อมูลหลายค่า แล้วประกอบข้อความหลายประเภทของห้องเดียวสำหรับแสดงบน UI
บรรทัดเดิม 586: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? ></span>
-->
                                    ห้องเรียน (Classroom) / ปฏิบัติการ                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 587: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 588: สร้างย่อหน้าข้อความ
บรรทัดเดิม 589: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 590: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <p
                                class="mt-4 mb-6 border-t border-slate-100 pt-4 text-sm leading-relaxed text-slate-500"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 591: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
บรรทัดเดิม 592: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'ช่วงเวลานี้ถูกกันไว้ชั่วคราวระหว่างรออนุมัติ'
บรรทัดเดิม 593: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : h(
บรรทัดเดิม 594: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ข้อมูลห้อง ในช่อง equipment ?: 'ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง'
บรรทัดเดิม 595: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >
-->
                                ดูรายละเอียดอุปกรณ์ในหน้าข้อมูลห้อง                                <!-- [KU-BEGINNER]
บรรทัดเดิม 596: จบย่อหน้าข้อความ
-->
                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 597: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 598: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 599: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 600: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า destination('room-details', ['id' => ข้อมูลห้อง ในช่อง รหัสรายการ , ...ค่าที่ตั้งชื่อไว้ว่า filters])
บรรทัดเดิม 601: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ) ? >"
บรรทัดเดิม 602: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="landing-button mt-auto w-full border border-blue-200 text-brand-700 hover:bg-blue-50"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 603: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                เข้าสู่ระบบเพื่อดูห้อง →
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 604: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 605: จบส่วนหน้าจอชนิด article
-->
                        </article>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 606: เริ่มส่วนคำสั่งที่เซิร์ฟเวอร์จะประมวลผลก่อนส่งหน้าให้ผู้ใช้
บรรทัดเดิม 607: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 608: ตรวจเงื่อนไขก่อนเลือกว่าจะทำส่วนนี้หรือไม่: if (!ค่าที่ตั้งชื่อไว้ว่า filteredRooms): ? >
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 631: จบกล่องสำหรับจัดวางเนื้อหา
-->
                    </div>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 632: จบกลุ่มเนื้อหาที่เกี่ยวข้องกัน
-->
                </section>

                <!-- [KU-BEGINNER]
บรรทัดเดิม 634: สร้างกลุ่มเนื้อหาที่เกี่ยวข้องกัน
บรรทัดเดิม 635: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 636: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 637: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                <section
                    class="border-y border-slate-200/70 bg-white"
                    aria-labelledby="shortcuts-heading"
                >
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 638: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                    <div class="mx-auto max-w-7xl px-5 py-10 sm:px-8">
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 639: สร้างหัวข้อของส่วนเนื้อหา
บรรทัดเดิม 640: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 641: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 642: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <h2
                            class="mb-6 text-2xl font-bold text-brand-900"
                            id="shortcuts-heading"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 643: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: จัดการเรื่องห้องเรียนได้ครบ
-->
                            จัดการเรื่องห้องเรียนได้ครบ
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 644: จบหัวข้อของส่วนเนื้อหา
-->
                        </h2>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 645: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div class="grid gap-4 lg:grid-cols-3">
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 646: ทำขั้นตอนเดิมซ้ำกับรายการหรือช่วงค่าที่กำหนด เช่นแต่ละห้อง แต่ละวัน หรือแต่ละตัวเลือก
บรรทัดเดิม 647: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ค่าที่ตั้งชื่อไว้ว่า shortcuts
บรรทัดเดิม 648: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: as [ค่าที่ตั้งชื่อไว้ว่า route, ค่าที่ตั้งชื่อไว้ว่า symbol, ค่าที่ตั้งชื่อไว้ว่า label, ค่าที่ตั้งชื่อไว้ว่า detail, ค่าที่ตั้งชื่อไว้ว่า color]
บรรทัดเดิม 649: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ): ? >
-->
                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 650: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 651: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 652: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 653: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="group flex items-center gap-4 rounded-2xl border border-slate-200 p-5 transition-colors hover:border-blue-300 hover:bg-blue-50/40"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 654: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 655: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 656: จับคู่ชื่อ violet กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 657: จับคู่ชื่อ blue กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 658: จับคู่ชื่อ teal กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 659: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ][ค่าที่ตั้งชื่อไว้ว่า color] ? >"
บรรทัดเดิม 660: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-14 shrink-0 place-items-center rounded-2xl bg-violet-50 text-violet-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 661: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h9l4 4v14H6zM14 3v5h5M9 12h7m-7 4h5"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 662: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 663: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="min-w-0">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 664: สร้างข้อความที่เน้นให้เห็นชัด
-->
                                    <strong class="block text-lg font-semibold text-slate-800">
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 665: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        รายการจองของฉัน                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 666: จบข้อความที่เน้นให้เห็นชัด
-->
                                    </strong>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 667: สร้างข้อความประกอบขนาดเล็ก
บรรทัดเดิม 668: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 669: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <small
                                        class="mt-1 block text-sm leading-relaxed text-slate-500"
                                    >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 670: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        ดูคำขอและติดตามผลอนุมัติ                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 671: จบข้อความประกอบขนาดเล็ก
-->
                                    </small>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 672: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 673: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 674: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 675: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 676: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="ml-auto text-brand-600 transition-transform group-hover:translate-x-1"
                                    aria-hidden="true"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 677: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: →
-->
                                    →
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 678: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 679: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 680: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 650: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 651: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 652: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 653: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="group flex items-center gap-4 rounded-2xl border border-slate-200 p-5 transition-colors hover:border-blue-300 hover:bg-blue-50/40"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 654: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 655: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 656: จับคู่ชื่อ violet กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 657: จับคู่ชื่อ blue กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 658: จับคู่ชื่อ teal กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 659: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ][ค่าที่ตั้งชื่อไว้ว่า color] ? >"
บรรทัดเดิม 660: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-14 shrink-0 place-items-center rounded-2xl bg-blue-50 text-blue-600"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 661: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v16H4zM7 3v4m10-4v4M4 10h16m-12 4h1m6 0h1m-8 3h1"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 662: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 663: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="min-w-0">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 664: สร้างข้อความที่เน้นให้เห็นชัด
-->
                                    <strong class="block text-lg font-semibold text-slate-800">
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 665: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        ตารางใช้งานห้อง                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 666: จบข้อความที่เน้นให้เห็นชัด
-->
                                    </strong>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 667: สร้างข้อความประกอบขนาดเล็ก
บรรทัดเดิม 668: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 669: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <small
                                        class="mt-1 block text-sm leading-relaxed text-slate-500"
                                    >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 670: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        วางแผนก่อนส่งคำขอจอง                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 671: จบข้อความประกอบขนาดเล็ก
-->
                                    </small>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 672: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 673: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 674: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 675: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 676: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="ml-auto text-brand-600 transition-transform group-hover:translate-x-1"
                                    aria-hidden="true"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 677: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: →
-->
                                    →
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 678: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 679: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 680: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 650: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 651: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 652: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 653: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <a
                                class="group flex items-center gap-4 rounded-2xl border border-slate-200 p-5 transition-colors hover:border-blue-300 hover:bg-blue-50/40"
                                href="login.php"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 654: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 655: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 656: จับคู่ชื่อ violet กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 657: จับคู่ชื่อ blue กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 658: จับคู่ชื่อ teal กับค่าหรือการทำงานที่อยู่ด้านขวา เพื่อค้นมาใช้ภายหลัง
บรรทัดเดิม 659: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ][ค่าที่ตั้งชื่อไว้ว่า color] ? >"
บรรทัดเดิม 660: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="grid size-14 shrink-0 place-items-center rounded-2xl bg-teal-50 text-teal-700"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 661: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 6a5 5 0 0 0-6 6L2 18l4 4 6-6a5 5 0 0 0 6-6l-4 3-3-3z"/></svg>                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 662: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 663: สร้างข้อความหรือองค์ประกอบย่อย
-->
                                <span class="min-w-0">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 664: สร้างข้อความที่เน้นให้เห็นชัด
-->
                                    <strong class="block text-lg font-semibold text-slate-800">
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 665: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        แจ้งซ่อมอุปกรณ์                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 666: จบข้อความที่เน้นให้เห็นชัด
-->
                                    </strong>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 667: สร้างข้อความประกอบขนาดเล็ก
บรรทัดเดิม 668: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 669: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                    <small
                                        class="mt-1 block text-sm leading-relaxed text-slate-500"
                                    >
                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 670: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                        พบปัญหา? แจ้งให้เราช่วยดูแล                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 671: จบข้อความประกอบขนาดเล็ก
-->
                                    </small>
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 672: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 673: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 674: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 675: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 676: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                                <span
                                    class="ml-auto text-brand-600 transition-transform group-hover:translate-x-1"
                                    aria-hidden="true"
                                >
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 677: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: →
-->
                                    →
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 678: จบข้อความหรือองค์ประกอบย่อย
-->
                                </span>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 679: จบลิงก์กดไปหน้าอื่น
-->
                            </a>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 680: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                        <!-- [KU-BEGINNER]
บรรทัดเดิม 681: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 682: จบกล่องสำหรับจัดวางเนื้อหา
-->
                    </div>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 683: จบกลุ่มเนื้อหาที่เกี่ยวข้องกัน
-->
                </section>
                <!-- [KU-BEGINNER]
บรรทัดเดิม 684: สร้างกลุ่มเนื้อหาที่เกี่ยวข้องกัน
บรรทัดเดิม 685: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 686: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 687: บอกความหมายของส่วนนี้ให้เครื่องมืออ่านหน้าจอและผู้ใช้ที่ใช้แป้นพิมพ์เข้าใจ
บรรทัดเดิม 688: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                <section
                    id="how-it-works"
                    class="mx-auto max-w-7xl scroll-mt-8 px-5 py-14 sm:px-8 sm:py-20"
                    aria-labelledby="guide-heading"
                >
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 689: สร้างย่อหน้าข้อความ
-->
                    <p class="text-sm font-bold tracking-widest text-brand-600">
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 690: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: SIMPLE FROM THE START
-->
                        SIMPLE FROM THE START
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 691: จบย่อหน้าข้อความ
-->
                    </p>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 692: สร้างหัวข้อของส่วนเนื้อหา
บรรทัดเดิม 693: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 694: ตั้งค่า id ให้ส่วนหน้าจอนี้ เพื่อกำหนดการแสดงหรือพฤติกรรมตามค่าที่ระบุ
บรรทัดเดิม 695: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                    <h2
                        class="mt-3 text-3xl font-bold text-brand-900 sm:text-4xl"
                        id="guide-heading"
                    >
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 696: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: จองห้องง่าย ๆ ใน 3 ขั้นตอน
-->
                        จองห้องง่าย ๆ ใน 3 ขั้นตอน
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 697: จบหัวข้อของส่วนเนื้อหา
-->
                    </h2>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 698: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                    <div class="mt-9 grid gap-8 lg:grid-cols-3">
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 699: ทำขั้นตอนเดิมซ้ำกับรายการหรือช่วงค่าที่กำหนด เช่นแต่ละห้อง แต่ละวัน หรือแต่ละตัวเลือก
บรรทัดเดิม 700: เริ่มกลุ่มคำสั่งหรือกลุ่มข้อมูลที่มีหลายส่วน
บรรทัดเดิม 701: เริ่มกลุ่มคำสั่งหรือกลุ่มข้อมูลที่มีหลายส่วน
บรรทัดเดิม 702: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: '01',
บรรทัดเดิม 703: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: 'ค้นหาห้องที่ใช่',
บรรทัดเดิม 704: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: 'เลือกอาคาร วันที่ และช่วงเวลา แล้วดูห้องที่ว่างสำหรับคุณ'
บรรทัดเดิม 705: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 706: เริ่มกลุ่มคำสั่งหรือกลุ่มข้อมูลที่มีหลายส่วน
บรรทัดเดิม 707: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: '02',
บรรทัดเดิม 708: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: 'ส่งคำขอจอง',
บรรทัดเดิม 709: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: 'เข้าสู่ระบบ ระบุวิชาและกิจกรรม คำขอจะอยู่ในสถานะรออนุมัติ'
บรรทัดเดิม 710: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 711: เริ่มกลุ่มคำสั่งหรือกลุ่มข้อมูลที่มีหลายส่วน
บรรทัดเดิม 712: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: '03',
บรรทัดเดิม 713: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: 'ติดตามผลได้เลย',
บรรทัดเดิม 714: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: 'ตรวจสอบผลในรายการจองของฉัน เมื่ออนุมัติแล้วจึงยืนยันการใช้ห้อง'
บรรทัดเดิม 715: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 716: จบกลุ่มคำสั่ง กลุ่มข้อมูล หรือการเรียกงานที่เปิดไว้ก่อนหน้านี้
บรรทัดเดิม 717: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: as [ค่าที่ตั้งชื่อไว้ว่า number, ค่าที่ตั้งชื่อไว้ว่า heading, ค่าที่ตั้งชื่อไว้ว่า description]
บรรทัดเดิม 718: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ): ? >
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 719: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div class="flex items-start gap-4">
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 720: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 721: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 722: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <span
                                class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-100 text-lg font-bold text-brand-700"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 723: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                01                                <!-- [KU-BEGINNER]
บรรทัดเดิม 724: จบข้อความหรือองค์ประกอบย่อย
-->
                            </span>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 725: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 726: สร้างหัวข้อย่อย
-->
                                <h3 class="text-xl font-bold text-slate-800">ค้นหาห้องที่ใช่</h3>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 727: สร้างย่อหน้าข้อความ
-->
                                <p class="mt-3 text-base leading-relaxed text-slate-600">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 728: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    เลือกอาคาร วันที่ และช่วงเวลา แล้วดูห้องที่ว่างสำหรับคุณ                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 729: จบย่อหน้าข้อความ
-->
                                </p>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 730: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 731: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 732: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 719: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div class="flex items-start gap-4">
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 720: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 721: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 722: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <span
                                class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-100 text-lg font-bold text-brand-700"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 723: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                02                                <!-- [KU-BEGINNER]
บรรทัดเดิม 724: จบข้อความหรือองค์ประกอบย่อย
-->
                            </span>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 725: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 726: สร้างหัวข้อย่อย
-->
                                <h3 class="text-xl font-bold text-slate-800">ส่งคำขอจอง</h3>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 727: สร้างย่อหน้าข้อความ
-->
                                <p class="mt-3 text-base leading-relaxed text-slate-600">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 728: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    เข้าสู่ระบบ ระบุวิชาและกิจกรรม คำขอจะอยู่ในสถานะรออนุมัติ                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 729: จบย่อหน้าข้อความ
-->
                                </p>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 730: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 731: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 732: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 719: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div class="flex items-start gap-4">
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 720: สร้างข้อความหรือองค์ประกอบย่อย
บรรทัดเดิม 721: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 722: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                            <span
                                class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-100 text-lg font-bold text-brand-700"
                            >
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 723: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                03                                <!-- [KU-BEGINNER]
บรรทัดเดิม 724: จบข้อความหรือองค์ประกอบย่อย
-->
                            </span>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 725: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                            <div>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 726: สร้างหัวข้อย่อย
-->
                                <h3 class="text-xl font-bold text-slate-800">ติดตามผลได้เลย</h3>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 727: สร้างย่อหน้าข้อความ
-->
                                <p class="mt-3 text-base leading-relaxed text-slate-600">
                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 728: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                                    ตรวจสอบผลในรายการจองของฉัน เมื่ออนุมัติแล้วจึงยืนยันการใช้ห้อง                                    <!-- [KU-BEGINNER]
บรรทัดเดิม 729: จบย่อหน้าข้อความ
-->
                                </p>
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 730: จบกล่องสำหรับจัดวางเนื้อหา
-->
                            </div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 731: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 732: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                                                <!-- [KU-BEGINNER]
บรรทัดเดิม 733: จบกล่องสำหรับจัดวางเนื้อหา
-->
                    </div>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 734: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 735: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 736: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                    <div
                        class="mt-12 flex flex-col items-start justify-between gap-6 rounded-3xl border border-sky-200 bg-sky-100 p-7 text-brand-900 sm:p-9 lg:flex-row lg:items-center"
                    >
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 737: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
                        <div>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 738: สร้างหัวข้อย่อย
-->
                            <h3 class="text-2xl font-bold sm:text-3xl">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 739: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'พร้อมสำหรับการเรียนรู้ครั้งถัดไป?'
บรรทัดเดิม 740: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'พื้นที่พร้อมแล้ว คุณพร้อมหรือยัง?' ? ></h3>
-->
                                พื้นที่พร้อมแล้ว คุณพร้อมหรือยัง?                            </h3>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 741: สร้างย่อหน้าข้อความ
-->
                            <p class="mt-3 text-base leading-relaxed text-sky-800">
                                <!-- [KU-BEGINNER]
บรรทัดเดิม 742: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: ? 'เริ่มต้นจากห้องเรียนที่เหมาะกับกิจกรรมของคุณ'
บรรทัดเดิม 743: ส่วนต่อของขั้นตอนนี้ ใช้ค่าหรือเงื่อนไขร่วมกับบรรทัดก่อนหน้า: : 'สมัครสมาชิกเพื่อส่งคำขอจองและติดตามสถานะของคุณ' ? ></p>
-->
                                สมัครสมาชิกเพื่อส่งคำขอจองและติดตามสถานะของคุณ                            </p>
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 744: จบกล่องสำหรับจัดวางเนื้อหา
-->
                        </div>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 745: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 746: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 747: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 748: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                        <a
                            class="landing-button shrink-0 bg-white text-brand-900 hover:bg-blue-50"
                            href="register.php"
                        >
                            <!-- [KU-BEGINNER]
บรรทัดเดิม 749: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                            สมัครสมาชิก เริ่มใช้งาน →                            <!-- [KU-BEGINNER]
บรรทัดเดิม 750: จบลิงก์กดไปหน้าอื่น
-->
                        </a>
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 751: จบกล่องสำหรับจัดวางเนื้อหา
-->
                    </div>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 752: จบกลุ่มเนื้อหาที่เกี่ยวข้องกัน
-->
                </section>
                <!-- [KU-BEGINNER]
บรรทัดเดิม 753: จบพื้นที่เนื้อหาหลัก
-->
            </main>
            <!-- [KU-BEGINNER]
บรรทัดเดิม 754: สร้างส่วนท้ายหน้า
-->
            <footer class="border-t border-slate-200 bg-white">
                <!-- [KU-BEGINNER]
บรรทัดเดิม 755: สร้างกล่องสำหรับจัดวางเนื้อหา
บรรทัดเดิม 756: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 757: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                <div
                    class="landing-footer-row mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-1 px-5 py-3 text-sm leading-relaxed text-slate-500 sm:px-8"
                >
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 758: โหลดคำสั่งที่ใช้ร่วมกันจากอีกไฟล์ โดยอ้างโฟลเดอร์ของไฟล์นี้เป็นหลัก
-->
                    <!-- [KU-BEGINNER]
หน้าที่ของไฟล์: footer ส่วนกลางของมหาวิทยาลัยและลิงก์เครดิตผู้จัดทำ ใช้ร่วมหน้าต้อนรับ หน้า auth และระบบภายใน เพื่อให้ข้อความ/ลิงก์สอดคล้องกันโดยไม่ใส่โลโก้ขนาดใหญ่ซ้ำทุกหน้า
วิธีอ่าน: คอมเมนต์เป็นคำอธิบายให้คนอ่าน เครื่องจะไม่ทำตามข้อความในคอมเมนต์
คำว่า บรรทัดเดิม หมายถึงตำแหน่งก่อนเพิ่มคำอธิบาย ชื่อภาษาอังกฤษยังคงไว้ให้เปิดเทียบคำสั่งได้
-->
<!-- Compact shared footer for every PHP screen. -->
<!-- [KU-BEGINNER]
บรรทัดเดิม 2: สร้างกล่องสำหรับจัดวางเนื้อหา
-->
<div class="university-signature">
    <!-- [KU-BEGINNER]
บรรทัดเดิม 3: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 4: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 5: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 6: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
    <a
        class="university-footer-name"
        href="index.php"
    >
        <!-- [KU-BEGINNER]
บรรทัดเดิม 7: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: KU Room · Classroom Booking
-->
        KU Room · Classroom Booking
        <!-- [KU-BEGINNER]
บรรทัดเดิม 8: จบลิงก์กดไปหน้าอื่น
-->
    </a>
    <!-- [KU-BEGINNER]
บรรทัดเดิม 9: สร้างข้อความหรือองค์ประกอบย่อย
-->
    <span class="university-footer-campus">มหาวิทยาลัยเกษตรศาสตร์ · วิทยาเขตกำแพงแสน</span>
    <!-- [KU-BEGINNER]
บรรทัดเดิม 10: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 11: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 12: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 13: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
    <a
        class="university-footer-credits"
        href="credits.php"
    >
        <!-- [KU-BEGINNER]
บรรทัดเดิม 14: สร้างข้อความหรือองค์ประกอบย่อย
-->
        <span>ผู้จัดทำ</span>
        <!-- [KU-BEGINNER]
บรรทัดเดิม 15: สร้างข้อความหรือองค์ประกอบย่อย
-->
        <span class="university-footer-author-names">
            <!-- [KU-BEGINNER]
บรรทัดเดิม 16: ทำขั้นตอนเดิมซ้ำกับรายการหรือช่วงค่าที่กำหนด เช่นแต่ละห้อง แต่ละวัน หรือแต่ละตัวเลือก
-->
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 17: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 18: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
            วิลาวัณย์ น้อยวิไล            <!-- [KU-BEGINNER]
บรรทัดเดิม 19: สร้างส่วนหน้าจอชนิด sup
-->
            <sup>1</sup>
            <!-- [KU-BEGINNER]
บรรทัดเดิม 20: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 17: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
             ·             <!-- [KU-BEGINNER]
บรรทัดเดิม 18: แสดงค่าที่ประมวลผลแล้วตรงตำแหน่งนี้ เช่นชื่อ ข้อมูลเดิมในช่อง หรือข้อความสถานะ
-->
            ธนารีย์ ไกรวาส            <!-- [KU-BEGINNER]
บรรทัดเดิม 19: สร้างส่วนหน้าจอชนิด sup
-->
            <sup>2</sup>
            <!-- [KU-BEGINNER]
บรรทัดเดิม 20: จบขอบเขตเงื่อนไขหรือการทำซ้ำที่เปิดไว้ก่อนหน้าในแม่แบบหน้าจอ
-->
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 21: จบข้อความหรือองค์ประกอบย่อย
-->
        </span>
        <!-- [KU-BEGINNER]
บรรทัดเดิม 22: จบลิงก์กดไปหน้าอื่น
-->
    </a>
    <!-- [KU-BEGINNER]
บรรทัดเดิม 23: จบกล่องสำหรับจัดวางเนื้อหา
--></div>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 759: สร้างลิงก์กดไปหน้าอื่น
บรรทัดเดิม 760: เลือกชุดสี ขนาด ระยะห่าง และการจัดวางที่เตรียมไว้ให้ส่วนหน้าจอนี้
บรรทัดเดิม 761: กำหนดหน้าหรือไฟล์ที่จะเปิดเมื่อกดลิงก์
บรรทัดเดิม 762: จบการกำหนดค่าของส่วนหน้าจอ แล้วเริ่มเนื้อหาหรือปิดส่วนที่ไม่มีเนื้อหาภายใน
-->
                    <a
                        class="landing-nav inline-flex min-h-10 shrink-0 items-center text-xs"
                        href="#system-home"
                    >
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 763: ข้อความหรือข้อมูลที่หน้าจอจะแสดง: กลับด้านบน ↑
-->
                        กลับด้านบน ↑
                        <!-- [KU-BEGINNER]
บรรทัดเดิม 764: จบลิงก์กดไปหน้าอื่น
-->
                    </a>
                    <!-- [KU-BEGINNER]
บรรทัดเดิม 765: จบกล่องสำหรับจัดวางเนื้อหา
-->
                </div>
                <!-- [KU-BEGINNER]
บรรทัดเดิม 766: จบส่วนท้ายหน้า
-->
            </footer>
            <!-- [KU-BEGINNER]
บรรทัดเดิม 767: จบกล่องสำหรับจัดวางเนื้อหา
-->
        </div>
        <!-- [KU-BEGINNER]
บรรทัดเดิม 768: จบส่วนหน้าจอที่ผู้ใช้เห็น
-->
    </body>
    <!-- [KU-BEGINNER]
บรรทัดเดิม 769: จบเอกสารเว็บทั้งหมด
--></html>