html, body { overflow-x: hidden; }
body { background: linear-gradient(180deg, #f3faf9 0%, #eaf4f3 100%) fixed; }

@font-face{
  font-family:'IBM Plex Sans Thai';
  src:url('/static/app_elearn/fonts/IBMPlexSansThai-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'IBM Plex Sans Thai';
  src:url('/static/app_elearn/fonts/IBMPlexSansThai-500.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'IBM Plex Sans Thai';
  src:url('/static/app_elearn/fonts/IBMPlexSansThai-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

.card-container{
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.05);
    padding: 2.5rem 2rem;
}

.fmfa-heading{
    margin-bottom: 1rem;
}

.fmfa-highlight{
    color: #02aa7d !important;
    font-weight: 800 !important;
    display: inline;
}

/* TITLE */
.fmfa-title{
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: #123a34;
}

.fmfa-title span{
    color: #02aa7d;
}

/* SUB TEXT AREA */
.fmfa-sub{
    margin-top: .4rem;
    color: #2f3437;
    line-height: 1.45;
}

/* บรรทัดแรก */
.fmfa-line-main{
    display:block;
    font-size: 1.45rem;
    font-weight: 700;
    color:#2f3437;
    line-height:1.2;
}

/* คำว่า ที่เข้าใจ */
.fmfa-line-trust{
    display:block;
    margin-top:.18rem;
    font-size:.92rem;
    font-weight:700;
    color:#02aa7d;
}

.fmfa-trust-link{
    color:#02aa7d;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fmfa-trust-link:hover{
    color:#01906b;
}

/* บรรทัดสาม */
.fmfa-line-desc{
    display:block;
    margin-top:.18rem;
    font-size:.90rem;
    font-weight:400;
    color:#111827;
    line-height:1.45;
}

.btn-text-mobile{
    display:none;
}

/* MOBILE */
@media (max-width: 768px){

    .fmfa-title{
        font-size: 1.9rem;
    }

    .fmfa-line-main{
        font-size: 1.15rem;
    }

    .fmfa-line-trust,
    .fmfa-line-desc{
        font-size: .84rem;
    }

    .fmfa-filter-row{
        flex-direction: column;
        align-items: stretch;
    }

    .fmfa-filter-col{
        width:100%;
        align-items:stretch;
    }

    .fmfa-select,
    .fmfa-select-topic{
        width:100%;
        min-width:0;
        max-width:100%;
        box-sizing:border-box;
    }

    .btn-teal{
        width:max-content;
        align-self: center;
    }

    .btn-text-full{
        display:none;
    }

    .btn-text-mobile{
        display:inline;
    }
    
}

.header-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap: 1rem;
}

.member-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem 1.5rem;
    margin-top: 1.5rem;
    max-height: 560px;
    overflow-y: auto;
    padding-right: .25rem;
}

.member-card{
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9f1f1;
    border-radius: 1rem;
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
    margin-top: .5rem;
}

.member-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
}

.avatar{
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform .2s ease;
}

.member-card:hover .avatar{
    transform: scale(1.1);
}

.btn-teal{
    height:44px;
    padding:0 20px;
    font-size:.95rem;
    position: relative;
    overflow: hidden;
    background: #02aa7d;
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: .45rem 1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: background .2s;
    text-decoration: none;
}

.btn-teal:hover,
.btn-teal:focus{
    background: #01906b;
    color: #fff;
}

.btn-teal::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transform: skewX(-20deg);
    transition: all .6s ease;
}

.btn-teal:hover::before{
    left: 200%;
}

.btn-teal i.bi-arrow-right{
    transition: transform .2s ease;
}

.member-card:hover .btn-teal i.bi-arrow-right{
    transform: translateX(4px);
}

.member-card h5{
    font-size: 1.3rem;
    font-weight: 700;
    margin: 1rem 0 .25rem;
}

.member-card .sub{
    font-size: 1rem;
    color: #667c7c;
    margin-bottom: .75rem;
}

.member-card .career{
    font-size: .8rem;
    color: #667c7c;
    margin-top: -0.1rem;
    margin-bottom: .75rem;
}

.mb{ margin-bottom: 2px; }

.star-badge{
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px;
    line-height: 1;
    color: #f1b600;
    z-index: 2;
    font-size: 1.4rem;
}

.member-card:hover .star-badge{
    transform: scale(1.05);
}

.search-wrap{
    display:flex;
    align-items:center;
}

.search-wrap input{
    width: clamp(220px, 80vw, 420px);
    font-size:1.05rem;
    padding:10px 14px;
    border-radius:999px;
    border:2px solid #e2e8f0;
    font-weight:500;
    outline:none;
}

.search-wrap input:focus{
    border-color:#02aa7d;
    box-shadow:0 0 0 3px rgba(2,170,125,.12);
}

.fmfa-search-pill{
    width: min(100%, 820px);
    height: 56px;
    display: flex;
    align-items: center;
    border: 2px solid #dbe6ee;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    padding: 4px;
    margin-top: .2rem;
    box-shadow: 0 8px 24px rgba(15, 118, 110, .08);
}

.fmfa-search-pill input{
    flex: 1;
    width: auto;
    height: 100%;
    border: 0;
    outline: none;
    padding: 0 18px;
    font-size: 1rem;
    font-weight: 600;
    color: #2f3437;
    background: transparent;
}

.fmfa-search-pill input:focus{
    box-shadow: none;
    border: 0;
}

.fmfa-search-pill input::placeholder{
    color: #8aa0a8;
}

.fmfa-search-pill button{
    height: 100%;
    border: 0;
    border-radius: 999px;
    padding: 0 28px;
    background: #16b67a;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.fmfa-search-pill button:hover{
    background: #0fa66d;
    transform: translateY(-1px);
}

.fmfa-topics{
    background:#f7fbfa;
    border:1px solid #e3efec;
    border-radius:1rem;
    padding:1rem;
    margin-top: 1.25rem;
}

.fmfa-title{
    font-size:1.15rem;
    font-weight:700;
    margin:0;
}

.fmfa-subtitle{
    color:#5d7473;
    font-size:.95rem;
}

.fmfa-topic-grid{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
}

.fmfa-topic-chip{
    display:inline-flex;
    align-items:center;
    padding:.6rem 1rem;
    border-radius:999px;
    background:#fff;
    border:1px solid #d9e8e3;
    color:#23403b;
    text-decoration:none;
    font-weight:500;
    transition:.2s ease;
}

.fmfa-topic-chip:hover,
.fmfa-topic-chip.active{
    background:#02aa7d;
    border-color:#02aa7d;
    color:#fff;
}

.fmfa-topic-chip.reset{
    background:#f3f5f5;
    color:#5d6d6a;
    border-color:#e2e8e6;
}

.fmfa-summary{
    background:#eef8f5;
    border:1px solid #d4ebe4;
    border-radius:1rem;
    padding:1rem 1.1rem;
    margin-top: 1rem;
}

.fmfa-summary-label{
    font-size:.9rem;
    color:#56706b;
    margin-bottom:.25rem;
}

.fmfa-summary-title{
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:.35rem;
}

.fmfa-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.4rem;
    margin:.75rem 0;
}

