:root {
    --main: #0089E4;
    --main-dark: #006BB3;
    --main-soft: #EEF8FF;
    --text: #1E293B;
    --muted: #64748B;
    --surface: #FFFFFF;
    --bg: #F6F9FC;
    --border: #E2E8F0;
    --shadow: 0 12px 35px rgba(15, 23, 42, .08);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Sarabun", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

main {
    min-height: 50vh;
}

.site-navbar {
    padding: 8px 0;
    background: rgba(0, 80, 135, .92);
    backdrop-filter: blur(12px);
    transition: .25s ease;
}

.site-navbar.scrolled {
    background: rgba(0, 71, 119, .98);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

.navbar-brand {
    color: #fff !important;
    line-height: 1.1;
}

.navbar-brand img {
    object-fit: contain;
}

.navbar-brand strong {
    display: block;
    font-size: 1rem;
    letter-spacing: .08em;
}

.navbar-brand small {
    display: block;
    font-size: .72rem;
    opacity: .88;
    margin-top: 2px;
}

.site-navbar .nav-link {
    color: rgba(255,255,255,.94);
    font-weight: 500;
    padding: .65rem .8rem !important;
    border-radius: 8px;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: #fff;
    background: rgba(255,255,255,.10);
}

.nav-contact {
    background: #fff;
    color: var(--main-dark) !important;
    margin-left: .35rem;
}

.nav-contact:hover {
    background: #F1F8FF !important;
}

.dropdown-menu {
    border: 0;
    border-radius: 12px;
    padding: .5rem;
}

.dropdown-item {
    border-radius: 8px;
    padding: .55rem .8rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--main-soft);
    color: var(--main-dark);
}

/* HERO */
.hero {
    position: relative;
    height: clamp(500px, 78vh, 780px);
    overflow: hidden;
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item {
    height: 100%;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.22), rgba(0,0,0,.35));
}

.hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    color: #fff;
    z-index: 2;
}

.hero-content .container {
    padding-top: 60px;
}

.hero-kicker,
.section-eyebrow,
.page-hero-kicker {
    display: inline-block;
    color: var(--main);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.hero-kicker {
    color: rgba(255,255,255,.82);
}

.hero-content h1,
.hero-content h2 {
    font-size: clamp(2.25rem, 6vw, 4.8rem);
    font-weight: 700;
    line-height: 1.12;
    margin: .45rem 0 1rem;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.35rem);
    max-width: 680px;
    margin-bottom: 1.5rem;
    color: rgba(255,255,255,.92);
}

.carousel-item.active .hero-content > .container {
    animation: heroIn .8s ease both;
}

@keyframes heroIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* INNER PAGE */
.page-hero {
    padding: 145px 0 70px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(0,70,120,.90), rgba(0,137,228,.68)),
        url("/img/slide1.png") center / cover;
}

.page-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: .25rem 0 0;
    font-weight: 700;
}

.page-hero-kicker {
    color: rgba(255,255,255,.78);
}

/* SECTIONS */
.section {
    padding: clamp(60px, 8vw, 95px) 0;
}

.section-soft {
    background: #EEF7FC;
}

.section-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 42px;
}

.section-heading h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: .25rem 0 .55rem;
}

.section-heading p {
    color: var(--muted);
    margin: 0;
}

/* NEWS */
.news-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(15, 23, 42, .04);
    transition: transform .25s ease, box-shadow .25s ease;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.news-image-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.news-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.news-card:hover .news-image-wrap img {
    transform: scale(1.04);
}

.news-body {
    padding: 20px;
}

.news-body time {
    color: var(--main);
    font-size: .9rem;
}

.news-body h3 {
    font-size: 1.15rem;
    margin: .35rem 0 0;
    font-weight: 600;
}

/* GALLERY */
.gallery-grid {
    --bs-gutter-y: 1rem;
}

.gallery-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-image:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow);
}

/* SYSTEM */
.system-card {
    display: block;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(15, 23, 42, .04);
    transition: transform .25s ease, box-shadow .25s ease;
}

.system-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

/* BUTTON */
.btn-primary {
    --bs-btn-bg: var(--main);
    --bs-btn-border-color: var(--main);
    --bs-btn-hover-bg: var(--main-dark);
    --bs-btn-hover-border-color: var(--main-dark);
}

/* FOOTER */
.site-footer {
    background: #075A91;
    color: rgba(255,255,255,.88);
    padding: 55px 0 25px;
}

