/* =========================================================
   Trang Thơ - diện mạo riêng (hồng/rose), phân biệt với Trang Truyện.
   Chỉ load trong Areas/TrangTho/Views/Shared/_Tholayout.cshtml.
   Nền chính (.nenthochinh / .nenthotrai) đã có sẵn trong base.css,
   file này chỉ bổ sung phần base.css/danhsach.css chưa có: khối
   thanh sắp xếp và bảng mẫu tự/tác giả.
   ========================================================= */

/* ---- Thanh chuyển đổi cách sắp xếp (Mới đăng / Xem nhiều / Đánh giá / Ngẫu nhiên) ---- */
.tho-sort-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 22px;
}

.tho-sort-tab {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    background-color: #fbe4ec;
    color: #99435f !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #f0b8cc;
    box-shadow: 0 1px 3px rgba(153, 67, 95, 0.15);
    transition: all .2s ease;
}

.tho-sort-tab:hover {
    background-color: #f6c9d9;
    transform: translateY(-1px);
}

.tho-sort-tab.active {
    background-color: #cc6c8c;
    color: #fff !important;
    border-color: #cc6c8c;
}

/* Man hinh nho: khong cho xuong dong (day noi dung ben duoi xuong) - thu gon
   nut va cho truot ngang thay vi wrap. */
@media (max-width: 600px) {
    .tho-sort-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        margin: 4px -4px 18px;
    }

    .tho-sort-tabs::-webkit-scrollbar {
        display: none;
    }

    .tho-sort-tab {
        flex-shrink: 0;
        padding: 6px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* ---- Bảng mẫu tự / tên thi sĩ (thay cho mautu1.ascx / tacgia1.ascx) ---- */
.box-chucai {
    padding: 14px;
    margin-bottom: 12px;
}

.box-title {
    font-size: 15px;
    font-weight: bold;
    color: #8a4b62;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.bang-chu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.bang-chu-container .chu-box {
    min-width: 28px;
    text-align: center;
}

/* ---- Điểm nhấn hồng cho các khối sidebar dùng chung (điểm số, tác giả...) ---- */
.nenthotrai .sidebar-title {
    color: #8a4b62;
    border-bottom-color: #f0b8cc;
}

/* ---- Hộp gợi ý tìm kiếm nhanh -----------------------------------------------
   Trước đây thiếu 2 thứ:
   1) Không có nền -> trong suốt, khó đọc.
   2) Không "position: absolute" -> box nằm THEO DÒNG trong form, đẩy sidebar/
      nội dung bên dưới xuống khi hiện ra (bug trong ảnh chụp). Bên Truyện xử lý
      đúng bằng rule "nav#main .searchform #searchSuggestions { position:absolute }"
      nhưng đó là ID riêng của Truyện - Tho dùng #tho-searchSuggestions nên không
      khớp selector đó, phải khai báo lại ở đây. */
#tho-search-box {
    position: relative;
}

.suggestions-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fdfaf6;
    border: 1px solid #e2c6d1;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    margin-top: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.suggestions-box .suggestion-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.suggestions-box .suggestion-list li {
    padding: 8px 14px;
    border-bottom: 1px solid #f1e3e8;
}

.suggestions-box .suggestion-list li:last-child {
    border-bottom: none;
}

.suggestions-box .suggestion-list a {
    color: #99435f;
    font-weight: bold;
    text-decoration: none;
}

.suggestions-box .suggestion-list a:hover {
    text-decoration: underline;
}

.suggestions-box .text-muted {
    color: #888;
    font-size: 12px;
}

/* ---- Thẻ bài thơ trong danh sách chính (mới đăng/xem nhiều/mẫu tự/tìm kiếm/tác phẩm) ----
   Thay cho .danhsach/.list-truyen/.col-xs-9 (bên Truyen) - thiếu định nghĩa .col-xs-9
   khiến cột nội dung không có bề rộng, gây bố cục lệch/chật như phản ánh. */
.tho-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tho-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 20px;
    margin-bottom: 14px;
    /* Trong suốt - nền trang (nenthochinh) đã hồng sẵn, khung chỉ cần nổi nhẹ
       bằng viền + đổ bóng, không cần tô màu đặc chồng lên màu nền bên dưới. */
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(153, 67, 95, 0.12);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.tho-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 12px rgba(153, 67, 95, 0.18);
}

.tho-item-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tho-item-stars img {
    height: 16px;
}

.tho-item-title {
    /* Dùng đúng font "music" mà Truyện dùng cho tựa truyện trong danh sách
       (#list-page .list>.row>div>div>.truyen-title trong danhsach.css) */
    font-family: music, "Times New Roman", serif;
    font-size: 20px;
    font-weight: bold;
    color: #7a3a52 !important;
    text-decoration: none !important;
    line-height: 1.5;
}

.tho-item-title:hover {
    color: #cc6c8c !important;
}

.tho-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    text-align: right;
}

.tho-item-author {
    /* Doi tu "tacgiavn" (DancingScript-Bold, day/cung) sang cung font mem mai
       dung cho tua bai (ThoTuaFont) de dong bo, khong con nang/cung nhu Truyen. */
    font-family: 'ThoTuaFont', 'Brush Script MT', cursive;
    font-size: 19px;
    font-weight: normal;
    color: #99435f !important;
    text-decoration: none !important;
}

.tho-item-author:hover {
    text-decoration: underline !important;
}

.tho-item-views {
    display: inline-block;
    font-size: 13px;
    color: #555;
    background: #fff;
    border: 1px solid #eab8c8;
    border-radius: 12px;
    padding: 3px 12px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .tho-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .tho-item-side {
        align-items: flex-start;
        text-align: left;
    }
}