.fmfa-tag{
    display:inline-block;
    padding:.35rem .7rem;
    border-radius:999px;
    background:#eef7f3;
    color:#15684f;
    font-size:.82rem;
    font-weight:600;
}

.fmfa-reason-box{
    width:100%;
    text-align:left;
    background:#f8fbfa;
    border:1px solid #e4efeb;
    border-radius:.8rem;
    padding:.75rem .85rem;
    margin:.5rem 0 1rem;
}

.fmfa-reason-title{
    font-weight:700;
    font-size:.92rem;
    margin-bottom:.35rem;
}

.fmfa-reason-list{
    margin:0;
    padding-left:1rem;
    font-size:.88rem;
    color:#4e6360;
}

.member-empty{
    grid-column: 1 / -1;
    text-align: center;
    color: #667c7c;
    padding: 2rem 1rem;
}

.fmfa-heading{
    margin-bottom: .05rem;
}   

.fmfa-logo{
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;

    font-family: "Nunito", sans-serif;

    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.03em;
}

.fmfa-logo-find{
    font-weight: 800;
    color: #1f2328;
}

.fmfa-logo-my{
    font-weight: 800;
    color: #16b67a;
}

.fmfa-logo-fa{
    font-weight: 700;
    color: #1f2328;
}

.fmfa-sub{
    margin-top: .55rem;
    font-family: "IBM Plex Sans Thai", sans-serif;
    font-size: 1rem;
    color: #737882;
    line-height: 1.5;
}

