:root {
            --primary-orange: #FF6B00;
            --primary-blue: #2E4094;
            --light-green: #97C93E;
            --yellow: #FFD600;
            --bg-white: #FFFFFF;
            --card-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Anuphan-Regular', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1150px;
            margin: 0 auto;
            background: var(--bg-white);
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

        /* Header & Banner Styles */
        header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }

        .logos {
            display: flex;
            justify-content: flex-start;
            gap: 20px;
            margin-bottom: 20px;
        }

        .logo-placeholder {
            font-weight: bold;
            color: var(--primary-blue);
        }

        .km-banner {
            background: var(--light-green);
            color: white;
            padding: 10px 40px;
            display: inline-block;
            transform: rotate(-2deg);
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .year-tag {
            background: var(--primary-orange);
            color: white;
            font-size: 3rem;
            padding: 5px 30px;
            display: inline-block;
            margin-top: -15px;
            border-radius: 5px;
        }

        .sub-title {
            background: var(--primary-blue);
            color: white;
            padding: 10px 20px;
            margin-top: 20px;
            border-radius: 5px;
            display: inline-block;
        }

        /* Info Section */
        .info-bar {
            display: flex;
            justify-content: space-around;
            margin: 30px 0;
            font-size: 0.9rem;
            color: #555;
        }

        /* Topics Grid */
        .topics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            margin-top: 80px;
        }

        .topic-card {
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: var(--card-shadow);
            position: relative;
            text-align: center;
            border-bottom: 5px solid transparent;
            transition: transform 0.3s;
        }

        .topic-card:hover {
            transform: translateY(-5px);
        }

        .topic-image {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 15px;
            margin-bottom: 15px;
        }

        .topic-number {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--yellow);
            color: white;
            font-size: 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: -40px auto 15px auto;
            border: 4px solid white;
        }

        .topic-card:nth-child(2) .topic-number { background: #FF7A00; }
        .topic-card:nth-child(3) .topic-number { background: #4A69FF; }
        .topic-card:nth-child(4) .topic-number { background: #FF4A8D; }
        .topic-card:nth-child(5) .topic-number { background: #48C78E; }
        .topic-card:nth-child(6) .topic-number { background: #FF4A4A; }

        .topic-title {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--primary-blue);
            margin-bottom: 10px;
            min-height: 45px;
        }

        .topic-desc {
            font-size: 0.8rem;
            margin-bottom: 10px;
            color: #666;
        }

        .topic-meta {
            font-size: 0.75rem;
            color: #888;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }

        .register-count {
            font-size: 0.8rem;
            color: var(--primary-orange);
            font-weight: 600;
            margin: 10px 0;
        }

        .card-register-btn {
            background: var(--primary-orange);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.85rem;
            transition: background 0.3s;
            width: 100%;
            margin-top: 10px;
        }

        .card-register-btn:hover {
            background: #e65100;
        }

        /* Schedule Section */
        .bottom-section {
            display: flex;
            margin-top: 50px;
            gap: 30px;
        }

        .illustration {
            flex: 1;
            display: flex;
            align-items: flex-end;
        }

        .schedule-box {
            flex: 1;
            background: #fdfdfd;
            border: 2px solid #eee;
            border-radius: 15px;
            padding: 20px;
        }

        .schedule-header {
            background: #E31E24;
            color: white;
            padding: 5px 15px;
            border-radius: 5px;
            margin-bottom: 15px;
            display: inline-block;
        }

        .schedule-item {
            margin-bottom: 15px;
            font-size: 0.9rem;
        }

        .schedule-time {
            font-weight: 700;
            color: var(--primary-orange);
        }

        /* Footer */
        footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            text-align: center;
            font-size: 0.9rem;
        }

        .register-btn {
            background: var(--primary-orange);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 600;
            margin-top: 20px;
            transition: background 0.3s;
        }

        .register-btn:hover {
            background: #e65100;
        }

        @media (max-width: 768px) {
            .topics-grid { grid-template-columns: 1fr 1fr; }
            .bottom-section { flex-direction: column; }
        }

/* === Page-specific styles moved from index.php === */
/* Unified action button style (Apple-like glassy primary + subtle secondary) */
.card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 กล่องเท่ากัน */
    gap: 10px;
    margin-top: 8px;
    place-items: center;                  /* item อยู่กลางเสมอ */
}

.action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: #08345a;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(6,24,44,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(245,250,255,0.85) 100%);
    box-shadow: 0 8px 22px rgba(6,24,44,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-weight: 600;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms, opacity 160ms, background-size 320ms ease, color 200ms;
    cursor: pointer;
    overflow: hidden;
}
/* glossy top sheen */
.action-btn::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.18));
    border-top-left-radius: 14px; border-top-right-radius: 14px;
    pointer-events: none;
    mix-blend-mode: overlay;
}
.action-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(6,24,44,0.12); }
.action-btn:active { transform: translateY(-1px) scale(0.997); box-shadow: 0 8px 20px rgba(6,24,44,0.08); }
.action-btn:focus { outline: 3px solid rgba(3,122,255,0.14); outline-offset: 4px; }
.action-btn[disabled], .action-btn.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; }

