/* Biến & thiết lập cục bộ cho widget */
@font-face {
    font-family: HelvetIns;
    src: url(fonts/UTM\ HelvetIns.ttf);}
    @font-face {
        font-family: Avo;
        src: url(fonts/UTM\ Avo.ttf);}
#tintuc2{
    --gap:16px;
    --maxw:1120px;
    --title:#0b3a6a;
    --text:#222;
    --muted:#6b7280;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
  }
  
  /* Không đụng vào body toàn site; chỉ style phần bên trong #tintuc2 */
  #tintuc2 *{ box-sizing:border-box; }
  #tintuc2 .wrap{
    max-width:var(--maxw);
    margin:24px auto;
    padding:0 12px;
  }
  
  /* Bố cục: MAIN trên, SUB dưới */
  #tintuc2 .news-grid{
    display:flex;
    flex-direction:column;
    gap:var(--gap);
  }
  
  /* ===== BỎ BACKGROUND + BO VIỀN + SHADOW ===== */
  #tintuc2 .card,
  #tintuc2 .side-item{
    background:transparent;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }
  
  /* Ảnh chung */
  #tintuc2 .card img{
    width:100%;
    height:auto;
    display:block;
    aspect-ratio:16/9;
    object-fit:cover;
  }
  
  /* Tiêu đề & mô tả */
  #tintuc2 .card-body{ padding:0; }
  #tintuc2 .card-title{
    margin:0 0 8px;
    font-size:1.2rem;
    line-height:1.35;
    color:var(--title);
    font-family: HelvetIns;
    text-align: justify;
  }
  #tintuc2 .card-title a{ color:inherit; text-decoration:none; }
  #tintuc2 .card-title a:hover{ text-decoration:none; }
  #tintuc2 .summary{
    margin:0;
    font-size:1.2rem;
    font-family: avo;
    text-align: justify;

  }
  
  /* ===== Tin chính: CHIA 2 CỘT (ảnh | tiêu đề + mô tả) ===== */
  #tintuc2 .main{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:var(--gap);
    align-items:start;
  }
  #tintuc2 .main > a{ display:block; }              /* ảnh ở cột trái */
  #tintuc2 .main .card-body{ padding:2px 4px; }     /* text ở cột phải */
  #tintuc2 .main .card-title{ font-size:1.4rem;  }
  
  /* ===== Lưới 4 tin phụ: desktop 4 cột, mobile 2 cột/hàng ===== */
  #tintuc2 .side{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:var(--gap);
    padding: 0px;
  }
  #tintuc2 .side-item{
    display:flex;
    flex-direction:column;
  }
  #tintuc2 .side-item .thumb{ display:block; }
  #tintuc2 .side-item .thumb img{
    width:100%; height:auto;
    aspect-ratio:16/10; object-fit:cover; display:block;
  }
  #tintuc2 .side-item .meta{ padding:6px 2px; }
  #tintuc2 .side-item .meta h3{
    margin:0;
    font-size:1rem;
    line-height:1.35;
    color:var(--title);
  }
  #tintuc2 .side-item .meta h3 a{ color:inherit; text-decoration:none; font-family: HelvetIns;}
  #tintuc2 .side-item .meta h3 a:hover{ text-decoration:none; }
  
  /* Trợ năng: chỉ hiển thị cho screen reader trong phạm vi widget */
  #tintuc2 .sr-only{
    position:absolute !important;
    width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  /* ===== Responsive ===== */
  /* Tablet: cho main xếp dọc nếu hẹp */
  @media (max-width: 820px){
    #tintuc2 .main{
      grid-template-columns: 1fr;
    }
  }
  
  /* Mobile: 2 tin / hàng cho phần phụ */
  @media (max-width: 920px){
    #tintuc2 .side{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }