/* ===== Base scale & background (ตามต้นฉบับ) ===== */
html {
    font-size: 14px;
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

/* ลิงก์ตามต้นฉบับ */
a {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}

    a:link, a:visited, a:active, a:hover {
        color: #333;
    }

    a:hover {
        background-color: #c7d1d6;
    }

/* ฟอร์มโฟกัสใช้สีธีมฟ้าเดิม */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #7ac0da;
}

/* ===== Header (คงโทน/ตัวอักษรเดิม) ===== */
.tu-header .tu-top {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 16px 0;
}

.txtHeader1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #000;
}

.txtHeader2 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #666;
}

/* แถบเมนู */
.menuBar {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 4px 6px;
    margin: 10px 0 18px 0;
}

.tabMenu {
    border-radius: 6px;
}

    .tabMenu .tabLink {
        display: block;
        color: #3e5667;
        text-decoration: none;
        padding: 10px 14px;
        border-radius: 6px;
        white-space: nowrap;
        font-weight: 600;
        letter-spacing: .2px;
    }

        .tabMenu .tabLink:hover,
        .tabMenu.active .tabLink {
            background: #a4d4e6;
            color: #333;
        }

/* ===== Content body ===== */
.tdBody {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 20px;
    margin-top: 12px;
}

/* ... (ส่วนอื่น ๆ ของคุณคงเดิมทั้งหมด) ... */

/* ===== Footer ===== */
.footer-modern {
    position: relative;
    border-top: 1px solid rgba(0,0,0,.06);
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.95)), radial-gradient(800px 600px at 10% -20%, rgba(122,192,218,.10), transparent 60%), radial-gradient(900px 700px at 90% 120%, rgba(164,212,230,.10), transparent 65%);
    backdrop-filter: saturate(120%) blur(2px);
}

    .footer-modern .footer-card {
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(0,0,0,.06);
        border-radius: .75rem;
    }

/* ===== Responsive ===== */
@media only screen and (max-width: 850px) {
    header .float-left, header .float-right {
        float: none;
    }

    footer .float-left, footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }

    input {
        width: 90%;
    }
}

.preview-input-align {
    display: flex;
    align-items: center;
}

/* ===== ปุ่มเมนูใน offcanvas ===== */
.menu-link-button {
    all: unset;
    display: block;
    width: 100%;
    padding: 0.375rem 1rem;
    color: var(--bs-dropdown-link-color);
    background-color: transparent;
    cursor: pointer;
}

    .menu-link-button:hover,
    .menu-link-button:focus {
        background-color: var(--bs-dropdown-link-hover-bg);
        color: var(--bs-dropdown-link-hover-color);
    }

    .menu-link-button:active {
        background-color: var(--bs-dropdown-link-active-bg);
    }

/* =========================
   ✅ FIX: Header container (คุมความกว้างจริง ไม่ชิดขอบ)
   ========================= */
.tu-header {
    position: sticky;
    top: 0;
    z-index: 3000;
    background: #F8F8F8;
}

