/*
 * Hệ thiết kế của taifilepro.com — một tệp, không có bước dựng.
 *
 * Không Tailwind, không SASS, không vite, không node_modules trên máy chủ.
 *
 * PHẦN LỚN TỆP NÀY CHÉP TỪ dethitailieu.net.
 *
 * Bên ấy đã chỉnh xong một hệ nhìn được và chạy thật: thang màu, thang bo góc,
 * bóng đổ, thanh đầu trang dính có tấm menu full-bleed, thẻ trong lưới, chân
 * trang nền sáng. Ngồi nghĩ lại một hệ khác cho bằng được thì chỉ tốn thì giờ
 * để ra một thứ kém hơn, mà sau này hai trang lệch nhau thì sửa gì cũng phải
 * sửa hai kiểu. Bên đó chia làm nhiều tệp rồi để vite ghép; bên này không có
 * bước dựng nên gom thẳng vào một tệp, giữ nguyên thứ tự các mục.
 *
 * Đổi hai chỗ, và chỉ hai chỗ:
 *
 *   1. Dải --brand lấy theo favicon cam đỏ, thay cho navy bên kia.
 *   2. Tấm menu con mở bằng :hover / :focus-within, không bằng JavaScript.
 *      Trang này không đăng nhập, không tìm kiếm, không có gì khác cần tới JS.
 *
 * Mục "Trang tài liệu" là của riêng bên này — bên kia không có trang nào giống
 * thế. Nó dùng tên biến cũ (--muc-900, --chu-nhat…), và một khối bắc cầu ở
 * cuối phần :root trỏ chúng sang tên mới.
 *
 * Chia theo VÙNG GIAO DIỆN chứ không theo loại thuộc tính. Tìm chỗ sửa cái thẻ
 * trong lưới thì đọc mục "Bộ lọc và lưới tài liệu", không phải lần theo ba chỗ
 * khai màu, khai lề và khai bóng đổ.
 */

/* ==========================================================================
   1. Bộ chữ
   ==========================================================================

   Be Vietnam Pro, chép từ resources/fonts/ của dethitailieu.net. Tự chứa,
   không gọi ra Google Fonts: một tên miền thứ hai trên đường tải trang là một
   thứ nữa có thể chậm, và bộ chữ Việt thì không nên đợi ai.

   Chỉ giữ woff2 — mọi trình duyệt còn được hỗ trợ đều đọc được, và bỏ bản woff
   đi thì nhẹ còn một nửa.

   unicode-range là thứ khiến trình duyệt CHỈ tải phần nó cần: trang tiếng Việt
   lấy hai tập con đầu, không lấy phần còn lại.
   ========================================================================== */

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-500-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-700-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-800-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/be-vietnam-pro-800-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* ==========================================================================
   2. Mã màu, thang giá trị
   ==========================================================================

   Chép từ resources/css/tokens.css của dethitailieu.net và giữ nguyên tên:
   --bg, --surface-N, --ink-N, --line-N, --r-N, --shadow-N. Bên ấy thang này đã
   chạy thật và nhìn ổn, nên không có lý do gì ngồi nghĩ lại một thang khác.

   Đổi đúng MỘT thứ: dải thương hiệu.

   Bên kia là navy #2b46de vì logo dethitailieu là lockup navy → tím. Nhận diện
   bên này là cái favicon cam đỏ, nên dải --brand kéo theo nó. Phần xám, đường
   kẻ, bóng đổ, bo góc, khoảng cách thì giữ y nguyên — đó mới là chỗ làm nên
   dáng của trang, và bên ấy đã chỉnh xong rồi.
   ========================================================================== */

