/* =========================================================
   TDF — Light Blue Theme + Strong Blue Navbar
   Place in: wwwroot/css/site.css
   Requires: Bootstrap 5.3+, Font Awesome
   (โหลดฟอนต์ผ่าน <link> ใน _Layout.cshtml แล้ว)
   ========================================================= */

/* -------- CSS Variables (Theme Colors & Fonts) -------- */
:root {
    /* Blues */
    --blue-900: #0a2342;
    --blue-800: #103a71;
    --blue-700: #1a4f9c;
    --blue-600: #2f6fcd;
    --blue-500: #4285f4;
    --blue-400: #6ea8fe;
    --blue-200: #dbe8ff; /* soft blue */
    --blue-100: #eef4ff; /* very soft blue */
    /* Navbar strong blue shades */
    --nav-blue-start: #0b2c6a; /* darkest */
    --nav-blue-mid: #0e3a8a; /* dark */
    --nav-blue-end: #1652b3; /* mid-dark */
    --nav-border: rgba(13,110,253,.45);
    --nav-link: #ffffff;
    --nav-link-active: #bcd6ff;
    /* Ink / text */
    --ink-900: #0e1116;
    --ink-800: #1b1f24;
    --ink-600: #3a4451;
    /* Shadows / borders */
    --shadow-md: 0 10px 24px rgba(0,0,0,.08);
    --shadow-sm: 0 6px 16px rgba(0,0,0,.12);
    --border-soft: 1px solid rgba(30,76,155,.12);
    /* Fonts — ประกาศครั้งเดียว ไม่ซ้ำ */
    /* ถ้าไม่ได้ใช้ภาษาญี่ปุ่น ตัด 'Noto Sans JP' ออกได้ */
    --font-base: 'Noto Sans Thai','Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: var(--font-base);
}

/* -------- Global Font (ตั้งครั้งเดียวทั้งเว็บ) -------- */
html, body {
    font-family: var(--font-base);
}

/* ให้ลูกทุก element สืบทอดฟอนต์ฐาน (ยกเว้นไอคอน) */
:where(body) :where(*):not(:where( i[class*="fa"], .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands )) {
    font-family: inherit !important;
}

