/* ==========================================================================
   site.css — lớp của MÌNH, nạp SAU CÙNG
   ==========================================================================

   Nguyên tắc: base.css và theme.css là bộ CSS của giao diện mẫu, giữ nguyên để
   bố cục khớp từng pixel. File này CHỈ thêm những thứ mẫu không có:

     • trạng thái "chưa có dữ liệu" (chưa có banner, chưa có ảnh nhân vật…)
     • vài chỗ mẫu vẽ cứng bằng ảnh mà mình cần vẽ bằng CSS
     • trang tin / trang bài viết — mẫu có nhưng nằm ở file CSS khác

   KHÔNG sửa bố cục ở đây. Muốn đổi bố cục thì sửa markup cho khớp mẫu.
   ========================================================================== */

/* -------------------------------------------------- chỗ trống ---------- */

/* Chưa có banner: giữ đúng khung slider để lưới không sập, thay vì để trống
   một mảng làm hai cột lệch nhau. */
.slide-trong {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #2a1a10, #4a2f1a);
    color: rgba(255, 255, 255, .45);
    font-style: italic;
}

/* Nút chọn nhân vật khi chưa có ảnh icon. */
.thumb-so {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    border: 2px solid rgba(255, 255, 255, .5);
    color: #fff;
    font-weight: 700;
}

/* Nhắc admin điền thông tin công ty — chỉ hiện khi ô đó còn trống. */
.chua-dien {
    opacity: .45;
    font-style: italic;
}

/* -------------------------------------------------- khối tải game ------ */

/* Rút còn HAI ô, XẾP NGANG: 18+ bên trái, nút tải bên phải.
 *
 * KÍCH THƯỚC BÁM ĐÚNG BẢN MẪU — đây là chỗ đã làm hỏng hai lần.
 *
 * Đo trên bản mẫu (màn 1600px, 1em = 13,33px):
 *     khung      36,6 × 11,1em, tỉ lệ 3,31:1
 *     logo        9em (biểu tượng vuông)
 *     mỗi nút    12 × 4em, xếp lưới 2×2
 *
 * Vì sao xếp ngang chứ không xếp dọc: cái làm nên vẻ đẹp của mẫu là DẢI NGANG
 * THANH MẢNH 3,31:1. Hai nút xếp dọc thì nội dung cao-hẹp, khung buộc phải
 * vuông lại (đo được 2,0:1) — nhìn cục mịch, và đó chính là điều bị chê. Xếp
 * ngang: logo 9,4em + hai nút 21em ⇒ khung ~3,2:1, gần như trùng mẫu.
 *
 * Cỡ co nhỏ hơn mẫu một bậc (~14%): mẫu nhét vừa BỐN nút nên cụm to là đúng;
 * mình chỉ có hai nút, giữ nguyên cỡ ấy thì cụm chiếm quá nhiều bề ngang so
 * với lượng nội dung trong nó.
 *
 * Muốn quay lại xếp dọc: đổi `grid-template-columns` về `1fr` và `width` về
 * `12em`. Không phải sửa gì thêm. */
.block-download-content.tai-gon {
    width: fit-content;
    aspect-ratio: auto;
    background-size: 100% 100%;
    padding: .9em .85em;
    gap: .85em;
}

/* Logo của mình là chữ nằm ngang (1809/1424) chứ không phải biểu tượng vuông
   như mẫu, nên lấy 11em cho cân với chiều cao một hàng nút. */
.tai-gon-logo {
    width: 9.4em;
    flex-shrink: 0;
}

/* Ảnh phải kéo cho đầy ô: lớp `w-image-block` nằm trên chính thẻ <img> chứ
   không phải thẻ bọc, nên luật `.w-image-block > img { width: 100% }` của
   theme.css không khớp và ảnh giữ nguyên bề ngang thật. */
.tai-gon-logo img {
    width: 100%;
    height: auto;
}

.tai-gon-nut {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* xếp ngang — xem ghi chú bên trên */
    gap: .5em;
    width: 21em;                      /* hai ô của mẫu, co lại 14% */
    flex-shrink: 0;
}

