/* ===== PAGE ===== */
html,
body {
  min-height: 100vh;
  margin: 0;
  background: transparent !important;
}

body.bg-light {
  background: transparent !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../images/BG.png") left top / cover no-repeat;
}

/* ===== HEADER WRAP ===== */
.tb-header-wrap {
  margin-bottom: 10px;
}

/* ===== BREADCRUMB ===== */
.tb-breadcrumb {
  font-size: 13px;
  color: #1d4ed8;
  font-weight: 600;
  margin-bottom: 4px;
}

/* ===== PAGE TITLE ===== */
.page-title {
  color: #1677ff;
  font-weight: 700;
  font-size: 32px;
  margin: 0;
}

/* ===== MAIN WRAP ===== */
.tb-main-wrap {
  margin-top: 20px;
  margin-bottom: 30px;
}

/* ===== BIG WHITE BOX WITH BLUE BORDER ===== */
.tb-main-box {
  background: #fff;
  border: 2px solid #7db7ff;
  border-radius: 4px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0, 1, 1, 0.1);
}

/* ===== LEFT CONTENT BOX ===== */
.tb-box {
  background: #fff;
}

/* ===== SIDEBAR ===== */
.tb-sidebar {
  background: #fff;
  border: 2px solid #dbe4ee;
  padding: 12px;
}

.sidebar-title {
  text-align: center;
  color: #1677ff;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ===== CATEGORY ===== */
.category-list {
  list-style: square;
  padding-left: 18px;
  margin-bottom: 12px;
}

.category-list li {
  margin-bottom: 6px;
  font-size: 14px;
}

/* ===== SOCIAL ===== */
.social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.social i {
  background: #eef4ff;
  padding: 8px;
  border-radius: 4px;
  color: #1677ff;
}

/* ===== TABLE RESET ===== */
#thongbaoTable {
  border: none;
  margin-bottom: 0;
}

#thongbaoTable thead {
  display: none;
}

#thongbaoTable tbody tr {
  border-bottom: 1px solid #e8edf3;
}

#thongbaoTable td {
  border: none;
  padding: 12px 8px;
  vertical-align: top;
}

/* ===== ITEM ===== */
.tb-item {
  display: flex;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e8edf3;
}

.tb-thumb {
  width: 90px;
  height: 110px;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.tb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-content {
  flex: 1;
}

.tb-title {
  font-weight: 700;
  color: #1677ff;
  cursor: pointer;
  margin-bottom: 6px;
  line-height: 1.4;
}

.tb-title:hover {
  text-decoration: underline;
}

.tb-meta {
  font-size: 13px;
  color: #888;
  margin-bottom: 6px;
}

.tb-desc {
  font-size: 14px;
  color: #333;
}

/* ===== BUTTON ===== */
.btn-info {
  background: #1677ff;
  border: none;
  color: #fff;
}

.btn-info:hover {
  background: #0f5fd1;
  color: #fff;
}

/* ===== LATEST ===== */
.latest-item {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}

.latest-thumb {
  width: 60px;
  height: 70px;
  flex-shrink: 0;
  border: 1px solid #ddd;
  overflow: hidden;
  background: #fff;
}

.latest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.latest-title {
  font-size: 13px;
  color: #1677ff;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}

.latest-date {
  font-size: 12px;
  color: #888;
}

/* ===== PAGINATION ===== */
.dataTables_wrapper .dataTables_paginate {
  margin-top: 12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid #cfe0ff !important;
  background: #fff !important;
  color: #1677ff !important;
  padding: 3px 8px !important;
  margin: 0 2px !important;
  border-radius: 3px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #1677ff !important;
  color: #fff !important;
  border-color: #1677ff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eef4ff !important;
  color: #1677ff !important;
  border-color: #b9d4ff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #1677ff !important;
  color: #fff !important;
  border-color: #1677ff !important;
}

/* ===================================================== */
/* ===== HERO HEADER ===== */
/* ===================================================== */

.tb-hero {
  background-image: url("../images/BG-Header.png");
  background-size: cover; /* ảnh phủ full */
  background-position: center; /* canh giữa */
  background-repeat: no-repeat;
  padding: 30px 0 30px;
  position: relative;
  overflow: hidden;
}

/* pattern nền (giả lập lưới) */
.tb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20px 20px, #dbeafe 2px, transparent 2px),
    radial-gradient(circle at 60px 60px, #dbeafe 2px, transparent 2px);
  background-size: 120px 120px;
  opacity: 0.6;
}

/* tránh bị che */
.tb-hero-inner {
  position: relative;
  z-index: 2;
}

/* breadcrumb dạng pill */
.tb-hero-breadcrumb {
  display: inline-block;
  background: #1677ff;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

/* title */
.tb-hero-title {
  font-size: 36px;
  font-weight: 800;
  color: #1677ff;

  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.dataTables_wrapper .dataTables_paginate {
  text-align: center !important;
  float: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid #cfe0ff !important;
  background: #fff !important;
  color: #1677ff !important;
  padding: 4px 10px !important;
  margin: 0 3px !important;
  border-radius: 4px !important;
  font-size: 13px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #1677ff !important;
  color: #fff !important;
  border-color: #1677ff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eef4ff !important;
}

.tb-pagination-line {
  height: 3px;
  width: 70%;
  background: #1677ff;
  border-radius: 10px;
  margin: 20px auto 0;
}

.tb-hero-breadcrumb {
  display: inline-block;
  background: rgba(0, 0, 0, 0.45); /* nền mờ */
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
}

.tb-hero-breadcrumb a {
  color: #ffd966; /* vàng nổi */
  text-decoration: none;
}

.tb-hero-breadcrumb a:hover {
  text-decoration: underline;
}

.tb-hero-breadcrumb i {
  margin-right: 4px;
}

.tb-logo-fixed {
  display: inline-block;
  margin-bottom: 10px;
}

.tb-logo-fixed img {
  height: 60px;
}