:root {
    /* Nền và bề mặt — xám rất nhạt thay cho trắng, để thẻ trắng nổi lên. */
    --bg: #f6f7f9;
    --surface: #fff;
    --surface-2: #fafbfc;
    --surface-3: #f1f3f6;
    --surface-4: #eceff3;
    --surface-5: #e6eaf0;
    --surface-6: #fdfdfe;

    /* Chữ — xám ngả xanh, không dùng đen tuyệt đối */
    --ink: #1c2230;
    --ink-strong: #121722;
    --ink-2: #2f3846;
    --ink-3: #414b5b;
    --ink-4: #515b6c;
    --muted: #616b7d;
    --muted-2: #737d8f;
    --muted-3: #949dad;
    --disabled: #bcc3ce;

    /* Đường kẻ */
    --line: #e6e9ef;
    --line-2: #e9ecf1;
    --line-3: #f0f2f6;
    --line-4: #d9dee7;
    --line-5: #dfe3ea;
    --line-6: #ebeef3;

    /*
     * Dải thương hiệu, lấy mẫu THẲNG TỪ FAVICON.
     *
     * Lọc màu favicon-taifilepro.png ra: đỏ cam #d8300c chiếm phần lớn hình
     * tròn, cam sáng #f07818 là mảng bắt sáng phía trên. Đó là toàn bộ nhận
     * diện mình có, nên dải này kéo theo nó.
     *
     * Hệ quả: cam KHÔNG còn là màu riêng của nút tải nữa như trước. Nút tải
     * vẫn nổi nhất trang, nhưng bằng KÍCH THƯỚC và nền đặc, không bằng một màu
     * mà cả trang không chỗ nào khác dùng.
     */
    --brand: #e04412;
    --brand-dark: #c33a0e;
    --brand-deep: #5e1c05;
    --brand-link: #c73c0d;
    --brand-link-dark: #a53109;
    --brand-soft: #fdeee7;
    --brand-edge: #f5c3ae;
    --brand-pale: #f0b096;
    --brand-pale-2: #e39373;

    /* Mảng bắt sáng của favicon — dùng cho chỗ cần cam mà không cần đậm. */
    --flare: #f07818;

    --cover-bg: #e7eaf0;
    --overlay: rgb(18 23 34 / 55%);

    /* Bo góc */
    --r-sm: 7px;
    --r-md: 11px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-2xl: 24px;
    --r-pill: 999px;

    /* Đổ bóng */
    --shadow-card: 0 10px 24px -18px rgb(20 26 40 / 42%);
    --shadow-card-hover: 0 26px 44px -22px rgb(20 26 40 / 48%);
    --shadow-panel: 0 18px 40px -30px rgb(20 26 40 / 35%);
    --shadow-menu: 0 26px 44px -28px rgb(20 26 40 / 30%);
    --shadow-brand: 0 12px 26px -10px rgb(224 68 18 / 45%);

    /*
     * Bố cục.
     *
     * Hẹp hơn 1340px của dethitailieu.net. Bên ấy thẻ bộ đề có giá tiền, sao
     * đánh giá, nhãn khuyến mãi — nhiều thứ để bày nên lưới rộng có việc để
     * làm. Bên này thẻ chỉ có bìa, tên và hai con số; kéo lưới ra 1340px thì
     * được sáu thẻ một hàng và mỗi thẻ loãng ra, mà mắt thì phải quét ngang xa
     * hơn để đọc cùng ngần ấy chữ.
     */
    --page: 1180px;
    --gutter: 28px;
    --header-h: 76px;

    /*
     * Tên cũ, trỏ sang tên mới.
     *
     * Mục "Trang tài liệu" bên dưới dài bốn trăm dòng và đang chạy tốt; đổi tên
     * biến trong từng dòng ấy là bốn trăm cơ hội gõ nhầm để đổi lấy đúng con số
     * không. Một khối bắc cầu ở đây rẻ hơn hẳn.
     */
    --muc-900: var(--ink-strong);
    --muc-700: var(--ink-2);
    --muc-500: var(--ink-4);
    --muc-300: var(--muted-3);
    --xanh: var(--brand);
    --xanh-dam: var(--brand-dark);
    --xanh-nhat: var(--brand-soft);
    --cam: var(--brand);
    --cam-dam: var(--brand-dark);
    --cam-nhat: var(--brand-soft);
    --nen: var(--bg);
    --the: var(--surface);
    --vien: var(--line);
    --vien-dam: var(--line-4);
    --chu: var(--ink);
    --chu-nhat: var(--muted);
    --bong: var(--shadow-card);
    --bong-noi: var(--shadow-card-hover);
    --tron: var(--r-md);
    --tron-nho: var(--r-sm);
    --rong: var(--page);
}

