/*
 * chung.css — Nền tảng dùng chung
 * Đặt lại mặc định trình duyệt, chữ, liên kết, ảnh, nút, phân trang, tiện ích.
 * Không chứa bố cục trang (nằm ở layout.css).
 */

/* ============ 1. Đặt lại mặc định ============ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--phong);
    font-size: var(--co-chu);
    line-height: var(--cao-dong);
    color: var(--mau-chu);
    background: var(--mau-nen);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--khoang-nho);
    line-height: var(--cao-dong-tieu-de);
    font-weight: 700;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1em; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--chuyen);
}
a:hover { color: var(--mau-chinh); }

/* Ảnh: luôn co theo khung chứa, không bao giờ tràn */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

/* ============ 2. Hỗ trợ tiếp cận ============ */

/* Viền khi di chuyển bằng bàn phím — bắt buộc giữ, không được xoá */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mau-phu);
    outline-offset: 2px;
}

/* Chữ chỉ dành cho trình đọc màn hình */
.chi-doc-man-hinh {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Liên kết nhảy thẳng tới nội dung, hiện ra khi bấm phím Tab */
.bo-qua-toi-noi-dung {
    position: absolute;
    top: -100px; left: 8px;
    z-index: 999;
    padding: 10px 18px;
    background: var(--mau-chinh);
    color: var(--mau-chu-dao);
    border-radius: 0 0 var(--bo-goc) var(--bo-goc);
}
.bo-qua-toi-noi-dung:focus { top: 0; color: var(--mau-chu-dao); }

/* ============ 3. Khung chứa ============ */
.khung {
    width: 100%;
    max-width: var(--rong-khung);
    margin: 0 auto;
    padding: 0 16px;
}

/* ============ 4. Khối nội dung ============ */
.khoi {
    background: var(--mau-nen-khoi);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
}

/* ============ 5. Tiêu đề khối (gạch đỏ + tên + Xem tất cả) ============ */
.tieu-de-khoi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--khoang-nho);
    margin-bottom: 14px;
    border-bottom: 1px solid var(--mau-vien);
    padding-bottom: 8px;
}

.tieu-de-khoi__ten {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Vạch đỏ dựng đứng phía trước tên khối */
.tieu-de-khoi__ten::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--mau-chinh);
    border-radius: 2px;
}

.tieu-de-khoi__ten a:hover { color: var(--mau-chinh); }

.tieu-de-khoi__them {
    flex: none;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mau-chinh);
}
.tieu-de-khoi__them:hover { color: var(--mau-chinh-dam); text-decoration: underline; }

/* ============ 6. Nhãn chuyên mục ============ */
.nhan-chuyen-muc {
    display: inline-block;
    padding: 3px 9px;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mau-chu-dao);
    background: var(--mau-chinh);
    border-radius: var(--bo-goc-nho);
}
.nhan-chuyen-muc:hover { background: var(--mau-chinh-dam); color: var(--mau-chu-dao); }

/* ============ 7. Dòng thông tin bài (ngày, lượt xem) ============ */
.thong-tin-bai {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: .75rem;
    color: var(--mau-chu-nhat);
}

.thong-tin-bai__muc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.thong-tin-bai svg {
    width: 13px;
    height: 13px;
    flex: none;
    opacity: .75;
}

/* ============ 8. Khung ảnh giữ tỉ lệ ============ */
/*
 * Cloudinary chỉ đổi kích thước theo chiều rộng, chiều cao để tự động,
 * nên PHP không biết trước chiều cao thật. Dùng aspect-ratio để trình duyệt
 * chừa sẵn chỗ → tránh nội dung nhảy khi ảnh tải xong (điểm CLS).
 */
.khung-anh {
    /* Bắt buộc có display:block — thẻ .khung-anh thường là thẻ <a>, mà thẻ <a>
       mặc định là inline nên aspect-ratio và overflow sẽ không có tác dụng,
       làm ảnh tràn ra ngoài và đè lên nội dung phía dưới. */
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--bo-goc-nho);
    background: linear-gradient(135deg, #dfe3e8, #c9cfd6);
}
.khung-anh > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ti-le-16-9 { aspect-ratio: 16 / 9; }
.ti-le-4-3  { aspect-ratio: 4 / 3; }
.ti-le-1-1  { aspect-ratio: 1 / 1; }