/* ---- Trang đọc bài thơ: nền trang trí lá rơi (phải) + hoa cỏ (dưới) --------
   .nentho1/.nentho2 đã có sẵn trong base.css (dùng đúng ảnh của bản .aspx cũ:
   nentho1.png = lá rơi, 12cohoa.png = hoa cỏ) nhưng 2 class này không tự có
   chiều cao - nếu bài thơ ngắn thì khung quá thấp, ảnh trang trí gần như
   không thấy. Đặt min-height để bài ngắn vẫn thấy rõ trang trí, bài dài thì
   không ảnh hưởng vì nội dung tự đẩy cao hơn mức tối thiểu này. */
#vntqReaderBox .nentho2 {
    min-height: 340px;
}

#vntqReaderBox .nentho1 {
    margin-top: 10px;
}

/* ---- Chế độ tối: nội dung bài thơ cũ có màu chữ gắn cứng trong HTML
   (vd <span style="color:#0000cd">) từ dữ liệu nhập tay nhiều năm trước -
   các rule .vntq-dark-mode chỉ đổi màu container + thẻ <p>, không chạm tới
   span/font/div có màu inline nên chữ vẫn giữ màu cũ, chói và lệch tông trên
   nền đen. Ép toàn bộ hậu duệ về cùng màu xám ấm khi bật chế độ tối. */
.vntq-dark-mode #vntqTextContent,
.vntq-dark-mode #vntqTextContent * {
    color: #b3b3a1 !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

/* ---- Chú thích "Được bạn ... đưa lên" dưới bài thơ - chưa đổi màu ở chế độ tối.
   Rule .vntq-dark-mode blockquote gốc (trong _Header.cshtml) đáng lẽ đã áp dụng vì
   #vntqReaderBox/body đều được gắn class vntq-dark-mode, nhưng khai báo lại tường
   minh ở đây cho chắc chắn, tránh phụ thuộc thứ tự nạp CSS giữa các file. */
.vntq-dark-mode blockquote {
    background: #2a2a24 !important;
    border-color: #4a4a3f !important;
}

.vntq-dark-mode blockquote p {
    color: #d1d1c4 !important;
    background-image: none !important;
}

/* ---- Nền hồng "nenthochinh" (bokeh) và "nentieude3" (thiên nga/trái tim, nentho.png)
   chỉ hợp chế độ sáng - tắt hẳn khi bật chế độ tối để không đá màu với nền đen. */
#vntqReaderBox.vntq-dark-mode,
.vntq-dark-mode .nentieude3 {
    background-image: none !important;
}

/* ---- Tên bài thơ trên trang đọc: font thanh mảnh bay bướm (khác hẳn font to dày
   "tuadevn" bên Truyện), màu tím nhạt bán trong suốt hoà vào nền hồng thay vì
   đặc/nổi cứng. Font "UVNBayBuomHep" đã có sẵn trong wwwroot/fonts (chưa từng khai
   báo @font-face) - khai báo rồi dung rieng cho tieu de tho, khong dung ten
   "baybuom" co san vi ten do da gan voi file floral.ttf khac cua Truyen. */
@font-face {
    font-family: 'ThoTuaFont';
    src: url('/fonts/UVNBayBuomHep_R.TTF');
    font-weight: normal;
    font-style: normal;
}

#vntqReaderBox .vntq-reader-title {
    font-family: 'ThoTuaFont', 'Brush Script MT', cursive !important;
    font-weight: normal !important;
    color: rgba(155, 89, 182, 0.55) !important;
    text-shadow: none !important;
    letter-spacing: 0.5px;
    margin-bottom: 22px !important;
}

/* Vung tieu de + thong ke thoang hon (khong gian rong ra quanh ten bai) */
#vntqReaderBox .vntq-author-top {
    margin-bottom: 6px;
}

#vntqReaderBox .vntq-stats-container {
    margin-bottom: 28px;
}

/* ---- Cac tieu de khac (trang Tim kiem, Tac Pham, Tac Gia, Mau Tu...) dung chung
   font mem mai voi tua bai tho, thay vi font day/cung mac dinh (Bookerly-Bold). */
.chuto50,
.chuto40,
.chuto30,
.chutieude {
    font-family: 'ThoTuaFont', 'Brush Script MT', cursive !important;
    font-weight: normal !important;
}

/* Ghi chu: sidebar "chim xuong" thap hon cot noi dung gio dung dung banner thoca.gif +
   khoang trong that o dau _SidebarTho.cshtml (giong ban .aspx cu), khong con can
   margin-top ep cung o day nua. */

/* ---- Khoi "Cung mot Thi Si" cuoi trang doc - truoc day chi la danh sach chu
   trang, rong trai va it thong tin. Doi sang luoi the nho co sao + luot xem. */
.tho-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.tho-related-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(204, 108, 140, 0.25);
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}

.tho-related-item:hover {
    background: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}

.tho-related-title {
    font-family: 'ThoTuaFont', 'Brush Script MT', cursive;
    font-size: 17px;
    color: #7a3a52 !important;
    line-height: 1.3;
}

.tho-related-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tho-related-meta img {
    height: 13px;
}

.tho-related-views {
    font-size: 12px;
    color: #888;
}

.tho-related-more {
    text-align: center;
    margin-top: 14px;
}

.tho-related-more a {
    font-size: 14px;
    font-weight: bold;
    color: #99435f !important;
    text-decoration: none !important;
}

.tho-related-more a:hover {
    text-decoration: underline !important;
}

.vntq-dark-mode .tho-related-item {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.vntq-dark-mode .tho-related-title {
    color: #d1a3b8 !important;
}

@media (max-width: 480px) {
    .tho-related-grid {
        grid-template-columns: 1fr;
    }
}