@media (width <= 720px) {
    :root {
        --gutter: 18px;
        --header-h: 68px;
    }
}

/* ==========================================================================
   3. Nền chung
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

[hidden] {
    display: none !important;
}

a {
    color: var(--brand-link);
    text-decoration: none;
}

a:hover {
    color: var(--brand-link-dark);
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

h1,
h2,
h3,
p {
    margin: 0;
}

::selection {
    background: #fbd9cb;
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--brand-link);
    outline-offset: 2px;
}

/* Chỉ máy đọc màn hình nghe thấy. */
.an {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Bố cục chung ------------------------------------------------------------ */

.vo {
    max-width: var(--page);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.main {
    padding-block: 38px 90px;
}

/* Trang có thanh đường dẫn đã tự tạo khoảng thở phía trên. */
.main--tight {
    padding-block: 24px 90px;
}

/* Tiêu đề khối: tiêu đề + mô tả bên trái, hành động phụ bên phải ----------- */

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.section-title {
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.section-note {
    margin-top: 6px;
    font-size: 14px;
    color: var(--muted);
}

.section-note b {
    color: var(--ink-2);
    font-weight: 700;
}

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-block: 18px 0;
    font-size: 13px;
    color: var(--muted-2);
}

.crumbs a {
    color: var(--muted);
}

.crumbs a:hover {
    color: var(--brand-link);
}

.crumbs__current {
    color: var(--ink-3);
    font-weight: 550;
}

@keyframes tfp-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (width <= 900px) {
    .section-head {
        flex-wrap: wrap;
    }

    .section-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   4. Nút, chip, nhãn
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 42px;
    padding-inline: 20px;
    border: 0;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s, border-color 0.16s, color 0.16s, transform 0.16s, box-shadow 0.16s;
}

.btn-primary {
    background: var(--brand);
    color: #fff;
    letter-spacing: 0.01em;
}

.btn-primary:hover {
    background: var(--brand-dark);
    color: #fff;
}

.btn-ghost {
    height: 38px;
    padding-inline: 18px;
    background: var(--surface);
    border: 1px solid var(--line-4);
    color: var(--ink-2);
    font-size: 13px;
}

.btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding-inline: 14px;
    border: 1px solid var(--line-4);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    transition: all 0.16s;
}

.chip:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.chip[aria-pressed='true'] {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.chip__so {
    font-size: 11.5px;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}

.chip[aria-pressed='true'] .chip__so {
    color: rgb(255 255 255 / 78%);
}

/* Lựa chọn không còn tài liệu nào vẫn HIỆN, chỉ mờ đi và không bấm được. Giấu
   hẳn thì hàng nút nhảy chỗ mỗi lần lọc, và người ta mất dấu thứ vừa bấm. */
.chip--trong {
    opacity: 0.45;
    pointer-events: none;
}

.dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 2px;
    background: var(--subject, var(--brand));
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    min-width: 0;
}

.meta-subject {
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--subject, var(--brand));
}

.meta-sep {
    color: var(--disabled);
}

.meta-dim {
    color: var(--muted-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   5. Đầu trang
   ==========================================================================

   Thanh dính, nền trắng mờ, menu con là tấm full-bleed — bố cục lấy từ
   resources/css/header.css của dethitailieu.net.

   Khác bên ấy đúng một chỗ: KHÔNG một dòng JavaScript nào. Bên kia mở tấm menu
   bằng data-menu và một trình nghe sự kiện; bên này mở bằng :hover cho chuột và
   :focus-within cho bàn phím. Trang này không có đăng nhập, không có ô tìm
   kiếm, không có gì khác cần tới JS — thêm một tệp script chỉ để mở một tấm menu
   là thêm một thứ nữa có thể hỏng.
   ========================================================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgb(255 255 255 / 94%);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
}

.header__bar {
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--header-h);
    flex-wrap: nowrap;
}

