/* ═══════════════════════════════════════════════════════════════
   TLA — ปรับหน้าแรกและหน้ารายละเอียดข่าวให้เป็น UI สมัยใหม่
   อ้างอิงรูปแบบการ์ดจากตัวอย่างที่ให้มา (DreamsLMS)

   ทำเป็นชั้น CSS ทับโครงเดิมของธีม ไม่รื้อ HTML ของ CMS
   บล็อกและสไลด์ที่แอดมินตั้งค่าไว้จึงยังทำงานเหมือนเดิม
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   1. การ์ดใหญ่บนหน้าแรก — รูปเต็มใบ ไล่เฉดดำ ตัวอักษรสีขาวทับ
      (แบบเดียวกับรูปตัวอย่างชุดบทความ)
═══════════════════════════════════════════════════════ */
.featured-section .fs-card {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: #17132B;
}

.featured-section .fs-card .fs-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.featured-section .fs-card:hover .fs-img { transform: scale(1.04); }

/* ไล่เฉดให้ตัวอักษรอ่านออกเสมอ ไม่ว่ารูปจะสว่างแค่ไหน */
.featured-section .fs-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(15, 10, 32, .92) 0%,
        rgba(15, 10, 32, .72) 28%,
        rgba(15, 10, 32, .18) 58%,
        rgba(15, 10, 32, .05) 100%);
    pointer-events: none;
    z-index: 1;
}

.featured-section .fs-card .fs-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 20px 22px 22px;
}

