/* ================= BASE ================= */
:root{
    --primary:#0B1F3A;
    --gold:#c9a54d;
    --light:#ffffff;
    --soft:#f4f6f9;
    --dark:#091728;
}
body{
    margin:0;
    font-family:Sarabun,sans-serif;
    background:#f4f6f9;
}
*{
    box-sizing:border-box;
}
.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ================= NAVBAR ================= */
.navbar{
    position:fixed;
    top:0;
    width:100%;
    background:rgba(11,31,58,.9);
    backdrop-filter:blur(6px);
    color:#fff;
    padding:15px 0;
    z-index:999;
    box-shadow:0 4px 20px rgba(0,0,0,.2);
}
body{padding-top:90px;}

.nav-wrap{display:flex;justify-content:space-between;align-items:center}
.nav-menu{display:flex;gap:20px;list-style:none}
.nav-menu a{color:#fff;text-decoration:none;opacity:.9}
.nav-menu a:hover{opacity:1;color:#D4AF37}

/* ================= HERO ================= */
.hero{
    position:relative;
    height:100vh;
    background:url('images/hero.jpg') center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.7));
}

.hero-overlay{
    position:relative;
    z-index:2;
    animation:heroUp 1s ease forwards;
}

.hero h1{
    font-size:clamp(28px,4vw,56px);
    text-shadow:0 4px 20px rgba(0,0,0,.6);
}

/* ================= SECTIONS ================= */
.section{padding:100px 20px}
.section h2{
    text-align:center;
    font-size:32px;
    margin-bottom:50px;
    position:relative;
}
.section h2::after{
    content:"";
    width:60px;
    height:3px;
    background:#c9a54d;
    display:block;
    margin:15px auto 0;
}

.light{background:#fff}
.lightG{background:#6b6b6b}
.dark{background:#091728;color:#fff}

/* ================= HISTORY ================= */
#history{line-height:1.9;font-size:17px;max-width:1000px;margin:auto}
#history u{
    font-weight:bold;
    font-size:20px;
    text-decoration:none;
    display:block;
    margin-bottom:10px;
    color:#c9a54d;
}

/* ================= FILTER BUTTONS ================= */
.activity-filter button{
    background:#0B1F3A;
    color:#fff;
    border:none;
    padding:10px 18px;
    margin:5px;
    border-radius:30px;
    cursor:pointer;
    transition:.3s;
}
.activity-filter button:hover{background:#D4AF37;color:#000}
.activity-filter button.active{background:#D4AF37;color:#000}

/* ================= ACTIVITY CARDS ================= */
.activity-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
    margin-top:20px;
}

.activity-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
    cursor:pointer;
}
.activity-card:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}
.activity-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}
.activity-card::after{
    content:"ดูรายละเอียด";
    position:absolute;
    bottom:15px;
    right:15px;
    background:#c9a54d;
    color:#000;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    opacity:0;
    transition:.3s;
}
.activity-card:hover::after{
    opacity:1;
}
/* ================= COMMANDER ================= */
.commander-box img{width:200px;border-radius:10px}

/* ================= MODAL ================= */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(6px);
    animation:fadeIn .3s ease;
    z-index:1500;

    /* ⭐ เพิ่มตรงนี้ */
    justify-content:center;
    align-items:center;
    padding:20px;
}

.modal-content{
    background:#fff;
    padding:20px;
    width:100%;
    max-width:900px;
    max-height:90vh;
    overflow-y:auto;
    border-radius:12px;
    animation:zoomIn .4s ease;
}

.close{float:right;font-size:28px;cursor:pointer}

.modal-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:10px;
    margin-top:15px;
}
/* ผู้บังคับบัญชาให้อยู่กลาง */
/* ================= COMMANDER PREMIUM CENTER ================= */

#commanders{
    text-align:center;
    padding:120px 20px;
        background:linear-gradient(135deg,#f8f6f0,#eef2f7);

    /*background:linear-gradient(135deg,#ffffff,#eef3f9);*/
    position:relative;
    overflow:hidden;
}
#activities{background:var(--soft);}
#vod{
    background:#0f1c2e;
    color:#fff;
}
/* เอฟเฟกต์พื้นหลังจาง ๆ */
#commanders::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:radial-gradient(circle,#c9a54d22,transparent 70%);
    top:-100px;
    right:-100px;
}

/* กล่องหลัก */
.commander-box{
    position:relative;
    width:100%;
    max-width:480px;
    margin:60px auto 0;
    padding:45px 30px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
    border-top:6px solid #c9a54d;
    animation:fadeUp 1s ease forwards;
    opacity:0;
    transform:translateY(40px);
}

/* รูป */
.commander-box img{
    width:240px;
    height:300px;
    object-fit:cover;
    border-radius:16px;
    border:4px solid #f1f1f1;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    margin-bottom:25px;
    animation:zoomSoft 1.2s ease forwards;
}

/* ชื่อ */
.commander-box h3{
    font-size:24px;
    margin:10px 0 8px;
    font-weight:700;
    color:#0B1F3A;
    letter-spacing:.5px;
}

.commander-box h3::after{
    content:"";
    display:block;
    width:70px;
    height:3px;
    background:#c9a54d;
    margin:14px auto 0;
}

/* ตำแหน่ง */
.commander-box p{
    margin:8px 0;
    font-size:17px;
    color:#555;
}

.commander-box p:first-of-type{
    font-weight:600;
    color:#c9a54d;
}

/* ================= ANIMATION ================= */

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes zoomSoft{
    from{
        transform:scale(.9);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}



.modal-gallery img{width:100%;border-radius:8px}



/* ================= CONTACT PROFESSIONAL ================= */

.contact-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:50px;
}

