:root {
            /* โทนสี เทา ขาว ฟ้า เขียว(น้อย) พรีเมียม */
            --k-primary: #0284c7;    /* ฟ้าเข้ม ดูน่าเชื่อถือ */
            --k-primary-light: #e0f2fe; 
            --k-dark: #0f172a;       /* เทาเข้มเกือบดำ สำหรับข้อความหลัก */
            --k-gray: #64748b;       /* เทากลาง สำหรับข้อความรอง */
            --k-light: #f8fafc;      /* เทาอ่อน พื้นหลัง */
            --k-border: #e2e8f0;     /* สีเส้นขอบ */
            --k-accent: #059669;     /* สีเขียวมินิมอล สำหรับจุดเด่น (น้อย) */
            
            --font-main: 'Prompt', sans-serif;
            --shadow-sm: 0 4px 15px rgba(0,0,0,0.03);
            --shadow-md: 0 10px 30px rgba(0,0,0,0.05);
            --shadow-hover: 0 20px 40px rgba(2, 132, 199, 0.08);
        }

        body {
            font-family: var(--font-main);
            color: var(--k-dark);
            background-color: #ffffff;
            overflow-x: hidden;
        }

        a { text-decoration: none; transition: all 0.3s; }

        /* Top Bar */
        .top-bar {
            /*background-color: var(--k-light);*/
            background-color: #e3eaef;
            border-bottom: 1px solid var(--k-border);
            font-size: 0.85rem;
            color: var(--k-gray);
            position: relative;
            z-index: 1030; /* แก้ไขปัญหา Dropdown ซ้อนหลัง */
        }
        .top-bar a { color: var(--k-gray); }
        .top-bar a:hover { color: var(--k-primary); }
        
        .top-bar .dropdown-toggle {
            background-color: #e3eaef;
            border: 1px solid #ffffff;
            color: var(--k-dark);
            font-size: 0.85rem;
            border-radius: 8px;
            padding: 0.35rem 1rem;
            font-weight: 500;
        }
        .top-bar .dropdown-menu {
            border: 1px solid var(--k-border);
            border-radius: 8px;
            box-shadow: var(--shadow-sm);
        }
        .top-bar .dropdown-item {
            color: var(--k-dark);
            font-weight: 500;
        }
        .top-bar .dropdown-item:hover {
            background-color: var(--k-light);
            color: var(--k-primary);
        }

        /* Navbar */
        .navbar {
            background-color: #ffffff;
            border-bottom: 1px solid rgba(0,0,0,0.03);
            padding: 1.2rem 0;
            box-shadow: var(--shadow-sm);
        }
        .nav-link {
            color: var(--k-dark);
            font-weight: 500;
            font-size: 0.95rem;
            padding: 0.5rem 1.2rem !important;
        }
        .nav-link:hover { color: var(--k-primary); }
        
        /* Buttons */
        .btn-k-primary {
            background-color: var(--k-primary);
            color: white;
            font-weight: 500;
            border-radius: 8px;
            padding: 0.5rem 1.5rem;
            border: 1px solid var(--k-primary);
        }
        .btn-k-primary:hover {
            background-color: #0369a1;
            color: white;
            box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3);
        }
        .btn-outline-k {
            background-color: white;
            color: var(--k-dark);
            font-weight: 500;
            border-radius: 8px;
            padding: 0.5rem 1.5rem;
            border: 1px solid var(--k-border);
        }
        .btn-outline-k:hover {
            border-color: var(--k-primary);
            color: var(--k-primary);
            background-color: var(--k-light);
        }

        /* Hero Section */
        .hero-section {
            padding: 7rem 0 24rem; /* ดึงความลึกให้คลุมไปถึง Section ด้านล่าง */
            position: relative;
            background-color: #ffffff;
            overflow: hidden;
        }

        .hero-section2 {
            padding: 7rem 0 10rem; /* ดึงความลึกให้คลุมไปถึง Section ด้านล่าง */
            position: relative;
            background-color: #ffffff;
            overflow: hidden;
        }
        .hero-gradient-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            /* เพิ่มสีเขียวมินต์อ่อนๆ ระหว่างฟ้าและขาว เพื่อความสมูทและพรีเมียม */
            background: linear-gradient(180deg, 
                rgba(255, 255, 255, 0.95) 0%, 
                rgba(224, 242, 254, 0.6) 30%, 
                rgba(209, 250, 229, 0.45) 55%, 
                rgba(248, 250, 252, 0.9) 80%, 
                rgba(248, 250, 252, 1) 100%);
            z-index: 0;
        }
        .hero-shape-green {
            position: absolute;
            bottom: 0%; left: -5%;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(5, 150, 105, 0.06) 0%, rgba(5, 150, 105, 0) 70%);
            border-radius: 50%;
            z-index: 0;
        }
        .hero-shape-blue {
            position: absolute;
            top: -10%; right: 35%;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(2, 132, 199, 0.06) 0%, rgba(2, 132, 199, 0) 70%);
            border-radius: 50%;
            z-index: 0;
        }
        .hero-section .container {
            position: relative;
            z-index: 2;
        }
        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--k-dark);
            line-height: 1.15;
            letter-spacing: -1px;
        }
        .hero-subtitle {
            font-size: 1.15rem;
            color: var(--k-gray);
            line-height: 1.8;
            margin-top: 1.5rem;
        }

        /* Hero Pillars Dashboard Graphic */
        .hero-pillars-wrapper {
            position: relative;
            padding: 1rem;
            z-index: 1;
        }
        .hero-pillars-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        .hero-pillar-card {
            background-color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 1);
            border-radius: 20px;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.85rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        @media (min-width: 576px) {
            .hero-pillar-card:nth-child(even) { transform: translateY(2rem); }
            .hero-pillars-grid { gap: 1.25rem; }
        }
        .hero-pillar-card:hover {
            background-color: #ffffff;
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(5, 150, 105, 0.12); /* เรืองแสงสีเขียว */
            border-color: rgba(5, 150, 105, 0.3); /* ขอบสีเขียว */
            z-index: 2;
        }
        @media (min-width: 576px) {
            .hero-pillar-card:nth-child(even):hover { transform: translateY(calc(2rem - 5px)); }
        }
        .hp-icon {
            width: 45px; height: 45px;
            background: #ffffff;
            color: var(--k-primary);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        /* เปลี่ยนไอคอนเป็นสีเขียวเมื่อ Hover */
        .hero-pillar-card:hover .hp-icon {
            background: var(--k-accent);
            color: #ffffff;
            transform: scale(1.1) rotate(-5deg);
        }
        .hp-text h6 {
            font-size: 0.95rem; font-weight: 700; color: var(--k-dark);
            margin-bottom: 0.2rem; line-height: 1.2;
        }
        .hp-text p {
            font-size: 0.75rem; color: var(--k-gray); margin: 0; line-height: 1.4;
        }
        .hero-badge {
            display: inline-block;
            background-color: rgba(2, 132, 199, 0.08);
            color: var(--k-primary);
            padding: 0.4rem 1rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            margin-bottom: 1.5rem;
        }

        /* 6 Pillars Section */
        .pillars-section {
            margin-top: -16rem; /* ซ้อนทับให้กลืนกับ background gradient ด้านบน */
            padding: 0 0 6rem 0; 
            background-color: transparent; 
            position: relative;
            z-index: 2;
        }
        
        /* Clean Title Design (แทนกรอบรูปเดิม) */
        .section-title-clean {
            text-align: center;
            margin-bottom: 4rem;
            position: relative;
        }
        .section-title-clean span {
            color: var(--k-primary);
            font-weight: 600;
            letter-spacing: 1px;
            font-size: 0.95rem;
            text-transform: uppercase;
            display: block;
            margin-bottom: 0.5rem;
        }
        .section-title-clean h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--k-dark);
            margin-bottom: 1rem;
        }
        .title-line {
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--k-primary), var(--k-accent));
            border-radius: 4px;
            margin: 0 auto;
        }
        
        /* Cards */
        .pillar-card {
            display: flex;
            flex-direction: column;
            background-color: #ffffff;
            border: 1px solid var(--k-border);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.4s;
            height: 100%;
            box-shadow: var(--shadow-sm);
        }
        .pillar-card:hover {
            box-shadow: var(--shadow-hover);
            border-color: rgba(5, 150, 105, 0.3);
            transform: translateY(-8px);
        }
        .pillar-img-wrapper {
            position: relative;
            height: 180px;
            overflow: hidden;
        }
        .pillar-img-wrapper img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        .pillar-card:hover .pillar-img-wrapper img {
            transform: scale(1.08);
        }
        .pillar-content {
            padding: 2.2rem 1.5rem 1.5rem; /* เผื่อพื้นที่ให้ไอคอนวงกลมซ้อนทับ */
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            position: relative;
            background-color: #ffffff;
        }
        .pillar-icon-box {
            width: 55px; height: 55px;
            background-color: #ffffff;
            color: var(--k-primary);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: absolute;
            top: -27px; /* ดันไอคอนขึ้นไปซ้อนทับกรอบรูป */
            right: 1.5rem;
            border: 2px solid #ffffff;
        }
        .pillar-card:hover .pillar-icon-box {
            background-color: var(--k-accent);
            color: #ffffff;
            transform: rotate(-10deg) scale(1.1);
        }
        .pillar-text h4 {
            font-weight: 700;
            font-size: 1.15rem;
            color: var(--k-dark);
            margin-bottom: 0.35rem;
        }
        .pillar-text p {
            font-size: 0.9rem;
            color: var(--k-gray);
            margin-bottom: 0;
            line-height: 1.5;
        }

        /* Databases Section */
        .database-section {
            padding: 6rem 0;
            background-color: var(--k-light);
            position: relative;
            overflow: hidden;
        }
        /* ลวดลายจุดพื้นหลัง */
        .database-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: radial-gradient(rgba(15, 23, 42, 0.03) 2px, transparent 2px);
            background-size: 30px 30px;
            z-index: 0;
        }
        .database-section .container {
            position: relative;
            z-index: 1;
        }
        
        .db-card {
            background-color: #ffffff;
            border: 1px solid var(--k-border);
            border-radius: 20px;
            padding: 2.5rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        }
        /* แถบสีด้านบนของการ์ด */
        .db-card::after {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 4px;
            transition: height 0.3s ease;
        }
        .db-card:hover {
            transform: translateY(-8px);
        }

        /* Theme: Blue */
        .card-theme-blue::after { background-color: #0284c7; }
        .card-theme-blue .db-icon { color: #0284c7; background-color: rgba(2, 132, 199, 0.08); }
        .card-theme-blue:hover { box-shadow: 0 20px 40px rgba(2, 132, 199, 0.12); border-color: rgba(2, 132, 199, 0.2); }
        .card-theme-blue .db-link { color: #0284c7; }
        
        /* Theme: Orange */
        .card-theme-orange::after { background-color: #ea580c; }
        .card-theme-orange .db-icon { color: #ea580c; background-color: rgba(234, 88, 12, 0.08); }
        .card-theme-orange:hover { box-shadow: 0 20px 40px rgba(234, 88, 12, 0.12); border-color: rgba(234, 88, 12, 0.2); }
        .card-theme-orange .db-link { color: #ea580c; }

        /* Theme: Purple */
        .card-theme-purple::after { background-color: #7c3aed; }
        .card-theme-purple .db-icon { color: #7c3aed; background-color: rgba(124, 58, 237, 0.08); }
        .card-theme-purple:hover { box-shadow: 0 20px 40px rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.2); }
        .card-theme-purple .db-link { color: #7c3aed; }

        /* Theme: Green */
        .card-theme-green::after { background-color: #059669; }
        .card-theme-green .db-icon { color: #059669; background-color: rgba(124, 58, 237, 0.08); }
        .card-theme-green:hover { box-shadow: 0 20px 40px rgba(124, 58, 237, 0.12); border-color: rgba(58, 237, 61, 0.2); }
        .card-theme-green .db-link { color: #059669; }

        .db-icon {
            width: 70px; height: 70px;
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 2.2rem;
            margin-bottom: 1.5rem;
            transition: transform 0.3s;
        }
        .db-card:hover .db-icon {
            transform: scale(1.1) rotate(5deg);
        }
        .db-title {
            font-weight: 700; font-size: 1.25rem; color: var(--k-dark); margin-bottom: 0.5rem;
        }
        .db-card p {
            color: var(--k-gray); font-size: 0.95rem; line-height: 1.6; margin-bottom: 2rem; flex-grow: 1;
        }
        .db-link {
            font-weight: 600; font-size: 0.95rem; display: flex; align-items: center;
        }
        .db-link i { transition: transform 0.3s; }
        .db-card:hover .db-link { color: var(--k-accent) !important; }
        .db-card:hover .db-link i { transform: translateX(5px); }

        /* Education & Media (Bento Layout) */
        .education-section { padding: 6rem 0; background-color: #ffffff; }
        .bento-card {
            background-color: var(--k-light); border: 1px solid var(--k-border); border-radius: 20px;
            overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow 0.3s;
        }
        .bento-card:hover { box-shadow: var(--shadow-md); }
        .bento-featured-img { height: 250px; width: 100%; object-fit: cover; }
        .bento-content { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; }
        
        .video-block {
            position: relative; height: 220px; border-radius: 20px; overflow: hidden;
            background: url('https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
        }
        .video-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15, 23, 42, 0.6); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;
        }
        .play-btn-small {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 50px; height: 50px; background: rgba(255,255,255,0.9); color: var(--k-primary);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem; cursor: pointer; transition: all 0.3s;
        }
        .play-btn-small:hover { background: var(--k-primary); color: white; transform: translate(-50%, -50%) scale(1.1); }

        .event-list-block {
            background-color: var(--k-light); border: 1px solid var(--k-border); border-radius: 20px;
            padding: 1.5rem; /*height: calc(100% - 220px - 1.5rem); min-height: 250px;*/ height:100%;
        }
        .event-list-item { display: flex; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--k-border); }
        .event-list-item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
        .event-date-box {
            background-color: #ffffff; border: 1px solid var(--k-border); border-radius: 8px;
            min-width: 60px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .event-date-box .day { font-size: 1.2rem; font-weight: 700; color: var(--k-primary); line-height: 1; }
        .event-date-box .month { font-size: 0.7rem; color: var(--k-gray); text-transform: uppercase; font-weight: 600;}
        .event-text h6 { font-weight: 600; color: var(--k-dark); margin-bottom: 0.2rem; font-size: 0.95rem; }
        .event-text p { font-size: 0.8rem; color: var(--k-gray); margin-bottom: 0; }

        /* Partners Section */
        .partners-section { background-color: #eaf1fb; padding: 5rem 0; border-top: 1px solid var(--k-border); }
        .partner-logo-box {
            background-color: #ffffff; border-radius: 12px; height: 90px;
            display: flex; align-items: center; justify-content: center; padding: 1rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.03); transition: transform 0.3s;
        }
        .partner-logo-box:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
        .partner-logo-box img { max-height: 60px; max-width: 100%; object-fit: contain; /*filter: grayscale(100%);*/ opacity: 0.7; transition: all 0.3s; }
        .partner-logo-box:hover img { filter: grayscale(0%); opacity: 1; }
        .partner-text { color: var(--k-gray); font-weight: 600; font-size: 0.9rem; text-align: center; }

        /* Footer */
        .footer-section { background-color: var(--k-dark); color: #94a3b8; padding: 5rem 0 2rem; }
        .footer-logo { filter: brightness(0) invert(1); height: 45px; opacity: 0.9; }
        .footer-heading { color: #ffffff; font-size: 1.1rem; font-weight: 600; margin-bottom: 1.5rem; }
        .footer-contact li { margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 12px; font-size: 0.9rem; }
        .footer-contact i { color: var(--k-primary); margin-top: 4px; }
        .social-links a {
            display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; background-color: rgba(255,255,255,0.05); color: #ffffff;
            border-radius: 8px; margin-right: 8px; transition: all 0.3s;
        }
        .social-links a:hover { background-color: var(--k-primary); }
        .donate-box-clean {
            background-color: rgba(234, 88, 12, 0.05); /* Tint orange */
            border: 1px solid rgba(234, 88, 12, 0.2);
            border-radius: 12px; padding: 1.5rem;
        }
        .footer-bottom {
            margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.05);
            text-align: center; font-size: 0.85rem;
        }

        .news-more-link{
                color: var(--k-primary);
                font-weight:600;
                text-decoration:none;
                transition:.3s;
            }

            .news-more-link i{
                transition:.3s;
            }

            .news-more-link:hover{
                color:var(--k-accent);
            }

            .news-more-link:hover i{
                transform:translateX(6px);
            }

            /* ===========================
                KALM DATABASE SECTION
                =========================== */

                .database-section{
                    padding:90px 0;
                    background:#f8fafc;
                    position:relative;
                }

                .database-section::before{
                    content:'';
                    position:absolute;
                    inset:0;
                    background-image:radial-gradient(rgba(2,132,199,.05) 1px,transparent 1px);
                    background-size:24px 24px;
                    pointer-events:none;
                }

                .database-section .container{
                    position:relative;
                    z-index:2;
                }

                .database-card{
                    background:#fff;
                    border:1px solid #e2e8f0;
                    border-radius:20px;
                    overflow:hidden;
                    height:100%;
                    transition:.35s;
                    box-shadow:0 8px 25px rgba(15,23,42,.05);
                    position:relative;
                }

                .database-card:hover{
                    transform:translateY(-10px);
                    box-shadow:0 25px 45px rgba(2,132,199,.10);
                }

                .database-card::before{
                    content:'';
                    position:absolute;
                    top:0;
                    left:0;
                    width:100%;
                    height:5px;
                }

                .database-blue::before{
                    background:#0284c7;
                }

                .database-green::before{
                    background:#059669;
                }

                .database-purple::before{
                    background:#7c3aed;
                }

                .db-body{
                    padding:35px;
                }

                .db-icon{
                    width:70px;
                    height:70px;
                    border-radius:18px;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    font-size:30px;
                    margin-bottom:25px;
                    transition:.35s;
                }

                .database-blue .db-icon{
                    background:#e0f2fe;
                    color:#0284c7;
                }

                .database-green .db-icon{
                    background:#dcfce7;
                    color:#059669;
                }

                .database-purple .db-icon{
                    background:#f3e8ff;
                    color:#7c3aed;
                }

                .database-card:hover .db-icon{
                    transform:rotate(-8deg) scale(1.1);
                }

                .db-category{
                    display:inline-block;
                    font-size:.78rem;
                    font-weight:600;
                    text-transform:uppercase;
                    color:#64748b;
                    letter-spacing:.8px;
                    margin-bottom:12px;
                }

                .db-title{
                    font-size:1.35rem;
                    font-weight:700;
                    color:#0f172a;
                    margin-bottom:12px;
                }

                .db-desc{
                    color:#64748b;
                    line-height:1.8;
                    font-size:.95rem;
                    margin-bottom:30px;
                    min-height:95px;
                }

                .db-feature{
                    list-style:none;
                    padding:0;
                    margin:0 0 30px;
                }

                .db-feature li{
                    margin-bottom:10px;
                    color:#475569;
                    font-size:.9rem;
                }

                .db-feature i{
                    color:#059669;
                    margin-right:8px;
                }

                .db-btn{
                    display:inline-flex;
                    align-items:center;
                    font-weight:600;
                    text-decoration:none;
                    transition:.3s;
                }

                .db-btn i{
                    margin-left:8px;
                    transition:.3s;
                }

                .db-btn:hover i{
                    transform:translateX(6px);
                }

                .database-blue .db-btn{
                    color:#0284c7;
                }

                .database-green .db-btn{
                    color:#059669;
                }

                .database-purple .db-btn{
                    color:#7c3aed;
                }

                /****box education Media****/
                    /* ===========================================
   EDUCATION & MEDIA
===========================================*/

.education-section{
    padding:90px 0;
    background:#ffffff;
}

.education-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    border:1px solid #e2e8f0;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
    transition:.35s;
    height:100%;
}

.education-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(2,132,199,.10);
}

.education-image{
    height:270px;
    overflow:hidden;
}

.education-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.education-card:hover img{
    transform:scale(1.08);
}

.education-content{
    padding:35px;
}

.edu-badge{
    display:inline-block;
    background:#dcfce7;
    color:#059669;
    padding:7px 16px;
    border-radius:30px;
    font-size:.82rem;
    font-weight:600;
    margin-bottom:18px;
}

.education-title{
    font-size:2rem;
    font-weight:700;
    margin-bottom:15px;
    color:#0f172a;
}

.education-text{
    color:#64748b;
    line-height:1.9;
    margin-bottom:30px;
}

.media-card{
    height:100%;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #e2e8f0;
    background:#fff;
    transition:.35s;
    box-shadow:0 8px 25px rgba(15,23,42,.04);
}

.media-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(2,132,199,.08);
}

.media-image{
    position:relative;
    height:180px;
    overflow:hidden;
}

.media-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.media-card:hover img{
    transform:scale(1.08);
}

.media-type{
    position:absolute;
    top:15px;
    left:15px;
    background:rgba(255,255,255,.92);
    padding:6px 14px;
    border-radius:20px;
    font-size:.75rem;
    font-weight:600;
}

.media-body{
    padding:22px;
}

.media-body h5{
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:10px;
}

.media-body p{
    color:#64748b;
    font-size:.9rem;
    margin-bottom:18px;
}

.media-link{
    color:#0284c7;
    font-weight:600;
    text-decoration:none;
}

.media-link:hover{
    color:#059669;
}


                /****box education media****/

            /*=========================================
   STUDENT MEMBERSHIP
=========================================*/

.student-section{
    padding:100px 0;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
}

.student-hero{

    background:linear-gradient(135deg,#0284c7,#0ea5e9);

    border-radius:28px;

    overflow:hidden;

    position:relative;

    color:#fff;

    padding:70px;

    box-shadow:0 25px 50px rgba(2,132,199,.18);

}

.student-hero::before{

    content:'';

    position:absolute;

    right:-120px;

    top:-120px;

    width:350px;

    height:350px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

}

.student-badge{

    display:inline-block;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    padding:8px 18px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:20px;

}

.student-title{

    font-size:3rem;

    font-weight:700;

    margin-bottom:20px;

}

.student-text{

    font-size:1.1rem;

    line-height:1.9;

    opacity:.95;

    max-width:700px;

}

.student-box{

    background:#fff;

    border-radius:20px;

    padding:35px;

    height:100%;

    border:1px solid #e2e8f0;

    transition:.35s;

    box-shadow:0 10px 30px rgba(15,23,42,.04);

}

.student-box:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(2,132,199,.10);

}

.student-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#e0f2fe;

    color:#0284c7;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:20px;

}

.perk-item{

    display:flex;

    align-items:flex-start;

    margin-bottom:15px;

}

.perk-item i{

    color:#059669;

    margin-right:12px;

    margin-top:5px;

}

.event-item{

    border-left:4px solid #0284c7;

    padding-left:18px;

    margin-bottom:25px;

}

.testimonial{

    background:#f8fafc;

    border-radius:16px;

    padding:25px;

    border:1px solid #e2e8f0;

}

.avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

}

/*==========================================
    STUDENT ACADEMY
==========================================*/

.student-academy{
    padding:90px 0;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
}

.course-hero{

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(15,23,42,.05);

    transition:.35s;

    height:100%;

}

.course-hero:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(2,132,199,.12);

}

.course-image{

    height:280px;

    overflow:hidden;

}

.course-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.course-hero:hover img{

    transform:scale(1.08);

}

.course-content{

    padding:35px;

}

.course-badge{

    display:inline-block;

    background:#dcfce7;

    color:#059669;

    padding:8px 18px;

    border-radius:30px;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:18px;

}

.course-title{

    font-size:2rem;

    font-weight:700;

    margin-bottom:15px;

}

.course-text{

    color:#64748b;

    line-height:1.9;

    margin-bottom:25px;

}

.course-feature{

    display:flex;

    margin-bottom:15px;

}

.course-feature i{

    color:#059669;

    margin-right:12px;

    margin-top:4px;

}

.course-card{

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:20px;

    padding:25px;

    transition:.35s;

    height:100%;

    box-shadow:0 8px 25px rgba(15,23,42,.04);

}

.course-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(2,132,199,.10);

}

.course-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    background:#e0f2fe;

    color:#0284c7;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:20px;

}

.course-card h5{

    font-weight:700;

    margin-bottom:12px;

}

.course-card p{

    color:#64748b;

    font-size:.92rem;

    margin-bottom:20px;

}

.course-meta{

    font-size:.85rem;

    color:#64748b;

    margin-bottom:15px;

}

.course-meta i{

    color:#0284c7;

    margin-right:6px;

}

.benefit-box{

    background:#fff;

    border-radius:20px;

    padding:30px;

    border:1px solid #e2e8f0;

    margin-top:35px;

}

.benefit-item{

    text-align:center;

}

.benefit-icon{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:15px;

    border-radius:50%;

    background:#e0f2fe;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#0284c7;

    font-size:28px;

}

.student-activity{

padding:90px 0;

background:#f8fbff;

}

.featured-event{

background:#fff;

border-radius:24px;

padding:35px;

box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.activity-badge{

background:#dcfce7;

color:#059669;

padding:8px 18px;

border-radius:30px;

font-weight:600;

display:inline-block;

margin-bottom:20px;

}

.activity-card{

background:#fff;

border-radius:20px;

overflow:hidden;

transition:.35s;

box-shadow:0 8px 20px rgba(0,0,0,.05);

height:100%;

}

.activity-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(2,132,199,.10);

}

.activity-card img{

width:100%;

height:220px;

object-fit:cover;

transition:.5s;

}

.activity-card:hover img{

transform:scale(1.08);

}

.activity-body{

padding:25px;

}

.activity-body span{

font-size:.8rem;

font-weight:600;

color:#0284c7;

text-transform:uppercase;

}

.timeline-row{

display:flex;

justify-content:space-between;

gap:20px;

flex-wrap:wrap;

}

.timeline-item{

flex:1;

background:#fff;

border-radius:18px;

padding:25px;

text-align:center;

box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.timeline-item h6{

font-size:1.3rem;

font-weight:700;

color:#0284c7;

margin-bottom:10px;

}

.coach-hero{

    background:linear-gradient(135deg, #02c7a3, #0ea5e9);

    border-radius:28px;

    overflow:hidden;

    position:relative;

    color:#fff;

    padding:70px;

    box-shadow:0 25px 50px rgba(2,132,199,.18);

}

.coach-hero::before{

    content:'';

    position:absolute;

    right:-120px;

    top:-120px;

    width:350px;

    height:350px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

}

.doctor-hero{

    background:linear-gradient(135deg, #0c2533, #0ea5e9);

    border-radius:28px;

    overflow:hidden;

    position:relative;

    color:#fff;

    padding:70px;

    box-shadow:0 25px 50px rgba(2,132,199,.18);

}

.doctor-hero::before{

    content:'';

    position:absolute;

    right:-120px;

    top:-120px;

    width:350px;

    height:350px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

}


            /***studentmembership***/

/**membership***/
/* ================= Reset & Base ================= */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        font-family: 'Prompt', sans-serif;
        color: #1e293b;
        line-height: 1.6;
        background-color: #f8fafc;
    }

    /* ================= Textured Background ================= */
    .membership-section {
        position: relative;
        padding: 100px 20px;
        min-height: 100vh;
        overflow: hidden;
        /* Mesh Gradient background */
        background: 
            radial-gradient(at 0% 0%, rgba(0, 130, 200, 0.05) 0px, transparent 50%),
            radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
            #fbfdff;
    }

    /* ลวดลายจุด (Dot Pattern) เพื่อความสะอาดตา */
    .membership-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(#cbd5e1 0.8px, transparent 0.8px);
        background-size: 24px 24px;
        opacity: 0.4;
        z-index: 0;
    }

    .container {
        position: relative;
        z-index: 1;
        max-width: 1300px;
        margin: 0 auto;
    }

    /* ================= Section Header ================= */
    .section-header {
        text-align: center;
        margin-bottom: 60px;
    }
    .section-title {
        font-size: 2.4rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 15px;
    }
    .section-title span {
        color: #0082c8;
    }
    .section-subtitle {
        color: #64748b;
        max-width: 600px;
        margin: 0 auto 20px;
    }
    .section-divider {
        width: 50px;
        height: 4px;
        background-color: #0082c8;
        margin: 0 auto;
        border-radius: 10px;
    }

    /* ================= Grid Layout ================= */
    /*.membership-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
        padding: 10px;
    }*/

    .membership-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 15px;
        padding: 10px;
    }



    /* ================= Card Styling ================= */
    .member-card {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px); /* เพิ่มความหรูหราแบบกระจก */
        border-radius: 24px;
        padding: 40px 25px;
        border: 1px solid rgba(226, 232, 240, 0.8);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .member-card:hover {
        transform: translateY(-12px);
        background-color: #ffffff;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 130, 200, 0.2);
    }
    
    /* Top border colors */
    .card-public { border-top: 6px solid #0082c8; }
    .card-doctor { border-top: 6px solid #8b5cf6; }
    .card-clinic { border-top: 6px solid #ef5b61; }
    .card-coach  { border-top: 6px solid #10b981; }
    .card-student{ border-top: 6px solid #f59e0b; }

    /* ================= Icon & Content ================= */
    .icon-box {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
    }
    .card-public .icon-box { background-color: #e0f2fe; color: #0284c7; }
    .card-doctor .icon-box { background-color: #ede9fe; color: #7c3aed; }
    .card-clinic .icon-box { background-color: #f4b7b9; color: #ef5b61; }
    .card-coach .icon-box  { background-color: #d1fae5; color: #059669; }
    .card-student .icon-box { background-color: #fef3c7; color: #d97706; }
    
    .icon-box svg { width: 28px; height: 28px; fill: currentColor; }

    .card-tag {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #94a3b8;
        margin-bottom: 8px;
    }
    .card-title {
        font-size: 1.35rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 25px;
    }

    /* ================= List Items ================= */
    .benefit-list {
        list-style: none;
        margin-bottom: 30px;
        flex-grow: 1;
    }
    .benefit-list li {
        font-size: 0.9rem;
        color: #475569;
        margin-bottom: 12px;
        display: flex;
        align-items: flex-start;
    }
    .benefit-list li::before {
        content: "";
        width: 18px;
        height: 18px;
        margin-right: 10px;
        margin-top: 3px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        flex-shrink: 0;
    }

    /* ================= Button ================= */
    .btn-join {
        display: block;
        text-align: center;
        padding: 14px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s;
    }
    .btn-student {
        background-color: transparent;
        border: 2px solid #f59e0b;
        color: #d97706;
    }
    .btn-student:hover {
        background-color: #f59e0b;
        color: white;
    }

    .btn-student-green {
        background-color: transparent;
        border: 2px solid #9df8da;
        color: #10b981;
    }
    .btn-student-green:hover {
        background-color: #10b981;
        color: white;
    }

    .btn-student-purple {
        background-color: transparent;
        border: 2px solid #c9b5f8;
        color: #8b5cf6;
    }
    .btn-student-purple:hover {
        background-color: #8b5cf6;
        color: white;
    }

    .btn-student-blue {
        background-color: transparent;
        border: 2px solid #b2dff8;
        color: #0082c8;
    }
    .btn-student-blue:hover {
        background-color: #0082c8;
        color: white;
    }

    .btn-student-red {
        background-color: transparent;
        border: 2px solid #f7888c;
        color: #ef5b61;
    }
    .btn-student-red:hover {
        background-color: #ef5b61;
        color: white;
    }



    .btn-outline {
        background-color: transparent;
        border: 2px solid #e2e8f0;
        color: #64748b;
    }
    .btn-outline:hover {
        border-color: #0082c8;
        color: #0082c8;
        background-color: #f0f9ff;
    }
    .btn-fill {
        background-color: #0082c8;
        color: white;
        box-shadow: 0 4px 12px rgba(0, 130, 200, 0.2);
    }
    .btn-fill:hover {
        background-color: #006da8;
        box-shadow: 0 6px 15px rgba(0, 130, 200, 0.3);
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
        .section-title { font-size: 1.8rem; }
        .membership-section { padding: 60px 15px; }
    }
    /***membership*/


    /***education & careers****/

    /* ================= Education & Careers Section ================= */
    .edu-career-section {
        padding: 80px 20px;
        max-width: 1200px;
        margin: 0 auto;
        font-family: 'Prompt', sans-serif;
    }

    .ec-header {
        text-align: center;
        /*margin-bottom: 50px;*/
    }
    
    .ec-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 10px;
    }
    
    .ec-title span {
        color: #0082c8;
    }

    .ec-divider {
        width: 60px;
        height: 4px;
        background-color: #0082c8;
        margin: 0 auto 30px;
        border-radius: 2px;
    }

    /* --- Training Courses --- */
    .section-subtitle {
        font-size: 1.4rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .course-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 30px;
        margin-bottom: 70px;
    }

    .course-card {
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        border: 1px solid #f1f5f9;
        transition: transform 0.3s, box-shadow 0.3s;
        display: flex;
        flex-direction: column;
    }

    .course-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    }

    .course-img {
        height: 180px;
        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0284c7;
    }

    .course-img svg { width: 48px; height: 48px; opacity: 0.8; }

    .course-body {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .course-tag {
        font-size: 0.75rem;
        background: #dcfce7;
        color: #166534;
        padding: 4px 10px;
        border-radius: 20px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 12px;
        align-self: flex-start;
    }

    .course-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .course-desc {
        font-size: 0.9rem;
        color: #64748b;
        margin-bottom: 20px;
        flex-grow: 1;
    }

    .btn-course {
        display: block;
        text-align: center;
        padding: 10px;
        border: 1px solid #0082c8;
        color: #0082c8;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.95rem;
        transition: all 0.2s;
    }

    .btn-course:hover {
        background: #0082c8;
        /*background-color: var(--k-accent);
        border-color: var(--k-accent);*/
        color: #ffffff;
    }

    /* --- Jobs in Lifestyle Medicine --- */
    .job-board-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    @media (max-width: 860px) {
        .job-board-grid { grid-template-columns: 1fr; }
    }

    .job-panel {
        background: #ffffff;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
        border: 1px solid #f1f5f9;
        position: relative;
    }

    .panel-openings { border-top: 5px solid #0082c8; }
    .panel-seekers { border-top: 5px solid #f59e0b; }

    .job-panel-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .job-list {
        list-style: none;
        padding: 0;
        margin: 0 0 25px 0;
    }

    .job-item {
        padding: 16px 0;
        border-bottom: 1px dashed #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .job-item:last-child {
        border-bottom: none;
    }

    .job-info h4 {
        font-size: 1.05rem;
        color: #1e293b;
        margin: 0 0 4px 0;
        font-weight: 600;
    }

    .job-info p {
        font-size: 0.85rem;
        color: #64748b;
        margin: 0;
    }

    .job-badge {
        font-size: 0.75rem;
        background: #f1f5f9;
        color: #475569;
        padding: 4px 10px;
        border-radius: 12px;
        white-space: nowrap;
        margin-left: 15px;
    }

    .btn-view-all {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px;
        background: #f8fafc;
        color: #0f172a;
        text-decoration: none;
        border-radius: 10px;
        font-weight: 500;
        font-size: 0.95rem;
        transition: background 0.2s;
    }

    .btn-view-all:hover {
        background: #e2e8f0;
    }

    .btn-view-all svg {
        width: 18px;
        height: 18px;
        margin-left: 8px;
    }

    /* ================= เพิ่มคลาสสำหรับปุ่ม ดูคอร์สเรียนทั้งหมด ================= */
    .course-grid {
        margin-bottom: 40px; /* ปรับลด margin เดิมเพื่อให้ปุ่มอยู่ใกล้ Grid ขึ้น */
    }

    .course-action-container {
        text-align: center;
        margin-bottom: 70px;
    }

    .btn-view-all-courses {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 36px;
        background-color: #0082c8;
        color: #ffffff;
        text-decoration: none;
        border-radius: 30px;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 130, 200, 0.25);
    }

    .btn-view-all-courses:hover {
        background-color: #006da8;
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 130, 200, 0.35);
        color: #ffffff;
    }

    .btn-view-all-courses svg {
        width: 20px;
        height: 20px;
        margin-left: 10px;
        transition: transform 0.2s;
    }

    .btn-view-all-courses:hover svg {
        transform: translateX(4px);
    }

    /***education & careers****/

   
/**end top button*/

.scroll-section{
    scroll-margin-top:60px;
}

     /* ================= Search Clinic Section ================= */
    .search-clinic-section {
        padding: 80px 20px;
        max-width: 1200px;
        margin: 0 auto;
        font-family: 'Prompt', sans-serif;
    }

    .search-header {
        text-align: center;
        margin-bottom: 50px;
    }
    
    .search-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 15px;
    }
    
    .search-title span {
        color: #0082c8;
    }

    .search-divider {
        width: 60px;
        height: 4px;
        background-color: #0082c8;
        margin: 0 auto;
        border-radius: 2px;
    }

    /* --- Search Box Area --- */
    .search-box-container {
        background: #ffffff;
        padding: 30px 35px;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
        border: 1px solid #f1f5f9;
        margin-bottom: 60px;
        display: flex;
        gap: 20px;
        align-items: flex-end;
    }

    .search-input-group {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .search-input-group label {
        font-size: 0.95rem;
        color: #475569;
        margin-bottom: 10px;
        font-weight: 600;
    }

    .search-input-group input,
    .search-input-group select {
        width: 100%;
        padding: 14px 20px;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        font-family: 'Prompt', sans-serif;
        font-size: 1rem;
        color: #1e293b;
        outline: none;
        transition: all 0.2s ease;
        background-color: #f8fafc;
    }

    .search-input-group input:focus,
    .search-input-group select:focus {
        border-color: #0082c8;
        background-color: #ffffff;
        box-shadow: 0 0 0 3px rgba(0, 130, 200, 0.1);
    }

    .btn-search {
        background-color: #0082c8;
        color: #ffffff;
        border: none;
        padding: 0 35px;
        height: 52px;
        border-radius: 12px;
        font-family: 'Prompt', sans-serif;
        font-size: 1.05rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(0, 130, 200, 0.2);
    }

    .btn-search:hover {
        background-color: #006da8;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 130, 200, 0.3);
    }

    .btn-search svg {
        width: 20px;
        height: 20px;
    }

    /* --- Results Grid --- */
    .clinic-results-header {
        font-size: 1.2rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 25px;
    }

    .clinic-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 30px;
    }

    .clinic-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 30px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        overflow-wrap: break-word;
        word-break: break-word;
        min-width: 0;
    }

    .clinic-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
        border-color: #bae6fd;
    }

    .clinic-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #dcfce7;
        color: #166534;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 6px 12px;
        border-radius: 20px;
        margin-bottom: 15px;
        align-self: flex-start;
    }

    .clinic-badge svg {
        width: 14px;
        height: 14px;
    }

    .clinic-name {
        font-size: 1.25rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .clinic-info {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 0.95rem;
        color: #475569;
        margin-bottom: 12px;
    }

    .clinic-info svg {
        width: 18px;
        height: 18px;
        color: #0082c8;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .clinic-footer {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px dashed #e2e8f0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        flex-grow: 1;
        align-items: end;
    }

    .btn-card-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.9rem;
        transition: all 0.2s;
        text-align: center;
    }

    .btn-details {
        background-color: #f1f5f9;
        color: #334155;
    }
    .btn-details:hover {
        background-color: #e2e8f0;
    }

    .btn-map {
        background-color: #ecfeff;
        color: #0891b2;
        border: 1px solid #cffafe;
    }
    .btn-map:hover {
        background-color: #cffafe;
        color: #0e7490;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .search-box-container {
            flex-direction: column;
            align-items: stretch;
            padding: 25px 20px;
        }
        .btn-search {
            margin-top: 10px;
        }
        .clinic-footer {
            grid-template-columns: 1fr;
        }
    }

        .doctorcardsearch-img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    object-position:50% 15%;
    border-radius:12px;
}

/* ================= All News Section ================= */
    .news-section {
        padding: 60px 20px 100px;
        max-width: 1200px;
        margin: 0 auto;
        font-family: 'Prompt', sans-serif;
    }

    .news-header {
        text-align: center;
        margin-bottom: 50px;
    }

    .news-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 15px;
    }

    .news-title span {
        color: #0082c8;
    }

    .news-divider {
        width: 60px;
        height: 4px;
        background-color: #0082c8;
        margin: 0 auto;
        border-radius: 2px;
    }

    .news-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 30px;
    }

    .news-card {
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, 0.8);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .news-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 30px rgba(0, 130, 200, 0.08);
    }

    .news-image {
        width: 100%;
        height: 200px;
        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0284c7;
        position: relative;
        overflow: hidden;
    }

    .news-image svg {
        width: 48px;
        height: 48px;
        opacity: 0.7;
        transition: transform 0.3s ease;
    }

    .news-card:hover .news-image svg {
        transform: scale(1.1);
    }

    .news-category-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: #0082c8;
        color: #ffffff;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .news-body {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .news-meta {
        display: flex;
        align-items: center;
        font-size: 0.85rem;
        color: #64748b;
        margin-bottom: 12px;
    }

    .news-meta svg {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }

    .news-heading {
        font-size: 1.25rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 12px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-excerpt {
        font-size: 0.95rem;
        color: #475569;
        margin-bottom: 20px;
        line-height: 1.6;
        flex-grow: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-read-more {
        display: inline-flex;
        align-items: center;
        font-size: 0.95rem;
        font-weight: 600;
        color: #0082c8;
        text-decoration: none;
        transition: color 0.2s;
        margin-top: auto;
    }

    .news-read-more svg {
        width: 18px;
        height: 18px;
        margin-left: 6px;
        transition: transform 0.2s;
    }

    .news-read-more:hover {
        color: #006da8;
    }

    .news-read-more:hover svg {
        transform: translateX(4px);
    }
    
    /* Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 50px;
    }

    .page-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #475569;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
    }

    .page-btn.active {
        background: #0082c8;
        color: #ffffff;
        border-color: #0082c8;
    }

    .page-btn:hover:not(.active) {
        background: #f1f5f9;
        color: #0f172a;
    }

    /* ==========================
   Banner Top
========================== */

.bannertop{
    position: relative;
    width: 100%;
    height: 416px;

    background-image: url("../images/banner/banner-home.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;

    overflow: hidden;
}

/* Overlay ไล่สีให้อ่านข้อความง่าย */

/* Luxury Medical Gradient */

.bannertop::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96) 0%,
            rgba(224,242,254,.60) 28%,
            rgba(209,250,229,.45) 55%,
            rgba(248,250,252,.88) 82%,
            rgba(248,250,252,1) 100%
        ),

        linear-gradient(
            115deg,
            rgba(59,130,246,.10) 0%,
            transparent 35%,
            rgba(16,185,129,.08) 70%,
            transparent 100%
        );

    backdrop-filter: blur(2px);
}

/* ลายวงกลมจาง ๆ เพิ่มมิติ */

.bannertop::after{
    content:"";
    position:absolute;
    inset:0;

    background:

        radial-gradient(
            circle at 18% 20%,
            rgba(255,255,255,.90),
            transparent 42%
        ),

        radial-gradient(
            circle at 82% 18%,
            rgba(255,255,255,.55),
            transparent 34%
        ),

        radial-gradient(
            circle at 65% 75%,
            rgba(186,230,253,.25),
            transparent 35%
        );

    pointer-events:none;
}
/* เนื้อหา */

.bannertop .container{
    position:relative;
    z-index:2;
}

.bannertop h1{
    color:#000000;
    font-size:54px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:18px;
}

.bannertop p{
    color:#858484;
    font-size:20px;
    max-width:620px;
    line-height:1.7;
    opacity:.95;
}

/* Responsive */

@media(max-width:991px){

    .bannertop{
        height:340px;
    }

    .bannertop h1{
        font-size:38px;
    }

    .bannertop p{
        font-size:18px;
    }

}

@media(max-width:576px){

    .bannertop{
       /* height:240px;*/
        height:380px;
        background-position:center;
    }

    .bannertop h1{
        font-size:28px;
    }

    .bannertop p{
        display:none;
    }

}

@media (max-width:576px){

    .bannertop .container{
        padding-inline:28px;
        margin-top: 85px;
    }

    .banner-content{
        max-width:100%;
    }

}

/* ================= News Detail Section ================= */
    .news-detail-section {
        padding: 60px 20px 100px;
        background-color: #f8fafc;
        font-family: 'Prompt', sans-serif;
    }

    .article-container {
        max-width: 1200px; /*860*/
        margin: 0 auto;
        background: #ffffff;
        padding: 50px 60px;
        border-radius: 24px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(226, 232, 240, 0.8);
    }

    /* --- Breadcrumb & Back Button --- */
    .article-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .btn-back {
        display: inline-flex;
        align-items: center;
        font-size: 0.95rem;
        font-weight: 500;
        color: #64748b;
        text-decoration: none;
        transition: color 0.2s;
    }

    .btn-back svg {
        width: 18px;
        height: 18px;
        margin-right: 6px;
        transition: transform 0.2s;
    }

    .btn-back:hover {
        color: #0082c8;
    }

    .btn-back:hover svg {
        transform: translateX(-4px);
    }

    /* --- Header --- */
    .article-header {
        margin-bottom: 40px;
    }

    .article-badge {
        display: inline-block;
        background: #e0f2fe;
        color: #0284c7;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .article-title {
        font-size: 2.4rem;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .article-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
        font-size: 0.9rem;
        color: #64748b;
        padding-bottom: 25px;
        border-bottom: 1px solid #e2e8f0;
    }

    .meta-item {
        display: flex;
        align-items: center;
    }

    .meta-item svg {
        width: 18px;
        height: 18px;
        margin-right: 8px;
        color: #94a3b8;
    }

    /* --- Featured Image --- */
    .article-featured-img {
        width: 100%;
        height: 400px;
        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
        border-radius: 16px;
        margin-bottom: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0284c7;
        overflow: hidden;
    }

    .article-featured-img svg {
        width: 80px;
        height: 80px;
        opacity: 0.5;
    }

    /* --- Content Body --- */
    .article-content {
        color: #334155;
        font-size: 1.05rem;
        line-height: 1.8;
    }

    .article-content p {
        margin-bottom: 20px;
    }

    .article-content h3 {
        font-size: 1.5rem;
        font-weight: 600;
        color: #0f172a;
        margin: 35px 0 15px;
    }

    .article-content ul {
        margin-bottom: 20px;
        padding-left: 20px;
    }

    .article-content li {
        margin-bottom: 10px;
    }

    .article-content p img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: 12px;
}

    .article-quote {
        margin: 30px 0;
        padding: 20px 30px;
        background: #f0f9ff;
        border-left: 4px solid #0082c8;
        border-radius: 0 12px 12px 0;
        font-size: 1.15rem;
        font-style: italic;
        color: #0f172a;
        font-weight: 500;
        line-height: 1.6;
    }

    /* --- Footer / Tags --- */
    .article-footer {
        margin-top: 50px;
        padding-top: 30px;
        border-top: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .article-tags {
        display: flex;
        gap: 10px;
    }

    .tag {
        background: #f1f5f9;
        color: #475569;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.85rem;
        text-decoration: none;
        transition: all 0.2s;
    }

    .tag:hover {
        background: #e2e8f0;
        color: #0f172a;
    }

    .share-buttons {
        display: flex;
        gap: 10px;
    }

    .btn-share {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #f1f5f9;
        color: #64748b;
        text-decoration: none;
        transition: all 0.2s;
    }

    .btn-share:hover {
        background: #0082c8;
        color: #ffffff;
    }

    .btn-share svg {
        width: 16px;
        height: 16px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .article-container { padding: 30px 20px; }
        .article-title { font-size: 1.8rem; }
        .article-featured-img { height: 250px; }
        .article-footer { flex-direction: column; align-items: flex-start; gap: 20px; }
    }







    
/* ================= Doctor/Coach search card image (จาก search_doctor.html) ================= */
.doctorcardsearch-img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    object-position:50% 15%;
    border-radius:12px;
}

/* ================= Membership hero banner color variants =================
   ใช้กับ .student-hero เพื่อสลับสีแบนเนอร์ตามประเภทสมาชิก:
   ประชาชน/คนไข้ = ฟ้า (ค่าเริ่มต้น), แพทย์ = ม่วง, คลินิก = แดง, โค้ช/บุคลากร = เขียว, นักศึกษา = ส้ม */
.student-hero.theme-blue   { background: linear-gradient(135deg, #0284c7, #0ea5e9); box-shadow: 0 25px 50px rgba(2,132,199,.18); }
.student-hero.theme-purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 25px 50px rgba(124,58,237,.18); }
.student-hero.theme-red    { background: linear-gradient(135deg, #dc2626, #ef5b61); box-shadow: 0 25px 50px rgba(220,38,38,.18); }
.student-hero.theme-green  { background: linear-gradient(135deg, #059669, #34d399); box-shadow: 0 25px 50px rgba(5,150,105,.18); }
.student-hero.theme-orange { background: linear-gradient(135deg, #d97706, #fbbf24); box-shadow: 0 25px 50px rgba(217,119,6,.18); }

/* ปุ่มโปร่งใสบนแบนเนอร์สี (ใช้ร่วมกับทุกธีม) */
.student-hero .btn-light { color: var(--k-dark); font-weight: 600; }

/* ================= Member navbar chip (สถานะสมาชิกที่ login อยู่) ================= */
.member-chip{
  display:flex;align-items:center;gap:8px;padding:4px 6px 4px 14px;border-radius:30px;
  background: var(--k-light); border:1px solid var(--k-border);
  max-width:280px; min-width:0;
}
.member-chip:hover{ text-decoration:none; border-color: var(--k-primary); }
.member-chip-name{
  font-size:.85rem;font-weight:600;color: var(--k-dark);
  max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.member-chip-badge{
  font-size:.68rem; padding:3px 10px; border-radius:20px; font-weight:600;
  background: var(--k-primary-light); color: var(--k-primary);
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:991.98px){
  .member-chip{ max-width:none; }
  .member-chip-name{ max-width:55vw; }
  .member-chip-badge{ max-width:55vw; }
}
.member-chip-badge.status-pending{ background:#fef3c7; color:#b45309; }
.member-chip-badge.status-rejected{ background:#fee2e2; color:#dc2626; }

/* ================= Photo crop modal (ใช้ในหน้าสมัครสมาชิก/แก้ไขโปรไฟล์) ================= */
.crop-modal{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.72); z-index:2000; align-items:center; justify-content:center; padding:20px; }
.crop-modal.open{ display:flex; }
.crop-modal-box{ background:#fff; border-radius:16px; padding:24px; max-width:520px; width:100%; box-shadow:0 24px 60px -20px rgba(0,0,0,.5); font-family: var(--font-main); }
.crop-modal-image-wrap{ width:100%; height:320px; background:#111; border-radius:10px; overflow:hidden; margin-bottom:16px; }
.crop-modal-image-wrap img{ max-width:100%; display:block; }
.crop-modal-actions{ display:flex; justify-content:flex-end; gap:10px; }

/* ================= Auth pages (Register / Login) ================= */
.auth-shell{
  padding: 60px 0 90px; position:relative; background-color:#ffffff; overflow:hidden;
}
.auth-shell .hero-gradient-overlay{ opacity:.7; }
.auth-card{
  position:relative; z-index:2; background:#fff; border-radius:24px; padding:44px;
  box-shadow: var(--shadow-md); border:1px solid var(--k-border); max-width:640px; margin:0 auto;
}
.auth-title{ font-size:1.9rem; font-weight:700; text-align:center; margin-bottom:6px; color:var(--k-dark); }
.auth-sub{ text-align:center; color:var(--k-gray); margin-bottom:30px; }
.auth-card .form-label{ font-weight:600; color:var(--k-dark); font-size:.92rem; }
.auth-card .form-control, .auth-card .form-select{
  border-radius:10px; border:1px solid var(--k-border); padding:.65rem .9rem;
}
.auth-card .form-control:focus, .auth-card .form-select:focus{
  border-color: var(--k-primary); box-shadow: 0 0 0 .2rem rgba(2,132,199,.12);
}
.auth-card .form-hint{ font-size:.8rem; color:var(--k-gray); margin-top:4px; }
.auth-type-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.auth-type-option{
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px;
  border:1px solid var(--k-border); cursor:pointer; font-size:.9rem; font-weight:500; color:var(--k-dark);
  background:#fff; transition:.2s;
}
.auth-type-option.checked{ border-color:var(--k-primary); background:var(--k-primary-light); color:var(--k-primary); }
.auth-type-option input{ accent-color: var(--k-primary); }
.auth-footer-link{ text-align:center; margin-top:20px; font-size:.9rem; color:var(--k-gray); }
.auth-photo-preview{
  width:100%; max-width:220px; aspect-ratio:305/209; object-fit:cover; border-radius:12px;
  border:1px solid var(--k-border); margin-bottom:10px; background:var(--k-light);
}

/* เพิ่มสีแดงให้ครบชุด card-theme (ใช้กับคลินิก) */
.card-theme-red::after { background-color: #dc2626; }
.card-theme-red .db-icon { color: #dc2626; background-color: rgba(220, 38, 38, 0.08); }
.card-theme-red:hover { box-shadow: 0 20px 40px rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.2); }
.card-theme-red .db-link { color: #dc2626; }

/* ================= Member profile page ================= */
.profile-shell{ padding:60px 0 90px; }
.profile-photo{
  width:100%; max-width:220px; aspect-ratio:305/209; object-fit:cover; border-radius:14px;
  border:1px solid var(--k-border); margin-bottom:18px; box-shadow: var(--shadow-sm);
}
.profile-badge{
  display:inline-flex; align-items:center; padding:5px 14px; border-radius:20px; font-size:.8rem; font-weight:600;
  background: var(--k-primary-light); color: var(--k-primary); margin-right:8px; margin-bottom:8px;
}
.status-badge{ display:inline-flex; align-items:center; padding:5px 14px; border-radius:20px; font-size:.78rem; font-weight:700; margin-right:8px; margin-bottom:8px; }
.status-badge.pending{ background:#fef3c7; color:#b45309; }
.status-badge.approved{ background:#d1fae5; color:#059669; }
.status-badge.rejected{ background:#fee2e2; color:#dc2626; }
.profile-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--k-border); }
.profile-table th{ text-align:left; background:var(--k-light); color:var(--k-gray); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; padding:12px 16px; }
.profile-table td{ padding:13px 16px; border-top:1px solid var(--k-border); font-size:.9rem; }

/* ================= Quill editor wrapper (ใช้ในฟอร์มลงประกาศงานของสมาชิก) ================= */
.editor-shell .ql-toolbar{ border-radius:10px 10px 0 0; border-color: var(--k-border); font-family: var(--font-main); }
.editor-shell .ql-container{ border-radius:0 0 10px 10px; border-color: var(--k-border); font-family: var(--font-main); font-size:.95rem; min-height:260px; }

/* ================= ตัดข้อความแนะนำตัวในการ์ดค้นหา (แพทย์/โค้ช) ให้ไม่ล้นออกนอกการ์ด ================= */
.clinic-bio-clamp{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
  font-size:.85rem; color:#64748b; margin-top:8px; margin-bottom:0;
  line-height:1.5; max-height:calc(1.5em * 3);
}
.clinic-card-more{
  border:none; background:none; padding:0; margin-top:10px; font-size:.82rem; font-weight:600;
  color: var(--k-primary); cursor:pointer; text-align:left;
}
.clinic-card-more:hover{ text-decoration:underline; }

/* ================= Lightbox modal แสดงรายละเอียดสมาชิกแบบเต็ม ================= */
.member-modal-photo{
  width:100%; max-width:305px; aspect-ratio:305/209; object-fit:cover; border-radius:12px;
  margin:0 auto 16px; display:block; border:1px solid var(--k-border);
}
.member-modal-bio{
  white-space:pre-line; color:#334155; line-height:1.8;
  overflow-wrap:break-word; word-break:break-word;
}
#memberDetailModal .modal-header{ align-items:flex-start; gap:12px; }
#memberDetailModal .modal-title{
  overflow-wrap:break-word; word-break:break-word; min-width:0; flex:1;
}
#memberDetailModal .clinic-badge{
  overflow-wrap:break-word; word-break:break-word; white-space:normal; height:auto;
}
#memberDetailModal .clinic-info{
  overflow-wrap:break-word; word-break:break-word;
}
#memberDetailModal .clinic-info span{ overflow-wrap:break-word; word-break:break-word; min-width:0; }
#memberDetailModal .modal-body{ overflow-wrap:break-word; word-break:break-word; }

/* ================= Tag สีตามกลุ่มผู้อ่าน (แสดงบนการ์ดข่าว/คอร์สเรียนฝั่งหน้าบ้าน) ================= */
.group-tag{
  font-size:.72rem; padding:4px 12px; border-radius:20px; font-weight:600;
  margin-right:6px; margin-bottom:6px; display:inline-block;
}
.group-tag-blue{ background:#dbeafe; color:#1d4ed8; }
.group-tag-purple{ background:#ede9fe; color:#7c3aed; }
.group-tag-red{ background:#fee2e2; color:#dc2626; }
.group-tag-green{ background:#d1fae5; color:#059669; }
.group-tag-orange{ background:#fef3c7; color:#d97706; }
.group-tag-wrap{ display:flex; flex-wrap:wrap; margin-bottom:6px; }