/* ป้ายหมวดหมู่ — เส้นขอบขาวโปร่ง ให้ดูเบาและทันสมัย */
.featured-section .fs-card .fs-badge .badge-category {
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(6px);
    border-radius: 9999px;
    padding: 5px 13px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

.featured-section .fs-card .fs-title {
    margin: 10px 0 0;
    font-weight: 800;
    line-height: 1.35;
}

.featured-section .fs-card .fs-title a { color: #fff; }
.featured-section .fs-card .fs-title a:hover { color: var(--tla-purple-400, #A78BFA); }

/* ผู้เขียนย้ายขึ้นไปเป็นป้ายมุมบนซ้าย ตามแบบอ้างอิง */
.featured-section .fs-card .fs-meta {
    position: absolute;
    top: 16px;
    left: 18px;
    right: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-section .fs-card .fs-meta .post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.featured-section .fs-card .fs-meta .meta-author {
    background: var(--tla-purple-600, #6D28D9);
    border-radius: 9999px;
    padding: 4px 14px 4px 4px;
    box-shadow: 0 4px 14px rgba(46, 16, 101, .35);
}

.featured-section .fs-card .fs-meta .meta-author .a-username {
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}

/* วันที่อยู่ล่างคู่กับหมวดหมู่ ไม่ปนกับป้ายผู้เขียน */
.featured-section .fs-card .fs-meta .meta-date,
.featured-section .fs-card .fs-meta .meta-item:not(.meta-author) {
    display: none;
}

/* ═══════════════════════════════════════════════════════
   2. การ์ดโพสต์ทั่วไป — กล่องขาว ขอบมน รูปด้านบน ปุ่มด้านล่าง
═══════════════════════════════════════════════════════ */
/* การ์ดแบบกล่องขาว (ใช้ในบล็อกทั่วไปและหน้ารายการข่าว)
   .post-item-vr เป็นการ์ดแบบรูปเต็มใบ จึงยกเว้นไว้ ไปจัดสไตล์แยกด้านล่าง */
.post-item:not(.post-item-vr) {
    background: #fff;
    border: 1px solid var(--tla-line, #E6E1F5);
    border-radius: 18px;
    padding: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.post-item:not(.post-item-vr):hover {
    border-color: var(--tla-purple-400, #A78BFA);
    box-shadow: 0 12px 28px rgba(46, 16, 101, .10);
    transform: translateY(-2px);
}

.post-item:not(.post-item-vr) .image {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
}

.post-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.post-item:hover .image img { transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════
   2.1 การ์ดแบบรูปเต็มใบ (.post-item-vr) — ไล่เฉดดำ ตัวอักษรขาว
       รูปแบบเดียวกับการ์ดใหญ่บนหน้าแรก
═══════════════════════════════════════════════════════ */
.post-item-vr {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    background: #17132B;
}

.post-item-vr .image { border-radius: 0; margin-bottom: 0; height: 100%; }

.post-item-vr::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(15, 10, 32, .94) 0%,
        rgba(15, 10, 32, .70) 34%,
        rgba(15, 10, 32, .10) 70%);
    pointer-events: none;
    z-index: 1;
}

.post-item-vr .caption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 18px 18px 16px;
}

.post-item-vr .caption .title a {
    color: #fff;
    font-weight: 800;
    line-height: 1.4;
}

.post-item-vr .caption .title a:hover { color: var(--tla-purple-400, #A78BFA); }

.post-item-vr .caption .post-meta {
    border-top: none;
    padding-top: 8px;
    margin-top: 6px;
    color: rgba(255, 255, 255, .8);
}

.post-item-vr .caption .post-meta .a-username { color: #fff; }

.post-item-vr .category-link {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    margin: 0;
}

/* ป้ายหมวดหมู่โทนอ่อน อ่านง่ายกว่าสีทึบ */
.post-item .category-link {
    display: inline-block;
    order: -1;
    margin-bottom: 10px;
}

.post-item .category-link .badge-category {
    background: var(--tla-purple-100, #EDE9FE) !important;
    color: var(--tla-purple-800, #4C1D95) !important;
    border-radius: 9999px;
    padding: 5px 13px;
    font-size: 11.5px;
    font-weight: 600;
}

.post-item .title {
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 10px;
}

.post-item .title a { color: var(--tla-ink, #1E1B33); }
.post-item .title a:hover { color: var(--tla-purple-700, #5B21B6); }

.post-item .description {
    color: var(--tla-muted, #6B7280);
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 14px;
}

/* แถวผู้เขียน + วันที่ คั่นด้วยเส้นบาง ๆ */
.post-item .post-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--tla-line, #E6E1F5);
    font-size: 12.5px;
    color: var(--tla-muted, #6B7280);
}

.post-item .post-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.post-item .post-meta .a-username {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--tla-purple-700, #5B21B6);
    font-weight: 600;
}

/* ปุ่มอ่านรายละเอียดเต็มความกว้าง ตามแบบอ้างอิง */
.post-item-cta {
    display: block;
    margin-top: 12px;
    padding: 11px 16px;
    border-radius: 10px;
    background: var(--tla-purple-050, #F5F3FF);
    color: var(--tla-purple-700, #5B21B6);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.post-item-cta:hover {
    background: var(--tla-purple-600, #6D28D9);
    color: #fff;
}

/* รูปผู้เขียนวงกลม */
.meta-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.featured-section .meta-avatar {
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255, 255, 255, .85);
}

.meta-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: .8;
}

/* ═══════════════════════════════════════════════════════
   3. หัวข้อบล็อกหมวดหมู่บนหน้าแรก
═══════════════════════════════════════════════════════ */
.block-title,
.section-title,
.title-index {
    font-weight: 800;
    color: var(--tla-purple-900, #2E1065);
}

.block-header .block-title::before,
.section-header .section-title::before {
    background: var(--tla-purple-600, #6D28D9) !important;
}

/* ═══════════════════════════════════════════════════════
   4. หน้ารายละเอียดข่าว
═══════════════════════════════════════════════════════ */
#postDetailsPage .post-content {
    background: #fff;
    border: 1px solid var(--tla-line, #E6E1F5);
    border-radius: 20px;
    padding: 30px;
}

@media (max-width: 640px) {
    #postDetailsPage .post-content { padding: 18px; border-radius: 16px; }
}

#postDetailsPage .post-title {
    font-weight: 800;
    line-height: 1.35;
    color: var(--tla-purple-900, #2E1065);
    text-align: center;
    margin-bottom: 12px;
}

#postDetailsPage .post-summary {
    color: var(--tla-muted, #6B7280);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
}

#postDetailsPage .badge-category {
    background: var(--tla-purple-100, #EDE9FE) !important;
    color: var(--tla-purple-800, #4C1D95) !important;
    border-radius: 9999px;
    padding: 6px 15px;
    font-size: 12px;
    font-weight: 600;
}

/* แถบข้อมูลผู้เขียน/วันที่ ให้เป็นกล่องม่วงอ่อน แยกจากเนื้อหาชัดเจน */
#postDetailsPage .post-details-meta {
    background: var(--tla-purple-050, #F5F3FF);
    border: 1px solid var(--tla-line, #E6E1F5);
    border-radius: 14px;
    padding: 12px 16px;
}

#postDetailsPage .post-details-meta .item-meta-author a {
    color: var(--tla-purple-700, #5B21B6);
    font-weight: 600;
}

/* รูปหลักของบทความ */
#postDetailsPage .post-image-preview img,
#postDetailsPage .post-detail-slider img,
#postDetailsPage .entry-content img {
    border-radius: 16px;
}

#postDetailsPage .post-image-preview .swiper,
#postDetailsPage .post-image-preview .swiper-slide {
    border-radius: 16px;
    overflow: hidden;
}

/* เนื้อหาอ่านสบายตา */
#postDetailsPage .post-body,
#postDetailsPage .entry-content {
    font-size: 16.5px;
    line-height: 1.9;
    color: #2A2740;
}

#postDetailsPage .post-body h2,
#postDetailsPage .post-body h3,
#postDetailsPage .entry-content h2,
#postDetailsPage .entry-content h3 {
    font-weight: 800;
    color: var(--tla-purple-900, #2E1065);
    margin-top: 1.6em;
}

#postDetailsPage .post-body a,
#postDetailsPage .entry-content a { color: var(--tla-purple-600, #6D28D9); }

#postDetailsPage .post-body blockquote,
#postDetailsPage .entry-content blockquote {
    border-left: 4px solid var(--tla-purple-600, #6D28D9);
    background: var(--tla-purple-050, #F5F3FF);
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    color: var(--tla-purple-900, #2E1065);
}

/* กล่องแท็ก / ผู้เขียน / โพสต์ที่เกี่ยวข้อง */
#postDetailsPage .tags a {
    display: inline-block;
    background: var(--tla-purple-050, #F5F3FF);
    color: var(--tla-purple-700, #5B21B6);
    border: 1px solid var(--tla-line, #E6E1F5);
    border-radius: 9999px;
    padding: 5px 13px;
    font-size: 12.5px;
    margin: 0 6px 6px 0;
}

#postDetailsPage .tags a:hover {
    background: var(--tla-purple-600, #6D28D9);
    color: #fff;
}

#postDetailsPage .about-author,
#postDetailsPage .related-posts {
    background: #fff;
    border: 1px solid var(--tla-line, #E6E1F5);
    border-radius: 18px;
    padding: 22px;
    margin-top: 22px;
}

/* ═══════════════════════════════════════════════════════
   5. แถบข้าง (sidebar) และวิดเจ็ต
═══════════════════════════════════════════════════════ */
.sidebar .widget {
    background: #fff;
    border: 1px solid var(--tla-line, #E6E1F5);
    border-radius: 18px;
    padding: 20px;
}

.sidebar .widget-title {
    font-weight: 800;
    color: var(--tla-purple-900, #2E1065);
}