/* หน้าแรก: แบนเนอร์ + การ์ดลัด + ส่วนร่วม — โหลดก่อน CSS ธีม (space-earth / home-space-theme / npu-hero) ซึ่งเขียนทับบางส่วน */

/* Fixed Aspect Ratio Slider */
.hero-carousel-wrapper {
    --wave-h: clamp(6px, 2.1vw, 40px); /* ความสูงแถบคลื่นขอบล่าง — คลื่นตื้น ตัดขอบภาพไม่เกิน ~15px (โปสเตอร์บางใบมีตัวหนังสือชิดขอบล่าง) */
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 860; /* ขนาดแบนเนอร์มาตรฐาน 1920×860 (เดิม 1920×600) */
    max-height: 860px;
    overflow: hidden;
    background: #0b1d3a; /* สีพื้นระหว่างรอโหลดรูป */
    /* ขอบล่างเป็นคลื่น: ตัดให้โปร่งใส (ไม่ระบายสีทับ) จึงเข้ากับทั้งพื้นอวกาศและพื้นขาว */
    -webkit-mask:
        linear-gradient(#000, #000) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,0H1440V34C1320,40 1200,46 1080,46C960,46 840,42 720,38C600,34 480,30 360,30C240,30 120,36 0,42Z'/%3E%3C/svg%3E") bottom / 100% var(--wave-h) no-repeat;
    mask:
        linear-gradient(#000, #000) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,0H1440V34C1320,40 1200,46 1080,46C960,46 840,42 720,38C600,34 480,30 360,30C240,30 120,36 0,42Z'/%3E%3C/svg%3E") bottom / 100% var(--wave-h) no-repeat;
}
/* ขอบมืดจางๆ ให้ลูกศร/จุดบอกสไลด์อ่านง่ายบนรูปสีอ่อน — pointer-events:none ลิงก์แบนเนอร์ยังกดได้ */
.hero-carousel-wrapper .carousel-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .22) 100%),
        linear-gradient(to top, rgba(0, 0, 0, .18), transparent 22%);
    transition: opacity .4s ease;
}
/* เส้นทองตามขอบคลื่น: เส้นจาง (track) + เส้นที่วิ่งจากซ้ายไปขวาจนครบเวลาแล้วเปลี่ยนสไลด์ */
.hero-wave-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--wave-h);
    z-index: 11;
    pointer-events: none;
    overflow: visible;
}
.hero-wave-line path {
    fill: none;
    stroke-width: 4px;
    vector-effect: non-scaling-stroke;
}
.hero-wave-track path { stroke: rgba(255, 215, 0, .3); }
.hero-wave-progress path { stroke: var(--npu-gold, #ffd700); }
.hero-wave-progress {
    clip-path: inset(0 100% 0 0);
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, .7));
}
.hero-wave-progress.is-running {
    animation: heroWaveProgress var(--hero-interval, 5s) linear forwards;
}
@keyframes heroWaveProgress {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
/* รูปการ์ดลิงก์ด่วนถูกครอบด้วย <picture> (WebP + สำรอง) — ให้ <picture> เต็มกรอบ เพื่อให้ img height:100% ทำงานเหมือนเดิม */
.quick-link-img-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* มือถือ: สัดส่วนเดียวกับจอคอม (1920×860) แสดงเต็มใบ และปิดเอฟเฟกต์ซูม (Ken Burns) ที่ตัดขอบภาพ */
@media (max-width: 768px) {
    .hero-carousel-wrapper {
        --wave-h: 6px; /* จอเล็ก: คลื่นเตี้ยมาก ไม่ตัดตัวหนังสือบนโปสเตอร์ */
        max-height: none;
    }
    /* ใช้ .carousel-inner เพิ่ม specificity — กฎหลักด้านล่างไฟล์ (kenBurns) จะได้ไม่ทับ */
    .hero-carousel-wrapper .carousel-inner .carousel-item.active img {
        animation: none;
        transform: none;
    }
}
.hero-carousel-wrapper .carousel,
.hero-carousel-wrapper .carousel-inner,
.hero-carousel-wrapper .carousel-item {
    height: 100%;
}
@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.03); } /* เดิม 1.08 ตัดขอบโปสเตอร์ด้านละ ~4% ตัวหนังสือชิดขอบหาย */
}
/* แสดงรูปเต็มใบเสมอ (contain) — รูป 1920×860 จะเต็มกรอบพอดี
   รูปสัดส่วนอื่น (เช่นแบนเนอร์เก่า 1920×600) ไม่ถูกครอป ช่องว่างที่เหลือเติมด้วยภาพเดียวกันแบบเบลอ (.hero-slide-bg) */
.hero-carousel-wrapper .carousel-item {
    position: relative;
    overflow: hidden;
}
.hero-slide-bg {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(.7) saturate(1.15);
    transform: scale(1.1);
    pointer-events: none;
}
.hero-carousel-wrapper .carousel-item img {
    position: relative; /* อยู่เหนือพื้นเบลอ */
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1);
    will-change: transform;
}
.hero-carousel-wrapper .carousel-item.active img {
    animation: kenBurns 8s ease-out forwards;
}
.hero-carousel-wrapper .carousel-item.hero-fallback img { object-fit: cover; } /* ภาพถ่ายสำรอง ไม่มีตัวหนังสือ เต็มกรอบได้ */