/* Nút tải nổi lên một chút cho biết là bấm được — ô 18+ thì không. */
.tai-gon-nut a {
    transition: filter .2s ease, transform .2s ease;
}

.tai-gon-nut a:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

/* -------------------------------------------------- menu ngang --------- */

/* Thay cho nút ☰ + menu trượt + cột nổi bên phải của mẫu (xem ghi chú ở
   layouts/main.php). Viết tay hoàn toàn, không dựa vào lớp nào của base.css:
   base.css là bản dựng Tailwind SẴN CÓ của trang gốc, chỉ chứa đúng những lớp
   trang gốc từng dùng — lớp mới thêm vào sẽ im lặng không có tác dụng gì.

   Dáng: thanh TRONG MỜ cho art nền ánh qua (không phải dải đặc dán đè lên),
   các mục dàn đều trong một khung giữa trang, chữ hoa đậm có giãn chữ.

   Không có logo và không có dấu trước tên mục — chỉ chữ.

   Số mục KHÔNG cố định: admin thêm bớt ở *Menu → Menu ngang trên đầu*. Nên
   không chỗ nào ở đây được đặt bề rộng theo số mục; `space-between` tự chia
   lại, thêm hay bớt bao nhiêu mục cũng cân.

   DÙNG `fixed` CHỨ KHÔNG `sticky` — đã thử `sticky` và nó trôi mất. `sticky`
   dính theo khung cuộn của tổ tiên gần nhất, mà cả `.page-wrapper`
   (overflow:hidden) lẫn `body` (overflow-x:hidden) của theme.css đều dựng nên
   khung cuộn không bao giờ cuộn. `fixed` bám thẳng vào khung nhìn nên không
   dính vào chuyện đó — chỉ hỏng khi tổ tiên có transform/filter, mà ở đây
   không có. Đã đo bằng trình duyệt thật: cuộn 1800px, mép trên thanh vẫn ở 0.

   Đổi lại phải tự chừa chỗ: thanh ra khỏi dòng chảy thì nội dung chui xuống
   dưới nó. `.topnav` cao đúng --topnav-cao và `body` chừa padding-top đúng
   bằng chừng ấy — sửa một số thì số kia đi theo, khỏi lệch. */
:root {
    --topnav-cao:  4.6em;
    --topnav-sang: #ffd24d;
    --topnav-chu:  #ffeccd;
}

body { padding-top: var(--topnav-cao); }

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topnav-cao);
    /* Trên khối nội dung (z-10) và slider, dưới modal (9999). */
    z-index: 40;

    /* Trong mờ, đậm dần lên trên: mép trên cần đặc hơn để chữ nổi, mép dưới
       loãng ra cho hoà vào art. Đặc hoàn toàn thì thành dải đen dán đè. */
    background: linear-gradient(180deg, rgba(44, 10, 12, .92), rgba(44, 10, 12, .76));
    border-bottom: 1px solid rgba(232, 180, 92, .5);
    box-shadow: 0 .18em .8em rgba(0, 0, 0, .38);
}

/* Có làm mờ nền thì giảm độ đặc xuống, cho art ánh qua nhiều hơn. */
@supports (backdrop-filter: blur(6px)) {
    .topnav {
        background: linear-gradient(180deg, rgba(44, 10, 12, .84), rgba(44, 10, 12, .66));
        backdrop-filter: blur(5px);
    }
}

/* Vạch sáng mảnh ngay dưới viền — chỗ giao giữa thanh và art trông có chủ ý
   hơn là một đường cắt phẳng. */
.topnav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.18em;
    height: .18em;
    background: linear-gradient(90deg, rgba(232, 180, 92, 0), rgba(232, 180, 92, .55), rgba(232, 180, 92, 0));
    pointer-events: none;
}

/* Bó các mục vào một khung giữa trang. Trải hết bề ngang màn 1800px thì hai
   mục đầu và cuối dạt ra sát mép, nhìn rời rạc. */
.topnav-in {
    position: relative;
    max-width: 68em;
    height: 100%;
    margin: 0 auto;
    padding: 0 1.5em;
    display: flex;
    align-items: center;
}