/* Minimal animated register button: subtle gradient shift + soft glow on hover only */
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 50% 50%; }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(3,102,210,0.10); }
    50% { box-shadow: 0 0 10px rgba(3,102,210,0.12); }
}
@keyframes shine {
    0% { left: -60%; }
    100% { left: 160%; }
}

.card-register-btn.action-btn {
    position: relative;
    background: linear-gradient(90deg, #5b8df7 0%, #4facfe 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    min-width: 140px;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0,0,0,0.08);
    overflow: hidden;
    box-shadow: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background-position 600ms ease;
    /* No animations by default */
}
/* Subtle shine element (animated only on hover) */
.card-register-btn.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    display: block;
    opacity: 0.9;
}
/* Hover: gentle lift, slow gradient shift and soft glow */
.card-register-btn.action-btn:hover {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow: 0 6px 18px rgba(3,102,210,0.06);
    animation: gradientFlow 4s linear infinite;
}
.card-register-btn.action-btn:hover::before {
    animation: shine 2.6s linear 1;
}
.card-register-btn.action-btn:active {
    transform: translateY(-1px);
    filter: brightness(0.98);
}
/* Disabled: no hover animation (pointer-events typically none) */
.card-register-btn.action-btn[disabled], .card-register-btn.action-btn.disabled {
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: none;
    animation: none;
}

.view-registrants.action-btn {
    background: transparent;
    color: #0066cc;
    border: none;
    box-shadow: none;
    padding: 8px 12px;
    border-radius: 6px;
    min-width: 110px;
    background-image: none;
    background-size: auto;
    transition: background-color 120ms ease, color 120ms ease;
}
.view-registrants.action-btn:hover {
    background-color: rgba(0,102,204,0.06);
    color: #0066cc;
    transform: none;
    box-shadow: none;
}
.view-registrants.action-btn[aria-disabled="true"], .view-registrants.action-btn.disabled {
    opacity: 0.6;
    color: #7aa7d9;
    background: transparent;
    border-color: transparent;
    pointer-events: none;
}
.view-registrants.action-btn::before { display: none; }

/* Sliding background overlay effect: color slides in from left and text color flips */
.action-btn { background-repeat: no-repeat; background-position: left center; }

/* Secondary: slide blue background under text */
.view-registrants.action-btn {
    background-image: linear-gradient(90deg, rgba(3,90,210,0.96) 0%, rgba(3,90,210,0.96) 100%), linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(245,250,255,0.9) 100%);
    background-size: 0% 100%, 100% 100%;
    color: #0b57a2;
}
.view-registrants.action-btn:hover {
    background-size: 100% 100%, 100% 100%;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(3,90,210,0.12);
}

/* Primary: darker overlay slides in for pressed feel (keeps text white but you can change) */
.card-register-btn.action-btn {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.16) 100%), linear-gradient(180deg, #007aff 0%, #0064d6 100%);
    background-size: 0% 100%, 100% 100%;
    color: #ffffff;
}
.card-register-btn.action-btn:hover {
    background-size: 100% 100%, 100% 100%;
    color: #ffffff;
    box-shadow: 0 18px 44px rgba(3,90,210,0.18);
}


/* ===== Responsive layout rules ===== */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px;
    box-sizing: border-box;
}

.banner-full img { width:100%; height:auto; display:block; object-fit:cover; max-height:360px; }

