/* ============================================================
   kbs-tablet.css — เมนูแบบแท็บเล็ตของหน้าสาธารณะ (768–991px)
   ------------------------------------------------------------
   ใช้กับ master ที่มีแถบบน .pub-topbar ทั้งหมด :
     SitePublic.Master (Landing ฯลฯ) · ACHome/SiteShop.Master · Store/SiteStore.Master
   โหลดหลัง kbs-public.css เสมอ

   ของเดิม : ต่ำกว่า lg (992px) เมนูทั้งหมดซ่อนในลิ้นชัก ต้องกดปุ่มสามขีดทุกครั้ง
   แท็บเล็ตจอกว้างพอจะเห็นเมนูได้เลย จึงเปลี่ยนเป็น
     - แถวเมนูแนวนอนใต้แถบโลโก้ (ปัดซ้าย-ขวาได้ถ้ายาวเกินจอ) · ไม่มีปุ่มสามขีด
     - ปุ่มเข้าสู่ระบบกลับมาอยู่มุมขวาบน (ในลิ้นชักถูกซ่อน)
   มือถือ (ต่ำกว่า 768px) ยังใช้ลิ้นชักตามเดิม · จอใหญ่ (lg ขึ้นไป) ไม่เปลี่ยน

   ทำด้วย CSS ล้วน : ลิ้นชัก .offcanvas-lg ของ Bootstrap ถูกบังคับให้วางอยู่ในแถบบน
   แทนการลอยเป็นลิ้นชัก (Bootstrap คืนสภาพเองเมื่อจอกลับไปแคบ/กว้าง)
   ============================================================ */

@media (min-width: 768px) and (max-width: 991.98px) {

    .pub-topbar .navbar {
        flex-wrap: wrap;
        row-gap: .15rem;
        padding-bottom: .35rem;
    }

    /* ปุ่มสามขีดไม่ต้องใช้ — เมนูแสดงอยู่แล้ว */
    .pub-topbar .pub-burger { display: none !important; }

    /* ลิ้นชัก → แถวเมนูเต็มความกว้าง อยู่แถวที่สองของแถบบน */
    .pub-topbar .pub-drawer.offcanvas-lg {
        position: static;
        order: 10;
        flex: 0 0 100%;
        width: 100%;
        height: auto;
        visibility: visible !important;
        transform: none !important;
        background: transparent;
        border: 0;
        box-shadow: none;
        transition: none;
        z-index: auto;
    }

    .pub-topbar .pub-drawer .offcanvas-header { display: none; }

    .pub-topbar .pub-drawer .offcanvas-body {
        display: block;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* ขอบขวาจาง ๆ บอกว่ายังปัดต่อได้ */
        -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent);
        mask-image: linear-gradient(90deg, #000 94%, transparent);
    }
    .pub-topbar .pub-drawer .offcanvas-body::-webkit-scrollbar { display: none; }

    .pub-topbar .pub-nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
        gap: .25rem;
        padding-right: 1.25rem;
    }

    .pub-topbar .pub-nav .nav-item { width: auto; }

    .pub-topbar .pub-nav .nav-link {
        width: auto;
        min-height: 44px;               /* เป้าสัมผัสสำหรับนิ้ว */
        padding: .5rem .95rem;
        gap: .45rem;
        font-size: .92rem;
        border-radius: 999px;
        white-space: nowrap;
    }

    .pub-topbar .pub-nav .nav-link .bi { width: auto; font-size: 1rem; }

    /* ตัวบอกหน้าปัจจุบัน : จากแถบซ้ายของลิ้นชัก เป็นพื้นแคปซูลแบบจอใหญ่ */
    .pub-topbar .pub-nav .nav-link.active { box-shadow: none; }

    /* ปุ่มเข้าสู่ระบบ : ในลิ้นชักไม่ต้องมี กลับไปใช้ปุ่มมุมขวาบนแบบจอใหญ่ */
    .pub-topbar .pub-drawer-foot { display: none !important; }
    .pub-topbar .btn-pub-login.d-none { display: inline-flex !important; margin-left: auto; }
}

/* ------------------------------------------------------------
   แท็บเล็ตแนวนอน / โน้ตบุ๊กจอเล็ก (992–1199px)
   Bootstrap แสดงเมนูแนวนอนบรรทัดเดียวกับโลโก้แล้ว แต่ที่ 1024px ไม่พอสำหรับ
   เจ็ดเมนู ป้ายเมนูถูกบีบจนขึ้นสองสามบรรทัด ("ตาราง / การใช้ / ห้อง")
   → ย้ายแถวเมนูลงบรรทัดที่สองแบบเดียวกับแท็บเล็ตแนวตั้ง
   ------------------------------------------------------------ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pub-topbar .navbar { flex-wrap: wrap; row-gap: .15rem; padding-bottom: .35rem; }

    .pub-topbar .pub-drawer.offcanvas-lg { order: 10; flex: 0 0 100%; width: 100%; }

    .pub-topbar .pub-drawer .offcanvas-body {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 95%, transparent);
        mask-image: linear-gradient(90deg, #000 95%, transparent);
    }
    .pub-topbar .pub-drawer .offcanvas-body::-webkit-scrollbar { display: none; }

    .pub-topbar .pub-nav { flex-wrap: nowrap; width: max-content; min-width: 100%; margin-left: 0 !important; padding-right: 1.25rem; }
    .pub-topbar .pub-nav .nav-link { white-space: nowrap; min-height: 42px; }

    /* ปุ่มเข้าสู่ระบบ/ตะกร้า ชิดขวาของบรรทัดแรก */
    .pub-topbar .btn-pub-login { margin-left: auto; }
}