.contact-item{
    display:flex;
    gap:18px;
    padding:22px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(6px);
    transition:.35s ease;
    align-items:flex-start;
    border:1px solid rgba(255,255,255,.08);
}

.contact-item:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.12);
    box-shadow:0 15px 40px rgba(0,0,0,.25);
}

.contact-icon{
    font-size:28px;
    min-width:40px;
}

.contact-item strong{
    display:block;
    margin-bottom:6px;
    font-size:16px;
    color:#d4af37;
}

.contact-item p{
    margin:0;
    font-size:14px;
    line-height:1.6;
}

.contact-item a{
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.3);
}

.contact-item a:hover{
    color:#d4af37;
    border-color:#d4af37;
}

/* ไฮไลต์ช่องสำคัญ */
.contact-item.highlight{
    border-left:4px solid #d4af37;
    background:rgba(255,255,255,.1);
}

/* มือถือ */
@media (max-width:768px){
    .contact-grid{
        grid-template-columns:1fr;
    }
}


/* ================= WELCOME POPUP ================= */
.welcome-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(6px);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:2000;
    animation:fadeIn .4s ease;
}

.welcome-box{
    background:#fff;
    padding:50px 40px;
    border-radius:20px;
    text-align:center;
    max-width:420px;
    width:90%;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
    animation:zoomIn .4s ease;
    border-top:6px solid #c9a54d;
}

.welcome-box h2{
    margin:0 0 15px;
    color:#0B1F3A;
}

.welcome-box p{
    margin-bottom:25px;
    color:#444;
}

.welcome-box button{
    background:#0B1F3A;
    color:#fff;
    border:none;
    padding:12px 30px;
    border-radius:30px;
    cursor:pointer;
    font-size:15px;
    transition:.3s;
}

.welcome-box button:hover{
    background:#c9a54d;
    color:#000;
}

/* ================= FOOTER ================= */
.footer{
    text-align:center;
    padding:25px 15px;
    background:#0B1F3A;
    color:#fff;
    font-size:14px;
    letter-spacing:.5px;
}




/* ================= HERO BUTTON ================= */
.hero p{
    opacity:.85;
    letter-spacing:1px;
}
.hero-btn{
    display:inline-block;
    margin-top:30px;
    padding:14px 36px;
    font-size:16px;
    font-weight:600;
    color:#fff;
    background:linear-gradient(135deg,#c9a54d,#d4af37);
    border-radius:40px;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(0,0,0,.35);
    transition:.35s ease;
    letter-spacing:.5px;
}

.hero-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.45);
    background:linear-gradient(135deg,#d4af37,#f1d06b);
    color:#000;
}
html{
    scroll-behavior:smooth;
}




/* ================= LOGO WRAPPER ================= */

.logo-wrapper{
    position:relative;
    display:inline-block;
    margin-bottom:30px;
}

/* ตราหน่วย */
.unit-logo{
    width:160px;
    position:relative;
    z-index:2;
    animation:floatLogo 5s ease-in-out infinite;
}

/* แสงทองเรืองรอง */
.logo-glow{
    position:absolute;
    inset:-20px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(212,175,55,.45), transparent 70%);
    animation:pulseGlow 3s ease-in-out infinite;
    z-index:1;
}

/* ลอยเบา ๆ */
@keyframes floatLogo{
    0% { transform:translateY(0); }
    50% { transform:translateY(-8px); }
    100% { transform:translateY(0); }
}

/* แสงกระเพื่อม */
@keyframes pulseGlow{
    0% { transform:scale(1); opacity:.7; }
    50% { transform:scale(1.1); opacity:1; }
    100% { transform:scale(1); opacity:.7; }
}


/* ================= ANIMATIONS ================= */
.fade-in{animation:fadeIn .6s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes zoomIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

/* ================= MOBILE ================= */
@media(max-width:768px){
    .nav-menu{display:none}
    .hero{height:55vh}
    .section{padding:70px 15px}
}
/* ================= MOBILE RESPONSIVE FIX ================= */
@media (max-width: 768px){

    .section{
        padding:60px 15px;
    }

    .hero{
        height:60vh;
    }

    .hero h1{
        font-size:24px;
    }

    #history{
        font-size:15px;
        padding:0 5px;
         background:#ffffff;
    }

    .activity-grid{
        grid-template-columns:1fr;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

}



/* ================= VOD SECTION ================= */

.vod-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    margin-top:40px;
}

.vod-card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s ease;
}

.vod-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,.2);
}

.vod-card h3{
    margin-bottom:15px;
    color:#0B1F3A;
    font-size:18px;
}

.vod-card video,
.vod-card iframe{
    width:100%;
    height:300px;
    border-radius:14px;
    border:none;
}

/* Mobile */
@media(max-width:768px){
    .vod-card video,
    .vod-card iframe{
        height:220px;
    }
}

.popup-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.popup-box{
    position:relative;
    max-width:90%;
    max-height:90%;
}

.popup-box img{
    width:100%;
    height:auto;
    max-width:1920px;
    max-height:1080px;
    object-fit:contain;
    border-radius:10px;
}

.popup-close{
    position:absolute;
    top:-15px;
    right:-15px;
    background:#fff;
    border-radius:50%;
    padding:6px 12px;
    cursor:pointer;
    font-size:18px;
    font-weight:bold;
}

/* ================= DROPDOWN MENU ================= */

.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    background:#0B1F3A;
    list-style:none;
    padding:0;
    margin:0;
    min-width:200px;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.3);
    display:none;
}

/* รายการใน dropdown */
.dropdown-menu li a{
    display:block;
    padding:12px 16px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
}

.dropdown-menu li a:hover{
    background:#c9a54d;
    color:#000;
}

/* hover ให้ dropdown แสดง */
.dropdown:hover .dropdown-menu{
    display:block;
}