/* -------- Base / Reset -------- */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--blue-100) 0%, #ffffff 40%, #ffffff 100%);
    color: var(--ink-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

button, input, select, textarea {
    font-family: inherit;
}

a {
    color: #0d6efd;
}

    a:hover {
        color: #0b5ed7;
    }


/* Remove default navbar side padding to allow full-width brand */
.navbar-zero {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    .navbar-zero .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

/* -------- Strong Blue Navbar -------- */
.navbar-strongblue {
    background: linear-gradient(180deg, var(--nav-blue-start) 0%, var(--nav-blue-mid) 55%, var(--nav-blue-end) 100%) !important;
    color: var(--nav-link);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

    .navbar-strongblue .navbar-brand,
    .navbar-strongblue .nav-link,
    .navbar-strongblue .dropdown-item {
        color: var(--nav-link) !important;
    }

        .navbar-strongblue .nav-link:hover {
            color: #fff !important;
            text-shadow: 0 0 1px rgba(255,255,255,.35);
        }

        .navbar-strongblue .nav-link.active {
            color: var(--nav-link-active) !important;
            position: relative;
        }
            /* เส้นคงที่ใต้ลิงก์ active (จะถูกซ่อนใน desktop เมื่อใช้ magic underline) */
            .navbar-strongblue .nav-link.active::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -6px;
                height: 2px;
                border-radius: 2px;
                background: var(--nav-link-active);
            }

    /* Toggler (hamburger) on dark navbar */
    .navbar-strongblue .navbar-toggler {
        border-color: rgba(255,255,255,.35);
    }

    .navbar-strongblue .navbar-toggler-icon {
        filter: invert(1) contrast(1.2) brightness(1.2);
    }

    /* Dropdown on strong blue */
    .navbar-strongblue .dropdown-menu {
        background: #0e2f6f;
        border-color: rgba(255,255,255,.18);
        box-shadow: 0 10px 28px rgba(0,0,0,.35);
    }

    .navbar-strongblue .dropdown-item {
        color: #eaf2ff !important;
    }

        .navbar-strongblue .dropdown-item:hover {
            background: rgba(255,255,255,.10);
        }

/* -------- Magic underline (เส้นวิ่งตามเมนู) -------- */
@media (min-width: 992px) {
    .nav-ink-container {
        position: relative;
    }

    .navbar-nav {
        position: relative;
    }

        .navbar-nav .nav-link {
            position: relative;
            padding-bottom: .7rem; /* เผื่อพื้นที่วางเส้น */
            transition: color .2s ease;
        }

    /* เส้นวิ่ง */
    .nav-ink {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 0;
        background: var(--nav-link-active, #bcd6ff);
        border-radius: 2px;
        transition: left .22s cubic-bezier(.2,.6,.2,1), width .22s cubic-bezier(.2,.6,.2,1);
        pointer-events: none;
        opacity: .95;
    }

    /* ซ่อนเส้น ::after ของลิงก์บนเดสก์ท็อป เพื่อไม่ให้ซ้อนกับ .nav-ink */
    .nav-ink-container .nav-link::after {
        background: transparent !important;
        transform: none !important;
    }
}


/* -------- Content Area -------- */
.page-wrap {
    padding: 0;
}

.container.page-container,
.container-fluid.page-container {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.page-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--blue-100) 100%);
    border: 1px solid rgba(30,76,155,.10);
    border-radius: 12px;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Helpers for full-width sections (ชิดซ้าย-ขวาสุด) */
.full-bleed, .container-fluid.px-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.row.g-0 > [class^="col"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* -------- Buttons -------- */
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0b5ed7;
    }

.btn-outline-primary {
    color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

/* -------- Alerts tune to light theme -------- */
.alert-info {
    background: linear-gradient(180deg, var(--blue-100), #fff);
    border-color: #cfe2ff;
    color: #0a2342;
    box-shadow: var(--shadow-sm);
}

.alert-success, .alert-danger {
    box-shadow: var(--shadow-sm);
}

/* -------- Utilities -------- */
.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-sm-2 {
    box-shadow: var(--shadow-sm) !important;
}

.rounded-12 {
    border-radius: 12px !important;
}

.text-ink {
    color: var(--ink-800) !important;
}

/* Make images inside brand/logo crisp */
.navbar-brand img {
    display: block;
}

/* -------- Forms (optional gentle tweaks) -------- */
.form-control, .form-select {
    border-radius: .6rem;
    border-color: rgba(30,76,155,.25);
}

    .form-control:focus, .form-select:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
    }

/* -------- Responsive tweaks -------- */
@media (max-width: 991.98px) {
    .page-card {
        border-radius: 10px;
    }
}

@media (max-width: 575.98px) {
    .page-card {
        border-radius: 8px;
    }
}

/* ===== Mobile navbar spacing tweaks ===== */
@media (max-width: 991.98px) { /* เมื่อย่อเป็น mobile/tablet (navbar-collapse) */
    /* กัน brand ชิดซ้ายเกินไปบนมือถือ */
    .navbar-zero .navbar-brand {
        padding-left: .75rem;
    }
    /* 12px */
    /* กัน toggler ชิดขวาเกินไป */
    .navbar-toggler {
        margin-right: .75rem;
    }
    /* 12px */
    /* ให้พื้นที่ด้านในของเมนูที่พับมี padding ซ้ายขวา */
    .nav-mobile-pad {
        padding-left: .75rem;
        padding-right: .75rem;
    }
    /* ระยะของแต่ละลิงก์ในเมนูให้กว้างขึ้น อ่านง่ายขึ้น */
    #mainNav .nav-link {
        padding-top: .65rem;
        padding-bottom: .65rem;
    }
    /* ถ้ารู้สึกว่ายังชิดซ้าย ให้เติม indent ทั้งรายการ */
    #mainNav .navbar-nav {
        padding-left: .25rem;
    }
    /* 4px */
    /* dropdown menu ตอนเปิดในมือถือ ให้กึ่งกลาง/ไม่ชิดขอบ */
    .navbar-strongblue .dropdown-menu {
        margin-left: .25rem;
        margin-right: .25rem;
    }
}

/* ========= MOBILE MAGIC UNDERLINE (เพิ่ม) ========= */
@media (max-width: 991.98px) {
    /* ให้ ul เป็นจุดอ้างอิงตำแหน่ง */
    .nav-ink-container,
    #mainNav .navbar-nav {
        position: relative;
    }

    /* สไตล์เส้นสำหรับมือถือ (เมนูแนวตั้ง) */
    .nav-ink {
        position: absolute;
        height: 2px;
        width: 0;
        left: 0;
        top: 0; /* จะถูกเซ็ตด้วย JS */
        border-radius: 2px;
        background: var(--nav-link-active, #bcd6ff);
        pointer-events: none;
        transition: left .22s cubic-bezier(.2,.6,.2,1), width .22s cubic-bezier(.2,.6,.2,1), top .22s cubic-bezier(.2,.6,.2,1);
        opacity: .95;
    }

    /* มือถือ: อนุญาตให้เส้น ::after ของ active แสดงได้ก็ได้
     ถ้าไม่อยากให้มีเส้นซ้อน ให้ยกเลิกเส้น ::after ของลิงก์ทั้งหมดในมือถือแบบนี้: */
    .nav-ink-container .nav-link::after {
        background: transparent !important;
        transform: none !important;
    }
}

/* อยาก “ขยับมากขึ้น” อีกนิด เปลี่ยน .75rem เป็น 1rem ได้ (16px) */

/* -------- Brand styles -------- */
.brand-glass {
    padding: .4rem .8rem;
    border-radius: 16px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}

    .brand-glass .brand-logo {
        height: 44px;
        display: block;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
    }

.brand-3d-box {
    padding: .35rem;
    border-radius: 12px;
    background: #eef4ff;
    box-shadow: 6px 6px 14px rgba(10,35,66,.35), /* เงาทิศล่างขวา */
    -4px -4px 12px rgba(255,255,255,.6); /* แสงทิศบนซ้าย */
    border: 1px solid rgba(16,58,113,.12);
}

.brand-3d .brand-logo {
    height: 44px;
    display: block;
}


/* ให้ธง/อีโมจิบังคับใช้ฟอนต์ที่มี emoji-color */
.emoji {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla","Segoe UI Symbol", sans-serif;
    line-height: 1;
}






/* -------- Optional: Darker navbar variant (single color) -------- */
/* Uncomment if you want a solid bar (no gradient) */
/*
.navbar-strongblue{
  background: #0b2c6a !important;
}
*/


/* =========================================================
   HERO WAVES ONLY — Blue gradient (top & bottom)
   Edge-to-edge (no left/right seams)
   ========================================================= */

/* 1) ปิดคลื่นของ NAV ทุกหน้า */
.navbar-strongblue::before,
.navbar-strongblue::after {
    content: none !important;
}

/* 2) ป้องกันการเลื่อนแกน X และกันเส้นขาวขอบจอ */
html, body {
    overflow-x: hidden;
}

/* 3) ถ้ามี .hero-outer ที่เคย 100vw+translate ให้ยกเลิก (กันเกิดรอยขาว) */
.hero-outer {
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

/* 4) ตัวแปรคลื่น HERO */
:root {
    --hero-cap-height: 28px; /* 20–40px ตามชอบ */
    --hero-cap-width: 1200px;
    --hero-blue-start: var(--nav-blue-start, #0b2c6a);
    --hero-blue-mid: var(--nav-blue-mid, #0e3a8a);
    --hero-blue-end: var(--nav-blue-end, #1652b3);
    --hero-top-wave-shift: 0px; /* + คือลง, - คือขึ้น */
    --hero-bottom-wave-shift: 0px; /* + คือขึ้น, - คือลง (เพราะยึด bottom) */
    --wave-overscan: 2px; /* กินขอบซ้าย/ขวา เพิ่มกัน seam (2–4px) */

}

/* เปิดคลื่นฟุ้ง */
/* 5) โครง HERO */
.hero-cap {
    position: relative;
    z-index: 40;
    overflow: hidden;
}

/* ===== HERO Top Wave (Blue → lighter) ===== */
@supports (-webkit-mask: url("")) or (mask: url("")) {
    .hero-cap::before {
        content: "";
        position: absolute;
        left: calc(-1 * var(--wave-overscan));
        top: var(--hero-top-wave-shift);
        width: calc(100% + var(--wave-overscan) * 2);
        height: var(--hero-cap-height);
        background: linear-gradient(180deg, var(--hero-blue-start) 0%, var(--hero-blue-mid) 55%, var(--hero-blue-end) 100%);
        -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'>\
<path d='M0,120 C150,0 350,240 600,120 C850,0 1050,240 1200,120 L1200,0 L0,0 Z' fill=\"black\"/>\
</svg>") repeat-x top / var(--hero-cap-width) var(--hero-cap-height);
        mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'>\
<path d='M0,120 C150,0 350,240 600,120 C850,0 1050,240 1200,120 L1200,0 L0,0 Z' fill=\"black\"/>\
</svg>") repeat-x top / var(--hero-cap-width) var(--hero-cap-height);
        /* แสงฟุ้งสีน้ำเงินไล่อ่อน */
        filter: drop-shadow(0 -8px 18px rgba(22,82,179,.30)) drop-shadow(0 -3px 8px rgba(22,82,179,.24));
        pointer-events: none;
        z-index: 45;
    }
}

@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
    .hero-cap::before {
        content: "";
        position: absolute;
        left: calc(-1 * var(--wave-overscan));
        top: var(--hero-top-wave-shift);
        width: calc(100% + var(--wave-overscan) * 2);
        height: var(--hero-cap-height);
        background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0)) top/100% 100% no-repeat, url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'>\
<path d='M0,120 C150,0 350,240 600,120 C850,0 1050,240 1200,120 L1200,0 L0,0 Z' fill=\"%230b2c6a\"/>\
</svg>") repeat-x top / var(--hero-cap-width) var(--hero-cap-height);
        background-position: calc(-1 * var(--wave-overscan)) top;
        filter: drop-shadow(0 -8px 18px rgba(22,82,179,.30)) drop-shadow(0 -3px 8px rgba(22,82,179,.24));
        pointer-events: none;
        z-index: 45;
    }
}

/* ===== HERO Bottom Wave (Blue → lighter) ===== */
@supports (-webkit-mask: url("")) or (mask: url("")) {
    .hero-cap::after {
        content: "";
        position: absolute;
        left: calc(-1 * var(--wave-overscan));
        bottom: var(--hero-bottom-wave-shift);
        width: calc(100% + var(--wave-overscan) * 2);
        height: var(--hero-cap-height);
        background: linear-gradient(180deg, var(--hero-blue-start) 0%, var(--hero-blue-mid) 55%, var(--hero-blue-end) 100%);
        -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'>\
<path d='M0,0 C150,120 350,-120 600,0 C850,120 1050,-120 1200,0 L1200,120 L0,120 Z' fill=\"black\"/>\
</svg>") repeat-x bottom / var(--hero-cap-width) var(--hero-cap-height);
        mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'>\
<path d='M0,0 C150,120 350,-120 600,0 C850,120 1050,-120 1200,0 L1200,120 L0,120 Z' fill=\"black\"/>\
</svg>") repeat-x bottom / var(--hero-cap-width) var(--hero-cap-height);
        pointer-events: none;
        z-index: 41;
    }
}

@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
    .hero-cap::after {
        content: "";
        position: absolute;
        left: calc(-1 * var(--wave-overscan));
        bottom: var(--hero-bottom-wave-shift);
        width: calc(100% + var(--wave-overscan) * 2);
        height: var(--hero-cap-height);
        background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0)) bottom/100% 100% no-repeat, url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'>\
<path d='M0,0 C150,120 350,-120 600,0 C850,120 1050,-120 1200,0 L1200,120 L0,120 Z' fill=\"%230b2c6a\"/>\
</svg>") repeat-x bottom / var(--hero-cap-width) var(--hero-cap-height);
        background-position: calc(-1 * var(--wave-overscan)) bottom;
        pointer-events: none;
        z-index: 41;
    }
}
/* === Inner Blue Glow: Left, Right, Top only (no bottom) === */
.hero-cap {
    /* คุมความแรงของแสง */
    --glow-top: rgba(22,82,179,.45);
    --glow-side: rgba(22,82,179,.32);
    /* แสงฟุ้งด้านบน + ซ้าย + ขวา */
    box-shadow: inset 0 28px 48px var(--glow-top), /* TOP glow */
    inset 28px 0 44px var(--glow-side), /* LEFT glow */
    inset -28px 0 44px var(--glow-side); /* RIGHT glow */
}