.fmfa-trust-inline{
    display:block;
    margin-top:.35rem;
    font-size:.9rem;
    color:#5f6b6a;
    line-height:1.5;
}

.fmfa-trust-inline a{
    color:#02aa7d;
    font-weight:600;
    text-decoration:none;
}

.fmfa-trust-inline a:hover{
    text-decoration:underline;
}

.fmfa-topics-head .fmfa-title{
    margin-bottom: .12rem;
}

.fmfa-filter-row{
    margin-top: .75rem;
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    align-items:flex-start;
}

.fmfa-select{
    min-width:220px;
    height:46px;

    padding:0 42px 0 18px;

    border:1.5px solid #dbe6ee;
    border-radius:999px;
    background:#fff;

    font-size:.95rem;
    font-weight:600;
    color:#23403b;

    line-height:normal;          /* แก้ตรงนี้ */
    display:flex;
    align-items:center;          /* จัดกลางแนวตั้ง */

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml;utf8,<svg fill='%2323403b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 7.5L10 12l4.5-4.5'/></svg>");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:18px;
}

.fmfa-select:hover{
    border-color:#c8ddd7;
}

.fmfa-select:focus{
    border-color:#02aa7d;
    box-shadow: 0 0 0 4px rgba(2,170,125,.12);
}

.fmfa-selected-filters{
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
    margin-top:.9rem;
}

.fmfa-filter-chip{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.45rem .8rem;
    border-radius:999px;
    background:#eef8f5;
    border:1px solid #bfe6db;
    color:#15684f;
    font-size:.9rem;
    font-weight:700;
}

.fmfa-filter-chip button{
    border:0;
    background:rgba(21,104,79,.1);
    color:#15684f;
    width:20px;
    height:20px;
    border-radius:50%;
    font-weight:800;
    line-height:1;
    cursor:pointer;
}

.fmfa-clear-all{
    background:#f1f3f5;
    border-color:#d9dee3;
    color:#667085;
}

.fmfa-clear-all:hover{
    background:#e9ecef;
}

.fmfa-filter-col{
    display:flex;
    flex-direction:column;
    gap:.28rem;
    align-items:flex-end;   /* ดันไปขวา */
}

.fmfa-help-link{
    font-size:.72rem;       /* เล็กลง */
    color:#5f706c;
    text-decoration:none;
    font-weight:600;
    line-height:1;
    padding-right:.45rem;   /* ชิดขอบขวา dropdown */
    opacity:.9;
}

.fmfa-help-link:hover{
    color:#02aa7d;
    opacity:1;
}

.fmfa-result-count{
    margin: 1rem 0 .8rem;
    font-size: 1rem;
    color:#4b5b58;
    font-weight:500;
}

.fmfa-result-count strong{
    color:#02aa7d;
    font-size:1.15rem;
    font-weight:800;
}

.member-exp{
    margin-top:.35rem;
    font-size:.88rem;
    font-weight:700;
    color:#02aa7d;
    background:#eef8f5;
    display:inline-block;
    padding:.30rem .78rem;
    border-radius:999px;
    border:1px solid #cfeee2;
}

.member-cred-text{
    margin-top:.55rem;
    display:flex;
    flex-direction:column;
    gap:.28rem;
    align-items:flex-start;
}

.member-cred-line{
    font-size:.82rem;
    font-weight:600;
    color:#4a5a57;
    line-height:1.35;
    text-align:center;
}

.member-cred-label{
    font-weight:800;
    color:#7b8a86;
    margin-right:.2rem;
}

.member-cred-line-green{
    color:#4a5a57;
}

@media (max-width: 768px){
    .card-container{
        padding: 1.25rem 1rem;
    }

    .header-bar{
        align-items: stretch;
    }

    .search-wrap{
        width: 100%;
    }

    .search-wrap input{
        width: 100%;
    }

    .member-grid{
        grid-template-columns: 1fr;
        max-height: none;
        overflow-y: visible;
    }
}

.member-card{
    content-visibility: auto;
    contain-intrinsic-size: 360px;
}

.member-grid{
    overscroll-behavior: contain;
}

.avatar{
    background:#eef8f5;
}