/* Container หลักสำหรับค้นหา */
.search-container {
    max-width: 550px; /* ขยายให้กว้างขึ้นนิดหน่อยเพื่อให้มีที่วางปุ่ม */
    margin: 0 auto 30px;
}

/* จัดวางแบบ Flex ให้ช่อง input กับปุ่มขนานกัน */
.search-form-flex {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-input-wrapper {
    position: relative;
    flex: 1; /* ให้ช่อง input กว้างที่สุด */
}

/* ไอคอนแว่นขยายข้างในช่อง */
.search-icon-inside {
    position: absolute; 
    left: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #94a3b8; 
    z-index: 1;
}

/* ปรับแต่งช่อง Input */
.search-input-wrapper input {
    width: 100%; 
    padding: 12px 25px 12px 50px; 
    border: 2px solid #f1f5f9; 
    border-radius: 50px; 
    outline: none; 
    transition: 0.3s; 
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
}

/* Focus State: เปลี่ยนเป็นสีแดงตามสไตล์ที่คุณชอบ */
.search-input-wrapper input:focus {
    border-color: var(--at-red) !important;
    box-shadow: 0 4px 12px rgba(237, 41, 57, 0.15) !important;
}

/* ปุ่มแคปซูลสีแดง */
.btn-search-capsule {
    background-color: var(--at-red);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap; /* ห้ามข้อความ "ค้นหา" ตัดบรรทัด */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(237, 41, 57, 0.2);
}

.btn-search-capsule:hover {
    background-color: #d11a2a; /* แดงเข้มขึ้นนิดนึงตอนวางเม้าส์ */
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(237, 41, 57, 0.3);
}

/* ปรับแต่งสำหรับมือถือ */
@media (max-width: 576px) {
    .search-form-flex {
        gap: 8px;
    }
    .btn-search-capsule {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
}/* --- ปรับแต่ง Search Container ให้เท่ากับหน้า Article --- */
.search-container {
    /* ปรับจาก 550px หรือค่าอื่นๆ ให้เหลือ 500px ตามหน้า Article */
    max-width: 500px; 
    margin: 0 auto 30px;
    width: 100%; /* เพื่อให้รองรับหน้าจอมือถือ */
}

/* จัดวางแบบ Flex ให้สมดุล */
.search-form-flex {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-input-wrapper {
    position: relative;
    flex: 1; /* ให้ช่อง Input ขยายจนเกือบเต็ม แต่เหลือที่ให้ปุ่มแคปซูล */
}

/* ปรับ Padding ของ Input ให้ดู Compact ขึ้นพอดีกับความกว้าง */
.search-input-wrapper input {
    width: 100%;
    padding: 12px 20px 12px 48px; /* เว้นที่ให้ไอคอนแว่นขยาย */
    border: 2px solid #f1f5f9;
    border-radius: 50px;
    font-size: 1rem;
    transition: 0.3s;
}/* 1. คุมความกว้างของทั้งชุด (รวมปุ่มแล้ว) */
.search-container {
    max-width: 450px; /* ถ้า 500px ยังกว้างไป ลองปรับเหลือ 450px หรือ 400px ครับ */
    margin: 0 auto 30px; /* จัดกึ่งกลางหน้าจอ */
    width: 90%; /* เพื่อให้เวลาเปิดในมือถือไม่ล้นขอบจอ */
}

/* 2. จัดระเบียบชุด Input กับปุ่ม */
.search-form-flex {
    display: flex;
    gap: 10px;
    justify-content: center; /* จัดให้อยู่กลางกล่อง */
}

/* 3. ส่วนของ Input Wrapper */
.search-input-wrapper {
    position: relative;
    flex: 1; /* ปล่อยให้มันยืดในขอบเขต max-width ที่เราตั้งไว้ในข้อ 1 */
}

/* 4. ปรับขนาดช่อง Input ให้ดู Compact */
.search-input-wrapper input {
    width: 100%;
    padding: 10px 20px 10px 45px; /* ลด padding ลงนิดนึงให้ดูไม่หนาเทอะทะ */
    border: 2px solid #f1f5f9;
    border-radius: 50px;
    font-size: 0.95rem; /* ลดขนาดฟอนต์ลงนิดนึงเพื่อให้ดูละมุนขึ้น */
}/* 1. สไตล์พื้นฐานของแคปซูล */
.pill-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 50px; /* ทรงแคปซูล */
    border: 2px solid #e2e8f0;
    background-color: #ffffff;
    color: #64748b;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* 2. สไตล์เมื่อมีการ Hover (เอาเมาส์วาง) */
.pill-item:hover {
    border-color: var(--at-red);
    color: var(--at-red);
    background-color: rgba(237, 41, 57, 0.05); /* สีแดงจางๆ */
    transform: translateY(-2px); /* ลอยขึ้นนิดนึงให้ดูมีมิติ */
}

/* 3. สไตล์เมื่อปุ่มถูกเลือก (Active) */
.pill-item.active {
    background-color: var(--at-red);
    border-color: var(--at-red);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(237, 41, 57, 0.3); /* เงาสีแดงฟุ้งๆ */
}

/* 4. สไตล์ไอคอนข้างในแคปซูล */
.pill-item i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.pill-item.active i {
    transform: scale(1.1); /* ไอคอนขยายขึ้นนิดนึงเมื่อเลือก */
}

/* 5. ปรับแต่งสำหรับ Mobile (EAA Compliance) */
@media (max-width: 768px) {
    .pill-item {
        padding: 8px 18px;
        font-size: 0.85rem;
    }
}
/* ปรับแต่ง Select Box ให้เป็นแคปซูล */
.filter-select {
    appearance: none; /* เอาลูกศรเดิมออก */
    -webkit-appearance: none;
    -moz-appearance: none;
    
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;
    
    padding: 12px 45px 12px 25px;
    border-radius: 50px; /* ทำให้เป็นแคปซูล */
    border: 2px solid #e2e8f0;
    color: #1e293b;
    font-family: 'Prompt', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 220px;
    outline: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* เมื่อ Select Box ถูกโฟกัสหรือ Hover */
.filter-select:hover {
    border-color: var(--at-red);
}

.filter-select:focus {
    border-color: var(--at-red);
    box-shadow: 0 0 0 4px rgba(237, 41, 57, 0.1);
}



/* --- 1. Grid คุมภาพรวม --- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; /* ลดช่องว่างระหว่างการ์ดให้พอดี */
}

/* --- 2. ตัวการ์ด (แก้ปัญหาลิงก์หลุด) --- */
.article-card {
    background: #ffffff;
    border: 1px solid #f1f5f9; /* กรอบจางเริ่มต้น */
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    text-decoration: none !important; /* ล็อกลิงก์ไม่ให้มีเส้นใต้หรือเปลี่ยนสีประหลาด */
    color: inherit;
}

.article-card:hover {
    border-color: #cbd5e1; /* กรอบเข้มขึ้นตามที่นายชอบ */
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

/* --- 3. ส่วนรูปภาพและ Badge แถบสีแดง --- */
.article-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* ภาพขยับเมื่อ Hover */
.article-card:hover .article-image img {
    transform: scale(1.1);
}

.pinned-ribbon {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--at-red);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(237, 41, 57, 0.3);
}

/* --- 4. ส่วนเนื้อหา (แก้ปัญหาช่องว่างเยอะเกิน) --- */
.article-content {
    padding: 20px; /* พื้นที่ว่างรอบตัวอักษรที่สมดุล */
    display: flex;
    flex-direction: column;
    gap: 6px; /* ลดระยะห่างระหว่างบรรทัดข้อความให้ดูเกาะกลุ่ม */
}

.article-meta {
    margin-bottom: 2px;
}

.category-tag {
    font-size: 0.75rem;
    color: #94a3b8;
    background: #f8fafc;
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid #f1f5f9;
}

.article-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3; /* กระชับช่องว่างระหว่างบรรทัด */
}



/* เปลี่ยนสีหัวข้อเมื่อ Hover การ์ด */
.article-card:hover .article-title {
    color: var(--at-red);
}

.article-excerpt {
    font-size: 0.9rem;
    color: #64748b; /* สีเทาสวยๆ ไม่ดำมืด */
    line-height: 1.6; /* เพิ่มระยะห่างระหว่างบรรทัดให้อ่านง่ายตามหลัก EAA */
    margin: 8px 0 15px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* ล็อคให้แสดงแค่ 3 บรรทัด ถ้าเกินจะ ... อัตโนมัติ */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.8em; /* คุมความสูงให้เท่ากันทุกการ์ด Layout จะได้ไม่โย้ */
}

/* ปุ่มอ่านต่อ (Footer) */
.article-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f8fafc;
    color: var(--at-red);
    font-weight: 600;
    font-size: 0.85rem;
}/* 1. คุมลิงก์หลักของการ์ด ไม่ให้มีเส้นใต้และใช้สีปกติ */
.article-card, 
.article-card:visited, 
.article-card:active {
    text-decoration: none !important;
    color: inherit; /* ให้ใช้สีตามที่ตั้งไว้ใน Card content */
    outline: none;
}

/* 2. คุมหัวข้อ (Title) ให้เป็นสีเข้ม และเปลี่ยนเป็นสีแดงตอน Hover */
.article-title, 
.article-title a {
    color: #1e293b !important; /* สีกรมท่าเข้ม ดูแพงกว่าสีดำบริสุทธิ์ */
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* เมื่อเอาเมาส์วางที่ตัวการ์ด ให้หัวข้อเปลี่ยนเป็นสีแดงทันที */
.article-card:hover .article-title {
    color: var(--at-red) !important;
}

/* 3. คุมปุ่ม "ดูรายละเอียด" (Footer) */
.article-footer {
    color: var(--at-red); /* ล็อกสีแดงไว้ที่ปุ่มนี้ */
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s ease; /* ให้ลูกศรขยับได้นิดนึงตอน Hover */
}

.article-card:hover .article-footer {
    gap: 10px; /* ลูกศรดีดตัวออกเมื่อ Hover ดูมีลูกเล่น */
}

/* 4. ป้องกันลิงก์อื่นๆ ที่อาจหลุดมา (เช่น ใน Meta หรือ Category) */
.article-meta a, 
.article-excerpt a {
    color: #64748b;
    text-decoration: none;
}

.article-meta a:hover {
    color: var(--at-red);
}/* 1. สไตล์พื้นฐานของปุ่มดูรายละเอียด */
.read-more {
    color: var(--at-red) !important; /* บังคับเป็นสีแดงตามสั่ง */
    text-decoration: none !important; /* เอาเส้นใต้ออก */
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* ระยะห่างระหว่างตัวอักษรกับลูกศร */
    transition: all 0.3s ease;
    margin-top: 5px;
}

/* 2. สไตล์ไอคอนลูกศร */
.read-more i {
    font-size: 0.85rem;
    transition: transform 0.3s ease; /* เตรียมไว้สำหรับตอน Hover */
}

/* 3. เมื่อเอาเมาส์วาง (Hover) ที่ "การ์ด" หรือ "ตัวลิงก์" */
.article-card:hover .read-more,
.read-more:hover {
    color: #d11a2a !important; /* แดงเข้มขึ้นนิดนึงเวลา Hover ให้ดูมีมิติ */
}

/* ลูกเล่น: ให้ลูกศรดีดตัวออกไปทางขวาเล็กน้อยเวลา Hover */
.article-card:hover .read-more i,
.read-more:hover i {
    transform: translateX(5px);
}

/* ใส่ทางเข้าให้ลึกขึ้นเพื่อให้ชนะ CSS เก่า */
.category-pills-container .category-pills .pill-item {
    display: inline-flex !important; /* บังคับใช้ flex */
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px; 
    color: #475569;
    text-decoration: none !important; /* เอาเส้นใต้ออกให้ขาด */
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* ตอน Active ให้เน้นหนักๆ */
.category-pills-container .category-pills .pill-item.active {
    background-color: #c0101c !important;
    border-color: #c0101c !important;
    color: #ffffff !important;
}

/* ปรับแต่งสำหรับหน้าจอมือถือ */
@media (max-width: 600px) {
    .category-pills {
        gap: 8px;
    }
    .pill-item {
        padding: 8px 16px;
        font-size: 13px;
    }
}