/* จอใหญ่ เพิ่มความนุ่ม */
@media (min-width: 1200px) {
    .hero-cap {
        box-shadow: inset 0 34px 60px rgba(22,82,179,.48), inset 36px 0 56px rgba(22,82,179,.34), inset -36px 0 56px rgba(22,82,179,.34);
    }
}

/* กันกรอบ/เส้นบางๆ จาก border/outline ใดๆ ที่อาจติดมาจากองค์ประกอบด้านใน */
.hero-cap,
.hero-frame,
.hero-video-wrap {
    border: 0 !important;
    outline: none !important;
    background-clip: padding-box;
}

/* เพิ่มเงาขวาสมมาตรกับซ้าย */
.hero-cap {
    position: relative;
    z-index: 40;
    overflow: hidden;
    --white-top-outer: rgba(255,255,255,.65);
    --white-top-line: rgba(255,255,255,.78);
    --white-left-outer: rgba(255,255,255,.58);
    --white-left-core: rgba(255,255,255,.40);
    box-shadow: inset 0 90px 160px var(--white-top-outer), /* TOP: ก้อนใหญ่ */
    inset 0 16px 28px var(--white-top-line), /* TOP: เส้นไฮไลต์ */
    inset 70px 0 140px var(--white-left-outer), /* LEFT: ก้อนใหญ่ */
    inset 24px 0 48px var(--white-left-core), /* LEFT: แกนกลาง */
    inset -70px 0 140px var(--white-left-outer), /* RIGHT: ก้อนใหญ่ (สมมาตร) */
    inset -24px 0 48px var(--white-left-core); /* RIGHT: แกนกลาง (สมมาตร) */

    border: 0 !important;
    outline: none !important;
    background-clip: padding-box;
}