.topnav-ds {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    /* Dàn đều — tự chia lại khi admin thêm hoặc bớt mục. */
    justify-content: space-between;
    gap: .5em;
    /* Màn hẹp thì cuộn ngang chứ không gập dòng: thanh dính trên đầu mà cao
       lên hai ba dòng là ăn hết màn hình điện thoại. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.topnav-ds::-webkit-scrollbar { display: none; }

.topnav-ds li { height: 100%; flex-shrink: 0; }

.topnav-ds a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 .5em;
    white-space: nowrap;
    color: var(--topnav-chu);
    font-weight: 700;
    font-size: 1.25em;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
    text-shadow: 0 .08em .18em rgba(0, 0, 0, .65);
    transition: color .18s ease;
}

.topnav-ds a:hover,
.topnav-ds a:focus-visible { color: var(--topnav-sang); }

/* Trang đang mở: chỉ đổi màu chữ. Không gạch chân — thanh trong mờ, một vạch
   chân nằm đè lên art nhìn như vết bẩn. */
.topnav-ds a.dang-o {
    color: var(--topnav-sang);
    text-shadow: 0 0 .6em rgba(255, 210, 77, .55), 0 .08em .18em rgba(0, 0, 0, .65);
}

/* --- màn hẹp --- */

/* DƯỚI 1024px THANH PHẢI THÔI ĂN THEO `em` CỦA THEME.
 *
 * theme.css để cỡ chữ thân trang theo bề ngang màn hình, và hai bên mốc
 * 1024px hai bậc lệch nhau tới bốn lần — đo được:
 *
 *     1784px → 1em = 14,9px        (bản desktop, .8333vw)
 *     1264px → 1em = 10,5px
 *     1007px → 1em = 34,0px        (bản mobile, ~3,38vw)
 *      844px → 1em = 28,5px
 *      500px → 1em = 16,9px
 *
 * Cả bố cục của mẫu được vẽ theo cái thang ấy nên nó đúng với mẫu; nhưng
 * thanh menu thì không: để nguyên `4,6em` là ở 1007px nó cao 157px, chiếm gần
 * một phần tư màn hình. Nên từ đây trở xuống đặt thẳng cỡ chữ cho `.topnav`
 * và tính --topnav-cao bằng px — thanh cao cố định, không nhảy theo bề ngang
 * nữa. Trên 1024px vẫn dùng `em` để thanh giãn cùng bố cục. */
@media (max-width: 1023px) {
    :root { --topnav-cao: 54px; }

    .topnav    { font-size: 15px; }
    .topnav-in { max-width: none; padding: 0 .7em; }

    /* Dồn trái + cuộn ngang. Dàn đều trong khung hẹp chỉ làm chữ dính nhau. */
    .topnav-ds { justify-content: flex-start; gap: .2em; }
    .topnav-ds a { font-size: 1em; padding: 0 .55em; letter-spacing: .02em; }
}

@media (max-width: 480px) {
    :root { --topnav-cao: 48px; }

    .topnav    { font-size: 13px; }
    .topnav-ds a { padding: 0 .45em; }
}

/* -------------------------------------------------- slider ------------- */

/* Chấm chỉ số: mẫu để Swiper tự vẽ, mình vẽ tay vì không nạp Swiper JS. */
.swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6em;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: .4em;
}

.swiper-pagination button {
    width: .7em;
    height: .7em;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    transition: background-color .2s ease, transform .2s ease;
}

.swiper-pagination button.active {
    background: #fff;
    transform: scale(1.3);
}

/* Slider nhân vật: các slide chồng lên nhau, chuyển bằng độ mờ (mẫu dùng hiệu
   ứng fade của Swiper; mình làm bằng CSS cho khỏi nạp cả thư viện).

   MỌI slide đều tuyệt đối. Chiều cao lấy từ `.character-slide` — theme.css của
   mẫu đã đặt sẵn aspect-ratio 1000/625 (mobile) và 1920/600 (desktop) cho nó.

   Bản đầu để slide thứ nhất `position: relative` cho khung có chiều cao; hậu
   quả là nó vẫn chiếm chỗ trong dòng chảy và ảnh của nó chồng lên slide đang
   hiện — nhìn ảnh chụp thấy hai dòng chữ mô tả đè lên nhau. */