.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    align-items: start;
}

.topic-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(10,10,10,0.04);
    display: flex;
    flex-direction: column;
    min-height: 320px;
    box-sizing: border-box;
}

.topic-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
}

.topic-title { font-size: 1.06rem; margin-top: 10px; color: #07203a; }
.topic-desc { margin-top: 8px; color: #444; font-size: 0.95rem; flex: 1 0 auto; }
.topic-meta, .register-count { margin-top: 8px; color: #666; font-size: 0.85rem; }

/* Card actions: inline on desktop, stacked on small screens */
.card-actions { display: flex; gap: 0px; margin-top: 12px; align-items: center; justify-content: space-evenly; }
.card-actions .slide-btn, .card-actions .action-btn { white-space: nowrap; }

/* Make action buttons full width on very small screens */
@media (max-width: 520px) {
    .topics-grid { grid-template-columns: 1fr; gap: 12px; }
    .topic-image { height: 180px; }
    .card-actions { flex-direction: column; align-items: stretch; }
    .card-actions .slide-btn, .card-actions .action-btn { width: 100%; display: inline-flex; justify-content: center; }
    .bottom-section { flex-direction: column; gap: 14px; }
    .banner-full img { max-height: 220px; }
}

@media (min-width: 521px) and (max-width: 900px) {
    .topics-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .topic-image { height: 160px; }
}

/* Bottom section layout */
.bottom-section { display:flex; gap:20px; align-items:flex-start; margin-top:20px; }
.illustration { flex:1; min-height:120px; }
.schedule-box { width: 320px; background:#fff; border-radius:10px; padding:12px; box-shadow: 0 6px 18px rgba(10,10,10,0.04); }

@media (max-width: 900px) {
    .schedule-box { width: 100%; }
    .bottom-section { flex-direction: column; }
}

/* Registration window highlight (mild, minimal, responsive) */
.registration-window {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #f6fbff);
    border: 1px solid rgba(3,90,160,0.08);
    color: #024169;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 6px 14px rgba(3,90,160,0.04);
    white-space: nowrap;
}
.registration-window::before {
    content: "📅";
    display: inline-block;
    transform: translateY(1px);
    font-size: 1rem;
}

/* subtle animated accent when hovered or active */
.registration-window:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(3,90,160,0.07);
}

/* state: open (optional - JS can add this class when registration is open) */
.registration-window.open {
    background: linear-gradient(90deg, rgba(75,140,255,0.12), rgba(245,250,255,0.12));
    border-color: rgba(59,130,246,0.18);
}

/* state: closed (optional) */
.registration-window.closed {
    background: linear-gradient(180deg,#fff,#fbfbfb);
    border-color: rgba(0,0,0,0.04);
    color: #8a8f96;
}

@media (max-width: 520px) {
    .registration-window { 
        /* 1. ย่อขนาดตัวอักษรลงอีกนิด */
        font-size: 0.75rem; 
        
        /* 2. อนุญาตให้ขึ้นบรรทัดใหม่ได้ */
        white-space: normal; 
        
        /* 3. จัดการระยะห่างและการจัดวางเมื่อเป็นหลายบรรทัด */
        padding: 8px 12px; 
        line-height: 1.4; /* เพิ่มความสูงบรรทัดให้อ่านง่าย */
        text-align: left; /* หรือ center แล้วแต่ชอบครับ */
        
        /* ป้องกันกล่องบี้เกินไป */
        max-width: 100%; 
        box-sizing: border-box;
    }
}

/* Disabled / unavailable state for buttons and links */
.action-btn.disabled, .action-btn[disabled],
.slide-btn.disabled, .slide-btn[disabled],
.view-registrants.disabled, .view-registrants[aria-disabled="true"] {
    opacity: 0.55;
    color: #9aa6b8 !important;
    background: linear-gradient(180deg,#f6f8fb,#ffffff) !important;
    border-color: rgba(0,0,0,0.06) !important;
    box-shadow: none !important;
    pointer-events: none;
    cursor: not-allowed;
    transform: none !important;
}

/* For slide-btn specifically, dim the border when disabled */
.slide-btn.disabled, .slide-btn[disabled] {
    border-color: #d6e6fb !important;
}