/* จอใหญ่ — เพิ่มความฟุ้งให้แรง */
@media (min-width: 1200px) {
    .hero-cap {
        box-shadow: inset 0 110px 200px rgba(255,255,255,.68), inset 0 18px 32px rgba(255,255,255,.82), inset 84px 0 168px rgba(255,255,255,.60), inset 28px 0 56px rgba(255,255,255,.42), inset -84px 0 168px rgba(255,255,255,.60), /* RIGHT: ก้อนใหญ่ */
        inset -28px 0 56px rgba(255,255,255,.42); /* RIGHT: แกนกลาง */
    }
}



/* === Footer Wav คลื่น=== */

/* ============================
   Footer — Single-color Wave Top
   ============================ */
.footer-curve {
    /* ใช้สีเดียวทั้ง footer และตัวคลื่น */
    --footer-bg: var(--nav-blue-start, #0b2c6a);
    --footer-wave-h: clamp(56px, 7vw, 140px); /* ความสูงคลื่น (responsive) */

    position: relative;
    background: var(--footer-bg);
    color: #fff;
    /* ป้องกันรอยต่อในบางเบราว์เซอร์ */
    backface-visibility: hidden;
    transform: translateZ(0);
}

    /* ลิงก์/ไอคอนใน footer ให้คุมโทนสีเดียว */
    .footer-curve a {
        color: #dbe8ff;
    }

        .footer-curve a:hover {
            color: #ffffff;
        }

    .footer-curve .text-primary {
        color: #ffffff !important;
        opacity: .9;
    }

    /* คลื่นด้านบน ใช้ mask SVG เพื่อให้ "เนื้อเดียว" สีเดียวกับพื้นหลัง */
    .footer-curve::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        /* ดันคลื่นให้ยื่นขึ้นไปเหนือขอบบนของ footer เล็กน้อย
       +1px แก้เส้นผี/seam ที่บางจอจะเห็นเส้นขาว */
        top: calc(-1 * var(--footer-wave-h) + 1px);
        height: var(--footer-wave-h);
        background: var(--footer-bg);
        pointer-events: none;
        display: block;
        /* ใช้ SVG เป็น mask (รองรับเบราว์เซอร์หลัก ๆ) */
        -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 140" preserveAspectRatio="none">\
  <path d="M0,120 C240,80 480,160 720,110 C960,60 1200,90 1440,70 L1440,140 L0,140 Z" fill="black"/>\
</svg>') no-repeat 50% 100% / 100% 100%;
        mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 140" preserveAspectRatio="none">\
  <path d="M0,120 C240,80 480,160 720,110 C960,60 1200,90 1440,70 L1440,140 L0,140 Z" fill="black"/>\
</svg>') no-repeat 50% 100% / 100% 100%;
    }

