@font-face {
  font-family: "svn_last_paradise";
  src: url("../fonts/svn_last_paradise.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
body {
  background: #faf6f7 url("../images/bg.png") top center no-repeat !important;
  background-size: 1920px auto !important;
  margin: 0;
  padding: 0;
}
body {
  min-width: 960px;
  overflow-x: hidden; /* Cắt bỏ mọi thành phần thò ra khỏi giới hạn 960px */
}
/* Reset cơ bản */
body {
  background: #faf6f7 url("../images/bg.png") top center no-repeat;
  background-size: cover;  /* cho ảnh phủ hết màn hình */
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
}

/* Header */
.header {
  /* background: #000000bd; */   /* nền menu */
  padding: 25px 0;
}

/* Nav full width */
.nav {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Nav container giới hạn 980px */
.nav__container {
  width: 825px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Menu trái + phải */
.nav__list {
  display: flex;
  gap: 25px;
}
.nav__list a {
  font-family: "Cambria", serif;
  color: #000000;
  font-size: 1.2rem;
  transition: color 0.3s ease;
  font-weight: bold;
}

.nav__list a:hover {
  color: #ffe100; /* ví dụ: đổi sang vàng khi hover */
}
/* Logo giữa */
.nav__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 150px;
}
.nav__logo img {
  width: 350px;   /* Logo auto ngang 250px */
  height: auto;
  display: block;
}
/* Infotop */
.infotop {
  margin-top: 450px;
  text-align: center;
  font-size: 20px;
  color: #333;
}
/* Top Main */
.topmain {
  margin-top: 50px;
  padding: 5px 0;
}

.topmain__container {
  position: relative;   /* để có thể đặt item con dạng absolute nếu cần */
  width: 960px;         /* fix ngang 980px */
  height: 261px;
  margin: 0 auto;       /* căn giữa màn hình */
  display: flex;        /* chia cột bằng flex thay vì grid */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #e3e0dc;
  border: 1px solid #d3cbb7; /* bo viền */
  box-sizing: border-box;    /* tính cả border vào width/height */
  padding: 1px;
}

/* Cột trái */
.topmain__left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.topmain__center {
  display: flex;
  flex-direction: column;
  padding: 3px;
}

.btn-download {
  display: block;
  width: 227px;
  height: 122px;
  background: url("../images/btn_download.png") no-repeat center center;
  position: relative;
  /* overflow: hidden; */

  filter: brightness(1.1); /* 🌟 sáng hơn 10% ngay cả khi bình thường */
  transition: filter 0.3s ease;
}

#download_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.btn-download::before {
  content: "";
  position: absolute;
  width: 161px;
  height: 336px;
  background: url("../images/icon-dl.png") no-repeat center center;
  left: -46px;
  top: -92px;
  pointer-events: none;
}

/* Base style cho nút có chữ + dot */
.btn-register,
.btn-napthe {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px; /* khoảng cách giữa dot và chữ */
  width: 227px;
  height: 64px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  background-size: cover;
}

/* Nút đăng ký */
.btn-register {
  background: url("../images/dangky.jpg") no-repeat center center;
  background-size: cover;
}
.btn-register:hover {
  background: url("../images/dangky-hover.jpg") no-repeat center center;
  background-size: cover;
}

/* Nút nạp thẻ */
.btn-napthe {
  background: url("../images/napthe.jpg") no-repeat center center;
  background-size: cover;
}
.btn-napthe:hover {
  background: url("../images/napthe-hover.jpg") no-repeat center center;
  background-size: cover;
}

.btn-register span,
.btn-napthe span {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; /* tạo viền đen bốn phía */
}

 .fourlink-cskh {
  padding-top: 5px;
  padding-left: 2px;
}
.fourlink-cskh .detail-fourlink {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  width: 230px;
}
.fourlink-cskh .link-dt-4link {
  position: relative;
  width: 112px;
  height: 105px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  overflow: hidden;
}

/* nền mặc định */
.fourlink-cskh .link-dt-4link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../images/fbt1.png") no-repeat center center;
  background-size: 100% 100%;
  left: 0;
  top: 0;
  z-index: 0;
}
/* hover nền */
.fourlink-cskh .link-dt-4link:hover::before {
  background: url("../images/fbt1-hover.png") no-repeat center center;
  background-size: 100% 100%;
}

/* icon */
.icon-bt-link, .icon-bt-link-hover {
  width: 40px;
  height: auto;
  position: relative;
  z-index: 1;
}
.icon-bt-link-hover { display: none; }

/* hover: đổi icon */
.link-dt-4link:hover .icon-bt-link { display: none; }
.link-dt-4link:hover .icon-bt-link-hover { display: block; }

/* text */
.name-link4 {
  position: relative;
  margin-top: 6px;
  z-index: 1;
  color: #fff;
}
.link-dt-4link:hover .name-link4 { color: #d94141; }

/* flip các ô */
.link-dt2::before { transform: scaleX(-1); }
.link-dt3::before { transform: scaleY(-1); }
.link-dt4::before { transform: scale(-1); }

/* hotline */
.cskh-number {
  margin-top: 2px;
  font-size: 15px;
  color: #9f2b30;
  width: 230px;
  height: 40px;
  background: url("../images/hotline.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.banner-slider {
  width: 491px;     /* chiều rộng ảnh banner */
  height: 253px;    /* chiều cao ảnh banner */
  margin: 0 auto;   /* căn giữa */
  position: relative;
  border-radius: 6px; /* bo góc nếu muốn */
  overflow: hidden;  /* tránh tràn ảnh */
}

.banner-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* giữ tỉ lệ ảnh */
}
.list3link-section {
  width: 960px;        /* cùng độ rộng với topmain */
  margin: 0 auto;      /* căn giữa */
}

.list-3link {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.link-to3link {
  width: 241px;
  height: 79px;
  background: url("../images/bg-img-link.jpg") no-repeat center center;
  background-size: cover;
  padding: 15px 13px;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s ease;   /* mượt khi hover */
}

/* Hover hiệu ứng */
.link-to3link:hover {
  filter: brightness(1.15);   /* sáng hơn một chút */
  box-shadow: 0 0 12px rgb(255 220 120 / 18%); /* viền sáng vàng */
  transform: translateY(-3px); /* nhích lên nhẹ */
}

.link-to3link .name-3link {
  font-size: 16px;
  font-weight: bold;
  color: #ae3b43;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.link-to3link .note-bold {
  color: #d6d6d6;
  font-size: 9px;
  background: #363636;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
}

.link-to3link .img-gitf3link {
  position: absolute;
  right: -1%;
  bottom: -5%;
  width: 60px;
  height: auto;
  pointer-events: none;
}
.main-container {
  width: 960px;          /* đồng bộ với topmain, list-3link */
  margin: 30px auto;     /* căn giữa */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.main-left {
    width: 231px;
    height: 391px;
    background: #f9f5ec;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;   /* bắt child phải theo bo góc */
}
.main-right {
  flex: 1;
  height: 391px;          /* ăn full theo cha .main-container */
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top-left-radius: 8px;   /* bo góc trên trái */
  border-top-right-radius: 8px;  /* bo góc trên phải */
}

.daily-timeline {
  width: 231px;
  height: 391px;
  box-sizing: border-box;
  position: relative;
  padding: 0;
  border: 1px solid #d3cbb7;
  background: #e3e0dc;
  display: flex;
  flex-direction: column;
}

/* Thanh tiêu đề */
.daily-header {
  background: #1f2e45;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
}

/* Thanh tab T2 - CN */
.daily-tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 ô đều nhau */
  margin: 0;
  padding: 0;
  list-style: none;
  background: #324762;
}

.daily-tabs li {
  text-align: center;
  padding: 6px 0;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

.daily-tabs li:hover {
  background: #445b7a;
}

.daily-tabs li.active {
  background: #d3a84f;
  color: #fff;
}

/* Danh sách */
.daily-list {
  list-style: none;
  padding: 8px;
  margin: 0;
  font-size: 13px;
  flex: 1;
  overflow-y: auto;
}
.daily-list {
  display: none; /* mặc định ẩn */
}

.daily-list.active {
  display: block; /* chỉ list active mới hiện */
}
.daily-list li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(47 29 21 / 30%);
  padding: 4px 0;
  font-weight: 600;
}

.daily-list li .time {
  color: #8d5600;
  font-weight: bold;
}


.rightcontent {
  border: 1px solid #d3cbb7;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-top-left-radius: 8px;   /* bo góc trên trái */
  border-top-right-radius: 8px;  /* bo góc trên phải */
  position: relative; 
}
.rightcontent::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 123px;
  background: url("../images/img-day-new.png") no-repeat center center;
  background-size: contain; /* đảm bảo ảnh hiển thị đầy đủ */
  right: -3px;
  top: 36px;
  z-index: 5;               /* nổi lên trên nội dung */
  pointer-events: none;     /* không cản click */
}




/* Tabs */
.rightcontent-tabs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #1f2e45;
  border-top-left-radius: 8px;   /* bo góc trên trái */
  border-top-right-radius: 8px;  /* bo góc trên phải */
}

.rightcontent-tabs li {
  flex: 1;
  text-align: center;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}

.rightcontent-tabs li.active {
  background: #d3a84f;
  color: #fff;
   border-top-left-radius: 8px;   /* bo góc trên trái */
    border-top-right-radius: 8px;  /* bo góc trên phải */
}

.rightcontent-body {
  flex: 1;
  display: flex;
  height: 100%;
  padding: 10px;
  min-height: 0; /* QUAN TRỌNG để con co giãn */
}

.rightcontent-left {
  flex: 0 0 200px;   /* cột trái cố định */
  height: 100%;      /* cao full */
}


.rightcontent-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding-left: 10px;
  box-sizing: border-box;
}

