/* =====================================================
   RESPONSIVE (เฉพาะส่วนที่ใช้ร่วมทุกหน้า: เมนู, footer, base)
   กฎ responsive เฉพาะหน้าแรก (hero, grids, about) ย้ายไป home.css
   เพราะต้องโหลดหลังกฎ desktop ของหน้านั้น ๆ
   ===================================================== */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
    /* แผงเมนูมือถือ: พื้นขาว ตัวหนังสือเข้ม ไฮไลต์ชมพูอ่อน → ไอคอนสีเด่นชัด */
    .nav-toggle { display: flex; }
    /* ตัดเอฟเฟกต์/อนิเมชันทั้งหมดของการเปิด-ปิดเมนูบนมือถือ + ตัดกรอบไฮไลต์ตอนแตะ (ที่ทำให้ดูแยกส่วน) */
    .main-nav, .main-nav * { transition: none !important; -webkit-tap-highlight-color: transparent; }
    .main-nav a:active, .main-nav .dropdown-toggle:active { background: transparent; }
    .main-nav {
        position: absolute; left: 0; right: 0; top: var(--header-h);
        background: #fff; box-shadow: 0 14px 30px rgba(120, 20, 60, .18); border-radius: 0 0 16px 16px;
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
        flex-direction: column; align-items: stretch; gap: 0;
    }
    /* เปิดเมนู = เต็มจอใต้แถบหัว (ไม่เห็นหน้าเว็บด้านหลัง) · เลื่อนในแผงได้ถ้ารายการยาว */
    .main-nav.open { height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); max-height: none; overflow-y: auto; overscroll-behavior: contain; border-radius: 0; box-shadow: none; }
    body.nav-open { overflow: hidden; }   /* ล็อกหน้าเว็บด้านหลังขณะเปิดเมนู */
    .main-nav > ul { flex-direction: column; padding: 10px 16px 6px; gap: 2px; }
    .main-nav > ul > li > a { border-radius: 8px; padding: 12px 14px; color: var(--ink); font-weight: 500; }
    .main-nav .caret { display: none; }
    /* ชี้/หน้าปัจจุบัน: พื้นชมพูอ่อน */
    .main-nav > ul > li > a:hover, .main-nav > ul > li > a.active { background: var(--pink-50); color: var(--pink-600); }
    .main-nav > ul > li.has-dropdown:hover > a:not(.active) { background: transparent; color: var(--ink); }
    /* เปิดเมนูย่อย: ทั้งแถว (เมนู+ลูกศร) เป็นพื้นชมพูอ่อนผืนเดียว ไม่มีช่องว่างระหว่างกัน */
    .main-nav > ul > li.has-dropdown.open { background: var(--pink-50); border-radius: 10px; }
    /* [href] เพิ่ม specificity ให้ชนะกฎ desktop (color:#fff) แน่นอน → ตัวหนังสือเป็นสีชมพูจริง */
    .main-nav > ul > li.has-dropdown.open > a[href] { background: transparent; color: var(--pink-600); border-radius: 0; }
    .main-nav > ul > li.has-dropdown.open .dropdown-toggle { background: transparent; color: var(--pink-600); border-radius: 0; }
    /* เมนูย่อยที่กางออก: พื้นขาว (กลืนกับแผง) คลุมเฉพาะส่วนล่าง เหลือชมพูแค่แถวหัวเมนู */
    .main-nav > ul > li.has-dropdown.open > .dropdown { background: #fff; border-radius: 0 0 10px 10px; margin: 0; }

    /* accordion บนมือถือ */
    .main-nav > ul > li.has-dropdown { display: grid; grid-template-columns: 1fr 44px; }
    .dropdown-toggle {
        display: grid; place-items: center; border: 0; background: transparent; cursor: pointer;
        color: var(--ink-soft); border-radius: 10px;
    }
    .dropdown-toggle svg { width: 22px; height: 22px; fill: currentColor; transition: transform .2s; }
    .has-dropdown.open .dropdown-toggle svg { transform: rotate(180deg); }
    .dropdown {
        grid-column: 1 / -1; position: static; min-width: 0;
        background: transparent; border: 0; box-shadow: none; border-radius: 10px;
        padding: 0 6px; margin: 0 0 4px;
        opacity: 1; visibility: visible; transform: none;
        max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease;
    }
    .dropdown::before, .dropdown::after { display: none; }
    .has-dropdown.open > .dropdown { max-height: 460px; overflow-y: auto; padding: 6px; }
    .dropdown li a { color: var(--ink); white-space: normal; }
    .dropdown li a:hover { background: #fff; color: var(--pink-600); }

    .nav-actions { padding: 6px 16px 16px; }
    .btn-login { width: 100%; justify-content: center; padding: 12px; border: 0;
        background: linear-gradient(135deg, var(--pink-600), var(--pink-500)); color: #fff; }
    .btn-login svg { fill: #fff; }

    /* เมนูผู้ใช้บนมือถือ: แสดงเป็นบล็อกในแผงเมนู (พื้นขาว) */
    .user-menu { width: 100%; }
    .user-avatar:not(.user-avatar-lg) { display: none; }
    .user-dropdown {
        position: static; opacity: 1; visibility: visible; transform: none;
        min-width: 0; border: 0; box-shadow: none;
        background: var(--pink-50);
        border-radius: 12px; padding: 8px;
    }
    .user-dropdown::after { display: none; }
    .user-dropdown-head { border-bottom-color: var(--line); }
    .user-name { color: var(--ink); }
    .user-role { color: var(--ink-soft); }
    .user-avatar-lg { background: #fff; }
    .user-dropdown a[role="menuitem"] { color: var(--ink); }
    .user-dropdown a[role="menuitem"] svg { fill: var(--ink-soft); }
    .user-dropdown a[role="menuitem"]:hover { background: #fff; color: var(--pink-600); }
    .user-dropdown a[role="menuitem"]:hover svg { fill: var(--pink-600); }
    .user-dropdown a.danger, .user-dropdown a.danger svg { color: #d9406f; fill: #d9406f; }
    .user-dropdown-sep { background: var(--line); }
    .brand-th { font-size: 17px; }
    .brand-en { font-size: 11.5px; }
}
@media (max-width: 600px) {
    body { font-size: 16px; }
    .section { padding: 54px 0; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* =====================================================
   จอกลาง 961–1320px (รวมตอนซูมเบราว์เซอร์): เมนูบนต้องอยู่แถวเดียว ไม่ตกบรรทัด
   ===================================================== */
@media (min-width: 961px) {
    .brand-th, .brand-en, .main-nav > ul > li > a, .btn-login { white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1320px) {
    .header-inner { gap: 10px; }
    .brand { gap: 9px; }
    .brand-logo { width: 44px; height: 44px; }
    .brand-th { font-size: 17px; }
    .brand-en { font-size: 11.5px; }
    .main-nav { gap: 8px; }
    .main-nav > ul { gap: 2px; }
    .main-nav > ul > li > a { padding: 6px 8px; font-size: 14.5px; }
    .btn-login { padding: 9px 14px; font-size: 14.5px; }
    .ntf-site { margin-right: 4px; }
}

/* ระฆังแจ้งเตือนบนจอเล็ก: ย้ายมาอยู่ข้างปุ่มเปิด-ปิดเมนู (ตัวในแผงเมนูซ่อน) */
.hdr-mobile-bell { display: none; }
@media (max-width: 960px) {
    .hdr-mobile-bell { display: flex; align-items: center; margin-left: auto; margin-right: -12px; }   /* หักล้าง gap 20px ของ header-inner → ระฆังชิดปุ่มเมนู เหลือช่อง 8px */
    .main-nav .ntf { display: none; }
}
@media (max-width: 480px) {
    /* จอแคบ: ย่อโลโก้/ชื่อโรงเรียน ให้อยู่บรรทัดเดียวแม้มีระฆัง + ปุ่มเมนู */
    .brand { gap: 8px; }
    .brand-logo { width: 40px; height: 40px; }
    .brand-th { font-size: 16px; white-space: nowrap; }
    .brand-en { font-size: 11px; white-space: nowrap; }
    .hdr-mobile-bell { margin-right: -12px; }
    .hdr-mobile-bell .ntf-btn { width: 38px; height: 38px; }
}

@media (max-width: 960px) {
    /* เมนูที่เป็นหน้าปัจจุบัน (เช่น จัดการระบบ): ไฮไลต์ชมพูคลุมทั้งแถวรวมลูกศร เป็นผืนเดียวกัน */
    .main-nav > ul > li.has-dropdown:has(> a.active) { background: var(--pink-50); border-radius: 10px; }
    .main-nav > ul > li.has-dropdown:has(> a.active) > a.active { background: transparent; border-radius: 0; }
    .main-nav > ul > li.has-dropdown:has(> a.active) > .dropdown-toggle { color: var(--pink-600); }
    .main-nav > ul > li.has-dropdown:has(> a.active):not(.open) { border-radius: 10px; }
}

/* จอเล็กมาก: ชื่อโรงเรียนต้องไม่ล้นไปทับปุ่มแชท/ระฆัง/เมนู → ย่อตามความกว้างจอ และตัดด้วย … ถ้ายังไม่พอ */
@media (max-width: 960px) {
    .header-inner { min-width: 0; }
    .brand { flex: 1 1 auto; min-width: 0; }
    .brand-logo { flex: none; }
    .brand-text { min-width: 0; }
    .brand-th, .brand-en { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hdr-mobile-bell, .nav-toggle { flex: none; }
    /* ปุ่มแชท + ระฆัง: ขนาดและระยะห่างเท่ากันเสมอ (ปุ่มแชทมีสไตล์ของตัวเองใน chat_button.php — ทับด้วย selector ที่เจาะจงกว่า) */
    .hdr-mobile-bell { gap: 8px; }
    .hdr-mobile-bell .chtb.chtb-app { margin-right: 0; }
    .hdr-mobile-bell .chtb.chtb-app, .hdr-mobile-bell .ntf .ntf-btn { width: 38px; height: 38px; }
}
@media (max-width: 480px) {
    .brand-th { font-size: clamp(13px, 4.1vw, 16px); }
    .brand-en { font-size: clamp(10px, 3vw, 11px); }
}
@media (max-width: 380px) {
    .header-inner { gap: 6px; }
    .brand { gap: 6px; }
    .brand-logo { width: 36px; height: 36px; }
    .hdr-mobile-bell { gap: 6px; margin-right: 0; }
    .hdr-mobile-bell .chtb.chtb-app, .hdr-mobile-bell .ntf .ntf-btn { width: 34px; height: 34px; }
    .hdr-mobile-bell .chtb.chtb-app svg, .hdr-mobile-bell .ntf .ntf-btn svg { width: 20px; height: 20px; }
    .nav-toggle { width: 38px; height: 38px; }
}