/* ==========================================================================
   [1] CATEGORY HEADER & BREADCRUMB (ส่วนหัวหน้าหมวดหมู่และลิงก์นำทาง)
   ========================================================================== */

/* กล่องหัวข้อใหญ่ของหน้าหมวดหมู่ */
.category-minimal-header { 
    background: #ffffff; 
    padding: 40px 0 20px 0; 
    border-bottom: 1px solid #f1f5f9; 
}

/* ลิงก์นำทางบอกตำแหน่งปัจจุบัน (Breadcrumb) */
.breadcrumb-nav { 
    display: flex; 
    gap: 8px; 
    list-style: none; 
    padding: 0; 
    margin-bottom: 12px; 
    font-size: 13px; 
    color: #94a3b8; 
}
.breadcrumb-nav a { 
    color: #94a3b8; 
    text-decoration: none; 
    transition: color 0.2s; 
}
.breadcrumb-nav a:hover { 
    color: #ff527b; 
}
.breadcrumb-nav .separator { 
    margin: 0 4px; 
}
.breadcrumb-nav .current { 
    color: #ff527b; 
    font-weight: 500; 
}

/* หัวข้อหมวดหมู่หลัก (เช่น บิวตี้ & รีวิว) */
.category-main-title { 
    font-size: 32px; 
    font-weight: 700; 
    color: #1e293b; 
    margin-bottom: 8px; 
}

/* คำอธิบายสั้นๆ ประจำหมวดหมู่ */
.category-subtitle-desc { 
    font-size: 15px; 
    color: #64748b; 
    max-width: 700px; 
    line-height: 1.6; 
    margin-bottom: 25px; 
}


/* ==========================================================================
   [2] SUB-CATEGORY HORIZONTAL SCROLL (แถบเมนูย่อยปัดเลื่อนซ้าย-ขวาบนมือถือ)
   ========================================================================== */

/* จัดการ Container หลักให้สไลด์แนวนอนได้แบบลื่นๆ */
.sub-cat-scroll-wrapper { 
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
    width: 100% !important; 
    overflow-x: auto !important;             /* เปิดสไลด์แนวนอนเมื่อจอมือถือไม่พอ */
    overflow-y: hidden !important; 
    white-space: nowrap !important;          /* บังคับห้ามปุ่มตกไปบรรทัดใหม่ */
    padding: 5px 0 15px 0 !important; 
    -webkit-overflow-scrolling: touch !important; /* ช่วยให้การปัดนิ้วบน iOS ลื่นไหล */
    
    /* ซ่อนแถบ Scrollbar สำหรับ IE, Edge และ Firefox */
    -ms-overflow-style: none !important;  
    scrollbar-width: none !important;  
}

/* ซ่อนแถบ Scrollbar สำหรับ Chrome, Safari, Opera */
.sub-cat-scroll-wrapper::-webkit-scrollbar { 
    display: none !important; 
}

/* ตกแต่งปุ่มเลือกหมวดหมู่ย่อย (Pill Button) */
.sub-cat-pill { 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    padding: 8px 16px !important; 
    font-size: 14px !important; 
    font-weight: 500 !important; 
    border-radius: 50px !important; 
    background-color: #f1f5f9 !important; 
    color: #475569 !important; 
    text-decoration: none !important; 
    transition: all 0.2s ease !important; 
    flex-shrink: 0 !important;               /* ป้องกันปุ่มหดตัวเบี้ยวเมื่อตัวหนังสือยาว */
}

/* สไตล์เมื่อปุ่มถูกเลือก (Active) หรือเอาเมาส์ไปชี้ (Hover) */
.sub-cat-pill.active,
.sub-cat-pill:hover { 
    background-color: #ff527b !important; 
    color: #ffffff !important; 
}


/* ==========================================================================
   [3] LAYOUT & STRUCTURE (การจัดโครงสร้างกริดและหน้าหลัก)
   ========================================================================== */

.main-layout-grid { 
    margin-top: 35px; 
}

/* เลย์เอาต์หลักที่ครอบการแสดงผลทั้งหมด */
.articles-combination-layout { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
}

/* เลย์เอาต์แสดงรายการบทความย่อยแบบ Grid */
.articles-masonry-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 25px; 
}


/* ==========================================================================
   [4] FEATURED PRIMARY CARD (สไตล์การ์ดบทความแนะนำขนาดใหญ่ด้านบนสุด)
   ========================================================================== */

.featured-primary-card { 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 16px; 
    overflow: hidden; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.02); 
    display: flex; 
    flex-direction: column; 
}