/*
 * Logo ghép tại chỗ: dấu hiệu + chữ, không phải một tệp ảnh.
 *
 * Tỉ lệ là cả vấn đề. Dấu 30px cạnh chữ 21px/800 thì chiều cao của dấu nhỉnh
 * hơn chiều cao chữ hoa một chút — đúng cách một lockup thường được dựng. Kéo
 * dấu lên 40px thì chữ thành cái chú thích đứng bên; thu xuống 22px thì dấu
 * thành một hạt bụi. Sửa một trong hai số dưới đây thì phải sửa cả hai.
 */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    color: inherit;
}

.brand:hover {
    color: inherit;
}

.brand__mark {
    display: block;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
}

.brand__word {
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--ink-strong);
    white-space: nowrap;
}

/* "pro" lấy màu của dấu, để hai nửa lockup buộc vào nhau. */
.brand__word em {
    font-style: normal;
    color: var(--brand);
}

.brand__tld {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--muted-3);
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    white-space: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__item {
    position: static;
}

.header__link {
    height: 36px;
    padding-inline: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}

.header__link:hover,
.header__link[aria-current='page'],
.header__item:hover .header__link,
.header__item:focus-within .header__link {
    background: var(--surface-4);
    color: var(--brand-dark);
}

.header__caret {
    width: 9px;
    height: 9px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.6;
}

.header__spacer {
    flex: 1;
}

.header__side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* Hai nút cạnh nhau phải CÙNG chiều cao. .btn-ghost mặc định thấp hơn
   .btn-primary 4px — đứng riêng thì không ai thấy, đứng cạnh nhau thì lệch rõ. */
.header__side .btn {
    height: 38px;
    padding-inline: 16px;
    font-size: 13px;
}

/* Mega menu --------------------------------------------------------------- */

.megamenu {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-menu);
    animation: tfp-fade 0.16s ease-out;
    visibility: hidden;
    opacity: 0;
}

.header__item:hover > .megamenu,
.header__item:focus-within > .megamenu {
    visibility: visible;
    opacity: 1;
}

/*
 * Cầu nối vô hình giữa mục cấp một và tấm menu.
 *
 * Thanh cao 76px mà chữ chỉ cao 36px, nên giữa đáy chữ và mép tấm có một khe.
 * Chuột đi qua khe ấy là :hover tắt và tấm biến mất ngay dưới con trỏ.
 */
.megamenu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    height: 22px;
}

.megamenu__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 34px;
    padding-block: 26px 30px;
}

.megamenu__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}

.megamenu__links {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.megamenu__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    margin-inline: -10px;
    border-radius: 9px;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.14s;
}

.megamenu__link:hover {
    background: var(--surface-4);
    color: var(--ink-2);
}

.megamenu__link .dot {
    margin-right: 2px;
}

.megamenu__link > span:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

.megamenu__link > span:last-child {
    font-size: 12px;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}

.megamenu__link--trong {
    opacity: 0.45;
    pointer-events: none;
}

.megamenu__all {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    align-self: start;
}

.megamenu__all:hover {
    background: var(--surface-4);
    color: var(--brand-dark);
}

.megamenu__all svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-left: auto;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   6. Bộ lọc và lưới tài liệu
   ========================================================================== */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    margin-bottom: 26px;
    padding-block: 14px 22px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.filters__group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filters__clear {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
}

.set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
    gap: 26px 22px;
}

.empty {
    padding: 60px 20px;
    text-align: center;
    border: 1px dashed var(--line-4);
    border-radius: var(--r-lg);
    color: var(--muted);
}

.empty p {
    max-width: 46ch;
    margin: 8px auto 18px;
}

/* Thẻ tài liệu ------------------------------------------------------------ */