.site-footer h2 {
    color: #fff;
    font-size: 1.35rem;
    margin: .2rem 0 .4rem;
}

.footer-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: .12em;
}

.footer-contact p {
    margin: 0 0 .6rem;
}

.site-footer a {
    color: #fff;
}

.footer-line {
    border-color: rgba(255,255,255,.18);
    margin: 35px 0 18px;
}

/* LIGHTWEIGHT SCROLL REVEAL */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .site-navbar .navbar-collapse {
        margin-top: 10px;
        padding: 10px;
        background: rgba(0, 65, 110, .98);
        border-radius: 12px;
    }

    .nav-contact {
        margin-left: 0;
        margin-top: .3rem;
        display: inline-block;
    }
}

@media (max-width: 575.98px) {
    .hero {
        height: 620px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-content .container {
        padding-left: 28px;
        padding-right: 28px;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .section {
        padding: 55px 0;
    }

    .page-hero {
        padding: 125px 0 55px;
    }
}

/* INNER CONTENT */
.content-card,โ-card{background:#fff;border:1px solid var(--border);
    border-radius:22px;padding:clamp(24px,5vw,50px);box-shadow:var(--shadow)}
.content-card{position:relative;overflow:hidden}.content-accent{position:absolute;inset:0 auto 0 0;width:5px;background:var(--main)}
.content-card h2,.content-card h3{font-weight:700}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.info-box{padding:18px;background:var(--main-soft);border-radius:14px}.info-box span{display:block;color:var(--muted);font-size:.9rem;margin-bottom:4px}.info-box strong{display:block}
.clean-list{padding-left:1.2rem}.clean-list li{margin-bottom:.6rem}.symbol-box,.notice-box{padding:22px;background:var(--main-soft);border:1px solid #D7EEFF;border-radius:16px}
โ-image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
โ-quote{padding:20px 22px;margin:20px 0;background:var(--main-soft);border-left:4px solid var(--main);border-radius:12px;font-size:1.15rem;font-weight:600}
.quote-panel{padding:32px 20px;border-radius:18px;background:linear-gradient(135deg,var(--main-soft),#fff);border:1px solid #D7EEFF}.quote-panel p{color:var(--main-dark);font-size:clamp(1.35rem,3vw,2rem);font-weight:700}
.service-card{
    display:flex;
    flex-direction:column;
    height:100%;
    padding:12px;
    color:var(--text);
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 5px 20px rgba(15,23,42,.05);
    text-decoration:none;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
    color:var(--text);
    transform:translateY(-6px);
    box-shadow:0 14px 34px rgba(15,23,42,.11);
    border-color:#cfeaff;
}
.service-image{
    width:100%;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    line-height:0;
}
.service-image img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    display:block;
}
.service-content{
    padding:14px 6px 8px;
    text-align:center;
}
.service-card h3{
    font-size:1.08rem;
    line-height:1.4;
    margin:0 0 5px;
    font-weight:700;
}
.service-card p{
    color:var(--muted);
    margin:0;
    font-size:.92rem;
    line-height:1.5;
}
.services-grid > [class*="col-"]{
    display:flex;
}
.contact-list>div{padding:18px 0;border-bottom:1px solid var(--border)}.contact-list>div:last-child{border-bottom:0}.contact-label{display:block;color:var(--main-dark);font-weight:700;margin-bottom:3px}.contact-list p{margin:0}
.contact-side{padding:28px;border-radius:22px;background:linear-gradient(145deg,var(--main),var(--main-dark));color:#fff}.contact-side img{width:150px;height:150px;object-fit:contain;display:block;margin:auto}.contact-side h3{text-align:center;margin-bottom:18px}
.site-navbar .nav-link.active{background:rgba(255,255,255,.14);color:#fff}
@media(max-width:767.98px){.info-grid{grid-template-columns:1fr}.service-content{padding:12px 5px 6px}}

/* =========================
   VISION PAGE
========================= */

.vision-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 35px;
    box-shadow: var(--shadow);
}

/* กล่องสำหรับใส่รูป */
.vision-image-wrap {
    width: 100%;
    height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f4f7fa;
    border-radius: 18px;
    overflow: hidden;
}

/* รูปวิสัยทัศน์ */
.vision-gallery img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* เนื้อหาฝั่งขวา */
.vision-content {
    padding: 10px 15px;
}

/* กล่องข้อความวิสัยทัศน์ */
.vision-quote {
    background: var(--main-soft);
    border-left: 5px solid var(--main);

    padding: 18px 22px;
    margin: 20px 0;

    border-radius: 12px;

    font-size: 1.1rem;
    font-weight: 500;
}


/* =========================
   TABLET
========================= */

@media (max-width: 991.98px) {

    .vision-card {
        padding: 25px;
    }

    .vision-image-wrap {
        height: auto;
        aspect-ratio: 680 / 750;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 680px) {

    .vision-card {
        padding: 18px;
        border-radius: 18px;
    }

    .vision-content {
        padding: 15px 5px 0;
    }

    .vision-quote {
        padding: 15px;
        font-size: 1rem;
    }

}


/* ==================================================
   SPECIAL BANNER
   ================================================== */

.special-banner {
    padding: 35px 0 10px;
    background: transparent;
}

.special-banner-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.special-banner-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    transition: transform .5s ease;
}

.special-banner-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(15, 23, 42, .13);
}

.special-banner-link:hover img {
    transform: scale(1.02);
}


/* Mobile */
@media (max-width: 767.98px) {

    .special-banner {
        padding: 25px 0 5px;
    }

    .special-banner-link {
        border-radius: 14px;
    }

    .special-banner-link img {
        aspect-ratio: 16 / 7;
    }

}
/* ==================================================
   SPECIAL BANNER SLIDER
   Auto slide + ปุ่มเลื่อน + จุดบอกตำแหน่ง
================================================== */
.banner-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .08);
}

.banner-slider .slides {
    position: relative;
    width: 100%;
}

.banner-slider .slide {
    display: none;
    width: 100%;
    animation: bannerFade .55s ease;
}

.banner-slider .slide.active {
    display: block;
}

.banner-slider .slide a {
    display: block;
    width: 100%;
}


/* Banner สำหรับคอมพิวเตอร์ */
.banner-slider .slide img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}


/* Banner สำหรับมือถือ */
@media (max-width: 767.98px) {

    .banner-slider .slide img {
        height: 220px;
        object-fit: cover;
    }

}


@keyframes bannerFade {
    from { opacity: .2; }
    to { opacity: 1; }
}

.slider-btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    background: rgba(0, 45, 75, .72);
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, background .25s ease, transform .25s ease;
}

