* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
}

.danhsach {
    margin-right: auto;
    margin-left: auto;
    padding-left: 1px;
    padding-right: 1px;

}


.col-xs-2, .col-xs-3, .col-xs-7, .col-xs-12 {
    position: relative;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
}
.col-xs-12 {
    width: 99%;
}
.col-xs-7 {
    width: 74%;
}

.col-xs-3 {
    /* FIX 2026-08-14(5): tăng 18% -> 25% theo yêu cầu người dùng "tăng bề ngang khung
       chứa ảnh" - phối hợp với "aspect-ratio: 3/4" đặt trên .img-rounded (xem bên dưới)
       để ảnh LUÔN đúng tỉ lệ 3/4 dù bề ngang cột thực tế là bao nhiêu ở mọi cỡ màn hình
       (không phụ thuộc 1 chiều cao cố định như bản trước). .col-xs-7 giảm tương ứng
       81% -> 74%. */
    width: 25%;
	display: flex; /* Kích hoạt Flexbox */
    justify-content: center; /* Canh giữa theo chiều ngang */
    align-items: center; /* Canh giữa theo chiều dọc */
    /* FIX 2026-08-14: bỏ "height: 180px" cố định - cột cha (.list>.row) giờ dùng
       "align-items: stretch" nên cột này tự cao bằng cột thông tin bên cạnh rồi. */
}

/* FIX 2026-08-14(3): base.css có 1 luật RẤT CŨ, còn sót lại từ layout danh sách kiểu
   bảng đời trước (trong @media min-width:768px): "#list-page .list > .row > div {
   display:table; height:90px; ...}". Độ ưu tiên CSS của luật đó (1 ID + 2 class + 1 thẻ)
   CAO HƠN hẳn ".col-xs-3"/".col-xs-7" phía trên (chỉ 1 class), nên NGẦM đè display:table
   + height cố định lên đúng 2 cột ảnh bìa/thông tin - khiến "align-items:stretch" ở
   .list>.row không phát huy tác dụng (phần tử display:table không giãn theo flex như
   mong đợi), gây ra CẢ HAI lỗi: bìa bị co hẹp bề ngang rồi tràn lấn info (do width:auto
   cũ tính sai trên 1 khung không giãn đúng) LẪN chiều cao 2 cột vẫn lệch nhau (người
   dùng báo cáo lại kèm ảnh chụp). Mobile (<=767px) đã được vá lỗi này từ trước (xem
   khối "#list-page .list > .row > .col-xs-3 {...display:flex!important...}" bên dưới)
   nhưng khoảng 768px+ (nơi luật gốc base.css cũng đang áp dụng) thì chưa - đây mới là
   nguyên nhân THẬT, cần ghi đè lại với độ ưu tiên cao hơn (thêm class ".list-truyen"). */
#list-page .list.list-truyen > .row > .col-xs-3 {
    display: flex;
    height: auto;
    line-height: normal;
}
#list-page .list.list-truyen > .row > .col-xs-7 {
    display: block;
    height: auto;
    line-height: normal;
}

/* FIX 2026-08-14(8): tim ra nguyen nhan THAT su cua loi "ten tac gia/sao/so chuong
   khong sat le phai, co dan theo do dai ten truyen" - khong phai do .author/.totalchuong
   (da thu ep width:100% o do nhung khong het han). Thu pham la 1 luat CO HON trong
   base.css (@media min-width:768px): "#list-page .list > .row > div > div {
   display:table-cell; vertical-align:middle}". Khoi div KHONG CLASS boc truyen-title/
   author/totalchuong (con truc tiep cua .col-xs-7) bi ep thanh table-cell - ma table-cell
   KHONG tu gian het be ngang khung cha, no CO LAI theo noi dung ben trong (giong cot bang
   tu dong co theo chu dai nhat) => ten truyen cang dai thi khung cang rong, ten truyen
   ngan thi khung cang hep, dung y het hien tuong nguoi dung bao cao kem anh chup. Ghi de
   lai display:block (do uu tien cao hon nho them class .list-truyen) de khoi nay LUON
   gian het 100% be ngang .col-xs-7 (74%), luc do text-align:right cua .author/.totalchuong
   moi thuc su sat mep phai that, khong con phu thuoc do dai ten truyen nua. */
