/* ============================================================
   modern-home.css — CSS overlay ปรับหน้าหลักให้ทันสมัย
   โหลดเฉพาะหน้า frontpage/main (inject ผ่าน Main controller)
   ไม่แก้ HTML/logic เดิม — override ด้วย selector + !important เท่าที่จำเป็น
   Brand: คงโทนเขียว อบต. แต่ทำให้นุ่ม ทันสมัย มีระยะหายใจ
   ============================================================ */

:root{
    --mh-green-1:#5e7d1a;
    --mh-green-2:#3d5200;
    --mh-green-soft:#f3f7e9;
    --mh-ink:#1f2937;
    --mh-muted:#7a8694;
    --mh-line:#eef1f4;
    --mh-card-shadow:0 2px 10px rgba(20,40,10,.06);
    --mh-card-shadow-hover:0 8px 22px rgba(20,40,10,.12);
    --mh-radius:12px;
}

/* ---------- พื้นหลังหน้า + typography ---------- */
.ticker-news{ background:#f5f7f2; padding-bottom:30px; }
.ticker-news, .feature-video, .features-today{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.ticker-news .container > .row{ margin-top:14px; }

/* ---------- การ์ดตาราง (กล่องข่าวทุกบล็อก) ---------- */
.ticker-news .table.table-hover,
.review-widget .table.table-hover{
    background:#fff;
    border:1px solid var(--mh-line) !important;
    border-radius:var(--mh-radius);
    box-shadow:var(--mh-card-shadow);
    overflow:hidden;
    margin-bottom:22px;
    transition:box-shadow .25s ease, transform .25s ease;
}
.ticker-news .table.table-hover:hover,
.review-widget .table.table-hover:hover{
    box-shadow:var(--mh-card-shadow-hover);
}
/* ลบเส้น border=1 แข็งๆ ของตารางเดิม */
.ticker-news .table.table-hover td,
.ticker-news .table.table-hover th,
.review-widget .table.table-hover td,
.review-widget .table.table-hover th{
    border:0 !important;
}
.ticker-news .table.table-hover > tbody > tr > td{
    padding:14px 16px;
}

/* ---------- หัวข้อกล่อง (แถบเขียว #557105) → gradient นุ่ม ---------- */
.ticker-news .table.table-hover thead tr,
.review-widget .table.table-hover thead tr{
    background:linear-gradient(135deg, var(--mh-green-1), var(--mh-green-2)) !important;
}
.ticker-news .table.table-hover thead th,
.review-widget .table.table-hover thead th{
    padding:13px 16px !important;
    border:0 !important;
    position:relative;
    vertical-align:middle;
}
/* แถบ accent ด้านซ้ายของหัวข้อ */
.ticker-news .table.table-hover thead th::before,
.review-widget .table.table-hover thead th::before{
    content:"";
    position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:4px; height:60%;
    background:#cfe08a;
    border-radius:0 3px 3px 0;
}
.ticker-news .table.table-hover thead th a b,
.review-widget .table.table-hover thead th a b{
    color:#fff !important;
    font-size:15px;
    letter-spacing:.2px;
}
.ticker-news .table.table-hover thead th .pull-right b{
    font-size:12px !important;
    opacity:.9;
    font-weight:500 !important;
}
.ticker-news .table.table-hover thead th a:hover .pull-right b{ opacity:1; }

/* ---------- list-posts1 (รายการข่าวในกล่อง) ---------- */
.list-posts1{ margin:0; padding:0; list-style:none; }
.list-posts1 > li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 6px;
    border-bottom:1px solid var(--mh-line);
    border-radius:8px;
    transition:background .18s ease;
}
.list-posts1 > li:last-child{ border-bottom:0; }
.list-posts1 > li:hover{ background:var(--mh-green-soft); }
.list-posts1 > li img{
    width:46px; height:46px;
    object-fit:contain;
    flex:0 0 46px;
    border-radius:8px;
    background:#fff;
    padding:4px;
    border:1px solid var(--mh-line);
}
.list-posts1 .post-content{ flex:1; min-width:0; }
.list-posts1 .post-content h2{
    font-size:14.5px;
    line-height:1.5;
    margin:0 0 4px;
    font-weight:600;
}
.list-posts1 .post-content h2 a{
    color:var(--mh-ink);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    transition:color .15s ease;
}
.list-posts1 .post-content h2 a:hover{ color:var(--mh-green-1); text-decoration:none; }

/* meta วันที่ */
.post-tags{ margin:0; padding:0; list-style:none; }
.post-tags li{
    color:var(--mh-muted) !important;
    font-size:12.5px;
    display:inline-flex;
    align-items:center;
    gap:5px;
}
.post-tags li .fa-clock-o{ color:var(--mh-green-1); }

/* ---------- review-posts-list (sidebar กฎหมาย/มาตรฐาน) ---------- */
.review-posts-list{ margin:0; padding:0; list-style:none; }
.review-posts-list > li{
    padding:10px 4px;
    border-bottom:1px solid var(--mh-line);
}
.review-posts-list > li:last-child{ border-bottom:0; }
.review-posts-list > li a{ display:flex; gap:10px; align-items:center; }
.review-posts-list > li img{
    width:42px; height:42px; object-fit:cover;
    border-radius:8px; flex:0 0 42px;
    border:1px solid var(--mh-line);
}
.review-posts-list > li h2{
    font-size:13.5px; line-height:1.45; margin:0; font-weight:600;
    color:var(--mh-ink);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.review-posts-list > li .date{
    display:block; font-size:12px; color:var(--mh-muted); margin-top:2px;
}
.review-posts-list > li a:hover h2{ color:var(--mh-green-1); }

/* ตารางย่อยในกล่องประกาศกิจการสภา (procure7) ให้ดูเป็นรายการ */
.review-widget .table.table-hover tbody table{ width:100%; }
.review-widget .table.table-hover tbody table td{ padding:3px 4px !important; }

/* ---------- slider ข่าว / top stories ---------- */
.image-slider .top-stories{
    background:linear-gradient(135deg, var(--mh-green-1), var(--mh-green-2));
    border-radius:8px 8px 0 0;
    letter-spacing:.5px;
}
.heading-news2{ padding-top:10px; }
.heading-news2 .news-post.image-post img,
.col-md-6 .news-post.image-post img{
    border-radius:10px;
}

/* ---------- ticker breaking news ---------- */
.ticker-news-box{
    background:#fff;
    border:1px solid var(--mh-line);
    border-radius:10px;
    box-shadow:var(--mh-card-shadow);
    overflow:hidden;
    margin-bottom:8px;
}
.ticker-news-box .breaking-news{
    background:linear-gradient(135deg,#e23b3b,#b71c1c);
}

/* ---------- section titles (วีดีโอ / ลิ้งค์เพื่อนบ้าน) ---------- */
.feature-video, .features-today{ padding:26px 0; }
.title-section h1{ position:relative; }
.title-section h1 span{
    font-size:22px; font-weight:700; color:var(--mh-ink);
    padding-bottom:10px; display:inline-block; position:relative;
}
.title-section h1 span::after{
    content:""; position:absolute; left:0; bottom:0;
    width:54px; height:3px; border-radius:3px;
    background:linear-gradient(135deg, var(--mh-green-1), var(--mh-green-2));
}
.title-section.white h1 span{ color:#fff; }
.title-section.white h1 span::after{ background:#cfe08a; }

/* ปุ่มดูทั้งหมด */
.all-videos-link a{
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg, var(--mh-green-1), var(--mh-green-2));
    color:#fff; padding:9px 20px; border-radius:24px;
    font-weight:600; box-shadow:var(--mh-card-shadow);
    transition:transform .2s ease, box-shadow .2s ease;
}
.all-videos-link a:hover{ transform:translateY(-2px); box-shadow:var(--mh-card-shadow-hover); text-decoration:none; color:#fff; }

/* การ์ดวีดีโอ / link เพื่อนบ้าน ขอบมน */
.feature-video .news-post.video-post,
.features-today .news-post.image-post3{
    border-radius:10px; overflow:hidden; box-shadow:var(--mh-card-shadow);
    transition:transform .25s ease, box-shadow .25s ease;
}
.feature-video .news-post.video-post:hover,
.features-today .news-post.image-post3:hover{
    transform:translateY(-3px); box-shadow:var(--mh-card-shadow-hover);
}

/* ---------- right sidebar widgets ---------- */
.advertisement img, .post-gallery img{ border-radius:10px; }

/* ---------- มือถือ: ลดระยะ + ตัวอักษรพอดี ---------- */
@media (max-width:767px){
    .ticker-news .table.table-hover{ margin-bottom:16px; }
    .ticker-news .table.table-hover > tbody > tr > td{ padding:10px 12px; }
    .list-posts1 > li{ padding:10px 4px; }
    .list-posts1 .post-content h2{ font-size:14px; }
    .title-section h1 span{ font-size:19px; }
    .col-md-6{ padding-top:0 !important; }
    .col-md-6 br{ display:none; }
}