.banner-slider:hover .slider-btn,
.banner-slider:focus-within .slider-btn {
    opacity: 1;
}

.slider-btn:hover {
    background: var(--main);
    transform: translateY(-50%) scale(1.06);
}

.slider-btn.prev { left: 18px; }
.slider-btn.next { right: 18px; }

.slider-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 6;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.62);
    box-shadow: 0 1px 5px rgba(0,0,0,.28);
    cursor: pointer;
    transition: width .25s ease, background .25s ease, border-radius .25s ease;
}

.slider-dot.active {
    width: 26px;
    border-radius: 10px;
    background: #fff;
}

@media (max-width: 767.98px) {
    .banner-slider { border-radius: 14px; }

    .slider-btn {
        width: 38px;
        height: 38px;
        font-size: 1.4rem;
        opacity: 1;
    }

    .slider-btn.prev { left: 10px; }
    .slider-btn.next { right: 10px; }
    .slider-dots { bottom: 10px; }
    .banner-slider .slide img { max-height: none; }
}


/* =========================
   SCHOOL VIDEO
========================= */

.school-video-section {

    padding: 80px 20px;

    max-width: 1400px;

    margin: auto;

}


.school-video-section .section-title {

    text-align: center;

    margin-bottom: 45px;

}


.school-video-section .section-title span {

    display: block;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #2f6f9f;

    margin-bottom: 10px;

}


.school-video-section .section-title h2 {

    font-size: 38px;

    color: #26384b;

    margin-bottom: 10px;

}


.school-video-section .section-title p {

    font-size: 17px;

    color: #6b7280;

}


/* VIDEO GRID */

.school-video-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}


/* VIDEO CARD */

.school-video-card {

    background: #ffffff;

    padding: 12px;

    border-radius: 20px;

    box-shadow:

        0 10px 30px rgba(0,0,0,0.08);

    transition: 0.3s;

}


.school-video-card:hover {

    transform: translateY(-6px);

    box-shadow:

        0 20px 40px rgba(0,0,0,0.12);

}


/* VIDEO RATIO */

.video-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 14px;

}


.video-frame iframe {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

}


/* MOBILE */

@media (max-width: 768px) {

    .school-video-section {

        padding: 60px 15px;

    }


    .school-video-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .school-video-section .section-title h2 {

        font-size: 30px;

    }

}