/* ============================================================
   KCThanhHoa V17 - Mobile Home Zone Header: Flat Right Action
   20/08/2026
   Mục tiêu:
   - Tiêu đề + nút "Xem tất cả" luôn cùng một hàng trên mobile.
   - Nút nằm sát mép phải, không rơi xuống dòng/lửng giữa đường kẻ.
   - Bỏ card bo tròn/lồng ghép gây cảm giác nặng và lệch.
   - Khoảng cách gọn, cân đối; header tách hoàn toàn khỏi ảnh bài viết.
   ============================================================ */

@media (max-width: 768px){
  .home-zone-rich{
    position:relative !important;
    overflow:visible !important;
  }

  /* Một hàng duy nhất: title trái - action phải. */
  .home-zone-rich-head{
    position:relative !important;
    z-index:20 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"title action" !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:0 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    height:auto !important;
    margin:0 0 10px !important;
    padding:7px 0 8px !important;
    border:0 !important;
    border-radius:0 !important;
    border-bottom:1px solid #dbe5ef !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  /* Vạch nhấn chỉ nằm dưới phần tiêu đề, không chạy xuyên qua nút. */
  .home-zone-rich-head::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    bottom:-1px !important;
    width:54px !important;
    height:3px !important;
    margin:0 !important;
    border-radius:2px 2px 0 0 !important;
    background:#275b9d !important;
    pointer-events:none !important;
  }

  .home-zone-rich-title-wrap{
    grid-area:title !important;
    display:block !important;
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  .home-zone-rich-copy{
    display:block !important;
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  .home-zone-rich-copy h2{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    color:#173b67 !important;
    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.22 !important;
    letter-spacing:0 !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .home-zone-rich-copy h2 > .home-zone-title-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 28px !important;
    width:28px !important;
    height:28px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #d8e4f0 !important;
    border-radius:6px !important;
    background:#f3f7fb !important;
    color:#275b9d !important;
    font-size:13px !important;
    line-height:1 !important;
    box-shadow:none !important;
  }

  /* Mô tả không cần thiết trên mobile: dành chiều ngang cho title + action. */
  .home-zone-rich-copy p{
    display:none !important;
  }

  .home-zone-rich-link,
  .btn-ghost.home-zone-rich-link{
    grid-area:action !important;
    position:static !important;
    z-index:21 !important;
    align-self:center !important;
    justify-self:end !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:max-content !important;
    min-height:30px !important;
    height:30px !important;
    margin:0 !important;
    padding:0 9px !important;
    border:1px solid #c9d8e8 !important;
    border-radius:6px !important;
    background:#fff !important;
    color:#275b9d !important;
    font-size:11px !important;
    font-weight:750 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    box-shadow:none !important;
    overflow:visible !important;
    transform:none !important;
  }

  .home-zone-rich-link::after,
  .btn-ghost.home-zone-rich-link::after{
    content:"›" !important;
    display:inline-block !important;
    margin-left:4px !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1 !important;
  }

  .home-zone-rich-link:hover,
  .home-zone-rich-link:focus,
  .btn-ghost.home-zone-rich-link:hover,
  .btn-ghost.home-zone-rich-link:focus{
    border-color:#275b9d !important;
    background:#f3f7fb !important;
    color:#173b67 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  /* Không cho phần ảnh/bài viết chồng lên header. */
  .home-zone-rich-body,
  .home-zone-rich-featured,
  .home-zone-rich-featured-thumb{
    position:relative !important;
    z-index:1 !important;
    clear:both !important;
    margin-top:0 !important;
    top:auto !important;
    transform:none !important;
  }
}

/* Mobile nhỏ: vẫn giữ cùng hàng; chỉ thu gọn hợp lý. */
@media (max-width: 520px){
  .home-zone-rich-head{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"title action" !important;
    column-gap:7px !important;
    min-height:46px !important;
    padding:6px 0 7px !important;
  }

  .home-zone-rich-copy h2{
    gap:6px !important;
    font-size:16px !important;
  }

  .home-zone-rich-copy h2 > .home-zone-title-icon{
    flex-basis:27px !important;
    width:27px !important;
    height:27px !important;
    font-size:12px !important;
  }

  .home-zone-rich-link,
  .btn-ghost.home-zone-rich-link{
    justify-self:end !important;
    align-self:center !important;
    min-height:29px !important;
    height:29px !important;
    padding:0 8px !important;
    font-size:10.5px !important;
  }
}

/* Màn hình rất hẹp: ưu tiên action vẫn ở góc phải, title ellipsis. */
@media (max-width: 380px){
  .home-zone-rich-head{
    column-gap:6px !important;
  }

  .home-zone-rich-copy h2{
    font-size:15px !important;
  }

  .home-zone-rich-copy h2 > .home-zone-title-icon{
    flex-basis:25px !important;
    width:25px !important;
    height:25px !important;
    border-radius:5px !important;
  }

  .home-zone-rich-link,
  .btn-ghost.home-zone-rich-link{
    height:28px !important;
    min-height:28px !important;
    padding:0 7px !important;
    font-size:10px !important;
  }
}