#list-page .list.list-truyen > .row > .col-xs-7 > div {
    display: block;
    vertical-align: baseline;
}

#list-page {
    text-align: left;
    font-size: 18px;
}
.list {
    display: flex; /* Sử dụng flexbox */
    flex-wrap: wrap; /* Cho phép phần tử xuống dòng nếu cần */
    justify-content: flex-start; /* Căn chỉnh phần tử sang trái */
}

.list>.row {
	display: flex;
	/* FIX 2026-08-14: "align-items: flex-start" (cũ) để cột bìa (.col-xs-3, cao cố định
	   180px) và cột thông tin (.col-xs-7, cao theo nội dung - tiêu đề/tác giả/thể loại...)
	   PHÌNH RA khác nhau: khi dòng chữ ký hiệu (font "music"/"tacgiavn") cần line-height
	   rộng hơn 180px, cột thông tin tràn dài hơn hẳn bìa truyện, tạo cảm giác lệch/thiếu
	   cân đối (người dùng báo cáo kèm ảnh chụp). Đổi sang "stretch" (mặc định flexbox) để
	   2 cột LUÔN cao bằng nhau = chiều cao cột thông tin (cột dài hơn), rồi cho ảnh bìa
	   tự giãn theo (xem .img-rounded) - khớp bất kể tiêu đề dài ngắn ra sao, không cần
	   đoán số px cố định. */
	align-items: stretch;
	flex: 0 0 calc(100% - 20px); /* mỗi thẻ luôn chiếm trọn chiều rộng, không co giãn theo nội dung */
	margin-left: auto;
	padding: 9px 3px;
    object-fit: cover;
    border-radius: 10px; /* Bo tròn các góc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Đổ bóng cho hiệu ứng nổi */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng chuyển đổi khi hover */
	margin: 10px;
}

#list-page .list>.row>div {
    line-height: 20px;
    min-width: 0; /* cho phép text-overflow ellipsis hoạt động đúng trong flex item */
    border-left: 0;
    white-space: normal;
    padding-left: 9px;
    padding-right: 9px
}

/* FIX 2026-08-13: font "music" (UVF_MussicaSwash) la font chu ky/swash - net vuot can
   nhieu hon line-height 1.8 (font-size 18px=32.4px/dong); overflow:hidden (bat buoc de
   -webkit-line-clamp hoat dong) cat ngang qua duoi chu ngay trong 1 dong (nguoi dung
   bao cao kem anh chup man hinh). Tang line-height - line-clamp dem theo SO DONG nen
   khong hong tinh nang cat "..." khi ten qua dai, chi moi dong cao hon. */
#list-page .list>.row>div>div>.truyen-title {
    font-weight: bold;
    font-size: 18px;
	line-height: 2.6;
    margin-top: 0;
    /* FIX 2026-08-14(4): giảm 10px -> 4px theo yêu cầu người dùng "thu hẹp bề cao khung
       thông tin" - line-height 2.6 vẫn giữ nguyên (cần thiết để không cắt mất nét vượt
       chữ ký tự font "music"), chỉ bớt khoảng cách THỪA giữa tiêu đề và tác giả bên dưới. */
    margin-bottom: 4px;
	font-family: music;
    /* Cắt bớt với dấu "..." nếu tên truyện dài quá 2 dòng, thay vì tràn ra
       làm thẻ cao thấp so le nhau. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* FIX 2026-08-13: font "tacgiavn" cung la font chu ky - dong bo line-height. */
