:root {
  --brand: #c0392b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f7f7f8;
  color: #222;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto;
}

a {
  color: inherit;
  text-decoration: none;
}

header {
  background: var(--brand);
  color: #fff;
}

.container {
  width: min(1100px, 92%);
  margin-inline: auto;
}

/* === HEADER FIXED === */
.container.header-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | search */
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.logo {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .2px;
}

nav ul {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

nav a {
  padding: 6px 10px;
  border-radius: 8px;
}

nav a:hover {
  background: rgba(255, 255, 255, .15);
}

.header-wrap .search {
  justify-self: end;
  width: min(320px, 100%);
  display: flex;
  gap: 8px;
}

.header-wrap .search input {
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
}

.header-wrap .search button {
  border: 0;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--brand);
}

/* Responsive header */
@media (max-width: 768px) {
	
  .container.header-wrap {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .header-wrap .search {
    justify-self: stretch;
    width: 100%;
  }

  .header-wrap nav ul {
    justify-content: center;
  }
}

/* === CONTENT === */
.section {
  margin: 26px 0;
}

.section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  margin: 0 0 14px;
}

.section h2::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--brand);
  opacity: .25;
}

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.toolbar select {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

/* === GRID & CARDS === */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: .2s box-shadow;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.thumb {
  aspect-ratio: 3/4;
  background: #eee;
  object-fit: cover;
  width: 100%;
}

.card .meta {
  padding: 10px 12px;
}

.card h3 {
  font-size: 15px;
  line-height: 1.3;
  margin: 0 0 6px;
  font-weight: 700;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: 12px;
  background: #f1f1f3;
  border-radius: 999px;
  padding: 4px 8px;
  color: #444;
}

.label-full {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 999px;
  padding: 3px 8px;
}

.load-more {
  display: block;
  margin: 16px auto 0;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
}

body {
      font-family: 'Open Sans', sans-serif;
      background-color: #f8f9fa;
    }

    /* Navbar */
    .navbar {
      background: #fff;
      border-bottom: 1px solid #eee;
      padding: 8px 0;
    }
    .navbar-brand {
      font-weight: 700;
      font-size: 1.4rem;
      color: #007bff !important;
    }
    .nav-link {
      font-weight: 500;
      color: #333 !important;
    }
    .nav-link:hover {
      color: #007bff !important;
    }


    /* Overlay thể loại */
    #theLoaiOverlay {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: 2600;
      transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    #theLoaiOverlay.active {
      left: 0;
    }
	
	 #danhSachOverlay {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: 2600;
      transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    #danhSachOverlay.active {
      left: 0;
    }

    .overlay-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid #ddd;
      background: #fff;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .overlay-header button {
      border: none;
      background: none;
      font-size: 20px;
      color: #333;
    }
    .overlay-header span {
      font-weight: 600;
      font-size: 17px;
    }

    .overlay-body {
      flex: 1;
      overflow-y: auto;
      padding: 10px 16px 30px;
      animation: slideIn 0.3s ease-in-out;
    }

    @keyframes slideIn {
      from { transform: translateX(-50px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    .overlay-body a {
      display: block;
      padding: 10px 0;
      font-size: 16px;
      color: #222;
      border-bottom: 1px solid #f5f5f5;
      text-decoration: none;
    }
    .overlay-body a:hover {
      color: #007bff;
    }

    
	@media (max-width: 991.98px) {
	  .navbar .navbar-toggler {
		order: 2;
		position: relative;
		  z-index: 2500;         /* cao hơn backdrop/overlay */
		  pointer-events: auto;
	  }
	  .navbar .navbar-brand {
		order: 1;
	  }
	}
	@media (min-width: 991.98px) {
	  .latest-wrap{
			display: none;
		}
	}
	

	/* Mobile vẫn giữ full width */
	@media (max-width: 991.98px) {
	  .search-form {
		width: 100%;
		margin-top: 8px;
	  }
	}

	/* Bo tròn nhẹ */
	.search-form .form-control {
	  border-top-left-radius: 20px;
	  border-bottom-left-radius: 20px;
	}
	.search-form .btn {
	  border-top-right-radius: 20px;
	  border-bottom-right-radius: 20px;
	}

	/* --- MOBILE --- */
	@media (max-width: 991.98px) {
	  /* Đảm bảo bố cục navbar hiển thị theo cột */
	  .navbar .container {
		flex-direction: column;
		align-items: stretch;
	  }

	  /* Logo + nút menu ở hàng đầu */
	  .navbar .navbar-brand {
		order: 1;
		align-self: flex-start;
	  }

	  .navbar .navbar-toggler {
		order: 2;
		align-self: flex-end;
		margin-top: -36px; /* kéo lên ngang với logo, bạn có thể tinh chỉnh */
	
		  z-index: 2500;         /* cao hơn backdrop/overlay */
		  pointer-events: auto;
	  }

	  /* Search box xuống hàng thứ 2 */
	  .search-form {
		order: 3;
		width: 100%;
		margin-top: 10px;
	  }
	}

	/* --- DESKTOP --- */
	@media (min-width: 992px) {
	  /* container không được wrap xuống hàng */
	  .navbar .container{
		flex-wrap: nowrap !important;
		align-items: center;
	  }

	  /* Ẩn nút burger trên desktop */
	  #btnOpenMenu{ display: none !important; }

	  /* Khối menu (navbar-collapse) nằm cùng hàng, thu gọn width */
	  #navbarNav{
		display: flex !important;           /* ép hiển thị thay vì collapse */
		order: 2 !important;                /* sau logo */
		width: auto !important;             /* không chiếm full width */
		margin-left: 16px !important;
		margin-top: 0 !important;
		flex: 0 1 auto !important;
	  }

	  /* Các item menu hiển thị theo hàng ngang, có khoảng cách */
	  #navbarNav .navbar-nav{
		flex-direction: row !important;
		align-items: center;
		gap: 16px;                          /* khoảng cách giữa “Danh sách” & “Thể loại” */
	  }
	  #navbarNav .nav-item{
		display: inline-flex;
	  }
	  #navbarNav .nav-link{
		padding: 6px 0;                     /* gọn gàng chiều cao */
	  }

	  /* Ô tìm kiếm dồn về bên phải, thu nhỏ */
	  .search-form{
		order: 3 !important;                /* sau menu */
		margin-left: auto !important;
		width: 320px !important;            /* bạn có thể chỉnh 280–360 */
		flex: 0 0 auto !important;
	  }
	}