.set-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    color: inherit;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.22s, border-color 0.22s;
}

.set-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--brand-edge);
    color: inherit;
}

.set-card__cover {
    position: relative;
}

/* Ảnh bìa là trang A4 chụp lại: neo lên MÉP TRÊN để phần tiêu đề luôn thấy
   được, chứ cắt giữa thì mọi thẻ đều là một khối chữ không đầu không đuôi. */
.set-card__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.414;
    object-fit: cover;
    object-position: top center;
    background: var(--cover-bg);
}

.set-card__count {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 9px;
    border-radius: var(--r-sm);
    background: rgb(255 255 255 / 94%);
    font-size: 11px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: 0.02em;
}

.set-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 13px 14px 14px;
    border-top: 1px solid var(--line-3);
}

.set-card__name {
    margin-top: 6px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.set-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 11px;
    font-size: 12.5px;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}

.set-card__kind {
    font-weight: 650;
    color: var(--ink-3);
}

/* Phân trang: [<] [1] [2] [3] … [>] --------------------------------------- */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding-inline: 12px;
    border: 1px solid var(--line-4);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: all 0.16s;
}

.pager__btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.pager__btn.is-current {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.pager__btn.is-disabled,
.pager__btn.is-disabled:hover {
    border-color: var(--line-3);
    color: var(--disabled);
    cursor: default;
}

.pager__gap {
    padding-inline: 4px;
    color: var(--muted-2);
}

@media (width <= 900px) {
    .set-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
        gap: 20px 14px;
    }
}
/* ==========================================================================
   7. Trang tài liệu
   ========================================================================== */

/*
 * Ba ô, không phải hai.
 *
 * Cột phải (hộp tải) trải suốt hai hàng của cột trái, nên trên máy rộng nhìn
 * vẫn là hai cột như thường. Nhưng nhờ tách tiêu đề khỏi thân, màn hình hẹp xếp
 * lại được thành: tên → nút tải → bản xem trước. Gộp làm hai ô thì hộp tải rơi
 * xuống dưới bản xem trước dài mười mấy trang — chôn đúng thứ người ta vào đây
 * để làm.
 */
.tai-lieu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 30px;
    align-items: start;
    padding: 18px 0 50px;
}

.tai-lieu__dau { grid-column: 1; grid-row: 1; margin-bottom: 22px; }
.tai-lieu > aside { grid-column: 2; grid-row: 1 / span 2; }
.tai-lieu__than { grid-column: 1; grid-row: 2; min-width: 0; }

.tai-lieu__dau h1 { margin-bottom: 12px; }

.tai-lieu__loi {
    color: var(--chu-nhat);
    font-size: 16px;
    max-width: 68ch;
}

.the-nho {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    margin: 0 6px 8px 0;
    border-radius: 999px;
    border: 1px solid var(--vien);
    background: var(--the);
    font-size: 13px;
    font-weight: 600;
    color: var(--muc-700);
}

.the-nho--mon { border-color: transparent; background: var(--mau-mon); color: #fff; }

/* Bản xem trước ---------------------------------------------------------- */

.xem-truoc {
    background: var(--the);
    border: 1px solid var(--vien);
    border-radius: var(--tron);
    box-shadow: var(--bong);
    overflow: hidden;
}

.xem-truoc__dau {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vien);
    font-size: 14px;
    font-weight: 700;
    color: var(--muc-700);
}

.xem-truoc__dau em {
    margin-left: auto;
    font-style: normal;
    font-weight: 500;
    color: var(--chu-nhat);
    font-size: 13px;
}

.xem-truoc__ket {
    margin: 0;
    padding: 15px 18px;
    border-top: 1px solid var(--vien);
    background: var(--xanh-nhat);
    font-size: 14px;
    color: var(--muc-700);
    text-align: center;
}

/* ==========================================================================
   7b. Tờ đề — bày như bản in
   ========================================================================== */