/* กันแนวนอนเลื่อน และกันเส้นขาวขอบจอ */
html, body {
    overflow-x: hidden;
}


/* ============================
   Footer Wave — Animated Flow
   ============================ */
.footer-curve {
    --footer-bg: var(--nav-blue-start, #0b2c6a);
    --footer-wave-h: clamp(56px, 7vw, 140px);
    --wave-speed-1: 8s; /* ความเร็วคลื่นชั้นหน้า */
    --wave-speed-2: 16s; /* ความเร็วคลื่นชั้นหลัง */
    --wave-size-1: 240%; /* ระยะทางที่เคลื่อนที่ (กว้างขึ้น = ไหลเนียน) */
    --wave-size-2: 300%;
    position: relative;
    background: var(--footer-bg);
    color: #fff;
}

    /* ชั้นคลื่นหน้า */
    .footer-curve::before,
    .footer-curve::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: var(--footer-wave-h);
        background: var(--footer-bg);
        pointer-events: none;
        display: block;
    }

    /* ยื่นคลื่นขึ้นเหนือเส้นบนเล็กน้อยกัน seam */
    .footer-curve::before {
        top: calc(-1 * var(--footer-wave-h) + 1px);
    }

    .footer-curve::after {
        top: calc(-0.75 * var(--footer-wave-h));
    }