#list-page .list>.row>div>div>.author {
    font-size: 18px;
    line-height: 2.2;
    display: block;
    /* FIX 2026-08-14(7): "margin-left:auto" trên 1 khối chỉ đẩy sang phải được NẾU khối
       đó hẹp hơn khung cha - nếu vì lý do gì đó nó không tự rộng 100% khung cha, chữ sẽ
       nằm lửng lơ thay vì sát mép phải thật (người dùng báo cáo kèm ảnh: tác giả/sao/số
       chương không sát mép phải dù đã canh phải). Ép hẳn width:100% để chắc chắn khung
       này luôn rộng bằng khung cha, text-align:right lúc đó mới chắc chắn sát mép. */
    width: 100%;
    box-sizing: border-box;
	margin-left: auto; 
    text-align: right;
    font-family: tacgiavn;
	color:#666633; 
	
    
	
}

.list>.row>div:first-child {
    border-left: 0;
    padding-left: 0;
}
.list>.row>div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label-title {
    padding: 1px 3px;
    font-size: 12px;
    vertical-align: bottom;
    margin-left: 1px;
}
.totalchuong {
    font-size: 12px;
    display: block;
    /* FIX 2026-08-14(7): xem chú thích chi tiết ở rule .author cùng ngày - ép width:100%
       để đảm bảo canh phải luôn sát mép khung cha thật sự. */
    width: 100%;
    box-sizing: border-box;
	margin-left: auto; /* Đẩy tác giả sang phải */
    /*white-space: nowrap; /* Giữ tác giả trên một dòng */
    text-align: right;
    overflow: hidden;
	text-overflow: ellipsis;
	
}
.label-t {
    padding: 1px 3px;
    font-size: 13px;
    vertical-align: bottom;
    margin-left: 5px;
	display: inline-block; /* Đảm bảo phần tử hiển thị đúng */
    box-sizing: border-box; /* Tính toán kích thước chính xác */
}
.label-theloai {
    border: 1px solid #86ad86;
    color: #86ad86;
    margin: 1px;
    display: inline-block; /* Đảm bảo phần tử hiển thị đúng */
    box-sizing: border-box; /* Tính toán kích thước chính xác */
	white-space: nowrap;
}

.label-scan {
    border: 1px solid #FD8383;
    color: #FD8383;
    margin: 1px;
    display: inline-block; /* Đảm bảo phần tử hiển thị đúng */
    box-sizing: border-box; /* Tính toán kích thước chính xác */
	white-space: nowrap;
}

.label-time {
    border: 1px solid #8EB3FD;
    color: #8EB3FD;
    margin: 1px;
    display: inline-block; /* Đảm bảo phần tử hiển thị đúng */
    box-sizing: border-box; /* Tính toán kích thước chính xác */
	white-space: nowrap;
}
.button_theloai {
	display: inline-block; /* Đảm bảo phần tử hiển thị đúng */
    box-sizing: border-box; /* Tính toán kích thước chính xác */
    /* FIX 2026-08-14(11): "white-space:nowrap" (cũ) ep ten the loai dai (vd "Suy ngẫm,
       Làm Người, Kỹ Năng Sống") nam tren 1 dong duy nhat, khien nut vuot khung sidebar
       khi man hinh bi bop hep (nguoi dung bao lai kem anh chup). Cho phep xuong dong
       trong chinh no + gioi han khong rong hon sidebar cha. */
	white-space: normal;
    max-width: 100%;
    background-color: #d1d4ca; /* Nền tối */
    color: #fff; /* Chữ màu sáng */
	font-size: 12px;
    font-weight: bold; /* Chữ dày */
    padding: 3px 6px;
	margin: 5px;
    border: 2px;
    border-radius: 5px;
    border-color: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Tăng độ đổ bóng để viền nổi bật hơn */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng chuyển đổi khi hover */
    cursor: pointer;
}

.button_theloai:hover {
    background-color: #fff; /* Đổi màu khi di chuột */
	color: #86ad86;
}