/*
 * Khối này cố ý KHÔNG giống phần còn lại của trang.
 *
 * Nó là bản xem trước của một tờ giấy: chữ có chân, cỡ chữ của sách giáo khoa,
 * dòng thưa, lề rộng. Người đọc đang cân nhắc có tải tệp PDF hay không, nên
 * thứ họ cần thấy là tệp ấy in ra trông thế nào — chứ không phải nội dung đề
 * được bày lại theo kiểu một trang web.
 */
.giay {
    --giay-chu: 15.5px;
    padding: 4px 0 0;
    background: var(--the);
    color: #14181f;
    font-family: "Libertinus Serif", "Cambria", "Times New Roman", Georgia, serif;
    font-size: var(--giay-chu);
    line-height: 1.62;
}

.to-de {
    padding: 22px 26px 6px;
    border-top: 1px solid var(--vien);
}

.to-de:first-child { border-top: 0; }

/* Đầu tờ đề ------------------------------------------------------------- */

.to-de__cot {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 10px;
    text-align: center;
    align-items: start;
}

.to-de__dau p { margin: 0 0 3px; }
.to-de__hieu, .to-de__so { font-weight: 700; font-size: 14.5px; letter-spacing: .01em; }

.to-de__trai hr {
    width: 45%;
    margin: 7px auto;
    border: 0;
    border-top: 1px solid #9aa4b2;
}