/* Caption Animation for Carousel */
.hero-carousel-wrapper .carousel-caption {
    bottom: calc(var(--wave-h) * .5 + 42px); /* อยู่เหนือจุดบอกสไลด์ ไม่ซ้อนกัน */
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s; /* Delay 0.5s for smooth entry */
}
.hero-carousel-wrapper .carousel-item.active .carousel-caption {
    opacity: 1;
    transform: translateY(0);
}
/* Carousel Indicators (Expanding Pills) */
.hero-carousel-wrapper .carousel-indicators {
    bottom: calc(var(--wave-h) * .5 + 14px); /* ยกขึ้นพ้นขอบคลื่น */
    z-index: 10;
    gap: 8px;
}
.hero-carousel-wrapper .carousel-indicators button {
    width: 12px;
    height: 8px;
    border-radius: 10px;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.75);
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .35); /* เห็นชัดบนโปสเตอร์พื้นสีอ่อน */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}
/* ขยายพื้นที่กดเป็น ≥24px (WCAG 2.5.8) โดยจุดยังดูเท่าเดิม — gap 16px = ขยายข้างละ 8px ไม่ทับกัน */
.hero-carousel-wrapper .carousel-indicators { gap: 16px; }
.hero-carousel-wrapper .carousel-indicators button::after { content: ""; position: absolute; inset: -8px; }
.hero-carousel-wrapper .carousel-indicators button.active {
    width: 35px;
    background-color: var(--npu-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Carousel Controls (Glassmorphism & Slide-in) */
.hero-carousel-wrapper .carousel-control-prev,
.hero-carousel-wrapper .carousel-control-next {
    width: 60px;
    height: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.hero-carousel-wrapper .carousel-control-prev {
    left: -20px;
}
.hero-carousel-wrapper .carousel-control-next {
    right: -20px;
}
.hero-carousel-wrapper:hover .carousel-control-prev {
    opacity: 1;
    left: 30px;
}
.hero-carousel-wrapper:hover .carousel-control-next {
    opacity: 1;
    right: 30px;
}
.hero-carousel-wrapper .carousel-control-prev:hover,
.hero-carousel-wrapper .carousel-control-next:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Smooth transition for slides (เดิมเขียน .carousel-item ลอยๆ กระทบ carousel ทุกตัว และทับกฎลดการเคลื่อนไหวของ Bootstrap) */
.hero-carousel-wrapper .carousel-item {
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ผู้ใช้ตั้ง "ลดการเคลื่อนไหว" ในเครื่อง: ไม่ซูม ไม่เลื่อน เปลี่ยนสไลด์ทันที ซ่อนเส้นวิ่ง (ยังเปลี่ยนสไลด์เองด้วยตัวจับเวลาใน JS) */
@media (prefers-reduced-motion: reduce) {
    .hero-carousel-wrapper .carousel-inner .carousel-item,
    .hero-carousel-wrapper .carousel-caption,
    .hero-carousel-wrapper .carousel-indicators button,
    .hero-carousel-wrapper .carousel-control-prev,
    .hero-carousel-wrapper .carousel-control-next {
        transition: none;
    }
    .hero-carousel-wrapper .carousel-inner .carousel-item.active img {
        animation: none;
        transform: none;
    }
    .hero-wave-progress { display: none; }
}

/* Enhanced Document Tab Navigation */
#docTabs .nav-link {
    background: rgba(0,51,102,0.05);
    border: 2px solid transparent;
    color: #003366;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 50px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
#docTabs .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s ease;
}
#docTabs .nav-link:hover::before {
    left: 100%;
}
#docTabs .nav-link:hover {
    background: rgba(0,51,102,0.1);
    border-color: rgba(0,51,102,0.2);
    transform: translateY(-2px);
}
#docTabs .nav-link.active {
    background: linear-gradient(135deg, #003366 0%, #001a33 100%);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 8px 25px rgba(0,51,102,0.3);
}
#docTabs .nav-link.active::before {
    animation: shineEffect 2s infinite;
}
@keyframes shineEffect {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* หัวข้อแต่ละส่วน: ไอคอน + ลิงก์ "ดูทั้งหมด" */
.npu-section-header.has-more {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}
.npu-section-header .section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #003366 0%, #0a4d8c 100%);
    color: #ffd700;
    font-size: 1.1rem;
    vertical-align: middle;
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.2);
}
.section-more-link {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: #003366;
    text-decoration: none;
    padding: 6px 4px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.section-more-link:hover,
.section-more-link:focus-visible {
    color: #0a4d8c;
    border-bottom-color: #ffd700;
}
.section-more-link i {
    transition: transform 0.2s ease;
}
.section-more-link:hover i {
    transform: translateX(4px);
}
@media (max-width: 576px) {
    .npu-section-header .section-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
}

/* เอกสาร: ป้าย "ใหม่" */
.doc-new-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}