:root{ --wd-brand:#1c74e3; }

.wd-burger{
  width:40px;height:40px;border:1px solid #ddd;background:#fff;border-radius:10px;cursor:pointer;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
}
.wd-burger span{position:absolute;width:20px;height:2px;background:#333;}
.wd-burger span:nth-child(1){transform:translateY(-6px);}
.wd-burger span:nth-child(2){transform:translateY(0);}
.wd-burger span:nth-child(3){transform:translateY(6px);}

.wd-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:9998;
}
.wd-backdrop.active{opacity:1;pointer-events:auto;}

.wd-drawer{
  position:fixed;top:0;left:0;height:100vh;width:320px;max-width:90vw;background:#fff;
  transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:9999;
  box-shadow:2px 0 14px rgba(0,0,0,.15);display:flex;flex-direction:column;
}
.wd-drawer.from-right{left:auto;right:0;transform:translateX(100%);}
.wd-drawer.is-open{transform:translateX(0);}

.wd-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid #eee;
}
.wd-logo{font-weight:800;font-size:26px;color:var(--wd-brand);letter-spacing:.5px;}
.wd-close{width:36px;height:36px;border:1px solid #ddd;background:#fff;border-radius:8px;cursor:pointer;font-size:22px;line-height:1;}

.wd-menu{padding:8px 0;}
.wd-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid #f2f2f2;color:#111;text-decoration:none;
}
.wd-item strong{font-size:14px;letter-spacing:.3px;}
.wd-item i{color:#666;}
.wd-item:hover{background:#f9fafb;}
.wd-item.wd-quiet{border-bottom:none;color:#1c74e3}

html.wd-lock, body.wd-lock{overflow:hidden;}

:root{
  --accent: #ff8c2f;          /* màu cam viền trên dropdown */
}

/* ---------- DESKTOP ONLY ---------- */
/* ĐỪNG để header/navbar có overflow:hidden; */
.navbar, header { overflow: visible; }

/* Desktop mega dropdown */
@media (min-width: 992px) {
  #tlItem { position: relative; }             /* neo tuyệt đối */
  #menuItem { position: relative; }             /* neo tuyệt đối */
  
  #danhSachMenu{
    position: absolute;
    top: 100%; left: 0;
    width: 420px;           /* tăng/giảm tùy ý */
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    border-radius: 8px;
    padding: 16px 20px;

    /* Ẩn mặc định */
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;

    z-index: 3000;          /* cao hơn backdrop/ảnh */
  }

  /* Khi .show: hiện ra */
  #danhSachMenu.show{
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* LỖI HAY GẶP: đang dính transform từ mobile (off-canvas).
     Xóa mọi transform/position của mobile khi lên desktop. */
  #danhSachMenu,
  #danhSachMenu.show{
    left: 0 !important;
    transform: none !important;   /* phòng khi mobile có translateX(-100%) */
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  #theLoaiMenu{
    position: absolute;
    top: 100%; left: 0;
    width: 820px;           /* tăng/giảm tùy ý */
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    border-radius: 8px;
    padding: 16px 20px;

    /* Ẩn mặc định */
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;

    z-index: 3000;          /* cao hơn backdrop/ảnh */
  }

  /* Khi .show: hiện ra */
  #theLoaiMenu.show{
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* LỖI HAY GẶP: đang dính transform từ mobile (off-canvas).
     Xóa mọi transform/position của mobile khi lên desktop. */
  #theLoaiMenu,
  #theLoaiMenu.show{
    left: 0 !important;
    transform: none !important;   /* phòng khi mobile có translateX(-100%) */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Lưới 3 cột như ảnh demo */
  #theLoaiGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 40px;
    min-width: 720px; /* để đủ 3 cột */
  }
  #theLoaiGrid a{
    display: block;
    padding: 6px 0;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
  }
  #theLoaiGrid a:hover{ color: #ff7a00; }
}