/* Ảnh phóng nhẹ khi di chuột — hiệu ứng duy nhất của theme */
.the-bai:hover .khung-anh > img { transform: scale(1.04); }
.khung-anh > img { transition: transform .3s ease; }

/* ============ 9. Nút ============ */
.nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 600;
    color: var(--mau-chu-dao);
    background: var(--mau-chinh);
    border: 0;
    border-radius: var(--bo-goc);
    cursor: pointer;
    transition: background var(--chuyen);
}
.nut:hover { background: var(--mau-chinh-dam); color: var(--mau-chu-dao); }

.nut--vien {
    color: var(--mau-chu);
    background: transparent;
    border: 1px solid var(--mau-vien);
}
.nut--vien:hover { background: var(--mau-nen-nhat); color: var(--mau-chinh); }

/* ============ 10. Biểu mẫu ============ */
input[type="text"], input[type="search"], input[type="email"],
input[type="url"], input[type="password"], textarea, select {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--mau-chu);
    background: var(--mau-nen-khoi);
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc);
}
input:focus, textarea:focus, select:focus { border-color: var(--mau-phu); }

/* ============ 11. Phân trang kiểu Google ============ */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: var(--khoang-lon) 0;
    padding: 0;
    list-style: none;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0 12px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--mau-chu);
    background: var(--mau-nen-khoi);
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc);
    transition: all var(--chuyen);
}
.page-link:hover {
    color: var(--mau-chinh);
    border-color: var(--mau-chinh);
}

/* Trang đang xem: nổi bật, không bấm được */
.page-link.active {
    color: var(--mau-chu-dao);
    background: var(--mau-chinh);
    border-color: var(--mau-chinh);
    box-shadow: 0 2px 6px rgba(211, 32, 39, .3);
    pointer-events: none;
}

/* Mũi tên đầu/cuối: mờ đi và không bấm được */
.page-link.disabled {
    opacity: .4;
    pointer-events: none;
}

.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 38px;
    color: var(--mau-chu-nhat);
}

/* ============ 12. Tiện ích ============ */
.an { display: none !important; }

/* Cắt tiêu đề còn N dòng, phần thừa hiện dấu … */
.gioi-han-dong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gioi-han-2 { -webkit-line-clamp: 2; }
.gioi-han-3 { -webkit-line-clamp: 3; }
.gioi-han-4 { -webkit-line-clamp: 4; }

/* ============================================================
   13. BA KIỂU THẺ BÀI DÙNG CHUNG TOÀN THEME
   Trang chủ, trang chuyên mục, kết quả tìm kiếm, bài liên quan
   đều chỉ dùng ba kiểu này. Không tạo thêm kiểu thứ tư.
   ============================================================ */

.the-bai__ten {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.4;
}
.the-bai__ten a:hover { color: var(--mau-chinh); }

.the-bai__tom-tat {
    margin: 6px 0 0;
    font-size: .875rem;
    color: var(--mau-chu-nhat);
}

/* ---- Kiểu 1: thẻ dọc (ảnh trên, chữ dưới) ---- */
.the-doc { display: flex; flex-direction: column; gap: 9px; }
.the-doc .the-bai__ten { font-size: .9375rem; }

/* ---- Kiểu 2: thẻ ngang (ảnh nhỏ bên trái, chữ bên phải) ---- */
/* Đây là kiểu xuất hiện nhiều nhất, tối ưu để đọc lướt */
.the-ngang {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
}
.the-ngang .the-bai__ten { font-size: .875rem; font-weight: 600; }
.the-ngang .thong-tin-bai { margin-top: 5px; }

/* Bản nhỏ hơn dùng trong cột bên */
.the-ngang--nho { grid-template-columns: 78px minmax(0, 1fr); gap: 9px; }
.the-ngang--nho .the-bai__ten { font-size: .8125rem; }

/* ---- Kiểu 3: thẻ lớn (chữ đè lên ảnh) ---- */
.the-lon { position: relative; border-radius: var(--bo-goc); overflow: hidden; }

