.backgound-top {
    padding: 32px 0;
}

.box-backgound-top {
    gap: 23px;
    display: flex;
    margin-bottom: 23px;
}

.box-backgound-left-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
	width: 25%;
}

.box-img-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.img-text {
    height: 185px;
}

.text-box-img-content {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-khoi-thong-tin {
    width: 100%;
    height: 1px;
    background-color: rgba(48, 48, 48, 0.15);
}

.box-backgound-center-top {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.box-backgound-center-top img {
	width: 100%;
}

.box-content-background-center-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.title-box-content-background-center-top {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 160%;
    letter-spacing: 0px;
    text-align: center;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
}

.text-box-content-background-center-top {
    font-family: Inter;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0px;
    text-align: center;
    color: var(--Text-Neutral-Secondary, rgba(90, 90, 90, 1));
}

.thong-tin {
    width: 100%;
    margin-bottom: 64px;
}

.box-thong-tin {
    display: flex;
    gap: 28px;
}

.in-box-thong-tin {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 28px;
    border-right: 1px solid rgba(0, 0, 0, .12);
    width: 70%;
}

.box-thong-tin-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.in-box-thong-tin-left {
    display: flex;
    gap: 24px;
    align-items: center;
}

.in-box-thong-tin-left img {
	width: 190px;
    height: auto;
    object-fit: contain;
}

.content-in-box-thong-tin-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.title-content-in-box-thong-tin-left {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-content-in-box-thong-tin-left {
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Secondary, rgba(90, 90, 90, 1));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.box-thong-tin-right {
    width: 30%;
    border-radius: 4px;
    border-width: 1px;
    padding: 24px;
    background: rgba(250, 246, 240, 1);
    background: rgba(250, 246, 240, 1);
    height: 100%;
}

.in-box-thong-tin-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.line-ttsk {
    width: 2px;
    height: 20px;
    background: #A90024;
    border: 0;
    transform: none;
    flex: 0 0 auto;
}

.title-noi-dung {
    display: flex;
    gap: 8px;
}

.text-noi-dung {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    text-transform: uppercase;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
}

.content-in-box-thong-tin-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.top-content-in-box-thong-tin-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ext-top-content-in-box-thong-tin-right {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
}

.tin-bai-lien-quan {
    width: 100%;
    padding-top: 16px;
    border-top-width: 1px;
    border-top: 1px solid #1111110F
}

.in-tin-bai-lien-quan {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.in-tin-bai-lien-quan img {
    padding-top: 8px;
    margin-top: 0px;
}

.noi-dung-tin-bai-lien-quan {
    font-family: Noto Serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0px;
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--Text-Neutral-Default, #303030);
}

.text-top-content-in-box-thong-tin-right {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
}

.page {
    display: flex;
    align-items: end;
}

#pager {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
}

#pager .paginationjs {
    display: flex;
    justify-content: center;
}

#pager .paginationjs-pages {
    display: flex;
    align-items: center;
}

#pager .paginationjs-pages ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

#pager .paginationjs-pages li>a {
    display: inline-flex;
    min-width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #E4E2DE;
    border-radius: 6px;
    padding: 0 12px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
}

#pager .paginationjs-pages li>a:hover {
    border-color: #154FA3;
    color: #154FA3;
    background: rgba(21, 79, 163, 0.06);
}

#pager .paginationjs-pages li.active>a {
    background: #154FA3;
    color: #fff;
    border-color: #154FA3;
}

#pager .paginationjs-prev a,
#pager .paginationjs-next a,
#pager .paginationjs-first a,
#pager .paginationjs-last a {
    min-width: 40px;
    height: 40px;
}

#pager .paginationjs-prev.disabled a,
#pager .paginationjs-next.disabled a,
#pager .paginationjs-first.disabled a,
#pager .paginationjs-last.disabled a {
    color: #94A3B8;
    opacity: .45;
    pointer-events: none;
}

/* =========================================================
   RESPONSIVE - Tablet/Laptop nhỏ (<= 1200px)
   - vẫn 3 cột nhưng co lại đẹp, giảm gap
   ========================================================= */
@media (max-width: 1200px){
  .box-backgound-top{ gap: 16px; margin-bottom: 16px; }
  .box-backgound-left-top{ gap: 18px; width: 26%; }     /* khóa cột trái */
  .box-backgound-center-top{ gap: 18px; width: 48%; }   /* giữa */
  .box-backgound-right-top{ gap: 18px; width: 26%; }    /* nếu có cột phải */

  .img-text{ height: 170px; }
  .title-box-content-background-center-top{ font-size: 22px; }
  .text-box-content-background-center-top{ font-size: 15px; }
}