/* Mobile/Tablet: KHÔNG dùng dropdown nổi -> ẩn hoàn toàn block này,
   bạn đã có overlay riêng cho mobile */
@media (max-width: 991.98px){
  #theLoaiMenu{ display: none !important; }
  #danhSachMenu{ display: none !important; }
}
/* Khung dropdown */
.tl-dropdown{
  position:absolute; left:0; top:100%;
  background:#fff; border:1px solid #eee; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:14px 18px; z-index:1000; min-width:680px;
}

/* Lưới 3 cột */
.tl-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(200px, 1fr));
  column-gap:40px;
}

/* Cột là một UL */
.tl-col{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; row-gap:8px;
}

/* Mục */
.tl-col li a{
  display:block;
  line-height:1.5;
  padding:4px 0;
  color:#222; text-decoration:none; white-space:nowrap;
}
.tl-col li a:hover{ color:#ff7a00; }



/* ==== MOBILE: 3 cột card truyện ==== */
/* ==== MOBILE: 3 cột card truyện ==== */
@media (max-width: 575.98px){          /* tùy bạn đổi mốc 576/600 */
  /* container danh sách */
  .grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));  /* 3 cột bằng nhau */
    gap: 8px;                                         /* khoảng cách nhỏ hơn */
  }

  /* card gọn hơn */
  .card{ border-radius: 10px; }
  .thumb{
    width: 100%;
    aspect-ratio: 2 / 3;               /* bìa đứng, gọn trên mobile */
    object-fit: cover;
    display:block;
  }

  /* phần meta gọn chữ */
  .card .meta{ padding: 6px 6px 8px; }
  .card h3{
    font-size: 12px;
    line-height: 1.35;
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;             /* cắt 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  /* Nếu muốn ẩn tag/nhãn phụ thì mở comment khối này:
  .card .tags, .card .tag { display:none !important; }
  */
}
/* === hết block @media === */
/* Meta dạng cột để không bị đè */
.card .meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tiêu đề 2 dòng để chừa chỗ cho label-full */
.card h3{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;      /* giữ chiều cao tối thiểu */
}


/* Nếu bạn đang bọc nhãn bằng 1 lớp nền riêng (wrapper) thì tắt luôn */
.label-wrap{
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 2) Nhãn “Full – xxxx chương” rõ, gọn và căn giữa */


