/* =========================================================
   PHE LIEU HOA PHAT - NEWS LIST
   Scope rieng cho /news.html, khong can thiep CSS toan website
   ========================================================= */
.news-list-page{background:#f7f9f8;padding:14px 0 28px;color:#222}

/* Breadcrumb */
.news-list-page .news-list-breadcrumb-wrap{background:#fff;border:1px solid #e4e9e6;border-radius:9px;box-shadow:0 2px 10px rgba(0,0,0,.035);overflow:hidden;margin-bottom:16px}
.news-list-page .news-list-breadcrumb{padding:11px 14px;margin:0;background:transparent;border-radius:0;font-size:14px;line-height:1.45}
.news-list-page .news-list-breadcrumb .breadcrumb-item a{color:#1fa859;transition:color .2s ease}
.news-list-page .news-list-breadcrumb .breadcrumb-item a:hover{color:#fbad30}
.news-list-page .news-list-breadcrumb .breadcrumb-item.active{color:#68736d}

/* Main panel */
.news-list-page .news-list-section{padding:0;overflow:visible}
.news-list-page .news-list-panel{background:#fff;border:1px solid #e4e9e6;border-radius:10px;padding:20px;box-shadow:0 4px 18px rgba(0,0,0,.045)}
.news-list-page .news-list-heading{display:flex;align-items:center;margin-bottom:18px;padding-bottom:11px;border-bottom:1px solid #edf0ee;position:relative}
.news-list-page .news-list-heading:after{content:"";position:absolute;left:0;bottom:-1px;width:58px;height:3px;background:#1fa859;border-radius:3px}
.news-list-page .news-list-heading h1{font-size:24px;line-height:1.3;margin:0;color:#202723;font-family:'Roboto-Bold',sans-serif}

/* Grid: desktop 4/hang, mobile 2/hang */
.news-list-page .news-list-grid{margin-left:-7px;margin-right:-7px;align-items:stretch}
.news-list-page .news-list-col{padding-left:7px;padding-right:7px;margin-bottom:18px;display:flex}

/* Re-use markup post-item.blade.php but scope only on news list */
.news-list-page .news-list-col .item-box{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e9e6;border-radius:9px;overflow:hidden;box-shadow:0 2px 9px rgba(0,0,0,.045);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.news-list-page .news-list-col .item-box:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.09);border-color:#d7e2dc}
.news-list-page .news-list-col .item-box>a{display:block;overflow:hidden;background:#f1f4f2}
.news-list-page .news-list-col .item-box .img{position:relative;width:100%;overflow:hidden}
.news-list-page .news-list-col .item-box .dummy{padding-top:62.5%}
.news-list-page .news-list-col .item-box .dummy_img{position:absolute;inset:0;width:100%;height:100%;display:block}
.news-list-page .news-list-col .item-box .dummy_img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;animation:none;background:none;border-radius:0}
.news-list-page .news-list-col .item-box:hover .dummy_img img{transform:scale(1.045)}
.news-list-page .news-list-col .item-desc{padding:12px!important;display:flex;flex:1;flex-direction:column}
.news-list-page .news-list-col .item-desc h4{font-size:16px;line-height:1.45;margin:0 0 8px;font-family:'Roboto-Bold',sans-serif;min-height:46px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.news-list-page .news-list-col .item-desc h4 a{color:#202723;transition:color .2s ease}
.news-list-page .news-list-col .item-desc h4 a:hover{color:#1fa859}
.news-list-page .news-list-col .item-desc .clamp_4{font-size:14px;line-height:1.55;color:#5e6863;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-height:70px}

/* Pagination */
.news-list-page .news-list-pagination{display:flex;justify-content:center;align-items:center;padding-top:18px;margin-top:2px;border-top:1px solid #edf0ee}
.news-list-page .news-list-pagination nav{width:100%}
.news-list-page .news-list-pagination .pagination{justify-content:center;flex-wrap:wrap;gap:6px;margin:0}
.news-list-page .news-list-pagination .page-item{margin:0}
.news-list-page .news-list-pagination .page-link{min-width:38px;height:38px;padding:0 10px;display:flex;align-items:center;justify-content:center;border:1px solid #dfe5e1;border-radius:7px!important;background:#fff;color:#3f4944;font-size:14px;line-height:1;box-shadow:none;transition:all .2s ease}
.news-list-page .news-list-pagination .page-link:hover{background:#f0f8f3;border-color:#1fa859;color:#1fa859}
.news-list-page .news-list-pagination .page-item.active .page-link{background:#1fa859;border-color:#1fa859;color:#fff}
.news-list-page .news-list-pagination .page-item.disabled .page-link{background:#f5f6f5;color:#a9b0ac;border-color:#e7ebe8}
.news-list-page .news-list-empty{text-align:center;padding:35px 15px;color:#707a75}

@media (max-width:767.98px){
  .news-list-page{padding:8px 0 18px}
  .news-list-page>.container,.news-list-page .news-list-section>.container{padding-left:10px;padding-right:10px}
  .news-list-page .news-list-breadcrumb-wrap{margin-bottom:10px;border-radius:7px}
  .news-list-page .news-list-breadcrumb{padding:9px 10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .news-list-page .news-list-breadcrumb .breadcrumb-item{display:inline}
  .news-list-page .news-list-breadcrumb .breadcrumb-item+.breadcrumb-item:before{float:none}
  .news-list-page .news-list-panel{padding:11px 8px;border-radius:8px}
  .news-list-page .news-list-heading{margin:0 3px 12px;padding-bottom:9px}
  .news-list-page .news-list-heading h1{font-size:20px}
  .news-list-page .news-list-grid{margin-left:-4px;margin-right:-4px}
  .news-list-page .news-list-col{padding-left:4px;padding-right:4px;margin-bottom:9px}
  .news-list-page .news-list-col .item-box{border-radius:7px}
  .news-list-page .news-list-col .item-desc{padding:8px!important}
  .news-list-page .news-list-col .item-desc h4{font-size:13px;line-height:1.4;min-height:37px;margin-bottom:5px}
  .news-list-page .news-list-col .item-desc .clamp_4{font-size:12px;line-height:1.45;-webkit-line-clamp:2;max-height:35px}
  .news-list-page .news-list-pagination{padding-top:13px;margin-top:4px}
  .news-list-page .news-list-pagination .pagination{gap:4px}
  .news-list-page .news-list-pagination .page-link{min-width:34px;height:34px;padding:0 8px;font-size:13px}
}

@media (max-width:374px){
  .news-list-page .news-list-col .item-desc{padding:7px!important}
  .news-list-page .news-list-col .item-desc h4{font-size:12.5px}
  .news-list-page .news-list-col .item-desc .clamp_4{font-size:11.5px}
}