/* ชั้นหลังยกลงมานิดให้มีมิติ */

@supports (-webkit-mask: none) or (mask: none) {
    /* ====== ชั้นหน้า (เร็วกว่า) ====== */
    /* ชั้นหน้า (เร็วกว่า) — สวิงไป-กลับ */
    .footer-curve::before {
        -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 140" preserveAspectRatio="none">\
  <path d="M0,120 C240,80 480,160 720,110 C960,60 1200,90 1440,70 L1440,140 L0,140 Z" fill="black"/>\
</svg>') no-repeat 0% 100%/ var(--wave-size-1) 100%;
        mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 140" preserveAspectRatio="none">\
  <path d="M0,120 C240,80 480,160 720,110 C960,60 1200,90 1440,70 L1440,140 L0,140 Z" fill="black"/>\
</svg>') no-repeat 0% 100%/ var(--wave-size-1) 100%;
        animation: wave-move-1 var(--wave-speed-1) linear infinite alternate;
    }
    /* ชั้นหลัง (ช้ากว่า + ระยะไกลกว่า) — เริ่มทิศกลับกัน */
    .footer-curve::after {
        opacity: .9;
        -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 140" preserveAspectRatio="none">\
  <path d="M0,100 C220,65 520,150 720,95 C980,40 1220,85 1440,60 L1440,140 L0,140 Z" fill="black"/>\
</svg>') no-repeat 100% 100%/ var(--wave-size-2) 100%;
        mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 140" preserveAspectRatio="none">\
  <path d="M0,100 C220,65 520,150 720,95 C980,40 1220,85 1440,60 L1440,140 L0,140 Z" fill="black"/>\
</svg>') no-repeat 100% 100%/ var(--wave-size-2) 100%;
        animation: wave-move-2 var(--wave-speed-2) linear infinite alternate-reverse;
    }
}

/* เคลื่อนไหวแนวนอนของ mask (ไม่แตะสีพื้น) */
@keyframes wave-move-1 {
    from {
        -webkit-mask-position: 0% 100%;
        mask-position: 0% 100%;
    }

    to {
        -webkit-mask-position: 100% 100%;
        mask-position: 100% 100%;
    }
}

@keyframes wave-move-2 {
    from {
        -webkit-mask-position: 100% 100%;
        mask-position: 100% 100%;
    }

    to {
        -webkit-mask-position: 0% 100%;
        mask-position: 0% 100%;
    }
}

/* ปิดแอนิเมชันสำหรับผู้ใช้ที่ขอลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
    .footer-curve::before,
    .footer-curve::after {
        animation: none !important;
    }
}

:root {
    --footer-wave-h: clamp(56px, 7vw, 140px);
}

/* เว้นช่องว่างพอดีกับคลื่นที่ยกขึ้น (ปรับ 0.5–0.8 ได้) */
.footer-gap-spacer {
    height: calc(var(--footer-wave-h) * 0.2);
}

/* จอเล็กเผื่อเพิ่มนิด */
@media (max-width: 576px) {
    .footer-gap-spacer {
        height: calc(var(--footer-wave-h) * 0.7);
    }
}


/* ถ้าส่วนเหนือ footer มี overflow:hidden; คลื่นจะถูกตัด
   ให้แน่ใจว่าส่วนที่อยู่ก่อน footer ไม่ได้ตั้ง overflow:hidden;
   หรือย้าย overflow:hidden ไปไว้ใน children ที่จำเป็นเท่านั้น */