.to-de__trang { font-size: 13px; font-style: italic; color: #4b5563; }
.to-de__ky { font-weight: 700; font-size: 17px; }
.to-de__mon { font-weight: 700; font-size: 15.5px; }
.to-de__gio, .to-de__cau { font-style: italic; font-size: 13.5px; }
.to-de__cau { color: #4b5563; }

.to-de__thisinh {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 16px 0 20px;
    flex-wrap: wrap;
}

.to-de__dong {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 220px;
    flex: 1 1 220px;
    font-size: 14.5px;
}

/* Hàng chấm của dòng "Họ và tên" — vẽ bằng viền chứ không gõ một chuỗi dấu
   chấm: chuỗi dấu chấm dài bao nhiêu là do may rủi, còn viền thì luôn kéo hết
   chỗ trống còn lại. */
.to-de__dong i {
    flex: 1;
    border-bottom: 1px dotted #6b7280;
    transform: translateY(-3px);
}

.to-de__ma {
    margin: 0;
    padding: 5px 11px;
    border: 1px solid #14181f;
    border-radius: 2px;
    font-size: 14px;
    white-space: nowrap;
}

/* Phần và câu ----------------------------------------------------------- */

.to-de__phan h3 {
    margin: 22px 0 2px;
    font-size: var(--giay-chu);
    font-weight: 700;
    letter-spacing: .01em;
}

.to-de__phan h3 span { font-weight: 400; }

.to-de__nhac {
    margin: 0 0 14px;
    font-size: 13.5px;
    font-style: italic;
    color: #4b5563;
}

.cau { margin-bottom: 16px; }
.cau__de { margin: 0; text-align: justify; }
.cau__de b { font-weight: 700; }

/* Mấy dòng kẻ trống cho câu tự luận. */
.cau__ke {
    height: 96px;
    margin-top: 8px;
    background-image: repeating-linear-gradient(
        to bottom, transparent, transparent 23px, #cbd5e1 23px, #cbd5e1 24px
    );
}

/* Phương án ------------------------------------------------------------- */

.pa, .md {
    list-style: none;
    margin: 7px 0 0;
    padding: 0;
    display: grid;
    gap: 7px 18px;
}

.pa--bon { grid-template-columns: repeat(4, 1fr); }
.pa--hai { grid-template-columns: repeat(2, 1fr); }
.pa li, .md li { margin: 0; }
.md { gap: 9px; }

/* Ô điền của câu trả lời ngắn, giống phiếu trả lời trắc nghiệm. */
.o-dien { display: flex; gap: 3px; margin-top: 9px; }

.o-dien span {
    width: 26px; height: 28px;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
}

/* Hình và bảng ----------------------------------------------------------- */

/*
 * Hình của đề bài.
 *
 * Chặn theo CẢ HAI chiều. Kho trả về hình đủ dáng: đồ thị thì ngang và bẹt,
 * hình chóp hay tam giác thì hẹp mà cao. Canh mỗi bề rộng thôi thì một hình
 * dọc kéo dài cả màn hình, đẩy phương án xuống tận đâu.
 */
.hinh {
    margin: 12px auto;
    text-align: center;
}

.hinh svg {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
}

.bang { margin: 10px 0; overflow-x: auto; }

.bang table {
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 14px;
}

.bang th, .bang td {
    padding: 5px 9px;
    border: 1px solid #d9e1f0;
    text-align: center;
}

.bang th { font-weight: 600; background: #f4f7fb; }

/* Công thức không dựng được — chỉ hiện ở bản dựng lỗi, người dùng không thấy. */
.ct-hong { color: #c0392b; font-family: ui-monospace, monospace; font-size: 13px; }

/* Lời nhắc phần bị cắt --------------------------------------------------- */

.to-de__con {
    margin: 18px 0 4px;
    padding: 12px 14px;
    border: 1px dashed var(--vien-dam);
    border-radius: var(--tron-nho);
    background: var(--nen);
    font-family: var(--chu-he);
    font-size: 13.5px;
    color: var(--chu-nhat);
    text-align: center;
}

.to-de__con b { color: var(--chu); }

/* Công thức KaTeX hay tràn ngang ở màn hình hẹp — cho nó cuộn trong chính nó
   thay vì đẩy cả trang rộng ra. */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* Cột phải -------------------------------------------------------------- */

.hop {
    position: sticky;
    /* 58px hàng trên + 44px hàng menu + 1px viền, cộng một chút thở. */
    top: 115px;
    background: var(--the);
    border: 1px solid var(--vien);
    border-radius: var(--tron);
    box-shadow: var(--bong);
    padding: 18px;
}

.nut-tai {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--tron-nho);
    background: var(--cam);
    color: #fff;
    font-size: 16.5px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(180, 60, 10, .3), 0 8px 18px rgba(217, 72, 15, .22);
    transition: background .12s, transform .12s;
}

.nut-tai:hover { background: var(--cam-dam); text-decoration: none; transform: translateY(-1px); }
.nut-tai svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }

.hop__duoi-nut {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--chu-nhat);
}

/*
 * Link dự phòng dưới nút tải.
 *
 * Phải NHÌN RA LÀ NÚT. Người bấm vào đây là người vừa bí — link chính bị nhà
 * mạng hoặc trình chặn quảng cáo chặn — nên đường đi tiếp phải đập vào mắt,
 * không phải mấy chữ gạch chân lẫn vào chữ thường.
 *
 * Nhưng cũng không được nổi bằng nút chính: cùng dáng, cùng bo góc, cùng icon,
 * khác ở chỗ chỉ có viền chứ không có nền đặc. Hai cấp rõ ràng — người bình
 * thường vẫn bấm cái to màu cam, người bí mới nhìn xuống.
 */
.du-phong {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--vien);
}

.du-phong__nhan {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    color: var(--chu-nhat);
}

.du-phong__nut {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chia đều chỗ còn lại: một link thì chiếm cả hàng, hai link thì mỗi cái một
   nửa. `min-width: 0` cho phép ô co lại dưới bề rộng chữ thay vì tràn ra. */
.du-phong__nut a {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1.5px solid var(--vien-dam);
    border-radius: var(--tron-nho);
    background: var(--the);
    color: var(--muc-700);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .12s, color .12s, background .12s;
}

.du-phong__nut a:hover {
    border-color: var(--cam);
    background: var(--cam-nhat);
    color: var(--cam-dam);
    text-decoration: none;
}

.du-phong__nut svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

/* Khối "trong tệp có gì" ------------------------------------------------- */

.trong-tep {
    margin-top: 34px;
    background: var(--the);
    border: 1px solid var(--vien);
    border-radius: var(--tron);
    box-shadow: var(--bong);
    padding: 20px 22px 22px;
}

.trong-tep h2 { margin-bottom: 14px; }

.muc-luc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.muc-luc li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 2px;
    border-top: 1px solid var(--vien);
    font-size: 14.5px;
}

