/* =========================================================
   CM77 HOME AI FIRST V25.1
   โหลดต่อจาก cm77-home.css เดิม
   ========================================================= */

.hero-ai-first{
    min-height:680px;
}

.hero-ai-first .hero-content{
    width:min(900px,calc(100% - 32px));
}

.hero-ai-search{
    width:min(820px,100%);
    margin-top:25px;
}

.hero-ai-input-wrap{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    align-items:stretch;
    gap:8px;
    padding:8px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:18px;
    background:rgba(255,255,255,.97);
    box-shadow:0 18px 42px rgba(22,13,7,.28);
}

.hero-ai-badge{
    display:grid;
    place-items:center;
    width:50px;
    min-width:50px;
    border-radius:13px;
    background:linear-gradient(145deg,#4d2b13,#a36a2b);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
}

.hero-ai-input-wrap textarea{
    width:100%;
    min-height:64px;
    resize:none;
    border:0;
    outline:0;
    padding:10px 5px;
    background:transparent;
    color:#432712;
    font:inherit;
    line-height:1.55;
}

.hero-ai-input-wrap button{
    border:0;
    border-radius:11px;
    font-weight:700;
    cursor:pointer;
}

.hero-ai-voice{
    width:50px;
    background:#efe0cc;
    color:#573119;
    font-size:19px;
}

.hero-ai-submit{
    min-width:112px;
    padding:0 18px;
    background:#8e5724;
    color:#fff;
}

.hero-ai-prompts{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:11px;
}

.hero-ai-prompts button{
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    padding:8px 12px;
    background:rgba(36,21,12,.5);
    color:#fff5e8;
    font-size:10px;
    font-weight:700;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    cursor:pointer;
}

.hero-ai-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:17px;
}

.ai-capability-strip{
    position:relative;
    z-index:20;
    width:min(1180px,calc(100% - 28px));
    margin:-58px auto 28px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.ai-capability-strip a{
    min-height:115px;
    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid #e5d4be;
    border-radius:17px;
    background:rgba(255,255,255,.97);
    box-shadow:0 12px 30px rgba(63,39,20,.11);
    transition:.2s ease;
}

.ai-capability-strip a:hover{
    transform:translateY(-4px);
    border-color:#bd8954;
}

.ai-capability-strip span{
    font-size:25px;
}

.ai-capability-strip strong{
    margin-top:9px;
    color:#5a3417;
}

.ai-capability-strip small{
    margin-top:5px;
    color:#8a735e;
    line-height:1.45;
}

.province-card:after{
    content:"ถาม AI จังหวัดนี้";
    position:absolute;
    right:19px;
    top:16px;
    color:#f0d2a7;
    font-size:9px;
    font-weight:700;
}

@media(max-width:900px){
    .ai-capability-strip{
        grid-template-columns:repeat(2,minmax(0,1fr));
        margin-top:-45px;
    }
}

@media(max-width:820px){
    .hero-ai-first{
        min-height:650px;
    }

    .hero-ai-first .hero-content{
        width:calc(100% - 28px);
        padding-top:55px;
        padding-bottom:115px;
    }

    .hero-ai-input-wrap{
        grid-template-columns:auto minmax(0,1fr) auto;
    }

    .hero-ai-submit{
        grid-column:1/-1;
        min-height:44px;
    }

    .hero-ai-prompts{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:4px;
        scrollbar-width:none;
    }

    .hero-ai-prompts::-webkit-scrollbar{
        display:none;
    }

    .hero-ai-prompts button{
        flex:0 0 auto;
        white-space:nowrap;
    }

    .ai-capability-strip{
        margin-top:-35px;
    }
}

@media(max-width:560px){
    .hero-ai-first{
        min-height:680px;
    }

    .hero-ai-first .hero-content{
        padding-top:45px;
    }

    .hero-ai-badge{
        width:43px;
        min-width:43px;
    }

    .hero-ai-input-wrap textarea{
        font-size:13px;
    }

    .hero-ai-voice{
        width:43px;
    }

    .ai-capability-strip{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .ai-capability-strip a{
        min-height:105px;
        padding:14px;
    }

    .ai-capability-strip strong{
        font-size:13px;
    }

    .ai-capability-strip small{
        font-size:10px;
    }
}