.character-slide .swiper-wrapper { position: relative; height: 100%; }

.character-slide .swiper-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
}

.character-slide .swiper-slide.active { opacity: 1; z-index: 1; }

/* `isolation: isolate` là thứ làm cho dải chọn nhân vật HIỆN RA.

   `.character-slide` chỉ có `position: relative` mà không có z-index, nên nó
   KHÔNG tạo ngữ cảnh xếp lớp riêng. Cái `z-index: 1` ở dòng trên vì thế leo
   thẳng ra ngữ cảnh gốc và đè lên `.character-thumb-slide` — vốn là thẻ em kế
   sau, z-index auto. Kết quả: ảnh nhân vật che mất dải chọn, người dùng không
   bấm được cái nào.
   
   `isolation: isolate` nhốt z-index kia lại bên trong. */
.character-slide { isolation: isolate; }

/* Và nâng hẳn dải chọn lên trên cho chắc — nó cố ý nằm đè lên ảnh. */
.character-thumb-slide { z-index: 2; }

.character-thumb-slide .swiper-wrapper { display: flex; gap: .5em; }

.character-thumb-slide .swiper-slide {
    flex: 1;
    cursor: pointer;
    transition: transform .2s ease;
}

.character-thumb-slide .swiper-slide:hover { opacity: .9; }

/* Không tự vẽ viền cho thumb: theme.css của mẫu đã lo phần nhìn (nền đỏ bo
   tròn 10em, và làm tối những cái chưa chọn). Thêm viền của mình vào là lệch
   khỏi mẫu. Chỉ cần cho biết là bấm được. */
.character-thumb-slide button {
    width: 100%;
    cursor: pointer;
}

.character-thumb-slide .swiper-slide.active { opacity: 1; }

/* -------------------------------------------------- trang tin ---------- */
/* Mẫu có trang tin riêng ở c/tin-tuc.html với bộ CSS khác. Ở đây dùng lại
   biến màu của mẫu (--w-primary/--w-secondary) để hai bên đồng bộ. */

.trang-con {
    position: relative;
    z-index: 2;
    min-height: 60vh;
    padding: 5em 0 3em;
}

@media (min-width: 1024px) {
    .trang-con { padding-top: 8em; }
}

.trang-con .khung {
    background: rgba(255, 255, 255, .96);
    border-radius: .5em;
    padding: 1.5em;
    box-shadow: 0 .2em 1em rgba(0, 0, 0, .15);
}

.trang-con h1 {
    font-size: 1.6em;
    font-weight: 800;
    color: var(--w-secondary);
    margin-bottom: .5em;
}

.duong-dan {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    align-items: center;
    margin-bottom: .8em;
    font-size: .85em;
    color: #fff;
    text-shadow: 0 .08em .3em rgba(0, 0, 0, .8);
}

.duong-dan a:hover { text-decoration: underline; }