.img-rounded {
    /* FIX 2026-08-14: "height: 154px" cố định (cũ) khiến bìa luôn thấp hơn cột thông
       tin bên cạnh khi tiêu đề/tác giả cần nhiều dòng hơn - đổi sang "height: 100%" để
       ảnh tự giãn khớp đúng chiều cao cột cha (.col-xs-3, giờ đã stretch theo cột thông
       tin - xem .list>.row).
       SỬA LẦN 2 cùng ngày: bản đầu dùng "width:auto; max-width:140px" khiến ảnh tự tính
       bề ngang theo tỉ lệ gốc rồi CÓ THỂ VƯỢT chiều rộng thật của cột cha (.col-xs-3 chỉ
       rộng ~18% CỦA VÙNG NỘI DUNG, không phải 18% màn hình - ở layout có sidebar, con số
       này có lúc chỉ ~118px, hẹp hơn hẳn 140px) -> ảnh tràn lấn sang cột thông tin bên
       cạnh (người dùng báo cáo kèm ảnh chụp). Đổi hẳn sang "width:100%" để ảnh LUÔN vừa
       khít bề ngang cột cha bất kể cột rộng bao nhiêu, dùng object-fit:cover để không
       méo tỉ lệ khi bề ngang/cao không khớp tỉ lệ gốc ảnh.
       SỬA LẦN 3 cùng ngày: "height:100%" (giãn full theo cột thông tin) làm bìa có lúc
       quá cao/gầy trông mất cân đối - theo yêu cầu người dùng "tăng bề cao khung ảnh"
       (chứ không phải giãn hết cỡ), đổi sang chiều cao CỐ ĐỊNH 190px (so với 154px cũ).
       SỬA LẦN 4 cùng ngày: chiều cao cố định 190px + bề ngang %-theo-cột (.col-xs-3)
       chỉ cho đúng tỉ lệ 3/4 ở ĐÚNG 1 độ rộng màn hình đã đo thử - ở màn hình khác, bề
       ngang cột đổi theo % nhưng chiều cao vẫn cứng 190px nên LỆCH tỉ lệ. Theo yêu cầu
       người dùng "tuân thủ tỉ lệ 3/4... áp dụng cho các cỡ màn hình", đổi hẳn sang
       "aspect-ratio: 3/4" + "height:auto" - bề ngang luôn = 100% cột cha (bao nhiêu cũng
       được, tùy .col-xs-3/màn hình), chiều cao TỰ TÍNH theo đúng 3/4 bề ngang đó, đúng ở
       MỌI kích thước màn hình mà không cần đoán số px. Cột cha .col-xs-3 vẫn
       "align-items:stretch" nên nếu cột thông tin bên cạnh cao hơn ảnh, ảnh tự canh giữa
       trong phần dư ra (object-fit:cover phòng trường hợp ảnh gốc không đúng sẵn tỉ lệ
       3/4, tránh méo hình). */
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    border-radius: 5px; /* Bo tròn các góc */
	border: 3px;
	border-color: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Tăng độ đổ bóng để viền nổi bật hơn */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng chuyển đổi khi hover */
}

.img-rounded:hover {
    transform: scale(1.8); /* Hiệu ứng zoom in khi hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); /* Tăng thêm độ đổ bóng khi hover để viền nổi bật hơn */
}

.rating-container {
	all: unset;  
    display: flex !important;;                 /* Sử dụng flexbox để đặt phần tử ngang nhau */
    align-items: center !important;;           /* Căn giữa các phần tử theo chiều dọc */
    justify-content: flex-start !important;;   /* Đảm bảo các phần tử được căn đều từ bên trái */
    gap: 18px;                     /* Khoảng cách giữa số lần và hình ảnh */
    padding: 5px;
    border: 1px solid #ccc;        /* Viền cho container */
    border-radius: 5px;            /* Bo tròn các góc viền */
    background-color: #f9f9f9;     /* Nền nhạt */
    max-width: 200px;              /* Đặt giới hạn chiều rộng nếu cần */
    white-space: nowrap !important;;           /* Đảm bảo không xuống dòng */
}