.muc-luc li:first-child { border-top: 0; }
.muc-luc__ma { font-weight: 700; color: var(--muc-900); }
.muc-luc__ten { color: var(--chu-nhat); }
.muc-luc__trang { margin-left: auto; color: var(--chu-nhat); font-size: 13.5px; white-space: nowrap; }

/* ==========================================================================
   8. Chân trang
   ==========================================================================

   Chép từ resources/css/footer.css của dethitailieu.net.

   Nền SÁNG, không phải khối tối như hầu hết chân trang. Lý do giống bên ấy:
   dấu hiệu nhận diện là một hình tròn nhiều sắc cam, đặt trên nền tối thì hoặc
   phải bôi trắng, hoặc thành một vệt tối trên nền tối.
   ========================================================================== */

.footer {
    margin-top: 40px;
    padding-block: 52px 40px;
    background: var(--surface-3);
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 40px;
}

.footer__tagline {
    margin-top: 16px;
    max-width: 330px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
}

.footer__title {
    margin-bottom: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer__links a {
    font-size: 13.5px;
    color: var(--ink-3);
}

.footer__links a:hover {
    color: var(--brand-link);
}

.footer__bottom {
    max-width: var(--page);
    margin: 36px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--line-4);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted-2);
}

/* ==========================================================================
   9. Màn hình hẹp
   ========================================================================== */

@media (width <= 1080px) {
    /*
     * Bỏ HẲN tấm menu con, không cố nhồi nó vào màn hình hẹp.
     *
     * Máy cảm ứng không có trạng thái "rê chuột" — chạm vào một mục là đi luôn
     * tới trang của lớp ấy, nơi đã có sẵn cả ba bộ lọc. Giữ tấm con lại thì nó
     * hoặc nháng lên một cái rồi biến mất cùng lúc trang chuyển, hoặc nằm đè
     * lên nội dung cho tới khi người ta chạm ra chỗ khác.
     */
    .megamenu {
        display: none;
    }

    .header__caret {
        display: none;
    }

    /* Hàng menu trượt ngang khi hết chỗ, thay vì xuống dòng và đội thanh lên. */
    .header__nav {
        overflow-x: auto;
        scrollbar-width: none;
        min-width: 0;
    }

    .header__nav::-webkit-scrollbar {
        display: none;
    }

    .header__spacer {
        display: none;
    }
}

@media (width <= 860px) {
    .header__side {
        display: none;
    }
}

@media (width <= 640px) {
    .brand__word {
        font-size: 18px;
    }

    .brand__mark {
        width: 26px;
        height: 26px;
    }

    .brand__tld {
        display: none;
    }

    .header__link {
        padding-inline: 10px;
        font-size: 13px;
    }
}

/* Trang tài liệu trên màn hình hẹp ---------------------------------------- */

@media (max-width: 960px) {
    /* Một cột, và thứ tự lấy thẳng theo thứ tự trong HTML: tên → nút tải →
       bản xem trước. */
    .tai-lieu { grid-template-columns: 1fr; row-gap: 22px; }
    .tai-lieu__dau,
    .tai-lieu > aside,
    .tai-lieu__than { grid-column: 1; grid-row: auto; }
    .tai-lieu__dau { margin-bottom: 0; }
    .hop { position: static; }
}

@media (max-width: 640px) {
    .giay { --giay-chu: 15px; }
    .to-de { padding: 16px 14px 4px; }
    .to-de__cot { grid-template-columns: 1fr; gap: 4px; }
    .to-de__trai { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
    .to-de__trai hr { display: none; }
    .pa--bon { grid-template-columns: repeat(2, 1fr); }
    .pa--hai { grid-template-columns: 1fr; }
}