/* ĐÈ CUỐI FILE CSS CỦA BẠN */

/* Bỏ viền/nền/shadow như đã làm trước đó (giữ lại nếu bạn đã có) */
.grid .card{ background:transparent!important; border:none!important; box-shadow:none!important; }

/* Canh giữa mọi thứ trong phần meta + bỏ padding ngang gây lệch */
.card .meta{
  display:flex;
  flex-direction:column;
  align-items:center;          /* ← canh giữa theo trục ngang */
  gap:6px;
  padding:8px 0 !important;    /* ← bỏ padding trái/phải */
  width:100%;
}

/* Tiêu đề căn giữa để đồng bộ */
.card h3{
  margin:0;
  text-align:center;
}

/* Viên “Full – xxxx chương” */
.label-full{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:8px auto 0;           /* ← giữa tuyệt đối */
  padding:6px 6px;
  border-radius:999px;
  border:1px solid #a5d6a7;
  background:#e8f5e9;
  color:#1b5e20;
  font-weight:600;
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}
.card .meta .label-full { margin-left:auto !important; margin-right:auto !important; }


[v-cloak]{display:none;}
.latest-wrap{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px 16px}
.latest-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.latest-head h2{margin:0;font-size:18px;font-weight:800;color:#24304a;letter-spacing:.2px}
.latest-head .rule{flex:1;height:4px;background:#2f80ed;border-radius:999px;max-width:180px}
.latest-list{list-style:none;padding:0;margin:0}
.latest-item{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px 12px;padding:12px 0;border-bottom:1px dashed #e8e8ee}
.latest-item:last-child{border-bottom:none}
.latest-bullet{width:18px;height:18px;display:grid;place-items:center;color:#7b8794}
.latest-bullet i{font-size:12px}
.latest-title{display:flex;flex-direction:column;gap:6px}
.latest-title a{color:#223;font-weight:600;text-decoration:none;line-height:1.35}
.latest-title a:hover{color:#2f80ed}
.latest-meta{display:flex;align-items:center;gap:14px;font-size:13px;color:#4e5d78}
.latest-meta a{color:#2f80ed;text-decoration:none}
.latest-meta a:hover{text-decoration:underline}
.latest-badges{display:flex;gap:6px}
.badge-new,.badge-full{font-size:11px;font-weight:800;color:#27ae60}
@media (max-width:576px){
  .latest-item{grid-template-columns:16px 1fr}
  .latest-badges{grid-column:2 / -1}
}
/* ===== Layout ===== */
.page-grid{
  display:grid;
  grid-template-columns: 2fr 1fr; /* trái 2 phần – phải 1 phần */
  gap:18px;
}
.card{
  background:#fff; border:1px solid #e9ecef; border-radius:8px;
}
.card-title{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; margin:0; font-weight:800; font-size:16px;
}
.card-title .rule{flex:1;height:2px;background:#1c74e3;opacity:.55;border-radius:2px}

/* ===== Latest table ===== */
.latest-rows{ list-style:none; margin:0; padding:0 6px 8px; }
.row{ 
  display:grid; grid-template-columns: 1.4fr 1.1fr 0.55fr 0.45fr;
  align-items:center; column-gap:10px; padding:10px; border-top:1px dashed #edf1f4;
}
.row:first-of-type{ border-top:none; }
.row:hover{ background:#fbfdff; }
.row-head{ 
  color:#7a869a; font-size:12px; text-transform:uppercase; letter-spacing:.4px;
  background: #fafbfc; border-top:1px solid #eef2f5; border-bottom:1px solid #eef2f5;
  border-radius:6px; margin:0 6px 8px; padding:10px 8px;
}
.col{ min-width:0; } /* enable ellipsis */
.col-title{
  display:flex; align-items:center; gap:8px; overflow:hidden;
}
.col-title .chev{ color:#9aa5b1; font-weight:700; }
.title{
  display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#0f172a; font-weight:600;
}
.col-tags{
  color:#4b5563; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.col-chap, .col-time{
  text-align:right; color:#0f172a; font-size:13px;
}
.col-chap a{ color:#2563eb; text-decoration:none; }
.col-chap a:hover{ text-decoration:underline; }

/* badges */
.badge{
  display:inline-flex; align-items:center; height:20px;
  padding:0 8px; border-radius:999px; font-size:11px; line-height:20px; font-weight:800; margin-left:8px;
}
.badge-new{ background:#e8f2ff; color:#1659d4; border:1px solid #cfe2ff; }
.badge-full{ background:#dff7ea; color:#0f6b3a; border:1px solid #a9e0c4; }

/* tags */
.tag{ color:#6b7280; text-decoration:none; }
.tag:hover{ color:#111827; }
.sep{ margin:0 4px; color:#c7ced6; }

/* ===== Sidebar ===== */
.side{ display:flex; flex-direction:column; gap:18px; }
.side-card{ padding-bottom:10px; }
.side-title{
  font-weight:800; font-size:15px; padding:12px 16px; border-bottom:1px solid #eef2f5; margin:0;
}
/* Thể loại */
.cat-grid{ 
  display:grid; grid-template-columns: repeat(2, 1fr); gap:8px 16px;
  padding:12px 16px 16px; list-style:none; margin:0;
}
.cat-grid a{ color:#0f172a; text-decoration:none; }
.cat-grid a:hover{ color:#1c74e3; }

/* Top list */
.top-list{ list-style:none; margin:0; padding:10px 12px 14px; }
.top-list li{ display:flex; flex-direction:column; gap:2px; padding:8px 6px; border-bottom:1px dashed #edf1f4; }
.top-list li:last-child{ border-bottom:none; }
.rank{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px;height:20px;border-radius:50%; font-size:12px; font-weight:800;
  background:#ffedd5; color:#b45309; margin-right:6px;
}
.top-list .t{ color:#0f172a; font-weight:600; text-decoration:none; }
.top-list .t:hover{ color:#1c74e3; }
.top-list .sub{ color:#6b7280; font-size:12.5px; }

/* ===== Responsive fallback ===== */
@media (max-width: 991.98px){
  .page-grid{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr; align-items:flex-start; row-gap:6px; }
  .col-chap,.col-time{ text-align:left; }
}

/* ================= DESKTOP LAYOUT (>=992px) ================ */
/* ======= KHUNG 2 CỘT DESKTOP ======= */
@media (min-width: 992px){
  .wrapper.homepage{
    display:grid;
    grid-template-columns: 1fr 320px;   /* trái linh hoạt, phải 320px */
    gap: 20px;
    align-items: start;
  }
  .homeCol .home-content{
    background:#fff;
    border:1px solid #e9edf3;
    border-radius:10px;
    overflow:hidden;
  }
  .homeCol .main-title{
    display:flex; align-items:center; gap:10px;
    margin:0 0 10px;
  }
  .homeCol .main-title h2{ margin:0; font-size:18px; font-weight:800; }
  .homeCol .main-title .line{
    height:2px; background:#1c74e3; flex:1; border-radius:2px;
  }
  .homeCol .main-title .line2{ opacity:.2; }

  /* ======= MỖI DÒNG TRUYỆN (5 CỘT) ======= */
  .itemupdate{
    display:grid;
    grid-template-columns: 300px 180px 60px 120px; /* icon | tiêu đề | thể loại | chương | thời gian */
    align-items:center;
    column-gap: 16px;
    padding: 11px 14px;
    border-top:1px dashed #eef2f6;
  }
  .itemupdate:first-child{ border-top:0; }
  .itemupdate:hover{ background:#fcfdff; }

  /* cột icon chevron trong <h3> đã có, ẩn chữ thừa & canh */
  .itemupdate .iname h3{
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:700; margin:0;
  }
  .itemupdate .iname h3 .fa{ color:#9aa7b3; font-size:12px; width:24px; text-align:center; }
  .itemupdate .iname h3 a{ color:#1b1f24; }
  .itemupdate .iname h3 a:hover{ color:#1c74e3; }

  /* Badge NEW / FULL ngay cạnh tiêu đề */
  .itemupdate .status{
    display:inline-flex; gap:6px; margin-left:8px;
  }
  .status-new,
  .status-full,
  .status-hot{
    display:inline-flex; align-items:center; justify-content:center;
    height:18px; padding:0 6px; border-radius:999px;
    font-size:11px; font-weight:800; line-height:1; letter-spacing:.2px;
  }
  .status-new::before { content:"NEW"; color:#0f766e; background:#d1fae5; }
  .status-full::before{ content:"FULL"; color:#2563eb; background:#dbeafe; }
  .status-hot::before { content:"HOT"; color:#b91c1c; background:#fee2e2; }
  .status-new,.status-full,.status-hot{ background:transparent; } /* để màu theo ::before */

  /* cột thể loại (màu xám nhẹ) */
  .itemupdate .icate{
    color:#6b7280; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .itemupdate .icate a{ color:#6b7280; }
  .itemupdate .icate a:hover{ color:#111; }

  /* cột chương (xanh, đậm, không wrap) */
  .itemupdate .ichapter{
    white-space:nowrap;
  }
  .itemupdate .ichapter a{
    color:#1c74e3; font-weight:700; text-decoration:none; font-size: 12px;
  }

  /* cột thời gian (xám, phải) */
  .itemupdate .iupdated{
    color:#6b7280; font-size:12px; text-align:right; white-space:nowrap;
  }

  /* ======= CỘT PHẢI ======= */
  .homeRightCol .widget{
    background:#fff; border:1px solid #e9edf3; border-radius:10px; padding:14px;
  }
  .homeRightCol .widget + .widget{ margin-top:16px; }
  .homeRightCol .widget .title{
    margin:0 0 10px; font-size:16px; font-weight:800; color:#1b1f24;
  }

  /* Thể loại – lưới 3 cột */
  .tags.tag-name{
    display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap:8px 14px; list-style:none; margin:0; padding:0;
  }
  .tags.tag-name li a{
    display:inline-block; font-size:13px; color:#1b1f24;
  }
  .tags.tag-name li a:hover{ color:#1c74e3; }

  /* Top đề cử */
  .suggest .all .item{
    display:grid; grid-template-columns: 24px 1fr; gap:18px;
    padding:8px 0; border-bottom:1px solid #f2f4f7;
  }
  .suggest .all .item:last-child{ border-bottom:0; }
  .suggest .all .item span{
    width:24px; height:24px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; color:#111; background:#f3f4f6;
  }
  .suggest .all .item a{
    color:#1b1f24; font-size:13px; line-height:1.35;
  }
  .suggest .all .item a i{
    display:block; font-style:normal; color:#6b7280; font-size:12px; margin-top:2px;
  }
}

/* Mobile/tablet vẫn giữ layout cũ */
@media (max-width: 991.98px){
  .wrapper{
	  display:none;
  }
  .itemupdate{
    display:block; padding:10px 12px; border-top:1px solid #f1f5f9;
  }
  .itemupdate .iupdated{ margin-top:4px; }
}


/* Breadcrumbs gọn gàng, bỏ chấm đầu dòng */
.breadcrumbs{
  list-style: none;
  padding: 12px 0 8px;
  margin: 0 0 6px;
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: #666;
}
.breadcrumbs li{display:flex; align-items:center}
.breadcrumbs li+li::before{content:"/"; margin:0 6px; color:#bbb}

/* Căn hàng nhẹ (không bắt buộc) */
.suggest .item { display:flex; align-items:center; gap:10px; }

/* Vòng tròn số thứ tự (áp dụng cho <span> đầu tiên mỗi item) */
.suggest .item > span:first-child{
  width:32px; height:32px; flex:0 0 32px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff;
  background:#ccc;           /* màu mặc định cho các hạng >5 */
  box-shadow:0 0 0 2px #fff inset;
}

/* 5 màu khác nhau cho TOP 1–5 (chỉ vòng tròn) */
.suggest .all .item:nth-child(1) > span:first-child { background:#f59e0b; } /* Amber */
.suggest .all .item:nth-child(2) > span:first-child { background:#3b82f6; } /* Blue */
.suggest .all .item:nth-child(3) > span:first-child { background:#10b981; } /* Emerald */
.suggest .all .item:nth-child(4) > span:first-child { background:#8b5cf6; } /* Violet */
.suggest .all .item:nth-child(5) > span:first-child { background:#ec4899; } /* Pink */