.sosao-image {
all: unset;  
  margin: 4px auto;
  height: 18px;
  clear: both;
  display: inline-block !important;; 
}

.solan {
	all: unset;  
    display: inline-block !important;;          /* Đảm bảo số lần nằm trên 1 hàng */
    padding: 2px 8px;              /* Tạo khoảng trống xung quanh số lần */
    font-weight: bold;             /* Làm đậm chữ */
    background-color: #fff;        /* Nền trắng cho số lần */
    border-radius: 3px;            /* Bo tròn góc viền số lần */
    white-space: nowrap !important;;           /* Không xuống dòng nếu quá dài */
}

.sao-image {
  background-repeat: no-repeat;
  background-position: center left;
  margin: 4px auto;
  height: 18px; /* Thay đổi chiều cao ở đây */
  width: auto; /* Thêm chiều rộng nếu cần */
  clear: both;
  background-size: contain; /* Thử tiếp tục với contain */
}

a {
    color: #8B4513; /* Màu nâu cho chữ */
    text-decoration: none; /* Bỏ gạch chân liên kết */
    transition: color 0.3s ease; /* Hiệu ứng chuyển màu cho chữ */
}

a:hover {
    color: #D2B48C; /* Màu nâu nhạt khi hover */
}
.chuthuong {
			text-transform: lowercase;
            
        }
.viethoachu {
			
            text-transform: capitalize; /* Viết hoa chữ cái đầu tiên của mỗi từ */
        }
/* Thiết lập layout cho màn hình nhỏ (mobile) */
@media (max-width: 768px) {
  .col-xs-12 {
    width: 100%;
}
  .col-xs-7 {
    width: 70%;
}

.col-xs-3 {
    width: 30%;
}

    .img-rounded {
        height: 154px; /* Chiều cao cố định nhỏ hơn trên màn hình nhỏ */
        max-width: 108px; /* Giảm kích thước chiều rộng hơn nữa */
    }

}

/* Hiển thị tốt trên màn hình rất nhỏ (smartphone) */
@media (max-width: 576px) {
 .col-xs-12 {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
 .col-xs-7 {
    width: 63%;
}

.col-xs-3 {
    width: 36%;
}
#list-page {
    text-align: center;
    font-size: 18px;
}
.list>.row {
	flex-basis: calc(100% - 2px);
	margin: 1px;
}
#list-page .list>.row>div {
    padding-left: 1px;
    padding-right: 1px
}
/* FIX 2026-08-13: line-height 20px ke thua tu #list-page .list>.row>div (dong 63) qua
   ngan cho font chu ky "tacgiavn" - them line-height rieng, dong bo voi ban desktop. */
#list-page .list>.row>div>div>.author {
    font-size: 18px;
    line-height: 2.2;
    display: block;
    /* FIX 2026-08-14(7): "margin-left:auto" trên 1 khối chỉ đẩy sang phải được NẾU khối
       đó hẹp hơn khung cha - nếu vì lý do gì đó nó không tự rộng 100% khung cha, chữ sẽ
       nằm lửng lơ thay vì sát mép phải thật (người dùng báo cáo kèm ảnh: tác giả/sao/số
       chương không sát mép phải dù đã canh phải). Ép hẳn width:100% để chắc chắn khung
       này luôn rộng bằng khung cha, text-align:right lúc đó mới chắc chắn sát mép. */
    width: 100%;
    box-sizing: border-box;
    /* FIX 2026-08-14(6): "text-align:center" (cũ) làm tác giả không canh phải ở màn hình
       <=576px, trái yêu cầu người dùng "canh phải áp dụng cho các cỡ màn hình". */
	text-align: right;
    overflow: hidden;
	font-family: tacgiavn;
    text-overflow: ellipsis;

}
/* FIX 2026-08-14(6): đồng bộ với yêu cầu "số sao, tác giả, số chương canh phải ở mọi cỡ
   màn hình" - trước đây bị ép giữa (center) riêng ở khoảng <=576px này. */