/* ===== กันคอนเทนต์โดน footer ทับ ===== */

/* ย้ายตัวแปรคลื่นออกมาให้ใช้งานได้ทั้งหน้า (ถ้ามีใน .footer-curve อยู่แล้วก็ไม่เป็นไร) */
/* Submenu layout */
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .25rem;
        margin-right: .25rem;
    }

/* Hover เปิด submenu บนจอใหญ่ */
@media (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* มือถือ: ทำเป็นซ้อนในแนวตั้งอ่านง่าย */
@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-menu {
        position: static;
        float: none;
        margin: .25rem 0 .5rem 1rem;
    }
}


/* ==============================scrim/overlay ทั้งหน้า”========================================== */

/* ===== Content area: Multi-tone Gray–Blue gradient (subtle, readable) ===== */
.page-card--dark {
    /* ชั้นไล่สีหลายโทน + วิกเน็ตน้ำเงินจาง ๆ รอบขอบ */
    background:
    /* วิกเน็ตฟ้าจางที่ขอบบน */
    radial-gradient(1100px 420px at 50% -12%, rgba(110,168,254,.06), transparent 60%),
    /* วิกเน็ตฟ้าจางที่ขอบซ้าย/ขวา */
    radial-gradient(900px 360px at 0% 12%, rgba(110,168,254,.045), transparent 55%), radial-gradient(900px 360px at 100% 10%, rgba(110,168,254,.045), transparent 55%),
    /* ชั้นเฉียง เทา→น้ำเงินหม่น */
    linear-gradient(135deg, #f8fafc 0%, #eef3f9 22%, #e7edf7 42%, #e1e9f5 58%, #dbe4f2 72%, #d6e0f0 85%, #d2dcf0 100%),
    /* ชั้นล่างสุด แนวตั้ง เทาอ่อน→เทาฟ้าจาง */
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 40%, #f0f4fa 100%);
    color: var(--ink-800);
    border: 1px solid rgba(16,58,113,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.9);
}

    /* ข้อความ/หัวข้อยังคมชัดบนพื้นสว่าง */
    .page-card--dark h1, .page-card--dark h2, .page-card--dark h3,
    .page-card--dark h4, .page-card--dark h5, .page-card--dark h6 {
        color: var(--ink-900);
    }

    .page-card--dark .text-muted {
        color: #6c757d !important;
    }

    /* ลิงก์คุมโทนฟ้าให้เข้ากับพื้น */
    .page-card--dark a {
        color: #2f6fcd;
    }

        .page-card--dark a:hover {
            color: #1a4f9c;
            text-decoration: underline;
        }

    /* ฟอร์ม/ปุ่ม — โทนสว่าง อ่านง่าย */
    .page-card--dark .form-control,
    .page-card--dark .form-select,
    .page-card--dark .form-check-input {
        background-color: #fff;
        border-color: rgba(30,76,155,.22);
        color: var(--ink-800);
    }

        .page-card--dark .form-control::placeholder {
            color: #6c7f99;
        }

        .page-card--dark .form-control:focus,
        .page-card--dark .form-select:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 .2rem rgba(13,110,253,.14);
        }

    /* ปุ่ม */
    .page-card--dark .btn-primary {
        background: #4285f4;
        border-color: #4285f4;
    }

        .page-card--dark .btn-primary:hover {
            background: #2f6fcd;
            border-color: #2f6fcd;
        }

    .page-card--dark .btn-outline-primary {
        color: #2f6fcd;
        border-color: #2f6fcd;
    }

        .page-card--dark .btn-outline-primary:hover {
            color: #fff;
            background: #2f6fcd;
        }

    /* การ์ด/ตารางภายในให้สะอาดตา */
    .page-card--dark .card,
    .page-card--dark .table {
        background-color: #fff;
        color: inherit;
        border-color: rgba(16,58,113,.10);
        box-shadow: var(--shadow-sm);
    }

    /* Alerts เข้ากับโทนเทา–น้ำเงินอ่อน */
    .page-card--dark .alert-info {
        background: linear-gradient(180deg, var(--blue-100), #fff);
        border-color: #cfe2ff;
        color: #0a2342;
        box-shadow: var(--shadow-sm);
    }

    .page-card--dark .alert-success,
    .page-card--dark .alert-danger {
        box-shadow: var(--shadow-sm);
    }