.luoi-bai {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

@media (min-width: 640px)  { .luoi-bai { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .luoi-bai { grid-template-columns: repeat(3, 1fr); } }

.the-bai {
    display: block;
    overflow: hidden;
    border-radius: .4em;
    border: 1px solid rgba(5, 55, 141, .2);
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.the-bai:hover {
    transform: translateY(-2px);
    box-shadow: 0 .3em .8em rgba(0, 0, 0, .18);
}

.the-bai .anh {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #e8ddc6, #cbb894);
}

.the-bai .anh img { width: 100%; height: 100%; object-fit: cover; }

.the-bai .than { padding: .7em .9em 1em; }
.the-bai h2 { font-size: 1em; font-weight: 700; color: var(--w-secondary); line-height: 1.4; }
.the-bai p  { margin-top: .3em; font-size: .88em; color: #666; }
.the-bai time { display: block; margin-top: .4em; font-size: .8em; color: #999; }

.phan-trang {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3em;
    margin-top: 1.5em;
}

.phan-trang a,
.phan-trang .hien-tai {
    min-width: 2.4em;
    padding: .45em .8em;
    text-align: center;
    border-radius: .25em;
    background: #fff;
    border: 1px solid rgba(5, 55, 141, .25);
    font-size: .9em;
}

.phan-trang a:hover { background: var(--w-secondary); color: #fff; }
.phan-trang .hien-tai { background: var(--w-primary); color: #fff; font-weight: 700; }

/* -------------------------------------------------- bài viết ----------- */
.bai-viet .tieu-de {
    font-size: 1.6em;
    font-weight: 800;
    line-height: 1.35;
    color: var(--w-primary);
}

.bai-viet .thong-tin {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    align-items: center;
    margin-top: .5em;
    padding-bottom: .8em;
    border-bottom: 1px solid rgba(5, 55, 141, .2);
    font-size: .85em;
    color: #777;
}

.bai-viet .anh-lon { margin: 1em 0; }
.bai-viet .anh-lon img { width: 100%; border-radius: .4em; }

.bai-viet .tom-tat {
    margin: 1em 0;
    padding: .8em 1em;
    border-left: .25em solid var(--w-secondary);
    background: rgba(5, 55, 141, .07);
    font-weight: 600;
}

.noi-dung { line-height: 1.85; margin-top: 1em; }
.noi-dung > * + * { margin-top: .9em; }

.noi-dung h2, .noi-dung h3, .noi-dung h4 {
    font-weight: 700;
    color: var(--w-primary);
    margin-top: 1.4em;
    line-height: 1.4;
}

.noi-dung h2 { font-size: 1.25em; }
.noi-dung h3 { font-size: 1.1em; }
.noi-dung a  { color: var(--w-secondary); text-decoration: underline; }
.noi-dung ul { list-style: disc; padding-left: 1.4em; }
.noi-dung ol { list-style: decimal; padding-left: 1.4em; }
.noi-dung li { margin-top: .3em; }
.noi-dung img { max-width: 100%; height: auto; border-radius: .4em; margin: .5em auto; }

.noi-dung blockquote {
    padding: .6em 1em;
    border-left: .25em solid var(--w-secondary);
    background: rgba(5, 55, 141, .06);
    font-style: italic;
}

/* Bảng người soạn dán vào thường rộng hơn khung — cho cuộn TRONG bảng, không
   để nó đẩy cả trang trượt ngang. */
.noi-dung table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid rgba(5, 55, 141, .25);
}

.noi-dung th, .noi-dung td { padding: .5em .8em; border: 1px solid rgba(5, 55, 141, .2); }
.noi-dung th { background: var(--w-secondary); color: #fff; font-weight: 700; }
.noi-dung tr:nth-child(even) td { background: rgba(5, 55, 141, .04); }

.chia-se {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6em;
    margin-top: 1.6em;
    padding-top: 1em;
    border-top: 1px solid rgba(5, 55, 141, .2);
    font-size: .9em;
}

.chia-se a, .chia-se button {
    padding: .35em 1.1em;
    border-radius: 100em;
    background: var(--w-secondary);
    color: #fff;
    font-weight: 600;
    border: 0;
    cursor: pointer;
}

.chia-se a:hover, .chia-se button:hover { filter: brightness(1.2); }

.lien-quan { margin-top: 1.2em; }
.lien-quan h3 {
    font-size: 1em;
    font-weight: 700;
    color: var(--w-primary);
    padding-bottom: .5em;
    border-bottom: 2px solid var(--w-secondary);
}

.lien-quan li a {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: .6em .2em;
    border-bottom: 1px dotted rgba(5, 55, 141, .3);
    font-size: .9em;
}

.lien-quan li a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lien-quan li a time { flex-shrink: 0; color: #999; font-size: .85em; }
.lien-quan li a:hover span { color: var(--w-primary); }

.trong-rong {
    padding: 3em 1em;
    text-align: center;
    color: #888;
    font-style: italic;
}