/* wrapper ของ header เราเอง (ไม่พึ่ง .container) */
.tu-header-container {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* desktop: เพิ่มระยะขอบให้ “ไม่ชิดขอบจอ” */
@media (min-width: 992px) {
    .tu-header-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* =========================
   Bootstrap dropdown styles
   ========================= */
.tu-dd-btn {
    background: #a05bef;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 700;
}

    .tu-dd-btn:hover,
    .tu-dd-btn:focus {
        background: #8f49e6;
        color: #fff;
    }

.tu-dd-menu {
    min-width: 320px;
    max-height: 70vh;
    overflow: auto;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 14px 40px rgba(0,0,0,.16);
    padding: .5rem;
    z-index: 4000;
}

    .tu-dd-menu .dropdown-item {
        border-radius: 10px;
        padding: .6rem .75rem;
    }

/* มือถือ: dropdown menu กว้างเต็ม */
@media (max-width: 991.98px) {
    .tu-dd-menu {
        width: 100%;
        min-width: 0;
        max-height: 60vh;
    }
}

/* =========================
   ✅ FIX: Offcanvas-top ให้ “ยาวลงมา” แน่นอน (ใช้ CSS variable ของ Bootstrap)
   ========================= */
/*.offcanvas-mainmenu {
    --bs-offcanvas-height: 92vh;*/ /* ตัวนี้คือของจริงสำหรับ offcanvas-top */
/*}

@media (max-width: 991.98px) {
    .offcanvas-mainmenu {
        --bs-offcanvas-height: 90vh;
    }
}

.offcanvas-mainmenu .offcanvas-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}*/
/* =========================
   ✅ FIX: ทำให้ .tu-header-container ทำตัวเหมือน Bootstrap .container
   (แก้ปัญหา header หด/กว้างไม่เท่ากรอบแดง)
   ========================= */

/* sticky header */
.tu-header {
    position: sticky;
    top: 0;
    z-index: 3000;
    background: #F7F2ED;
}

/* ทำ wrapper ให้เหมือน container ของ bootstrap */
.tu-header-container {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--bs-gutter-x, .75rem) !important;
    padding-right: var(--bs-gutter-x, .75rem) !important;
    box-sizing: border-box !important;
}

/* bootstrap container max-width (v5.x default) */
@media (min-width: 576px) {
    .tu-header-container {
        max-width: 540px !important;
    }
}

@media (min-width: 768px) {
    .tu-header-container {
        max-width: 720px !important;
    }
}

@media (min-width: 992px) {
    .tu-header-container {
        max-width: 960px !important;
    }
}

@media (min-width: 1200px) {
    .tu-header-container {
        max-width: 1240px !important;
    }
}

/*@media (min-width: 1500px) {
    .tu-header-container {
        max-width: 1560px !important;
    }
}*/

/* (ถ้าคุณอยากให้กว้างกว่า 1320 เพิ่มเองได้ เช่น 1480/1560) */

/* =========================
   ✅ FIX: Offcanvas-top ให้ “ยาวลงมา” แน่นอน
   (Bootstrap ใช้ตัวแปรนี้จริง ๆ)
   ========================= */
/*.offcanvas-mainmenu {
    --bs-offcanvas-height: 92vh;
}

@media (max-width: 991.98px) {
    .offcanvas-mainmenu {
        --bs-offcanvas-height: 90vh;
    }
}

.offcanvas-mainmenu .offcanvas-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.footer-map-link {
    cursor: pointer;
}

    .footer-map-link:hover {
        opacity: .9;
    }

        .footer-map-link:hover i {
            transform: translateY(-1px);
        }

    .footer-map-link i {
        transition: transform .15s ease;
    }*/
/* ===== Fix: Offcanvas (mobile menu) แสดงรายการได้ครบ ===== */

/* =========================
   FINAL: Offcanvas-top แสดงครบ + ไม่โดนทับ/ไม่ถูกตัด
   ========================= */

/* ให้ offcanvas-top กินเต็มจอแบบ “fixed จริง” */
/* ===== Offcanvas-top: สูงเท่าที่จำเป็น แต่ไม่เกินจอ ===== */
.offcanvas.offcanvas-top.offcanvas-mainmenu {
    /* ให้ Bootstrap ยอมให้เรา override */
    --bs-offcanvas-height: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important; /* ✅ ตามความสูง content */
    max-height: 90dvh !important; /* ✅ แต่ไม่เกินจอ */
    overflow: hidden !important; /* ✅ scroll ไปอยู่ที่ body */

    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
}

@supports not (height: 100dvh) {
    .offcanvas.offcanvas-top.offcanvas-mainmenu {
        max-height: 90vh !important;
    }
}

.offcanvas-backdrop {
    z-index: 9998 !important;
}

/* header ไม่ยุบ */
.offcanvas.offcanvas-top.offcanvas-mainmenu .offcanvas-header {
    flex: 0 0 auto !important;
}

/* body เป็นพื้นที่เลื่อนเมื่อเกิน max-height */
.offcanvas.offcanvas-top.offcanvas-mainmenu .offcanvas-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* กัน list-group โดนจำกัด */
.offcanvas.offcanvas-top.offcanvas-mainmenu .list-group {
    max-height: none !important;
}
/* ===== Header: center logo + stacked title (refine spacing + keep original colors) ===== */
.tu-header .tu-top {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important; /* ลดระยะห่างโลโก้กับข้อความนิดนึง */
    padding: 12px 0 !important; /* ประหยัดพื้นที่เพิ่ม */
}

    .tu-header .tu-top img {
        display: block;
        margin: 0 auto;
    }

.tu-header .tu-title {
    text-align: center !important;
    line-height: 1 !important;
}

    /* ✅ ตัดพื้นที่ที่มาจาก <br /> เฉพาะในหัวข้อ */
    .tu-header .tu-title br {
        display: none;
    }
.tu-header .txtHeader1,
.tu-header .txtHeader2 {
    color: #ef4ea8 !important;
}
/* ชื่อโรงเรียน: ตัวปกติ */
.tu-header .txtHeader1 {
    font-weight: 400 !important;
    font-size: clamp(18px, 2.2vw, 26px) !important;
    display: block;
    line-height: 1.05 !important; /* ✅ แคบลง */
    margin: 0 !important; /* กัน margin แทรก */
}

/* Admission: ตัวหนา + ใหญ่กว่า */
.tu-header .txtHeader2 {
    font-weight: 800 !important;
    font-size: clamp(24px, 3vw, 34px) !important;
  
    display: block;
    line-height: 1.0 !important; /* ✅ แคบลง */
    margin: 0 !important;
}

/* ✅ บีบช่องว่าง “ระหว่างบรรทัด” ให้ชิดกันขึ้นอีกนิด */
.tu-header .txtHeader2 {
    margin-top: -2px !important;
}