/* Tỉ lệ đặt thẳng vào .the-lon chứ không đặt theo vị trí đứng của nó, để tệp mẫu
   khỏi phải gắn thêm lớp CSS chỉ nhằm mục đích định tỉ lệ ảnh. */
.the-lon .khung-anh { border-radius: 0; aspect-ratio: 16 / 10; }

/* Lớp phủ tối dần từ dưới lên để chữ trắng luôn đọc được
   dù ảnh nền sáng hay tối — bảo đảm độ tương phản */
.the-lon__phu {
    position: absolute;
    inset: auto 0 0 0;
    padding: 60px 20px 18px;
    background: linear-gradient(to top,
                rgba(0, 0, 0, .88) 0%,
                rgba(0, 0, 0, .55) 45%,
                rgba(0, 0, 0, 0) 100%);
    color: #FFFFFF;
}
.the-lon__phu .nhan-chuyen-muc { margin-bottom: 10px; }
.the-lon__phu .the-bai__ten {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 9px;
}
.the-lon__phu .the-bai__ten a { color: #FFFFFF; }
.the-lon__phu .the-bai__ten a:hover { color: #FFD9DA; }
.the-lon__phu .thong-tin-bai { color: rgba(255, 255, 255, .82); }

/* Danh sách các thẻ ngang xếp chồng, có vạch ngăn */
.ds-doc { display: flex; flex-direction: column; }
.ds-doc > * { padding: 11px 0; border-bottom: 1px solid var(--mau-vien); }
.ds-doc > *:first-child { padding-top: 0; }
.ds-doc > *:last-child { padding-bottom: 0; border-bottom: 0; }

@media (max-width: 600px) {
    .the-lon__phu { padding: 40px 14px 14px; }
    .the-lon__phu .the-bai__ten { font-size: 1.125rem; }
    .the-ngang { grid-template-columns: 88px minmax(0, 1fr); }
}

/* ============================================================
   14. BIỂU TƯỢNG SVG
   ============================================================ */

/*
 * Kích thước mặc định theo cỡ chữ xung quanh, nên biểu tượng tự lớn nhỏ theo
 * chỗ đặt nó mà không cần khai báo riêng cho từng vị trí.
 */
.bieu-tuong {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -.12em;
}

/* ============================================================
   15. BIỂU MẪU TÌM KIẾM
   ============================================================ */
.bieu-mau-tim { display: flex; gap: 8px; }
.bieu-mau-tim .nut { flex: none; }

/* ============================================================
   16. TRẠNG THÁI TRỐNG
   ============================================================ */
.khong-co-bai {
    padding: var(--khoang) 0;
    color: var(--mau-chu-nhat);
}
.khong-co-bai p { margin-bottom: var(--khoang-nho); }

.so-ket-qua {
    margin: -6px 0 var(--khoang-nho);
    font-size: .875rem;
    color: var(--mau-chu-nhat);
}

.mo-ta-luu-tru {
    margin-bottom: var(--khoang);
    padding-bottom: var(--khoang-nho);
    font-size: .9375rem;
    color: var(--mau-chu-nhat);
    border-bottom: 1px solid var(--mau-vien);
}

/* ============================================================
   17. TRANG 404
   ============================================================ */
.trang-404 { text-align: center; padding: var(--khoang-lon) var(--khoang); }

.trang-404__ma {
    margin: 0;
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mau-chinh);
}

.trang-404__ten { margin-top: var(--khoang-nho); }

.trang-404__mo-ta {
    max-width: 520px;
    margin: 0 auto var(--khoang);
    color: var(--mau-chu-nhat);
}

.trang-404__tim { max-width: 460px; margin: 0 auto var(--khoang-lon); }

.trang-404__chuyen-muc {
    max-width: 460px;
    margin: 0 auto;
    text-align: left;
}
.trang-404__chuyen-muc h3 {
    text-align: center;
    font-size: 1rem;
    margin-bottom: var(--khoang-nho);
}

@media (max-width: 600px) {
    .trang-404__ma { font-size: 3.5rem; }
}