/* กล่องใส่รูปภาพบทความแนะนำ (คุมสัดส่วน Aspect Ratio 740x380 เสมอ) */
.featured-image-wrapper { 
    position: relative !important; 
    width: 100% !important; 
    height: auto !important; 
    aspect-ratio: 740 / 380 !important; 
    overflow: hidden !important; 
    border-radius: 12px !important; 
    background-color: #f3f4f6 !important; 
}
.featured-image-wrapper img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    object-position: center !important; 
}

/* ป้าย Tag สีชมพูที่ลอยอยู่บนภาพ */
.featured-tag { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    background: #ff527b; 
    color: #fff; 
    padding: 6px 14px; 
    border-radius: 20px; 
    font-size: 12px; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

/* พื้นที่ส่วนเนื้อหาใต้ภาพ */
.featured-card-body { 
    padding: 30px; 
}
.featured-title { 
    font-size: 24px; 
    font-weight: 700; 
    line-height: 1.4; 
    margin-bottom: 12px; 
}
.featured-title a { 
    color: #1e293b; 
    text-decoration: none; 
    transition: color 0.2s; 
}
.featured-title a:hover { 
    color: #ff527b; 
}

/* ย่อเนื้อหาบทความเกริ่นนำ ให้แสดงผลแค่ 2 บรรทัดแล้วตัดด้วย ... */
.featured-excerpt { 
    color: #64748b; 
    font-size: 15px; 
    line-height: 1.6; 
    margin-bottom: 20px; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
}
.featured-meta { 
    font-size: 13px; 
    color: #94a3b8; 
}


/* ==========================================================================
   [5] REGULAR ARTICLE CARDS (สไตล์การ์ดรายการบทความปกติใน Grid)
   ========================================================================== */

/* กล่องรูปภาพบทความปกติ (คุมสัดส่วน Aspect Ratio 350x200 เสมอ) */
.art-img-holder { 
    position: relative !important; 
    width: 100% !important; 
    height: auto !important; 
    aspect-ratio: 350 / 200 !important; 
    overflow: hidden !important; 
    border-radius: 8px !important; 
    background-color: #f3f4f6 !important; 
}
.art-img-holder img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    object-position: center !important; 
}

/* ส่วนเนื้อหาภายในการ์ด */
.art-body { 
    padding: 20px; 
}
.art-category { 
    font-size: 12px; 
    font-weight: 600; 
    text-transform: uppercase; 
}
.art-category.beauty-color { 
    color: #ff527b; 
}

/* ชื่อเรื่องบทความปกติ (คุมความสูงล็อกไว้ให้แสดงได้สูงสุด 2 บรรทัด) */
.art-title { 
    font-size: 17px; 
    font-weight: 600; 
    margin: 8px 0; 
    line-height: 1.4; 
    height: 48px; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
}
.art-title a { 
    color: #1e293b; 
    text-decoration: none; 
    transition: color 0.2s; 
}
.art-title a:hover { 
    color: #ff527b; 
}

/* คำโปรยบทความ (ล็อกความสูงไว้ที่ 2 บรรทัดเช่นกันเพื่อให้ Layout เท่ากันเสมอกันทุกชิ้น) */
.art-excerpt { 
    font-size: 14px; 
    color: #64748b; 
    line-height: 1.5; 
    height: 42px; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
}

/* การให้คะแนนหรือฟุตเตอร์ด้านล่างสุดของการ์ด */
.art-footer-rating { 
    margin-top: 15px; 
    font-size: 12px; 
    color: #94a3b8; 
}


/* ==========================================================================
   [6] PAGINATION & ERROR HANDLING (ส่วนของการแบ่งหน้า และ ข้อความกรณีไม่พบข้อมูล)
   ========================================================================== */

/* กล่องครอบระบบแบ่งหน้า */
.pagination-wrapper { 
    margin-top: 40px; 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
}

/* ปุ่มตัวเลขหรือย้อนกลับ/ถัดไป */
.page-btn { 
    text-decoration: none; 
    padding: 8px 16px; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    color: #64748b; 
    font-size: 14px; 
    font-weight: 500; 
    transition: all 0.2s; 
}
.page-btn:hover { 
    border-color: #ff527b; 
    color: #ff527b; 
}

/* ปุ่มตัวเลขของหน้าปัจจุบันที่ผู้ใช้กำลังเปิดอยู่ */
.page-btn.active { 
    padding: 8px 16px; 
    background: #ff527b; 
    color: #ffffff; 
    border-radius: 8px; 
    font-size: 14px; 
    font-weight: 600; 
    border: 1px solid #ff527b; 
}

/* ข้อความแจ้งเตือนเมื่อระบบไม่พบบทความใดๆ ในหน้าเว็บนั้น */
.no-article-found { 
    text-align: center; 
    padding: 50px 0; 
    color: #94a3b8; 
    font-size: 16px; 
}