/* =========================================================
   RESPONSIVE - iPad ngang (<= 1024px)
   - khối TOP: center lên 1 hàng, 2 cột dưới (left/right)
   - card nhỏ: ảnh + text ngang cho gọn
   ========================================================= */
@media (max-width: 1024px){

  .backgound-top{ padding: 24px 0; width: 100vw;}

  .box-backgound-top{
    gap: 16px;
    flex-wrap: wrap;
    align-items: stretch;
  }

  /* CENTER lên full trước */
  .box-backgound-center-top{
    width: 100%;
    order: 1;
    gap: 14px;
  }

  /* LEFT/RIGHT xuống 2 cột */
  .box-backgound-left-top{
    width: calc(50% - 8px);
    order: 2;
    gap: 14px;
  }
  .box-backgound-right-top{
    width: calc(50% - 8px);
    order: 3;
    gap: 14px;
  }

  /* card nhỏ dạng ngang: ảnh trái - text phải */
  .box-img-content{
    display: flex;
    flex-direction: row;     /* rõ ràng, không dùng unset */
    gap: 10px;
    align-items: center;
  }
  .box-img-content .img-text{
    height: 90px;
    width: 130px;            /* ✅ thêm width để không méo */
    flex: 0 0 auto;
    object-fit: cover;
  }
  .text-box-img-content{
    font-size: 15px;
    -webkit-line-clamp: 3;
  }

  .title-box-content-background-center-top{ font-size: 21px; }
  .text-box-content-background-center-top{
    font-size: 14px;
    -webkit-line-clamp: 4;
  }

  /* THONG TIN: 1 cột */
  .thong-tin{ margin-bottom: 48px; width: 100vw;}

  .box-thong-tin{ flex-direction: column; gap: 20px; }

  .in-box-thong-tin{
    width: 100%;
    padding-right: 0;
    border-right: 0;
  }
  .box-thong-tin-right{
    width: 100%;
    padding: 18px;
  }

  #pager{ justify-content: center; }
}

/* =========================================================
   RESPONSIVE - iPad dọc / tablet (<= 820px)
   - khối TOP: về 1 cột cho chắc đẹp
   - card nhỏ trở lại dọc (ảnh trên)
   ========================================================= */
@media (max-width: 820px){

  .box-backgound-top{
    flex-direction: column;
    gap: 16px;
  }
  .box-backgound-left-top,
  .box-backgound-center-top,
  .box-backgound-right-top{
    width: 100%;
  }

  /* card nhỏ: ảnh trên - text dưới */
  .box-img-content{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .box-img-content .img-text{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .title-box-content-background-center-top{ font-size: 20px; }
  .text-box-content-background-center-top{ font-size: 14px; }
}

/* =========================================================
   RESPONSIVE - Mobile (<= 768px)
   - giữ đúng kiểu bạn: 1 cột
   ========================================================= */
@media (max-width: 768px){

  .backgound-top{ padding: 18px 0; width: 100vw;}

  .box-backgound-top{
    flex-direction: column;
    gap: 16px;
  }
  .box-backgound-left-top,
  .box-backgound-center-top,
  .box-backgound-right-top{
    width: 100%;
  }

  .img-text{ height: 200px; object-fit: cover; width: 100%; }

  .title-box-content-background-center-top{
    font-size: 20px;
    -webkit-line-clamp: 3;
  }
  .text-box-content-background-center-top{
    font-size: 14px;
    -webkit-line-clamp: 4;
  }

  /* list tin: ảnh full trên */
  .in-box-thong-tin-left{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .in-box-thong-tin-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .box-thong-tin{ flex-direction: column; gap: 18px; }
  .in-box-thong-tin{ width: 100%; padding-right: 0; border-right: 0; }
  .box-thong-tin-right{ width: 100%; padding: 16px; }

  #pager{ justify-content: center; }
  #pager .paginationjs-pages li>a{
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
  }
}

/* =========================================================
   RESPONSIVE - Small Mobile (<= 480px)
   - card nhỏ: ảnh thấp hơn, chữ clamp ít hơn
   ========================================================= */
@media (max-width: 480px){

  .backgound-top{ padding: 14px 0; width: 100vw;}

  .box-backgound-top{ gap: 14px; }

  .box-img-content .img-text{
    height: auto;
  }
  .text-box-img-content{
    font-size: 15px;
    -webkit-line-clamp: 2;
  }

  .thong-tin{ margin-bottom: 36px; width: 100vw;}

  .title-content-in-box-thong-tin-left{ font-size: 16px; }
  .text-content-in-box-thong-tin-left{ font-size: 13px; }

  #pager .paginationjs-pages ul{ gap: 6px; }
  #pager .paginationjs-pages li>a{
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
  }
}