.totalchuong {text-align: right;}

/* FIX 2026-08-14(6): bỏ "height:160px; max-width:80px" cố định (cũ) - xung đột với
   "aspect-ratio:3/4" đặt ở rule .img-rounded gốc (áp dụng mọi cỡ màn hình theo yêu cầu
   người dùng). Không cần override riêng ở đây nữa: width:100% của cột cha + aspect-ratio
   đã tự cho đúng tỉ lệ 3/4 dù cột hẹp lại ở màn hình nhỏ. */
/* FIX 2026-08-13: font "nguechngoac" (VLOLDTYPEWRITER) - them line-height rieng thay vi
   ke thua 1.8 tu ban desktop, dam bao du khong gian du la font nao dang duoc dung. */
#list-page .list>.row>div>div>.truyen-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 2.6;
    margin-top: 0;
    margin-bottom: 10px;
	font-family: nguechngoac;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
}
/* =====================
     Pagination (matches RenderPagination in .cs)
  ===================== */
  .pagination-container { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 6px !important; margin: 15px 0 !important; }
  
  .page-btn, .page-number, .current-page, .page-btn-disabled {
    padding: 6px 10px !important;
    border: 1px solid #DAA520 !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    transition: all .2s !important;
    cursor: pointer !important;
  }
  
  .page-btn, .page-number { background: #ececc7 !important; color: #6b5a32 !important; border-color: #DAA520 !important; }
  .page-btn:hover, .page-number:hover { background: #bcbf9b !important; border-color: #B8860B !important; }
  .current-page { background: #b9ad90 !important; color: #fff !important; border-color: #B8860B !important; cursor: default !important; }
  .page-btn-disabled { background: #F5F5F5 !important; color: #999 !important; border-color: #CCC !important; cursor: not-allowed !important; }
  
  .goto-container { text-align: center !important; margin-top: 10px !important; width: 100% !important; display: block !important; }
  .page-input { padding: 5px 10px !important; border: 1px solid #DAA520 !important; border-radius: 4px !important; width: 100px !important; font-size: 12px !important; margin-right: 5px !important; text-align: center; }
  .goto-btn { padding: 5px 12px !important; border: 1px solid #B8860B !important; border-radius: 4px !important; background: #b9bd90 !important; color: #fff !important; font-weight: 700 !important; cursor: pointer !important; font-size: 12px !important; transition: background .2s !important; }
  .goto-btn:hover { background: #A52A2A !important; }
  
  .flex-center { display: flex; justify-content: center; }
  .flex-align-center { display: flex; align-items: center; }
  
  /* Optional page-numbers (static text block under pagination) */
  .page-numbers { font-size: .95rem; color: #555; }
  .pagination-wrapper {
    clear: both;
    width: 100%;
    margin-top: 20px;
    text-align: center;
}
/* Khối sidebar chung */
.sidebar-block {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f1f3ee;
    border: 2px solid #ddd;
    border-radius: 5px;
}

/* Tiêu đề khối */
.sidebar-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ccc;
    color: #333;
}

/* Danh sách truyện */
.truyen-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.truyen-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

.truyen-thumb img {
    width: 50px;
    height: 65px;
    object-fit: cover;
    border-radius: 3px;
    margin-right: 8px;
    border: 1px solid #ccc;
}

.truyen-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Tên truyện trong sidebar */
.sidebar-block .truyen-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0066cc;
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 2px;
    transition: color .25s ease, transform .25s ease, text-shadow .25s ease, background-size .25s ease;
    
    /* Gạch chân trượt khi hover */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
}

/* Hover/focus: đổi màu, trượt nhẹ sang phải, gạch chân xuất hiện */
.sidebar-block .truyen-title:hover,
.sidebar-block .truyen-title:focus-visible {
    color: #004a99;
    transform: translateX(2px);
    text-shadow: 0 1px 0 rgba(0,0,0,0.05);
    background-size: 100% 1px;
    outline: none;
}

/* Đồng bộ: hover cả item thì tiêu đề cũng hiệu ứng (khi rê lên ảnh) */
.sidebar-block .truyen-item:hover .truyen-title {
    color: #004a99;
    transform: translateX(2px);
    background-size: 100% 1px;
}


.truyen-stars img {
    height: 14px;
    margin-bottom: 2px;
}

.truyen-views {
    font-size: 12px;
    color: #777;
}
.truyen-meta {
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}

.truyen-meta .icon {
    margin-right: 3px;
}
/* Áp dụng riêng cho ảnh nhỏ trong sidebar */
.sidebar-block .truyen-thumb img {
    width: 50px;
    height: 65px;
    object-fit: cover;
    border-radius: 3px;
    margin-right: 8px;
    border: 1px solid #ccc;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-origin: left center; /* điểm xoay ở cạnh trái */
}

/* Hiệu ứng nghiêng sang trái khi hover */
.sidebar-block .truyen-thumb img:hover {
    transform: perspective(400px) rotateY(-15deg) scale(1.05);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}
.img-ebook {
    display: block;          /* biến ảnh thành block để margin auto hoạt động */
    margin-left: auto;       /* căn giữa ngang */
    margin-right: auto;      /* căn giữa ngang */
    margin-bottom: 18px;      /* khoảng cách với phần bên dưới */
    margin-top: 18px;
}

/* ==========================================================================
   Man hinh nho: gian rong danh sach truyen (#list-page) sat mep, GIU anh bia +
   tieu de/tac gia NAM CANH NHAU thay vi bi xep chong xuong 2 hang (theo yeu cau
   nguoi dung 2026-08-04: "khung chứa ảnh tên truyện bị co lại 2 bên nhiều quá...
   tên truyện không bị đẩy xuống dưới"). Nguyen nhan that: rule chung trong
   base.css (@media max-width:767px) ep ".col-xs-3"/".col-xs-7" thanh
   "width:100%!important; display:block!important" - dung cho da so truong hop
   khac tren site nhung lam vo bo cuc anh-canh-chu rieng cua the loai truyen.
   Ghi de CU THE HON (chi trong pham vi #list-page) de thang rule chung do,
   khong dong đến rule chung (tranh anh huong noi khac dang dung dung y).
   ========================================================================== */
@media (max-width: 767px) {
    .danhsach,
    .list {
        padding-left: 0;
        padding-right: 0;
    }

    #list-page .list > .row {
        /* base.css co san rule ".list > .row { flex-direction: column !important; }"
           (ben trong khoi @media rieng, comment "Ngoại trừ các row bên trong danh sách
           truyện thì xếp dọc bình thường") - day chinh la nguyen nhan THAT SU khien anh
           bia bi day len tren cung, tieu de/tac gia bi day xuong duoi thanh 1 the doc,
           du cot .col-xs-3/.col-xs-7 da duoc chinh do rong o duoi - vi row CHA van dang
           "column" nen do rong cot khong con y nghia (loi nguoi dung bao lai lan 2,
           2026-08-04: "khung chứa nội dung lại bị co bề ngang", "tên truyện không bị
           đảy xuống dưới"). Can them "#list-page" (ID) vao truoc de thang duoc specificity
           cua rule kia (".list > .row" = 2 class, "#list-page .list > .row" = 1 ID + 2
           class - cao hon). */
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
        flex: 0 0 calc(100% - 4px) !important;
        padding-left: 2px;
        padding-right: 2px;
    }

    /* FIX 2026-08-14(10): "width:76px" co dinh (cu) tung hop ly khi khung the truyen
       con bi gioi han "max-width:1000px" (da bo o Index.cshtml), nhung gio hang rong
       het co the (yeu cau (a)), 76px co dinh nhin qua nho/mat can doi so voi ca the
       rong (nguoi dung bao lai kem anh chup). Doi sang % (giong desktop, 25%/75%) de
       anh bia tu gian theo do rong that cua the - "aspect-ratio:3/4" tren .img-rounded
       (khong doi, ap dung moi cỡ man hinh) tu lo phan chieu cao tuong ung, khong can
       "max-height" co dinh (cu) nua vi no chi cat ngang khi anh gian to len. */
    #list-page .list > .row > .col-xs-3 {
        width: 25% !important;
        flex: 0 0 25% !important;
        display: flex !important;
        height: auto !important;
        padding-left: 0 !important;
        padding-right: 6px !important;
    }

        #list-page .list > .row > .col-xs-3 img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

    #list-page .list > .row > .col-xs-7 {
        width: 75% !important;
        flex: 1 1 auto !important;
        display: block !important;
        padding-right: 4px !important;
    }

    /* Ten truyen/tac gia qua dai: TU DONG XUONG DONG, khong tran khung (yeu cau
       nguoi dung: "tên hoặc tác giả quá dài thì tự động xuống hàng không tràn
       khung") - ghi de "white-space:nowrap" + "text-overflow:ellipsis" chung o
       tren (dung cho 1 dong) rieng cho man hinh nho, cho phep toi da 2 dong. */
    #list-page .list > .row > div {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
    }

    /* FIX 2026-08-13(3): o khoang man hinh nay (577-767px), overflow:hidden +
       -webkit-line-clamp (can cho hieu ung cat "...") cat mat net vuot cua chu
       hoa dau tien trong font "music" (vd chu "T" thanh mang vo hinh) - da kiem
       chung bang cach tat overflow: chu hien dung ngay. Fix dung: them
       padding-top de danh cho net vuot ĐỦ khong gian TRUOC khi bi line-clamp
       cat, VAN GIU nguyen font "music" va tinh nang cat "...". Khong dong den
       #list-page .list>.row>div>div>.truyen-title o cac khoang man hinh khac
       (768px+ dung line-height 2.6 da du, <=576px dung font khac + overflow
       visible - ca 2 khong bi loi nay). */
    #list-page .list > .row > div > div > .truyen-title {
        font-size: 16px;
        line-height: 1.4;
        padding-top: 20px;
        -webkit-line-clamp: 3;
    }

    /* FIX 2026-08-14(6): "text-align:left; margin-left:0" (cũ) làm tác giả/sao/số
       chương dạt sang trái ở khoảng màn hình 577-767px, trái yêu cầu người dùng "canh
       phải (nằm sát lề bên phải) áp dụng cho các cỡ màn hình". Đổi sang phải + khôi phục
       margin-left:auto (giống bản desktop) để đẩy sát lề phải; vẫn giữ word-break để tên
       dài không tràn khung (yêu cầu cũ 2026-08-13, không đổi). */
    #list-page .list > .row > div > div > .author,
    #list-page .list .totalchuong {
        text-align: right;
        margin-left: auto;
        white-space: normal;
        word-break: break-word;
    }

    /* FIX 2026-08-14(9): man hinh nho van bi tac gia/sao/so chuong dat sang trai
       (nguoi dung bao lai kem anh chup), du rule ngay tren da doi text-align:right.
       Nguyen nhan THAT: base.css co 1 khoi "FIX LOI CO RUM TREN MOBILE" (cung
       @media max-width:767px) ep thang ".author, .totalchuong {text-align:left
       !important; margin-left:0 !important}" - dung !important nen thang moi rule
       khong !important o tren, bat ke thu tu hay do dac hieu. Phai dung chinh
       !important + do dac hieu cao hon (them .list-truyen + .col-xs-7) de thang lai. */
    #list-page .list.list-truyen > .row > .col-xs-7 .author,
    #list-page .list.list-truyen > .row > .col-xs-7 .totalchuong {
        text-align: right !important;
        margin-left: auto !important;
    }
}