/* Chrome, Edge, Safari */
.rightcontent-right::-webkit-scrollbar {
  width: 6px;
}

.rightcontent-right::-webkit-scrollbar-thumb {
  background: #883108;
  border-radius: 3px;
}

.rightcontent-right::-webkit-scrollbar-track {
  background: #f1f1f1;
}



.rightcontent-list.active {
  display: block;
}


.rightcontent-panel {
  display: none;
  gap: 10px;
  height: 100%;
  min-height: 0;              /* QUAN TRỌNG */
}
.rightcontent-panel.active { display: flex; }
/* Cột trái: ảnh full chiều cao body */
.rightcontent-left .tab-image { width: 100%; height: 100%; object-fit: cover; }

/* Bài nổi bật */
.highlight-post{display:flex; gap:10px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #e6e6e6;}
.highlight-post img{width:100px; height:80px; object-fit:cover; border:1px solid #ddd;}
.highlight-text {width: 60%;height: 40%;}
.highlight-text .title-hot{font-weight:700; color:#ae3b43; margin-bottom:2px;}
.highlight-text .date-hot{font-size:12px;color: #8c8c8c;margin-bottom:4px;}
.highlight-text .desc-hot{font-size: 14px;color: #7d571f;}

/* Danh sách tin: KHÔNG ẩn theo .active nữa */
.rightcontent-list{list-style:none; margin:0; padding:0;}
.rightcontent-list li {
  border-bottom: 1px dashed #ccc;
  font-size: 13px;
  list-style: none;
}
.rightcontent-list li a {
  display: flex;
  justify-content: space-between;  /* đẩy span đầu và cuối ra 2 bên */
  align-items: center;
  padding: 6px 10px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.rightcontent-list li a:hover {
  color: #d94141;
}

.rightcontent-list li a span:first-child {
  flex: 1;  /* span đầu chiếm hết khoảng trống */
}

.rightcontent-list li a span:last-child {
  flex: 0 0 auto;  /* span cuối (ngày tháng) dính mép phải */
  margin-left: 20px;
  color: #888;
  font-size: 12px;
}
/* Ảnh trái “cao full body” */
.rightcontent-body{flex:1;display:flex;padding:10px;height:100%;background: #e3e0dc;}

.highlight-post {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px;
  border-bottom: 1px solid #e6e6e6;
  text-decoration: none;   /* bỏ gạch chân link */
  color: inherit;          /* giữ nguyên màu chữ */
  transition: background 0.3s;
}

.highlight-post .title-hot {
  font-weight: 700;
  color: #ae3b43;
  margin-bottom: 4px;
}

.highlight-post:hover .title-hot {
  color: #cc9d01;         /* đổi màu chữ khi hover */
}
/* Danh sách bên dưới: chiếm hết phần còn lại và cuộn riêng */
.rightcontent-list {
  flex: 1;              /* ✅ chiếm hết phần còn lại */
  width: 100%;          /* ✅ full ngang */
  overflow-y: auto;     /* scroll nếu dài */
  box-sizing: border-box;
}
/* Scrollbar cho list */
.rightcontent-list::-webkit-scrollbar { width: 6px; }
.rightcontent-list::-webkit-scrollbar-thumb { background: #d3a84f; border-radius: 3px; }
.rightcontent-list::-webkit-scrollbar-track { background: #f1f1f1; }
.rightcontent-panel{
  display: none;
  gap: 10px;
  height: 100%;
  min-height: 0;

  /* QUAN TRỌNG: giúp panel chiếm hết chiều ngang còn lại */
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.rightcontent-panel.active{ display:flex; }
.rightcontent-right{
  flex: 1;
  min-width: 0;        /* tránh bị co ngang vì nội dung */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
}

/* Con bên trong kéo FULL ngang */
.highlight-post,
.rightcontent-list{ width:100%; box-sizing:border-box; }
.rightcontent-list{ flex:1; overflow-y:auto; }

.it-dt-newhome {
  display: flex;
  align-items: center;
  justify-content: space-between; /* đẩy trái phải */
  padding: 6px 10px;
  border-bottom: 1px dashed #ccc;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.it-dt-newhome:hover {
  color: #d94141;
}

.it-dt-newhome .cat-newhome {
  flex: 0 0 auto;
  display: inline-block;
  width: 70px;            /* 👈 mày muốn cố định bao nhiêu px thì chỉnh */
  min-width: 70px;        /* đảm bảo không co lại nhỏ hơn */
  white-space: nowrap;       /* không xuống dòng */
  overflow: hidden;          /* ẩn phần chữ tràn ra */
  text-overflow: ellipsis;   /* thêm dấu "..." nếu chữ quá dài */
  font-weight: bold;
  color: #555;           /* màu cat nếu cần */



}

.it-dt-newhome .title-newhome {
  flex: 1;              /* giãn ra full khoảng trống giữa */
  font-weight: 600;
  margin: 0 10px;
  color: #2d3d55;
  font-size: 14px;
}

.it-dt-newhome .date-newhome {
  flex: 0 0 auto;       /* luôn nằm ngoài cùng phải */
  color: #888;
  font-size: 12px;
  text-align: right;
}

.main-nhanvat {
  width: 960px;
  height: 333px;
  margin: 20px auto;
  display: flex;
  background: #e3e0dc; /* nền body */
  border-radius: 6px;
  overflow: hidden;
}

/* sidebar cố định */
.sidebar-title {
  width: 80px;
  position: relative;
  background: #f9f5ec;
}

.sidebar-title .bg-doc {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-title .icon-doc {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
}

/* box ná»™i dung */
.char-content-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* tabs */
.list-tab-char {
  display: flex;
  background: #1f2e45;
  height: 36px;
  line-height: 36px;         /* cách khác: dùng line-height bằng height */
  align-items: center;
}
.it-tab-char {
    /* background: rgba(251, 251, 251, 0.5); */
    margin-block: 3px;
    font-size: 17px;
    color: #ffffff;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
    transition: 0.2s;
}

.it-tab-char:hover {
  color: #c95536;        /* đổi màu chữ khi hover */
  transform: scale(1.05); /* hơi phóng to nhẹ */
}
.it-tab-char.active {
  /* background: #c95536; */
  color: #c95536;
}

/* detail info */
.list-detail-info {
  flex: 1;
  padding: 20px;
  position: relative;
}


.info-left {
  flex: 1;
}
.detail-char .info-left {
    position: relative;
}
.detail-char .info-left .name-char {
    display: inline-block;
    font-size: 50px;
    font-family: "svn_last_paradise", sans-serif;
    color: #1f2e45;
    z-index: 3;
    margin-bottom: 0;       /* bỏ margin-bottom to */
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.detail-char .info-left .name-char {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.detail-char .info-left .phainao {
    font-size: 15px;
    position: relative;
    top: 14px;             /* kéo cụm Chính/Tà/Trung lên gần name-char */
    padding-left: 2%;
    gap: 0 15px;
}
.detail-char .info-left .phainao .itphai-nao:not(.active) {
    color: #7d7c7c;          /* item không active -> xám nhạt */
}

.detail-char .info-left .phainao .itphai-nao.active {
    font-family: "tahomabold";  /* item đang active -> in đậm */
    font-weight: 900;
}
.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.img-char {
  max-height: 282px;
}
.sidebar-title {
  width: 81px;
  height: 333px;
  position: relative;
}

.sidebar-title .bg-doc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 60px 0;
}

.icon-top {
  width: 70px;
}

.sidebar-text {
  font-family: "UTM Essendine Caps", serif; /* nếu bạn có font */
  font-size: 16px;
  font-weight: bold;
  color: #8a6d3b;
  text-align: center;
  line-height: 2;
  letter-spacing: 1px;
}

.icon-bottom {
  width: 20px;
}
.f-svn_last_paradise {
    font-family: "svn_last_paradise";
}
.f-tahomabold {
    font-family: "tahomabold";
}

.info-left {
  display: flex;
  flex-direction: column;
}

.block-top {
  margin-bottom: 80px;  /* khoảng cách giữa phần trên và dưới */
}

.name-char {
  display: inline-block;
  font-size: 50px;
  font-family: "svn_last_paradise", sans-serif;
  color: #1f2e45;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  margin-bottom: 5px;   /* sát phainao */
}

.phainao {
  font-size: 15px;
  padding-left: 5px;
  gap: 0 15px;
}

.block-bottom .list-dt-row {
  font-size: 14px;
  line-height: 1.6;
}
.detail-char { display: none; }
.detail-char.active { display: flex; }
.social {
  position: relative;
  width: 960px;              /* ngang */
  height: 523px;             /* cao */
  margin: 30px auto;
  background: url("../images/img-bg-social.png") no-repeat center bottom;
  background-size: cover;
}

.social-inner {
  position: absolute;
  bottom: 115px;             /* canh item lên */
  left: 39%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
}

.social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-family: "tahomabold", sans-serif;
  font-size: 14px;
  color: #1f2e45;
  position: relative;
  z-index: 1; /* icon và chữ mặc định cao hơn background */
}

.social-item::before {
  content: "";
  position: absolute;
  top: -20px;                 
  left: 50%;
  transform: translateX(-50%);
  width: 140px;               
  height: 140px;
  background: url("../images/img-bg-item-social.png") no-repeat center;
  background-size: contain;
  z-index: -1;  /* quan trọng: đưa nền xuống dưới */
}
.social-item::after {
  content: "";
  position: absolute;
  top: 0px;  /* canh thấp hơn chút để ôm icon */
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  background: url("../images/img-bg-item-social-after.png") no-repeat center;
  background-size: contain;
  z-index: -1; /* nằm giữa before và icon */
}

.social-item img {
  width: 110px;
  height: auto;
  margin-bottom: 0px;
  transition: transform 0.3s ease;
}

.social-item:hover img {
  transform: scale(1.1);
}

.social-item span {
  position: relative;
  z-index: 1;                 /* giữ icon + text ở trên background */
  background: url("../images/img-bnt-social.png") no-repeat center;
  background-size: contain;
  display: inline-block;
  padding: 6px 18px;
  color: #fff;
  font-size: 16px;
}




.site-footer {
  background: #1f2e45;
  color: #fff;
  padding: 20px 0;
  margin-top: 30px;
  font-size: 14px;
}

.site-footer .container {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-social {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.footer-social img {
  width: 28px;
  height: 28px;
  transition: transform 0.3s ease;
}

.footer-social img:hover {
  transform: scale(1.1);
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-18plus img {
  width: 45px;   /* chỉnh kích thước hợp lý */
  height: auto;
}

/* Phần header khớp 960px */
.post-header {
  width: 960px;
  margin: 20px auto 0 auto;   /* canh giữa, sát trên */
  background: #1f2e45;
  color: #fff;
  padding: 30px 20px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.post-header .post-title {
  font-size: 32px;
  margin: 0 0 10px;
  color: #fff;
}

.post-header .post-date {
  font-size: 14px;
  margin: 0 0 10px;
  color: #ccc;
}

.post-header .breadcrumb {
  font-size: 17px;
}

.post-header .breadcrumb a {
  color: #ffcc00; /* vàng cho nổi */
  text-decoration: none;
}

.post-header .breadcrumb span {
  color: #fff;
}

/* Phần container nội dung (nối liền ngay dưới header) */
.viewpost .container {
  width: 960px;
  margin: 0 auto 20px auto;   /* bỏ khoảng cách trên để dính header */
  background: #f9f5ec;
  padding: 20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border: 1px solid #d3cbb7;
}

.viewpost .post-image img {
  max-width: 100%;
  border-radius: 6px;
  margin-bottom: 20px;
}

.viewpost .post-content {
  font-size: 16px;
  line-height: 1.6;
  font-family: "Cambria", serif;
}

.viewpost h2 {
  margin: 20px 0 10px;  /* cách trên dưới hợp lý */
  color: #1f2e45;
}

.viewpost table {
  margin-bottom: 30px;
  border-collapse: collapse;
  width: 100%;
}

.viewpost table td, 
.viewpost table th {
  border: 1px solid #333;
  padding: 8px;
}
.post-content p {
  margin: 0; /* bỏ margin trên dưới */
  padding: 0;
}

 /* Áp dụng trong phần nội dung bài viết */
.post-content h1 {
    background: url(../images/icon_h1.png) no-repeat scroll 2px 4px transparent;
    clear: both;
    color: #b04100;
    text-indent: 34px;
    margin-top: 7px;
    font: bold 24px/30px "Cambria";
}

.post-content h2 {
    background: url(../images/icon_h2.png) no-repeat;
    background-position: 2px 3px;
    clear: both;
    font: 18px/29px "Cambria", serif;
    margin: 8px 8px 7px 29px;
    text-indent: 27px;
    color: #000000;
}

.post-content h3 {
    background: url(../images/icon_h3.png) no-repeat;
    background-position: 1px 10px;
    clear: both;
    font: 17px/29px "Cambria", serif;
    margin: 6px 0px 6px 46px;
    text-indent: 15px;
    color: #000000;
}

.post-content h4 {
    background: url(../images/icon_h4.png) no-repeat;
    background-position: 2px 12px;
    clear: both;
    font: 16px/29px "Cambria", serif;
    margin: 4px 0px 4px 56px;
    text-indent: 13px;
    color: #000000;
}

.post-content h5 {
    background: url(../images/icon_h4.png) no-repeat;
    background-position: 50px 11px;
    clear: both;
    font: 14px/29px "Cambria", serif;
    margin: 0px 0px 0px 15px;
    text-indent: 60px;
    color: #000000;
}

/* Table trong nội dung */
.post-content table {
    margin: 10px auto;
    border-collapse: collapse !important;
    width: 80%;
}

.post-content table tr,
.post-content table td {
    border: 1px solid #000;
    padding: 5px;
    background-color: #fff;
}

/* H4 và H5 bên trong table */
.post-content table td h4 {
    background: url(../images/icon_h3.png) no-repeat;
    background-position: 0px 11px;
    clear: both;
    font: 15px/29px "Roboto Slab", serif;
    margin: 0px 0px 0px 15px;
    text-indent: 13px;
    color: #000000;
}

.post-content table td h5 {
    background: url(../images/icon_h4.png) no-repeat;
    background-position: 13px 11px;
    clear: both;
    font: 13px/29px "Roboto Slab", serif;
    margin: 0px 0px 0px 15px;
    text-indent: 24px;
    color: #000000;
}

.post-content table th {
    background: #1f2e45;
    border: 1px solid #000000;
    color: #fff;
    text-align: center;
    font-weight: bolder;
    padding: 6px 10px;
}

.list-cat-posts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cat-post-item {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 15px;
  color: inherit;           /* giữ màu chữ */
  text-decoration: none;    /* bỏ gạch chân */
}

.cat-post-item:hover {
  background: #f9f9f9;      /* hiệu ứng hover toàn khối */
}

.cat-post-item .title {
  font-size: 18px;
  font-weight: bold;
  color: #001a33;
}

.cat-post-item:hover .title {
  color: #c95536;
}

.cat-date {
  width: 80px;
  text-align: center;
  font-family: 'tahoma';
  font-weight: bold;
  margin-right: 20px;
}

.cat-date .day {
  font-size: 35px;
  color: #6d85a4;
  display: block;
}

.cat-date .month {
  font-size: 14px;
  color: #b7c2cf;
}

.cat-info {
  flex: 1;
}

.cat-title {
  font-size: 13px;
  color: #777;
  margin-bottom: 5px;
}

.cat-info .title {
  font-size: 22px;
  font-weight: bold;
  color: #1f2e45;
  margin: 0 0 5px;
}

.cat-info .title:hover {
  color: #c95536;
}

.cat-info .desc {
  font-size: 14px;
  color: #666;
}
.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination a {
  display: inline-block;
  margin: 0 5px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
}

.pagination a:hover {
  background: #f0f0f0;
}

.pagination a.active {
  background: #c95536;
  color: #fff;
  border-color: #c95536;
}